Styling Page Listers

Styling pagelisters within Easysite is a fairly straightforward process. The markup for page listers contains a header area and a body area, each consisting of nested divs, enabling you to style the list to look exactly how you want it.

As this guide is focused on the actual styling of this element, it does not deal with configuration, and it is assumed that you have already created and set up your pagelister and added it to the page. For the sake of example we'll be using pagelister style alpha, configured to show images but only two items.

The full markup for this pagelister looks like so -

<div class="oBoxContainer oHeadlineBoxStyleAlpha">
    <div class="oBoxOuter oPageListerContainerOuter">
        <div class="oBoxInner oPageListerContainerInner">
            <div class="oBoxHeaderOuter oPageListerHeaderOuter">
                <div class="oBoxHeaderInner oPageListerHeaderInner">
                    <h2 class="oBoxTitle oPageListerTitle">Page Lister</h2>
                </div>
            </div>
            <div class="oBoxBodyOuter oPageListerBodyOuter oPageListerShowImages">
                <div class="oBoxBodyInner oPageListerBodyInner">
                    <ul class="oBoxList">
                        <li class="oBoxItem">
                            <span class="oBoxItemContainer">
                                <span class="oBoxItemImage">
                                    <a class="oBoxLink" title="News Item 1" href="/news/news-item-1/">
                                        <img style="height:33px;width:66px;" alt="promo img" src="img.jpg">
                                    </a>
                                </span>
                                <span class="oBoxItemOuter">
                                    <span class="oBoxItemInner">
                                        <span class="oBoxItemTitle">
                                            <a class="oBoxLink" title="News Item 1" href="/news/news-item-1/">News Item 1</a>
                                        </span>
                                        <span class="oBoxItemDate">07 August 2012</span>
                                    </span>
                                </span>
                            </span>
                        </li>
                        <li class="oBoxItem">
                            <span class="oBoxItemContainer">
                                <span class="oBoxItemImage">
                                    <a class="oBoxLink" title="News Item 2" href="/news/news-item-2/">
                                        <img style="height:33px;width:66px;" alt="News Item 2" src="img.jpg">
                                    </a>
                                </span>
                                <span class="oBoxItemOuter">
                                    <span class="oBoxItemInner">
                                        <span class="oBoxItemTitle">
                                            <a class="oBoxLink" title="News Item 2" href="/news/news-item-2/">News Item 2</a>
                                        </span>
                                        <span class="oBoxItemDate">02 February 2012</span>
                                    </span>
                                </span>
                            </span>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>

And on the page this appears like so -

So at the moment it is pretty basic and not very readable.

Let's start styling our pagelister by adding a border around the containing div, then declaring some CSS for the header area.

.oHeadlineBoxStyleAlpha .oPageListerContainerOuter { border: 1px solid #666; }
.oHeadlineBoxStyleAlpha .oPageListerHeaderOuter {  }
.oHeadlineBoxStyleAlpha .oPageListerHeaderInner { padding: 10px; background: #666; }
.oHeadlineBoxStyleAlpha .oPageListerHeaderInner h2.oBoxTitle { margin: 0; color: #fff; }

Already it looks like our pagelister is taking on a bit more shape -

But let's tidy it up by removing the bullets and adding some padding. This may require overwriting the basic list styling specified elsewhere in the style.

Just these few extra lines gives us something that a visitor to our website could find both usable and readable.

Obviously this is a very basic style for a page lister - it is possible to create much more complex styles, making the pagelister look exactly how you want it.