Customising Content Boxes

Common content boxes are used throughout the Hawaii theme. They are most visible in the Sidebars of Hawaii pages but they are also used in defining the main content of the page.

There are four areas available in a Common Content Box, which may not all be present for a particular content box

• Title / Header
• Header Form
• Content
• Footer

What each region refers to in a Common Content Box should be obvious from the above image of a common content box.

In HTML, a common content box is defined as follows

<div class="CommonContentBox">
<h4 class="CommonContentBoxHeader">
TITLE
</h4>
<div class="CommonContentBoxHeaderForm">
Header
</div>
<div class="CommonContentBoxContent">
Content
</div>
<div class="CommonContentBoxFooter">
Footer
</div>
</div>

N.B. the CommonContentBoxHeader doesn’t have to use an <h4 /> element, it can use h1, h2, ... h6, or a div (and possibly others).

The Look of a Common Content Box

There are three additional styles of Content Box you can use which you can get by including a secondary CSS Class with your Common Content Box.

N.B. the look on your site may vary from those shown below as the colours of these content boxes can be configured in the Hawaii Theme Configuration.

Announcement

<div class="CommonContentBox Highlighted"> 

Highlighted

<div class="CommonContentBox Highlighted2">

Activity

<div class="CommonContentBox TitleHighlighted"> 

Lists

To use a list within a Common Content box, you should add the following HTML to the Content of your Common Content Box

<ul class="CommonContentBoxList"> 
<li>First Item</li>
<li>Second Item</li>
...
<li>Nth Item</li>
</ul>

That will give you a list in keeping with common content box lists used elsewhere in the Hawaii theme.