I'm trying to get a custom theme working in my Primefaces project. I've created the theme using Themeroller and packed the jar as follows:
primefaces-spl.jar
WEB-INF
resources
primefaces-spl
theme.css
images
I then put this file into my WEB-INF/lib folder and specified the primefaces.THEME attribute to 'spl' in my web.xml.
The project can seemingly find and use the jar, but the page looks like this:
Thus, it looks like the resource images are not read properly. In theme.css, I have replaced all image tags as follows:
.ui-widget-overlay { background: #aaaaaa url("#{resource['primefaces-spl:images/ui-bg_flat_0_aaaaaa_40x100.png']}") 50% 50% repeat-x; opacity: .30;filter:Alpha(Opacity=30); }
I have also tried adding the jar to the classpath as well as the alternative strategy mentioned here: http://www.mkyong.com/jsf2/primefaces/create-a-custom-theme-in-primefaces/ Did I miss something?
An online tool is also available to convert ThemeRoller zip files to Primefaces theme jars:
https://themeroller.osnode.com. ThemeRoller versions: 1.10.3 & 1.9.2 are supported.
Just drag your zip file over and download the converted jar files. Maven instructions are included.
Although this is not EXACTLY answering you question directly you would easily acquire the desired knowledge by inspecting the generated theme jar which would organize your files correctly.
Also your question might not be relevant when there i alternate way of achieving your goal without having to inspect file structures...
Related
I am working on an Electron project and using Electron-packager to package my app.
However, with my current folder structure, all CSS files located in the parent folder of my Electron project/package.json are not being copied to the packaged application.
This is my structure:
- GUI
--- CSS
- Apps
---Demo
------package.json, etc
---Demo2
------package.json, etc
---Demo3
------package.json, etc
I build apps while inside Demox folder. Problem is I can't move GUI folder to inside Demo/Demo2/Demo3 since it will contain just the same files and it would be redundant.
However, electron-packager does not support packaging of files from outside the actual Demox folder.
It was suggested that I move these CSS files to node_modules instead.
But how do I require these CSS files from the node_modules folder to an html file? Is there any other way WITHOUT using webpack? I'm hoping to keep this simple and stay away from setting webpack up unless I have no other choice.
For reference, here is the question I posted on the Electron-packager github:
https://github.com/electron/electron-packager/issues/1089
Thanks!
Was able to come up with a solution now.
Since I have moved node_modules folder to the very root (C:\node_modules, so it can be used by all node projects residing in C: drive), I just used an absolute path and link from there:
<link rel="stylesheet" href="/node_modules/sample-css/button.css">
Works well for my needs.
Thanks everyone.
My CSS and Image imports for spring boot project are not working. I am trying to figure it out from very long time but its simply not working, in some of my previous eclipse projects I remember i had no problems but recently I started working with intelliJ community version and i am not able to make it work.
Environment:
So in the above image I am trying to import css and image in my html login page, but i get following error:
Refused to apply style from
'http://localhost:63342/weather_api/templates/css/login-register-style.css'
because its MIME type ('text/html') is not a supported stylesheet MIME
type, and strict MIME checking is enabled. login.html:21
GET http://localhost:63342/images/face.png 404 (Not Found)
The problem is coming from two files marked by red in above image.
What I tried:
I also tried using Thymleaf tag to add css file but its also not working. However when i put these files directly in templates folder they all work fine. But i want to refactor my code and not mix all files in one folder.
Would be glad if someone can help me out of this. thank you.
EDIT
The static folder in the workspace i have manually created in by default created resource folder. Similarly the templates i manually created after project was generated, however all the files under templates are executed. the only problem exist is with contents under static folder
Remove the forward slashes in "css" and "image" src paths. (e.g - src="images/face.png")
I have an image file in the same directory as my login.vue component (which is where the following code is located). But, when I try this code, the image will not load:
<div background="benjamin-child-17946.jpg" class="login" style="height:100%;">
I'm getting this error:
Failed to load resource: the server responded with a status of 404 (Not Found)
This is strange, because I can see in my terminal that my image is in the same directory as login.vue. I am using webpack to compile. What might be causing this?
Your primary issue is that single file components are compiled and the compiled script is very unlikely to reside in the same directory as the current location as your image. Your second issue is that you are not assigning the background image to your div correctly. You should use CSS.
I would suggest that you make an images directory in the root of your electron application (or assets or static or whatever you want to call it). Then, you can reference files in that directory using the file:// protocol.
Second, I would recommend you define a CSS class and use that. So, in your single file component, define this style section:
<style>
.background {
background: url('file:///images/benjamin-child-17946.jpg') no-repeat center center fixed;
background-size: cover
}
</style>
And on your div just use the class.
<div class="login background">
Finally, you could also use webpack's url-loader to load the file as a dataUrl but I would recommend that as a more advanced exercise and just stick with the simple method for now.
Edit
I created a project from scratch using electron-vue which uses webpack and I did run into an error with the above using the file:// protocol, that I don't run into when not using webpack. With the above template, instead of using
file:///images/benjamin-child-17946.jpg, put the file in the static directory and use /static/benjamin-child-17946.jpg. That allows vue-loader to work properly.
If you are not using electron-vue, then your webpack configuration may be different.
Worth noting that background is not a valid HTML attribute anymore.
Compiled VUE code doesn't match the way the folders are built, assuming you're using the CLI.
You would need to reference the images full URL in its static resource location.
I'm not sure what that would be in this case as I haven't used static resources with the Vue CLI yet.
I have some problems with css auto complete on my html files.
My project is java project on spring/bootstrap. I have less file that is compiled to css later on. On my html files I don't have access to classes from less or bootstrap files. I have "webapp" folder configured correctly in project.
CSS files are in:
a) webapp\css\less\main.less
b) webapp\css\ (bootstrap, main.css main.min.css)
Is it possible to add css (class) completition to html files that are created in project?
It should do it out of the box for css: http://www.jetbrains.com/editors/html_css_editor.jsp?ide=idea
for LESS however you might need to use a plugin : https://plugins.jetbrains.com/plugin/7059?pr=idea
I know LESS works out of the box with WebStorm and PHPStorm, though
If it still doesn't work, you might need to set the right file extension or associate that file with a certain interpreter
I have an using ASP.NET MVC 4.5 that uses some css files.
The css refers to some images.
The css file Is located in this path:
WebSiteRoot\Content\css\services\File.CSS
The image is located in this path:
\WebSiteRoot\Content\img\servicesbubble\image.png
The css has this calling:
background:transparent url('../../img/servicesbubble/image.png') no-repeat 0px 0px;
When I run the app in the localhost it works. But when I upload to the hosting (Appharbor) It doesn't work.
Why? What is the best way to reffer to the root of an app?
In the server the http get is tried to this wrong URL
WebSite.com/img/servicesbubble/desktop.png
Update: I am using the .NET framework 4.5 feature called bundling for merge these CSS with another CSS.
Your problem is actually coming from the fact you're minifying the css to a different directory than the CSS originally existed in.
More specifically: http://tulpepwebsite.apphb.com/Content/css/servicescss?v=sdm08D5sRu2I00dA0phyVTYZ_QU8Nfp27wHtmmE0Gzk1
So ../../ puts you at http://tulpepwebsite.apphb.com/Content
Urls in CSS files are always relative to location of the CSS file itself.
Your paths to the CSS files seems to change. The two CSS files I see related to your website are http://tulpepwebsite.apphb.com/Content/css/servicescss?v=sdm08D5sRu2I00dA0phyVTYZ_QU8Nfp27wHtmmE0Gzk1 and http://tulpepwebsite.apphb.com/Content/GeneralCSS?v=9kvtUcooQua0D4nQT8wZ-4_Gm6OcRd-J5SkjMxwKiyQ1. (The other is from the google fonts service.) You need to figure out why that's happening.
Edit: Ok, I'm going to guess something. You're probably using the new ASP.NET 4.5 bundling feature. But it doesn't make sense to bundle CSS flies in different directories, if you're doing that.
Your CSS location is different than you think:
WebSiteRoot\Content\css\File.CSS
instead of
WebSiteRoot\Content\css\services\File.CSS