You can also specify a class of .page-header-minor, which will return a page heading with a reduced margin-top.

CSS

These pre-designed special CSS classes can be added to nearly any element to help aid in customizing.

Remove border

Adding this unique class zb to your element will specify a zero border, zb is an acronym of zero border.

.zb

Specifies zero border on any element

<h1 class="zb">This is a h1 Header, without a border, if it had one!</h1>
<h2 class="zb">This is a h2 Header, without a border, if it had one!</h1>

Removing top and bottom margins

Adding these unique classes .zmt and .zmb to your elements will specify a zero margin, .zmt and zmb are acronyms of zero margin top and zero margin bottom.

.zmt

Specifies zero margin on top of any element

.zmb

Specifies zero margin on bottom of any element

<h1 class="zmt zmb">This is a h1 Header, without top & bottom margin!</h1>
<h2 class="zmt zmb">This is a h2 Header, without top & bottom margin!</h1>

This is a h1 Header, without top & bottom margin!

This is a h2 Header, without top & bottom margin!

As you can see in the example above, applying the zmt & zmb to both headers, has resulted with them both having zero applied to margin-top and margin-bottom.

Centering Elements

Adding these unique classes .center and .tac to your elements will align to the center.

.center

Aligns elements to center

.tac

Aligns elements to center and uses !important declaration

<h1 class="center zmt zmb">This h1, is is aligned to the center</h1>
<h2 class="tac zmt zmb">This h2, is is aligned to the center</h1>

This h1, is aligned to the center

This h2, is is aligned to the center

As you can see in the example above, applying the .center and .tac to the headers, aligns them centrally. The headers are also using the zmt & zmb to demonstrate that you can mix and match the CSS utilities in your code.

Cool Image classes

The example code above, is using the .pl-imageframe class, simply replace class="pl-imageframe" with any of the classes to get your desired effect.

.pl-imageframe

Add to img element, produces pretty frame

.img-rounded

Add to img element, produces curved corners

.img-circle

Add to img element, produces circle image

.img-polaroid

Add to img element, produces framed image

Floats

Adding these unique classes .pull-left and .pull-right to your elements will allow you to float your element to the left or right hand side of your container.

<div class="pull-left">...</div>
<div class="pull-right">...</div>

Visibility

Using our integration of Bootstrap, you can use these visibility classes to show/hide elemtents of your site for specific devices.

Class

Phones 767px and below

Tablets 979px to 768px

Desktops Default

.visible-phone

Visible

Hidden

Hidden

.visible-tablet

Hidden

Visible

Hidden

.visible-desktop

Hidden

Hidden

Visible

.hidden-phone

Hidden

Visible

Visible

.hidden-tablet

Visible

Hidden

Visible

.hidden-desktop

Visible

Visible

Hidden

We recommend using these on a limited basis to avoide creating entirely different versions of the same website. Instead, use them to complement each device. The visibility classes are not compatible with tables.

Testing

Resize your browser or load on different devices to test these classes.