We are now going to examine the rules that define the dynamic visual cues. These cues are added by PrimeFaces to elements that can be highlighted, activated (when you click on them), and selected.
The following screenshot shows a menu that is highlighted:
The Chapter 2
menu is highlighted above its drop-down menu list. The gray background is nice enough, but it doesn't fit in with the blue theme. Therefore, we are going to change it. The same highlighted effect can be seen if you hover
your mouse over the button.
So, we need to change the rules that define how components look when the mouse hovers over them. On searching for hover
in theme.css
, we find two definitions that we need to look for. The definitions are for a total of 14 rules, 6 of these define how components look and 8 of them define how anchors or links look.
The first definition looks like this:
.ui-state-hover, .ui-widget-content .ui-state-hover, .ui-widget-header .ui-state...