Creating a Gallery Box Button

HTML, CSS

What is a Gallery Box Button?

The gallery box button is a component style that provides styles to links and makes it appear like navigation buttons. The gallery box style is most effective when using the three columns component. If using the default one column basic page templates, buttons will appear longer in width.

How to build a Gallery Box Button

Add a Text Component to the page. In the CSS class field enter galleryBox.

Click the Source Edit button and add the following HTML:

<div>
<a class="box" href="#">
<h2>Small button text</h2>
<h1>Large button text</h1>
</a>
</div>

Exit Source Edit mode
Highlight the "small button text" and "large button text" and click on the hyperlink button. Link the text to an external or internal website.
Change the "small button text" and "large button text" to a more appropriate button name.
Select a colour for the button by entering the following CSS class in the CSS class field:
- l1
- l2
- l3
- l4
- l5

Note that the CSS class is the lowercase letter L (level 1) and not the number 1.

The gallery box should now look and behave like the examples below. These are also the assortment of colours to choose from.

Building a Page

Creating a Form

Social Tools

Organize and Display Pages & Links

Styling a Page

For Site Administrators

Sample 1

galleryBox l1

Sample 2

galleryBox l2

Sample 3

galleryBox l3

Optional

Authors can add a description directly below the button. To do this, go into the Source Edit mode and insert
<p class="galleryText">Description</p> above </div>. Replace "Description" with the description text. The resulting HTML will look like:

<div> 
<a class="box" href="#"> 
<h2>Small button text</h2> 
<h1>Large button text</h1> 
</a> 
<p class="galleryText">Description</p> 
</div>

The text under the gallery box button will look similar to this:

Sample 4

galleryBox l4

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer bibendum tellus a nulla facilisis tempor.

Sample 5

galleryBox l5