Styling gpEasy CMS Extra Content Areas

One of the unique features of gpEasy CMS are the Extra Content Areas. Styling them is rather easy. Each extra content areas are wrapped with a DIV with two classes. The first class signifies the extra content area by name and the second is a generic GPAREA. The .GPAREA class allows us to style all extra content areas within another DIV. For example, if I have a <div id="rightsidebar"> I can simply add the .GPAREA to it to style all extra content areas that appear within the rightsidebar id. That would look like this: #rightsidebar .GPAREA {}.

Using the named class for the extra content areas can be tricky because they can always change. For example, the default extra content area for the header is "Header." Therefore, the output is: <div class="gpArea_Extra_Header GPAREA">. As you can see you have a class .gpArea_Extra_NameOfArea that is named for the area. Now imagine using that class to style something and then what happens if you rename that extra content area or delete it for a different one? That's right, you won't have the same styling anymore. Therefore, it's best to use the .GPAREA class along with whatever other class or id wraps the particular extra content areas you wish to style.

This is also an important consideration to remember when developing a theme. You want your users to be able to style the extra content areas easily and using the named class isn't optimal.

That's all there really is for styling the gpEasy extra content areas. Just stick with the .GPAREA and whatever class or id wraps the section you want to style.


gpEasy B2sq Theme by CS @True Acupuncture