Styling Page Panels

There are seven different styles of page panel available to use, three by default and a further four which can be enabled in Easysite administration. They are all basically the same, although the first three have slightly different markup to panels four to seven. The different styles allow for panels with various different appearances throughout the site.

Panels need to contain content in order to display on the page - they are essentially containers or boxes for other content. In this guide we will simply add a content editor with some sample text to use as an example.

Panels can have headings, although this is not necessary if not required. If a heading is added in the element configuration, the code will automatically be generated on the page; if the heading is left blank in the config then it will be omitted.

Here is the full markup for page panel style one with a heading ('Panel Heading'), along with the markup for a content editor and a paragraph of text:

<div class="element-panel-alpha-outer">
    <div class="clear element-panel-alpha-inner">        
        
        <div class="element-panel-alpha-header-outer">
            <div class="element-panel-alpha-header-inner">
                <h2 class="element-panel-alpha-header"><span class="oPanelTitle">Panel Heading</span></h2>
            </div>
        </div>
        
        <div class="element-panel-alpha-body-outer">
            <div class="element-panel-alpha-body-inner clearfix">
                <div class="element-panel-alpha-body-content-outer">
                    <div class="element-panel-alpha-body-content-inner clearfix" >
                       

<div class="ContentEditor"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec lacus  felis, sollicitudin facilisis mattis vitae, rutrum quis elit. Ut ligula  lectus, tempus et ligula et, luctus sodales est. Nullam auctor facilisis  placerat. Quisque commodo tellus id nunc tincidunt mattis. Donec erat  lacus, interdum vel lorem quis, euismod mollis tellus.</p></div> 

                    </div>
                </div>
            </div>             
        </div>
    </div> 
</div> 

And this is how it will look on the page, with the default styling applied:

We can remove the border, give the panel a different background colour and padding and change the text with the following css:

Notice that we have targeted a content editor inside the panel and applied css to that. This styling will only apply to content editors within a panel style one, it won't affect other content editors elsewhere on the site. This can also be done for any other element contained in a panel. Here is how the panel looks with the new styling:

As mentioned earlier, panel styles four to seven have slightly different markup to styles one to three. Panel styles one to three have a series of nested class names, each contatining the panel name (ie, element-panel-alpha-outer and element-panel-alpha-inner). Panel styles four to seven have one outermost class consisting of the panel name (ie, panel-zeta), and then a series of shared internal class names (ie, panel-content-outer, panel-content-inner). This is a slightly more efficient way of handling the css.