-
Book Overview & Buying
-
Table Of Contents
Primefaces Theme development
By :
In this section, we will examine the rules that define how shadow effects should look.
Shadow effects are pseudo-3D effects used by jQuery UI and PrimeFaces to great effect when overlays are used. An overlay is a component that is laid out above the rest of the page. They also cover up content in the background. To exaggerate the three-dimensional effect, a shadow effect is used.
An example of an overlay with a shadow effect can be seen in the following screenshot:

The dialog box in the middle is displayed as an overlay. The background is actually covered by a so-called curtain and it has a shadow that makes it stand out above the background even more.
The last two rules in our theme, .ui-widget-overlay and .ui-widget-shadow, define the curtain that covers the background content and the shadow attached to the dialog box.
The overlay rule looks like this:
.ui-widget-overlay {
background: #aaaaaa url("#{resource['primefaces-moodyblue2:images/ui-bg_flat_0_aaaaaa_40x100...
Change the font size
Change margin width
Change background colour