<div class="attention"><div class="typo-icon">
<strong>Video Tutorial Currently Available!</strong>
<a href="http://www.rockettheme.com/video/joomla15/using-typography-joomla15.html" title="RocketTutorials :: Using Typography">Launch the Joomla Using Typography Video Tutorial now!</a></div></div>

<p>Every RocketTheme template is accompanied by custom content styles known as Typography. This guide outlines how to use Typography in your content, as demoed on the <a href="index.php?option=com_content&amp;view=article&amp;id=51&amp;Itemid=157">Typography page</a>.</p>

<p>In this guide, we will use the Attention Span Style, which uses the <strong>&lt;div class=&quot;attention&quot;&gt;&lt;div class=&quot;typo-icon&quot;&gt;...&lt;/div&gt;&lt;/div&gt;</strong> syntax.</p>

<h4>Content Editor</h4>

<ul>
	<li>Login to the Joomla administrator</li>
	<li>Go to <strong>Content &rarr; Article Manager</strong>; or, if you wish to use the syntax in custom modules, Go to <strong>Extensions &rarr; Module Manager</strong></li>
	<li>Choose the Article, or Custom Module</li>
	<li>Click the <strong>HTML mode</strong> or equivalent in your editor</li>
	<li>Insert <strong>&lt;div class=&quot;attention&quot;&gt;&lt;div class=&quot;typo-icon&quot;&gt; ... some content ... &lt;/div&gt;&lt;/div&gt;</strong></li>
	<li>Save</li>
</ul>

<div class="notice"><div class="typo-icon">If you are using the TinyMCE editor, go to <strong>Extensions &rarr; Plugin Manager</strong> and select <strong>TinyMCE 2.0</strong>. Locate <strong>Code Clean-up on Save</strong> and select <strong>Never</strong>.<br /><br />This prevents the stripping of HTML code from your content.</div></div>

<h4>No Editor</h4>

<ul>
	<li>Login to the Joomla administrator</li>
	<li>Go to <strong>Content &rarr; Article Manager</strong>; or, if you wish to use the syntax in custom modules, Go to <strong>Extensions &rarr; Module Manager</strong></li>
	<li>Choose the Article, or Custom Module</li>
	<li>Insert <strong>&lt;div class=&quot;attention&quot;&gt;&lt;div class=&quot;typo-icon&quot;&gt; ... some content ... &lt;/div&gt;&lt;/div&gt;</strong></li>
	<li>Save</li>
</ul>

<p>Note, with the Content Editor (WYSIWYG) enabled, you need to enter HTML mode otherwise the typography will not work. If you are running no editor, this is not the case as you are interacting with the content at a code level.</p>