CODEWITHSUNDEEP
jsfprimefaces
Programmer
Programmer

Reputation: 455

How to Override Primefaces default CSS?

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>

Upvotes: 0

Views: 9853

Answers (1)

BalusC
BalusC

Reputation: 1109790

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?

Upvotes: 4

Related Questions