Customizing a css, need some tips

[Lotfus]

Hello,

I would like to make a custom css. What do your recommend:

• - Editing the primefaces css
  - Downlaoding a custom css from the themeroller and customizing it (and then there will be two styles sheet: the primafaces one and the themeroller one).

Thanks for your help.

[Alexandre]

hi,
Download customized css with JQuerry UI.
and customize it

bye.

[Lotfus]

Hi Alexandre, and thank you.

the problem is that it seems that it's unavoidable to edit the primefaces css:

I have a panel, I want to set it's background to an image; the problem is that for instance when setting the background image for an ui-widget, by adding the rule to my custom css style sheet:

Code: Select all

.ui-widget-content {
    background-image: url('images/bg_trame.jpg');
    background-repeat: repeat-x repeat-y;
}

It has no effect, because the same feature is defined in the primefaces css, so I have to comment the following line in my primefaces css to see the right background:

Code: Select all

.ui-widget-content { border: 1px solid #aaaaaa/*{borderColorContent}*/; background: #ffffff url(#{resource[\'primefaces:themes/sam/images/ui-bg_flat_75_ffffff_40x100.png\']}) repeat-x 50% 50%/*{bgColorContent}*//*{bgImgUrlContent}*//*{bgContentXPos}*//*{bgContentYPos}*//*{bgContentRepeat}*/; color: #222222/*{fcContent}*/ }

Am I doing something wrong? Or there is no other solution!?

[Lotfus]

Hello again all,

please I need some help, I am blocked now. I need to understand the logic behind using a custom css from the themeroller, in particular the rules priorities. I didn't found details, neither in the web site, nor in the user guide.

In most cases a rule for a given component is already defined in the primefaces theme, how to overrwide it in a custom css!? Because it seems that editing the primefaces css is not a good idea, I would like to have two separates css. And by writing the rule in the custom css, it doesn't work unless I comment the rule in the primefaces css.

Any feedback would help, thank you for your support.

[MikeK]

If you use a standard method for .css files rather than storing them in a Jar you can create a second style sheet to overide the primefaces one. Just make sure it is imported to the page after the Prime Faces css file.

[cagatay.civici]

There is no need to edit PrimeFaces css stuff, CSS can easily be overwritten with rules or !important.

I suggest creating your own theme with themeroller and save it as a PrimeFaces theme. User's Guide Theming section has info.

[Lotfus]

Thanks a lot, it works.

Actually, instead of modifiying the tab that import the css file like this (this is what sould be done):

Code: Select all

    <context-param>
        <param-name>primefaces.THEME</param-name>
        <param-value>none</param-value>
    </context-param>

I have commented it (this doesn't work):

Code: Select all

<!--     PrimeFaces Theme -->
<!--    <context-param>-->
<!--        <param-name>primefaces.THEME</param-name>-->
<!--        <param-value>none</param-value>-->
<!--    </context-param>-->