On Java Development

All things related to Java development, from the perspective of a caveman.

Overriding RichFaces CSS values

without comments


This post shows how to override RichFaces’ CSS values for a given component.

While overriding RichFaces’ CSS values is not normally necessary, there is a case where it is helpful to know how to do this. Shown below is a picklist. Above each list box there is a caption. For the chosen skin (classic), they cannot be easily seen because the normal font color for captions is white. For other skin assignments, the captions show nicely. To better see the captions, select the image and then zoom in. Still, you can barely see them.

The source code for the picklist shown below uses sourceCaption and targetCaption to define the values. The style assignments for these need to be changed so that the font color is black instead of white.

The solution will utilize a little JSF Resources knowledge and a .ECSS file to contain the overriden style assignments.

The first thing to do is to lookup the component to get the name of the style being utilized. This can be done by referring to this link that lists them for each component. Once on the page, use CTRL-F to enter “picklist” to position the page to the picklist. A quick review reveal the names of the styles used for captions.

Armed with this information, the following file is created and placed in its own library under the resources directory. The file is named picklist.ecss.

The file is placed into the resources directory as shown below.

Now we’re set to modify the pageTemplae.xhtml file (contained in baseproject) to include the new assignments in the style sheet extension file. The template code is shown below.

Line 36 shows the entry made to include the style sheet extension file. Now, when the application is restarted, the picklist appears with the caption fonts visible.


Written by admin

February 20th, 2014 at 10:11 am

Leave a Reply

You must be logged in to post a comment.