I'm developing a portlet project with primefaces and I want to change the default theme.
I made a custom theme with jquery themeRoller and I made a jar file containing the theme as explained in the official documentation.
The problem is the css resource is not found :
Unable to find or serve resource, myTheme.css, from library, primefaces-myTheme.
NB: in web.xml I put:
<context-param>
<param-name>primefaces.THEME</param-name>
<param-value>myTheme</param-value>
</context-param>
Help please
Have you put your jar file in the 'lib' folder? Have you followed the theme directory structure properly? Check out this link.
http://chawi3.com/2012/05/18/add-custom-theme-primefaces/
Related
I am in serious need of your you.
My application is working on an old environment, then I moved the same source code to a new environment. It seems (guessing) to me that the stylesheet and images couldn't be loaded on the new environment even though the source code is the same.
Any suggestion and help are highly appreciated.
Some notes,
i. the old working environment is NodeJs 6.11, Angular2 and
Angular-cli 1.0.0
ii. the new not-working environment is NodeJs 8.4, Angular4 and
Angular-cli 1.4.3
iii. I put the bootstrap on local
"app/css/bootstrap/dist/css/bootstrap.min.css"
Expected first page with style and logo. This is still working on the old env:
I got the plain mark-up below on the new environment. All the styles and images are gone. The firefox console on the right hand side showed that those are not loaded. Will it related to the new version of Webpack?
My code - app.component.html
My new not-working package.json
My index.html
Please kindly help. I am a beginner on HTML and AngularJS.
Please kindly let me know if I need to provide more information or I need to upgrade some modules.
Best regards,
Autorun
Move your css styles, images and javascript files inside the assets folder in the latest version of angular-cli.
use your images like below from assets folder :
<img alt="image" class="img-circle" src="assets/iamges/logo.png">
And add your stylesheet and javascript file inside the .angular-cli.json
"styles": [
<!-- "assets/css/style.css" from assets folder -->
<!-- "../node_modules/bootstrap/dist/css/bootstrap.css" from node modules -->
"styles.css"
],
"scripts": [
<!-- "../node_modules/jquery/dist/jquery.js" from node modules js files -->,
<!-- "../src/assets/js/javascript.js" from inside assets files-->
],
After changes restart your porject.
This is to continue on Chandru's answer. It works. Please see the screenshot of my change. Since I can't post screenshot in comment, I hope it is ok to post here.
When using Apache Tomcat, It will not serve me my external CSS stylesheet called CSS.css. Here is a picture of its location:
When I try to access it from home.jsp using this:
<link rel="stylesheet" href="${pageContext.request.contextPath}/CSS.css" type="text/css" >
nothing happens.
Also if I go to my browser and type in localhost:8080/myappname/CSS.css, It still doesn't find it.
I have researched this for a while and I seem to have done everything right. If anyone has an idea on why this isn't working for me that'd be great!
Try by renaming the file CSS.css to CSS1.css and re-deploy the application.
If it worked then rename CSS1.css back to CSS.css
I fixed it. All I had to do was add this to web.xml:
<servlet-mapping>
<servlet-name>default</servlet-name>
<url-pattern>/css/*</url-pattern>
</servlet-mapping>
And I put all my CSS files in a folder in web app called css
Note that all CSS (and all javascript) files must be outside the WEB-INF folder. They have to be in a directly that can be accessed publicly .
I'm new to primefaces.I want to set up a theme that i dowloaded from the primefaces site. I added this code to web.xml
<context-param>
<param-name>primefaces.THEME</param-name>
<param-value>casablanca</param-value>
</context-param>
and i put the casablanca.jar in the /web-inf/ directory but still doesn't work
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...
I want to use custom css/js. I have moved these to the server. But the drupal page starts with a section. how do I add the custom css/js to my drupal site page. I have admin and just need to know what to do to get this included on the page. Please send exact steps as I am totally new to drupal. Thanks
"Custom CSS and JavaScript files" module allows to specify two folders, one for CSS and one for JS where the stylesheets and javascripts files are located respectively.
The module creates two sub-folders under your files folder:
files/customcssjs/css
files/customcssjs/js
Indeed, it's depend on your task, what css and js files should do, and adding these in custom module (drupal_add_js, drupal_add_css) or custom theme (info file, preprocess in template.php or directly in page-XXX.tpl.php and so on).