22-May-2018 14:08:02.908 1100 [http-nio-8084-exec-143] com.sun.faces.context.ExceptionHandlerImpl.log Error loading css, cannot find "theme.css" resource of "primefaces-serenity" library
javax.faces.FacesException: Error loading css, cannot find "theme.css" resource of "primefaces-serenity" library
i don't know how to do.
already download serenity-theme-1.0.4.jar
already import library(serenity-theme-1.0.4.jar) to project.
Who are understand about this https://www.primefaces.org/serenity/docs.xhtml ?
buy this 890$ for what.
I try install this theme in my project but.
Forum rules
Please note that response time for technical support is within 3-5 business days.
Please note that response time for technical support is within 3-5 business days.
-
- Posts: 5281
- Joined: 29 Jun 2013, 12:38
You need to provide CSS files from Sass files using;
sass -w src/main/webapp/resources/ --sourcemap=none
Also, these links can help to you to integrate the theme and layout into your project;
https://www.dropbox.com/s/gat9a4ym373mi ... t.mp4?dl=0
https://www.dropbox.com/s/2p74g63wldbov ... t.mp4?dl=0
https://www.dropbox.com/s/s9cle2xqbwbu8 ... t.mp4?dl=0
https://www.dropbox.com/s/11hn3e1e24bg0 ... t.mp4?dl=0
Best Regards,
sass -w src/main/webapp/resources/ --sourcemap=none
Also, these links can help to you to integrate the theme and layout into your project;
https://www.dropbox.com/s/gat9a4ym373mi ... t.mp4?dl=0
https://www.dropbox.com/s/2p74g63wldbov ... t.mp4?dl=0
https://www.dropbox.com/s/s9cle2xqbwbu8 ... t.mp4?dl=0
https://www.dropbox.com/s/11hn3e1e24bg0 ... t.mp4?dl=0
Best Regards,
Github Profile: https://github.com/mertsincan
Same error "Error loading css, cannot find "theme.css" resource of "primefaces-primefaces-serenity-amber" library", i am using netbeans and i am trying to create a web application (not maven), so the video did not help.
I have added the folder to my project: src/main/webapp/resources/serenity-layout
I also added the serenity-theme-1.0.4.jar file.
I added to web.xml this:
i provide CSS files from Sass files using and the css files were created.
But the error continues to appear, what do i do now?
I have added the folder to my project: src/main/webapp/resources/serenity-layout
I also added the serenity-theme-1.0.4.jar file.
I added to web.xml this:
Code: Select all
<context-param>
<param-name>primefaces.THEME</param-name>
<param-value>primefaces-serenity-amber</param-value>
</context-param>
<context-param>
Code: Select all
sass -w src/main/webapp/resources/ --sourcemap=none
But the error continues to appear, what do i do now?
-
- Posts: 5281
- Joined: 29 Jun 2013, 12:38
Please try;
Code: Select all
<context-param>
<param-name>primefaces.THEME</param-name>
<param-value>serenity-amber</param-value>
</context-param>
Github Profile: https://github.com/mertsincan
That worked, but now all the icons of primefaces are squares, except the ones added by me from primefaces.FONT_AWESOME.
I added in template <h:outputStylesheet name="css/layout-bluegrey.css" library="serenity-layout" /> and some icons are showing but other do not (ex: paginator icons).
Do someone know why?
I added in template <h:outputStylesheet name="css/layout-bluegrey.css" library="serenity-layout" /> and some icons are showing but other do not (ex: paginator icons).
Do someone know why?
-
- Posts: 5281
- Joined: 29 Jun 2013, 12:38
Serenity, Ultima and Barcelona are PrimeFaces Material Layouts. Therefore, they use material icons. Could you please check _fonts.scss and font files under webapp/resources/serenity-layout/fonts/** ?
Github Profile: https://github.com/mertsincan
OK, is working fine now with primefaces-serenity-bluegrey. But now i am trying to create a custom theme and the same problem, icons do not appear.
->I create a folder "primefaces-serenity-bluegrey_New"
->Change the web.xml to "<context-param> <param-name>primefaces.THEME</param-name> <param-value>serenity-bluegrey_New</param-value> </context-param> "
-> Change the template to "<h:outputStylesheet name="css/layout-bluegrey_New.css" library="primefaces-serenity-bluegrey_New" />"
The colors and everything are correct, but the icons don't show. I check the "theme.css" create automatically and the "@font-face {}" are not there.
What can i do?
->I create a folder "primefaces-serenity-bluegrey_New"
->Change the web.xml to "<context-param> <param-name>primefaces.THEME</param-name> <param-value>serenity-bluegrey_New</param-value> </context-param> "
-> Change the template to "<h:outputStylesheet name="css/layout-bluegrey_New.css" library="primefaces-serenity-bluegrey_New" />"
The colors and everything are correct, but the icons don't show. I check the "theme.css" create automatically and the "@font-face {}" are not there.
What can i do?
-
- Posts: 5281
- Joined: 29 Jun 2013, 12:38
Thanks a lot for the update!
Could you please attach theme.scss file under primefaces-serenity-bluegrey_New?
Please follow these steps;
To create a custom theme;
- Create "primefaces-serenity-bluegrey_New" folder under webapp/resources/*
- Create theme.scss file under "primefaces-serenity-bluegrey_New" like;
theme.scss
- Change web.xml;
- Then, sass -w src/main/webapp/resources/ --sourcemap=none
*******************************************************************************************************
To create custom layout;
- Create "layout-bluegrey_New.scss" file under webapp/resources/serenity-layout/css/* like;
- Change template.xhtml; <h:outputStylesheet name="css/layout-bluegrey_New.css" library="serenity-layout" />
- Then, sass -w src/main/webapp/resources/ --sourcemap=none
Could you please attach theme.scss file under primefaces-serenity-bluegrey_New?
Please follow these steps;
To create a custom theme;
- Create "primefaces-serenity-bluegrey_New" folder under webapp/resources/*
- Create theme.scss file under "primefaces-serenity-bluegrey_New" like;
theme.scss
Code: Select all
$primaryColor:#607D8B;
$primaryDarkColor:#455A64;
$primaryLightColor:#90A4AE;
$primaryLightestColor:#ECEFF1;
$primaryTextColor:#ffffff;
$accentColor:#7CB342;
$accentDarkColor: #9CCC65;
$accentLightColor: #9CCC65;
$accentTextColor: #ffffff;
$horizontalSubmenuitemHoverBgColor:#E0E0E0;
@import '../sass/theme/_theme';
Code: Select all
<context-param>
<param-name>primefaces.THEME</param-name>
<param-value>serenity-bluegrey_New</param-value>
</context-param>
*******************************************************************************************************
To create custom layout;
- Create "layout-bluegrey_New.scss" file under webapp/resources/serenity-layout/css/* like;
Code: Select all
/* Sidebar */
$sidebarLogoBgColor:#455A64;
$sidebarBgColor:#ffffff;
$darkSidebarBgColor:#424242;
/* Primary */
$primaryColor:#607D8B;
$primaryDarkColor:#455A64;
$primaryLightColor:#90A4AE;
$primaryLightestColor:#ECEFF1;
$primaryTextColor:#ffffff;
/* Accent */
$accentColor:#4CAF50;
$accentLightColor:#81C784;
$accentTextColor:#ffffff;
/* Topbar */
$topbarTextColor:#ECEFF1;
$topbarIconColor:#ECEFF1;
/* Submenu */
$submenuBgColor:#EEEEEE;
$darkSubmenuBgColor:#616161;
$horizontalSubmenuBgColor:#EEEEEE;
$horizontalDarkSubmenuBgColor:#616161;
$horizontalSubmenuitemHoverBgColor:#E0E0E0;
$horizontalSubmenuitemDarkHoverBgColor:#545454;
$horizontalSubmenuitemDarkHoverTextColor:#ffffff;
$horizontalMenuActiveTextColor:#ffffff;
$horizontalMenuActiveHoverTextColor:#212121;
$horizontalDarkMenuActiveTextColor:#ffffff;
$horizontalDarkMenuActiveHoverTextColor:#ffffff;
/* Default MenuItem */
$menuitemTextColor:#212121;
$menuitemIconTextColor:#616161;
/* Hover MenuItem */
$menuitemHoverBgColor:#E0E0E0;
$menuitemHoverTextColor:#212121;
$menuitemHoverIconTextColor:#212121;
/* Active MenuItem */
$menuitemActiveBgColor:#607D8B;
$menuitemActiveTextColor:#ffffff;
$menuitemActiveIconTextColor:#ffffff;
$subMenuitemActiveTextColor:#607D8B;
$subMenuitemActiveIconTextColor:#607D8B;
/* Dark Default MenuItem */
$darkMenuitemTextColor:#dee0e3;
$darkMenuitemIconTextColor:#dee0e3;
/* Dark Hover MenuItem */
$darkMenuitemHoverBgColor:#545454;
$darkMenuitemHoverTextColor:#ffffff;
$darkMenuitemHoverIconTextColor:#ffffff;
/* Dark Active MenuItem */
$darkMenuitemActiveBgColor:#90A4AE;
$darkMenuitemActiveTextColor:#ffffff;
$darkMenuitemActiveIconTextColor:#ffffff;
$darksubMenuitemActiveTextColor:#90A4AE;
$darksubMenuitemActiveIconTextColor:#90A4AE;
@import '../../sass/layout/_layout';
- Then, sass -w src/main/webapp/resources/ --sourcemap=none
Github Profile: https://github.com/mertsincan
My template is working fine now.
But, the effect on click don't show. In https://www.primefaces.org/serenity/forms.xhtml when i click in a Button or a SelectOneListBox there is a click effect and i cannot replicate in my app
But, the effect on click don't show. In https://www.primefaces.org/serenity/forms.xhtml when i click in a Button or a SelectOneListBox there is a click effect and i cannot replicate in my app
-
- Posts: 5281
- Joined: 29 Jun 2013, 12:38
Could you please check layout.js, ripple.js and ripple.css in your project?
Github Profile: https://github.com/mertsincan
-
- Information
-
Who is online
Users browsing this forum: No registered users and 14 guests