Removing Primefaces CSS layout from JSF page

Question

I have a JSF page with from. I also use Primefaces. At the bottom of the page I have two buttons which execute the JSF form:

<div id="settingstwodivthree" style="width:400px; height:60px; position:absolute;  background-color:transparent; top:380px; left:800px">
    <p:commandButton value="Save Settings" id="ajax" actionListener="#{GeneralController.updateDBSettings}" rendered="true" update="growl,settingsupdate"/>
    <p:commandButton value="Default Settings" id="defaultsettings" actionListener="#{GeneralController.defaultSettings}" rendered="true" update="settingsupdate"/>                  
</div>

When I add Primefaces into the JSF page the default layout of the button is changed. It seems that css file from Primefaces is overriding the layout of the buttons.

I added this into the web.xml file:

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

But the problem is still there. Is there any way some how to disable the css overriding?

The styles on the div will be applied but if you have defined styles for the buttons in a separate stylesheet then see this answer stackoverflow.com/questions/8578494/… — Ravi Kadaboina
Which version of primefaces are you using? The primefaces.THEME setting had some problems in some versions. Agree also with Ravi about CSS. Define your CSS Styles directly in p:commandbutton — ppapapetrou
Read through the PF documentation there you will find a section called Skinning for each component and then apply your styles on the <p:commandButton> itself — Ravi Kadaboina

wutzebaer wutzebaer · Accepted Answer · 2013-07-02T09:30:34

hi i had the same problem with the remaining primefaces.css, i solved it by placing an empty file in this folder, to override the primefaces file

WebContent\resources\primefaces\primefaces.css

Removing Primefaces CSS layout from JSF page

1 Answers