Chapter 2. Theming Concepts

In this chapter, we will cover the following topics:

  • Understanding structural and skinning CSS
  • Installing themes
  • Customizing default theme styles
  • Adjusting the font and size throughout the web application
  • Simple ways to create a new theme
  • Stateless and stateful theme switchers
  • Integrating Font Awesome with PrimeFaces

Introduction

In this chapter, readers will be introduced to PrimeFaces themes and the concepts involved. Later on, we will build on these concepts to learn theming of the PrimeFaces components. The theming concept used in PrimeFaces is similar to the jQuery ThemeRoller CSS Framework (http://jqueryui.com/themeroller). All PrimeFaces components are designed to allow a developer to integrate them seamlessly into the look and feel of an entire web application. At the time of writing, there are 38 plus ready-to-use themes, which you can preview and download from the PrimeFaces Theme Gallery (http://primefaces.org/themes). There are two kinds of themes: ELITE themes that are available to ELITE & PRO users exclusively or as a standalone purchase, and Community themes that are free to use under Apache License. Community themes include the ones available in ThemeRoller and custom themes such as Twitter Bootstrap.

Powered by ThemeRoller, PrimeFaces separates structural CSS from skinning CSS. The difference between the two CSS concepts is the topic of the first recipe. Installation and customization of PrimeFaces themes, along with creation of new themes, will be detailed. We will also see how to adjust the font family and font size throughout the PrimeFaces components. Adapted font settings provide a consistent look and feel in a multi-theme web application. Two variants of theme switcher will demonstrate how to switch PrimeFaces themes with and without page refresh. Discussion about integrating the Font Awesome CSS toolkit for scalable vector icons will finish this chapter.

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset
18.188.85.135