I try install this theme in my project but.

[rongbtc]

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.

[mert.sincan]

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,

[brunoa]

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:

Code: Select all

    <context-param>
        <param-name>primefaces.THEME</param-name>
        <param-value>primefaces-serenity-amber</param-value>
    </context-param>
<context-param>

i provide CSS files from Sass files using

Code: Select all

sass -w src/main/webapp/resources/ --sourcemap=none 

and the css files were created.

But the error continues to appear, what do i do now?

[mert.sincan]

Please try;

Code: Select all

<context-param>
        <param-name>primefaces.THEME</param-name>
        <param-value>serenity-amber</param-value>
    </context-param>

[brunoa]

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?

[mert.sincan]

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/** ?

[brunoa]

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?

[mert.sincan]

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

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';

- Change web.xml;

Code: Select all

 <context-param> 
    <param-name>primefaces.THEME</param-name> 
    <param-value>serenity-bluegrey_New</param-value> 
</context-param>

- 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;

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';

- Change template.xhtml; <h:outputStylesheet name="css/layout-bluegrey_New.css" library="serenity-layout" />
- Then, sass -w src/main/webapp/resources/ --sourcemap=none

[brunoa]

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

[mert.sincan]

Could you please check layout.js, ripple.js and ripple.css in your project?