Using the “Add classes” option box
Xtreme adds an option box called “Add classes” in most areas like (wrapper, container, header, footer, widgets, widget areas…)
This can help you automate a lot of things, see a few examples below.
Applying a gradient background to certain areas
You only need to define one custom CSS rule applying a gradient to a single class like adding the rule below in the Global Custom CSS Rule box
.mygradient { background-image: -webkit-gradient(linear, left top, left bottom, from(#444444), to(#999999)); background-image: -webkit-linear-gradient(top, #444444, #999999); background-image: -moz-linear-gradient(top, #444444, #999999); background-image: -o-linear-gradient(top, #444444, #999999); background-image: -ms-linear-gradient(top, #444444, #999999); background-image: linear-gradient(to bottom, #444444, #999999); filter:prodig:DXImageTransform.Microsoft.gradient(startColorstr='#444444',endColorstr='#999999'); }
then in any area where you want the gradient, simply type mygradient inside the “Add classes’ box.
Hiding areas on certain pages
You have a Hide on device options for most areas, but let us say that some areas need to be hidden on a specific page like the page with the id 123, you can simply define one hiding rule like
.page-id-123 .hideon-123 {display:none;}
This rule hides any object with the class hideon-123 that are in the page with id # 123
So in any area that needs to be hidden on page 123, simply type hideon-123 in its “Add classes” box.
You could also use other page classes like single for single post pages, or archive or category etc….
Remember that if you want the hiding to apply to more than one page, you can either add more rules for each page, or more practically, you could give all the pages in question a common class.
In each page editing page, place a common class name like hide-areas in the “Per page Body class” box, then instead of the rule above with page 123 use
.hide-areas .hideon-123 {display:none;}
Now all areas with the class hideon-123 will be hidden on the pages with the “Per page body class” hide-areas
These are just a couple of examples, but the key thing here is:
Anytime you find yourself missing a styling option to use on various areas, if it can be accomplished with CSS, chances are you can create one set of rules using a specific class, then just add the class to any area that needs the style.