This template has a ton of customization available for setting the perfect typography for your site. You can choose from any one of the hundreds of fonts available from the Google Font directory, set the sizes for headings and even provide common fall-back fonts.

This is an H1 Heading

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation nisi ut aliquip ex ea commodo consequat.

This is an H2 Heading

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation.

This is an H3 Heading

Extended paragraph. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et exercitation nisi ut aliquipdolore magna aliqua.

This is an H4 Heading

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et exercitation nisi ut aliquip dolore magna aliqua.

This is an H5 Heading

Extended paragraph. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod.

This is an H6 Heading

tempor incididunt ut labore et dolore exercitation nisi ut aliquip magna aliqua. Ut enim ad minim veniam, quis nostrud.

Text styles:

This is a line with some Emphasised Text on it.
This is a line with some Strong Text.
This is a line with some abbreviated text on it.
This is a line with an acronym on it.
This is a line with some quoted text on it.
This is a line with a superscript² on it.
This is a line with a subscript₃ on it.
This is a line with some link text on it.
This is a line with deleted text on it.
This is a line with inserted text on it.
This is a line with highlighted text on it.

Blockquote & cite tags:

Below is an example of <blockquote> and <cite> tag styleing:

I believe that a scientist looking at nonscientific problems is just as dumb as the next guy — and when he talks about a nonscientific matter, he will sound as naive as anyone untrained in the matter.

— Richard Feynman, The Value of Science (1955)

Dropcap

Style your text! Use a dropcap to make the content stand out. You can add a dropcap effect to any paragraph by adding a class of dropcap to any paragraph. Cupidatat non proident, sunt in culpa qui officia. Curabitur lacinia suscipit tristique. Quisque condimentum tristique urna nec blandit. Duis congue dignissim dui in gravida. Duis ipsum metus, pretium ut pellentesque et, pulvinar vel augue. Nulla feugiat viverra egestas. Sed vitae mi quam. Cras adipiscing arcu tincidunt elit lobortis at tincidunt risus eleifend.

Lists:

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Fancy List Styles:

Code & Pre Blocks:

Below is a block of code that uses the <code> and <pre> tags:

.myClassName {
	margin: 0;
	padding: 0;
	vertical-align: baseline;
	background: #333333;
	display:block;
	line-height:1.833em;
	border-top:0.1em solid #200;
}

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Definition List

A definition list is a list of terms and corresponding definitions. Definition lists are typically formatted with the term on the left with the definition following on the right or on the next line. The definition text is typically indented with respect to the term.

Definition Title

Definition description text consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Lorem ipsum dolor sit amet

Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Lorem ipsum dolor sit amet

Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Lorem ipsum dolor sit amet

Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Tables:

Unstyled Table:

Below is a table with default styling and no CSS classes applied to it:

Styled Table:

Below is a table with a CSS class of "tableStyle" applied to it:

<table class="tableStyle">...</table>

Boxes

You can apply the highlighted boxes styles shown below to any block level tag such as <p> or <div>. To create a green box like the one shown below, simply add a class of tr_green to your tag. E.g:

Icons:

Adding icons next to your content is as easy as adding a class to your <p> or <div> tags: e.g:

Mixing & Matching Styles

You can get creative and apply any of the above the box and icon style at the same time to any div or p tags. See below for some examples:

This tag has a class of "tr_light tr_quote". Create one like this by adding:
<p class="tr_light tr_quote"> ... </p> to your content.

This tag has a class of "tr_green tr_cart". Create one like this by adding:
<p class="tr_green tr_cart"> ... </p> to your content.

This tag has a class of "tr_amber tr_alert". Create one like this by adding:
<p class="tr_amber tr_alert"> ... </p> to your content.

This tag has a class of "tr_red tr_clock". Create one like this by adding:
<p class="tr_red tr_clock"> ... </p> to your content.

This tag has a class of "tr_blue tr_info". Create one like this by adding:
<p class="tr_blue tr_info"> ... </p> to your content.

This tag has a class of "tr_dark tr_rss". Create one like this by adding:
<p class="tr_dark tr_rss"> ... </p> to your content.

Buttons:

To create a button similar to ones shown above, just add a class of btn_blue, btn_green, btn_red, or btn_gray to any anchor tag.

<a class="btn_green"> This is a green button </a>

Columns:

To enhance your content presentation, you can add 2, 3, 4 or 5 columns to structure your content as shown below. To create columns, wrap your content around a div with a class of tr_cols2, tr_cols3, tr_cols4 or tr_cols5. Each individual column can then be wrapped with a class of tr_column. The last column should always contain a class of last in addition to the tr_column class.

<div class="tr_cols3">
     <p class="tr_column">This is column 1 </p>
     <p class="tr_column">This is column 2 </p>
     <p class="tr_column last">This is column 3 </p> 
</div>

2 Columns:

3 Columns:

4 Columns:

5 Columns:

System Messages

These are the native joomla system messages shown when an error occurs or a notification needs to be sent to the user.

Notice

• This is an example message. Your registration has been processed successfully.

Error

• This is a standard notice message. Please check your username and password and try again.

• This is a standard error message. No such user exists in the system.