How to Override Primefaces default CSS?

Question

I am trying to overriding the Primefaces Theme my css look like this in file1.xhtml

.ui-menubar {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 11px!important;
    background: #D4C5F7!important;

}

In File2.xhtml i have used this css

.ui-menubar {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 14px;
    background: #557FFF!important;
}

But when i checked in browser its showing file1 css in both places,what i am doing wrong here? File1.xhtml and File2.xhtml both are in included in File3.xhtml file

See how the code look like

<p:layoutUnit position="north" size="100" id="north"
                resizable="false" closable="false" style="border:none">
                <ui:insert name="north">

                    <ui:include src="/template/top_header.xhtml" />

                    <ui:include src="/template/header_menu.xhtml" />
                </ui:insert>
        </p:layoutUnit>

Can you provide a basic example of your xhtml files which are not working? — Aritz, Aug 18 '13 at 12:42

score 4 · Accepted Answer · edited May 23 '17 at 11:43

4

CSS is applied on the HTML document as whole. CSS is not applied on a per-include-file basis or so as you seem to think. CSS does not run in webserver. CSS runs in webbrowser, after the webbrowser has parsed the HTML output retrieved from JSF and is presenting it visually to the enduser.

If you want to give a specific component a different style from default, then you should give it a class name.

<x:someComponent styleClass="someClass">

Then you can finetune the CSS selector on that:

.ui-menubar.someClass {
     ...
}

(name it more sensibly though, e.g. leftMenu, topMenu, etc)

Unrelated to the concrete problem, the !important is here being used as a workaround, not as a solution. Get rid of it and carefully read the following answer, including all of its links, in order to learn how to properly override PrimeFaces default CSS: How do I override default PrimeFaces CSS with custom styles?

edited May 23 '17 at 11:43

Community

1
1

answered Aug 19 '13 at 02:07

BalusC

1,082,665
372
3,610
3,555

Avoid `!important` at all costs. – Mindwin Remember Monica Aug 19 '13 at 10:48
@Mindwin: See also the link in bottom of answer for a guidance. – BalusC Aug 19 '13 at 11:05
@BalusC i was trying according to your suggestion '.ui-button-text .headerButton{...}' and in component added 'styleClass="headerButton"' but it not worked i have write all button css like i am doing for '.ui-button-text' then it would work? – Programmer Aug 20 '13 at 08:26
1

Remove the blank space between `.ui-button-text` and `.headerButton`. Look once again at my answer and I strongly recommend to start learning CSS individually, independent from JSF. – BalusC Aug 20 '13 at 09:30

How to Override Primefaces default CSS?

1 Answers1

Linked