Web Fonts:On - Off, Google Font Directory; WebFonts allow you to use 3rd party WebFonts from providers such as Google. You must SAVE then APPLY before the new fonts will show up in the Font Family dropdown.

Font Settings: Select a font family from the available options and also choose a default font size

Template Typography

Creating Beautiful Content With Simple Code

Typography is a fundamental part of a template, providing you with the tools to characterise your content and bring it to life. There is a vast array of typography available with Clarion template, as is with our previous releases, from list styles, notice blocks and a diverse number of other elements.

If you are using the TinyMCE editor for HTML typography, go to Extensions → Plugin Manager → TinyMCE 2.0 → Set Code Clean-up on Save to Never.

<p> Notice Styles

This is a sample of the Approved style. To replicate, use the following syntax: <p class="approved">....</p> (HTML) or [notice class="approved"] ... [/notice] (ROKCANDY).

This is a sample of the Attention style. To replicate, use the following syntax: <p class="attention">....</p> (HTML) or [notice class="attention"] ... [/notice] (ROKCANDY).

This is a sample of the Notice style. To replicate, use the following syntax: <p class="notice">....</p> (HTML) or [notice class="notice"] ... [/notice] (ROKCANDY).

This is a sample of the Alert style. To replicate, use the following syntax: <p class="alert">....</p> (HTML) or [notice class="alert"] ... [/notice] (ROKCANDY).

<span> Text Icon Styles

To replicate, the following format: <span class="text-icon iconname">...</span> (HTML) or [icon class="icon name"]...[/icon] (ROKCANDY). The class names are listed below, such as "text-icon email".

Text with an email icon

Text with a phone icon

Text with a quote icon

Text with a cart icon

Text with a rss icon

Text with a tags icon

Text with a write icon

Text with an info icon

Text with a sound icon

Text with a rightarrow icon

Text with a leftarrow icon

Text with a circlearrow icon

Text with a downarrow icon

Text with an uparrow icon

Text with a person icon

Text with a calendar icon

Text with a doc icon

Text with a bulb icon

Text with a twitter icon

Text with a youtube icon

Text with a skype icon

Text with a facebook icon

Text with a like icon

Text with a video icon

Text with a dropbox icon

Text with a vimeo icon

Text with a paypal icon

<em> Emphasis Styles

This is a emphasis tag that allows you to highlight words or phrases. Use the following format: <em class="italic">...</em> (HTML) or [emphasis]...[/emphasis] (ROKCANDY)

This is a emphasis tag that allows you to highlight words or phrases. Use the following format: <em class="bold">...</em> (HTML) or [emphasisbold]...[/emphasisbold] (ROKCANDY)

This is a emphasis tag that allows you to highlight words or phrases. Use the following format: <em class="bold2">...</em> (HTML) or [emphasisbold2]...[/emphasisbold2] (ROKCANDY)

This is a emphasis tag that allows you to highlight words or phrases. Use the following format: <em class="highlight">...</em> (HTML) or [highlight class="default"]...[/highlight] (ROKCANDY)

This is a emphasis tag that allows you to highlight words or phrases. Use the following format: <em class="highlight white">...</em> (HTML) or [highlight class="white"]...[/highlight] (ROKCANDY)

This is a emphasis tag that allows you to highlight words or phrases. Use the following format: <em class="highlight black">...</em> (HTML) or [highlight class="black"]...[/highlight] (ROKCANDY)

This is a emphasis tag that allows you to highlight words or phrases. Use the following format: <em class="highlight green">...</em> (HTML) or [highlight class="green"]...[/highlight] (ROKCANDY)

This is a emphasis tag that allows you to highlight words or phrases. Use the following format: <em class="highlight yellow">...</em> (HTML) or [highlight class="yellow"]...[/highlight] (ROKCANDY)

This is a emphasis tag that allows you to highlight words or phrases. Use the following format: <em class="highlight blue">...</em> (HTML) or [highlight class="blue"]...[/highlight] (ROKCANDY)

This is a emphasis tag that allows you to highlight words or phrases. Use the following format: <em class="highlight red">...</em> (HTML) or [highlight class="red"]...[/highlight] (ROKCANDY)

<ul> List Styles (Icons)

To replicate, use the following format: <ul class="list-icon icon_name"><li>....</li><li>....</li>...</ul> (HTML) or [list class="list-icon icon_name"][li]....[/li][li....[/li][/list] (ROKCANDY). The icon names are listed below, such as "cart".

A list item using the list-icon email class.

A list item using the list-icon email class.

A list item using the list-icon phone class.

A list item using the list-icon phone class.

A list item using the list-icon quote class.

A list item using the list-icon quote class.

A list item using the list-icon twitter class.

A list item using the list-icon twitter class.

A list item using the list-icon youtube class.

A list item using the list-icon youtube class.

A list item using the list-icon facebook class.

A list item using the list-icon facebook class.

A list item using the list-icon cart class.

A list item using the list-icon cart class.

A list item using the list-icon tags class.

A list item using the list-icon tags class.

A list item using the list-icon write class.

A list item using the list-icon write class.

A list item using the list-icon info class.

A list item using the list-icon info class.

A list item using the list-icon sound class.

A list item using the list-icon sound class.

A list item using the list-icon rightarrow class.

A list item using the list-icon rightarrow class.

A list item using the list-icon skype class.

A list item using the list-icon skype class.

A list item using the list-icon rss class.

A list item using the list-icon rss class.

A list item using the list-icon leftarrow class.

A list item using the list-icon leftarrow class.

A list item using the list-icon circlearrow class.

A list item using the list-icon circlearrow class.

A list item using the list-icon dropbox class.

A list item using the list-icon dropbox class.

A list item using the list-icon vimeo class.

A list item using the list-icon vimeo class.

A list item using the list-icon downarrow class.

A list item using the list-icon downarrow class.

A list item using the list-icon video class.

A list item using the list-icon video class.

A list item using the list-icon like class.

A list item using the list-icon like class.

A list item using the list-icon uparrow class.

A list item using the list-icon uparrow class.

A list item using the list-icon person class.

A list item using the list-icon person class.

A list item using the list-icon calendar class.

A list item using the list-icon calendar class.

A list item using the list-icon bulb class.

A list item using the list-icon bulb class.

A list item using the list-icon paypal class.

A list item using the list-icon paypal class.

A list item using the list-icon doc class.

A list item using the list-icon doc class.

<ul> List Styles (CSS3)

These list styles are based on the latest CSS3 techniques and are designed to work in modern browsers (will not display properly in IE6-IE8).

To replicate, use the following format: <ul class="class name"><li>....</li><li>....</li>...</ul> (HTML) or [list class="class name"][li]....[/li][li....[/li][/list] (ROKCANDY). The class names are listed below, such as "checkmark red".