O'Reilly logo

PrimeFaces Theme Development by Sudheer Jonna, Andy Bailey

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Changing the foreground and background colors

Although we have set the foreground and background color for our theme, we might want to make some changes for specific regions of a page for visual clarity.

To get started, search for color in theme.css. In order to find just color and not background-color as well, start your filter with a space character.

I found 15 instances of color. So I have to check to see which rules are of immediate interest to me. I am interested in the rules that define the look and feel of components that are not involved in the dynamic state feedback, such as any rule that defines selected, active, and hover.

This leaves us with the following four rules.

.ui-widget-content { border: 1px solid #aaaaff; background: #ffffff url("#{resource['primefaces-moodyblue2:images/ui-bg_flat_75_ffffff_40x100.png']}") ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required