Book Image

Primefaces Theme development

Book Image

Primefaces Theme development

Overview of this book

Developing stunning themes for web applications has never been easier! PrimeFaces delivers a powerful set of features that enables JSF developers to create and customize awesome themes on the web. It is very easy to use because it comes as a single JAR file and requires no mandatory XML configuration. With more than 30 out-of-the-box themes, jQuery integration, a mobile UI toolkit, Ajax Push technology, and much more, PrimeFaces takes JSF application development to a whole new level! This book is a hands-on example-rich guide to creating and customizing PrimeFaces themes using available tools. Beginning with creating a JSF project and integrating the PrimeFaces library, this book will introduce you to the features of theme components, how these are structured, and how PrimeFaces uses JQuery UI to apply a theme to your application. You will learn to examine and change the CSS rules and get creative by setting standard icons and adding new icons to them. You will use a combination of JavaScript and CSS to enhance your application with help of scheduler component and go on to adapt and package your custom theme so that it is compatible with the Resource Manager. Finally, you will explore PrimeFaces mobile apps, ensuring themes are compatible with your mobile applications best practices for theme design.
Table of Contents (18 chapters)
PrimeFaces Theme Development
Credits
About the Authors
About the Reviewers
www.PacktPub.com
Preface
Index

Changing the menu background


In the last section of this chapter, we are going to change the menu bar, menu, and menu list backgrounds to the same background as that of the other components.

As mentioned earlier in this chapter, the menu bar, menu, and menu list components are rather bland. This is because we used ThemeRoller to create the basis for our theme, and this doesn't have anything to do with a component-specific look and feel. At most, the content of the menu bar, menu, and menu lists will be defined as widget content. If we only want to change the way the menu bar, menu, and menu list content looks, we have to be more specific when changing or creating rules. If you examine the HTML for the menu bar, you will see the rules that are defined for its look and feel:

class="ui-menu ui-menubar ui-widget ui-widget-content ui-corner-all ui-helper-clearfix"

Apart from the ui-helper-clearfix rule, which simply sets browsers' default values to common values, we have the usual ui-widget ui-widget...