Skip to content

Styling

You can style web pages in many different ways: color, margin, padding, font, widths, heights, just to name a few. Web pages created with the JSF generators lets you provide a default styling that is defined in the common web fragment component. That styling is applied to all web pages. You can completely customize/overwrite this styling by css files that you add to a web application component. The following table shows the files that are created by the JSF generators and that are related to css styling.

Generator File, Class Description
Common Web Fragment stylesheet-common.xhtml
commons-style.css
The XHTML file includes a h:outputStylesheet tag to output the commons-style.css. It is possible to configure a different XHTML file name in the web.xml of a web application component by setting a context parameter with the key template.stylesheet.common.
Common Web Fragment stylesheet-application.xhtml
application-style.css
The XHTML file includes a h:outputStylesheet tag to output the application-style.css. It is possible to configure a different XHTML file name in the web.xml of a web application component by setting a context parameter with the key template.stylesheet.application.
Common Web Fragment template.xhtml
template-responsive.xhtml
In these files the rubber hits the road. Here, most of the sources for styling, like CSS files and calls to managed beans, are added to a web page.
Common Web Fragment LayoutCustomizationBean.java This bean provides a means to dynamically add styling to all web pages by reading the styling information from external resources.
Web Fragment [layout-name]_generated.xhtml
[layout-Name]Bean.java
[layout‑Name]BeanExtendedCustomization.java
With these beans and XHTML files, individual styles can be added to a specific page and inline styles can be set for individual XHTML tags.
Web Application stylesheet-application.xhtml
application-style.css
Styles can be added here, that are to be used for one single web application only.
Web Application AppLayoutCustomizationBean.java This bean provides a means to dynamically add styling to all web pages by reading the styling information from external resources.

How to apply your own Styles

The following table shows you how you can style your web pages. The order of the entries has a significance: Any styling further down in the table overwrites styles being defined further above.

Component File, Class, Method Description
Common Web Fragment commons-style.css The styles that are defined in this file are simply going to be applied to all web pages of all web applications.
Web Application application-style.css The styles that are defined in this file are going to be applied to all web pages of your single web application and overwrite styles in commons-style.css. This is the central place where you define the individual looks of your own web application.
Common Web Fragment LayoutCustomizationBean.java
String getStyles()
The styling information that is going to be returned by this method is applied to all web pages by adding them to the page’s style tag in the page header. The styles overwrite styles in commons-style.css and application-style.css. The purpose of this mechanism is to be able to dynamically get additional style information from an external resource like for instance a database or a web service.
Web Application AppLayoutCustomizationBean.java
String getStyles(Integer id)
This is the same mechanism as the previous one with the LayoutCustomizationBean.java, with the only difference that you can use an application specific implementation to retrieve the styling information from an external source.
Web Fragment [layout-Name]Bean.java
String getPageStyles()
From here one, the styles being defined are inline styles that are specific to the given page only.
You can let this method dynamically return styling information that is going to be applied to this page only, by adding the styling information to the style tag in the page’s header. Note that this method will not be called again when AJAX calls are being made for the page.
Web Fragment [layout-name]_generated.xhtml or
[layout-Name]BeanExtendedCustomization.java
inline styles are set here, e.g. style and styleClass attributes
Web Application App[layout‑Name]BeanExtendedCustomization.java inline styles can be overwritten here