Win a copy of Murach's Python Programming this week in the Jython/Python forum!
  • Post Reply Bookmark Topic Watch Topic
  • New Topic

Styling Primefaces Elements with a css file.  RSS feed

 
Oceas Anderson
Greenhorn
Posts: 17
Android Chrome Linux
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Currently I am having difficulties styling a particular prime faces element in a JSF application for work. I'm tasked with giving the ui a styling and color scheme acceptable to our project design. However I am finding myself unable to "hook" a particular pf element with an ID so that I can proceed with styling a imported .css file. Any suggestions on how this can be done?

I'm trying to style the commandLink button to display in Orange 20px font with Italic but when I inspect the element in chrome after being rendered It doesn't even show its style linked to the assigned ID. The class style for mainMenuItem is being applied to the commandlink but is immediately over written by ui-widget. I'm trying to style that one single component(override/replace ui-widget with the properties in the #loggedInUserID)

Current .XHTML code and the css file has been linked with


Current CSS code
 
K. Tsang
Bartender
Posts: 3628
16
Firefox Browser Java Mac OS X
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
The "styleClass" attribute in Primefaces tags corresponds to the "class" in regular css.

<p:commandLink styleClass="abc".... >
is equivalent to some anchor "a" tag
<a class="abc" ...>

So your syntax should point to the "class", not the file name.

Also if you want to override the Primeface CSS you can do the following:

Say I want to override the width of a datatable <p:dataTable>



Note the "!important" part at the end. This enables you to override the default (whatever that is).

Hope this helps
 
Tim Holloway
Bartender
Posts: 18531
61
Android Eclipse IDE Linux
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Incidentally, putting JavaScript or CSS inline in a View Template can be a real pain, so I normally only do it for testing purposes. To be absolutely safe, I wrap such constructs in an XML CDATA within a JSF f:verbatim tag.

Definitely use "!important" to override CSS, but first check to see if the styleClass you're using is correct. JSF frameworks typically provide a standardized set of abstract CSS styles for their controls, and when you "skin" an app, those are the actual classes you want to override, not the low-level stuff.
 
Oceas Anderson
Greenhorn
Posts: 17
Android Chrome Linux
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Tim Holloway wrote:Incidentally, putting JavaScript or CSS inline in a View Template can be a real pain, so I normally only do it for testing purposes. To be absolutely safe, I wrap such constructs in an XML CDATA within a JSF f:verbatim tag.

Definitely use "!important" to override CSS, but first check to see if the styleClass you're using is correct. JSF frameworks typically provide a standardized set of abstract CSS styles for their controls, and when you "skin" an app, those are the actual classes you want to override, not the low-level stuff.


I have tried the correction of the css to just be its name and not file name in two different versions and still I don't see any change in the look("beyond in-line ofc"). The following in an exert of what I made for revisions.

First .xhtml revision


Second .xhtml revision


Following .css file stored in a folder css/masterPW.css



@Tim Halloway: To my understanding your saying that there may be some elements such as pf:commandlink that even though have in-line .css file added there might have a default .css class that super cedes it? If that is the case where could you possible find this. The only confusing part I can e with this though is that another element works as desired (show below) on the same .xhtml file as my commandlink above but I suppose it acts differently since one it default jsf and not pf.


 
Tim Holloway
Bartender
Posts: 18531
61
Android Eclipse IDE Linux
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Take a look at this:

http://primefaces.org/themes.html

Also, here's a set of the class definitions for the p:dataTable:

https://code.google.com/p/primefaces/source/browse/primefaces/trunk/src/main/resources/META-INF/resources/primefaces/datatable/datatable.css?r=6125

Finally, any time you want to use an ID-based CSS definition in JSF, remember this very important thing: CSS IDs apply to HTML elements. The generated HTML element IDs for JSF are not the same as the ids on the JSF elements.

In other words, the actual Id for table "table1" in form "form1" would be "form1:table1". And since ":" is a magic character, your actual css would look more like this:



Do inspect the generated HTML to be sure of the exact ID. Also note that the JSF id may or may not get passed on to the exact HTML element you want styled. Or it may have further ID name modifications.
 
With a little knowledge, a cast iron skillet is non-stick and lasts a lifetime.
  • Post Reply Bookmark Topic Watch Topic
  • New Topic
Boost this thread!