<p>The typography page will show you how to use various HTML codes with or without classes. For each of the elements below there is the code as well which you can simply paste. In case you need help using the IceTheme Typography feature please use our <a href="http://icetheme.com/forums">Forums</a></p>
<h1>Headings</h1>
<p>Headings are defined with the &lt;h1&gt; to &lt;h6&gt; tags. &lt;h1&gt; defines the most important heading. &lt;h6&gt; defines the least important heading. For more information about headings please visit the <a href="http://www.w3schools.com/html/html_headings.asp">HTML Headings</a> on w3schools</p>
<p>Example:<span class="notice-typo"> &lt;h1&gt;This is Heading 1&lt;/h1&gt; </span></p>
<h1>This is Heading 1</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla dapibus sapien vel mauris viverra quis euismod dui tincidunt. Phasellus laoreet mattis est, eu vulputate sapien suscipit ac. Vestibulum porttitor justo a est elementum luctus. Nulla ac pharetra nulla. Quisque metus orci, cursus at sollicitudin sit.</p>
<h2>This is Heading 2</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla dapibus sapien vel mauris viverra quis euismod dui tincidunt. Phasellus laoreet mattis est, eu vulputate sapien suscipit ac. Vestibulum porttitor justo a est elementum luctus. Nulla ac pharetra nulla. Quisque metus orci, cursus at sollicitudin sit.</p>
<h3>This is Heading 3</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla dapibus sapien vel mauris viverra quis euismod dui tincidunt. Phasellus laoreet mattis est, eu vulputate sapien suscipit ac. Vestibulum porttitor justo a est elementum luctus. Nulla ac pharetra nulla. Quisque metus orci, cursus at sollicitudin sit.</p>
<h4>This is Heading 4</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla dapibus sapien vel mauris viverra quis euismod dui tincidunt. Phasellus laoreet mattis est, eu vulputate sapien suscipit ac. Vestibulum porttitor justo a est elementum luctus. Nulla ac pharetra nulla. Quisque metus orci, cursus at sollicitudin sit.</p>
<h5>This is Heading 5</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla dapibus sapien vel mauris viverra quis euismod dui tincidunt. Phasellus laoreet mattis est, eu vulputate sapien suscipit ac. Vestibulum porttitor justo a est elementum luctus. Nulla ac pharetra nulla. Quisque metus orci, cursus at sollicitudin sit.</p>
<h6>This is Heading 6</h6>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla dapibus sapien vel mauris viverra quis euismod dui tincidunt. Phasellus laoreet mattis est, eu vulputate sapien suscipit ac. Vestibulum porttitor justo a est elementum luctus. Nulla ac pharetra nulla. Quisque metus orci, cursus at sollicitudin sit.</p>
<p> </p>
<p class="ice-headline">This is a Headline</p>
<p class="ice-subheadline">This is a Subheadline that should go after the main headline</p>
<p>Use:<span class="notice-typo"> &lt;p class="ice-headline"&gt;for the headline &lt;/p&gt; </span> and use for <span class="notice-typo"> &lt;p class="ice-headline"&gt; the subheadline &lt;/p&gt;</span></p>
<hr />
<h2>Lists</h2>
<p>There are 3 kinds of HTML lists. Unordered list which starts with &lt;ul&gt; and it is used to display a set of items which the order does not matter. Ordered list which starts with &lt;ol&gt; and as the name suggests the order is important. The third is the Definition lists which starts with &lt;dl&gt; and each item has a description.</p>
<div style="float: left; width: 29%; margin: 15px 2%;">
<p>Example Unordered List: <span class="notice-typo"> <br /> &lt;ul&gt;<br /> &lt;li&gt; This is a unordered list &lt;/li&gt; <br /> &lt;li&gt; This is a unordered list &lt;/li&gt; <br /> &lt;li&gt; This is a unordered list &lt;/li&gt; <br /> &lt;/ul&gt; </span></p>
</div>
<div style="float: left; width: 29%; margin: 15px 2% 0;">
<p>Example Ordered List: <span class="notice-typo"> <br /> &lt;ol&gt;<br /> &lt;li&gt; This is a ordered list &lt;/li&gt; <br /> &lt;li&gt; This is a ordered list &lt;/li&gt; <br /> &lt;li&gt; This is a ordered list &lt;/li&gt; <br /> &lt;/ol&gt;</span></p>
</div>
<div style="float: left; width: 3129; margin: 15px 2%  0;">
<p>Example Definition List: <span class="notice-typo"> <br /> &lt;dl&gt;<br /> &lt;dt&gt; Coffee &lt;/dt&gt; <br /> &lt;dd&gt; black hot drink &lt;/dd&gt; <br /> &lt;dd&gt; white cold drink &lt;/dd&gt; <br /> &lt;/dl&gt; </span></p>
</div>
<div class="clearfix"> </div>
<div style="float: left; width: 29%; margin: 15px 2%  0;">
<h3>Ordered List</h3>
<ol>
<li>This is a sample <strong>Ordered List</strong>.</li>
<li>Lorem ipsum dolor sit amet</li>
<li>Lorem ipsum dolor sit amet</li>
<li>Lorem ipsum dolor sit amet</li>
</ol></div>
<div style="float: left; width: 29%; margin: 15px 2%;">
<h3>Unordered List</h3>
<ul>
<li>This is a sample <strong>Unordered List</strong>.</li>
<li>Lorem ipsum dolor sit amet</li>
<li>Lorem ipsum dolor sit amet</li>
</ul>
</div>
<div style="float: left; width: 29%; margin: 15px 2%;">
<h3>Definition List</h3>
<dl><dt>This is a sample <strong>Definition List</strong>.</dt><dd>Condimentum quis.</dd><dt>Definiton Lists are important</dt><dd>Congue Quisque augue elit dolor.</dd></dl></div>
<div class="clearfix"> </div>
<h3>Unordered Lists with classes</h3>
<p>You can easily make an unordered list and instated of having the HTML default bullets, you can display a nice icon before each item and enhance the usability of your lists.</p>
<p>Example: <span class="notice-typo"> <br /> &lt;ul class="check"&gt;<br /> &lt;li&gt; This is a unordered list &lt;/li&gt; <br /> &lt;li&gt; This is a unordered list &lt;/li&gt; <br /> &lt;li&gt; This is a unordered list &lt;/li&gt; <br /> &lt;/ul&gt; </span></p>
<div style="float: left; width: 29%; margin: 15px 2%;">
<ul class="ice-check">
<li>ul with class <strong>ice-check</strong></li>
<li>Lorem ipsum dolor sit</li>
<li>Lorem ipsum dolor sit</li>
<li>Lorem ipsum dolor sit</li>
</ul>
</div>
<div style="float: left; width: 29%; margin: 15px 2%;">
<ul class="ice-arrow">
<li>ul with class <strong>ice-arrow</strong></li>
<li>Lorem ipsum dolor sit</li>
<li>Lorem ipsum dolor sit</li>
<li>Lorem ipsum dolor sit</li>
</ul>
</div>
<div style="float: left; width: 29%; margin: 15px 2%;">
<ul class="ice-cross">
<li>ul with class <strong>ice-cross</strong></li>
<li>Lorem ipsum dolor sit</li>
<li>Lorem ipsum dolor sit</li>
<li>Lorem ipsum dolor sit</li>
</ul>
</div>
<div style="float: left; width: 29%; margin: 15px 2%;">
<ul class="ice-light">
<li>ul with class <strong>ice-light</strong></li>
<li>Lorem ipsum dolor sit</li>
<li>Lorem ipsum dolor sit</li>
<li>Lorem ipsum dolor sit</li>
</ul>
</div>
<div style="float: left; width: 29%; margin: 15px 2%;">
<ul class="ice-star">
<li>ul with class <strong>ice-star</strong></li>
<li>Lorem ipsum dolor sit</li>
<li>Lorem ipsum dolor sit</li>
<li>Lorem ipsum dolor sit</li>
</ul>
</div>
<div style="float: left; width: 29%; margin: 15px 2%;">
<ul class="ice-note">
<li>ul with class <strong>ice-note</strong></li>
<li>Lorem ipsum dolor sit</li>
<li>Lorem ipsum dolor sit</li>
<li>Lorem ipsum dolor sit</li>
</ul>
</div>
<div style="float: left; width: 29%; margin: 15px 2%;">
<ul class="ice-check2">
<li>ul with class <strong>ice-check2</strong></li>
<li>Lorem ipsum dolor sit</li>
<li>Lorem ipsum dolor sit</li>
<li>Lorem ipsum dolor sit</li>
</ul>
</div>
<div style="float: left; width: 29%; margin: 15px 2%;">
<ul class="ice-info">
<li>ul with class <strong>ice-info</strong></li>
<li>Lorem ipsum dolor sit</li>
<li>Lorem ipsum dolor sit</li>
<li>Lorem ipsum dolor sit</li>
</ul>
</div>
<div style="float: left; width: 29%; margin: 15px 2%;">
<ul class="ice-help">
<li>ul with class <strong>ice-help</strong></li>
<li>Lorem ipsum dolor sit</li>
<li>Lorem ipsum dolor sit</li>
<li>Lorem ipsum dolor sit</li>
</ul>
</div>
<div class="clearfix"> </div>
<hr />
<h3>BlockQuotes</h3>
<p>Example:<span class="notice-typo"> &lt;blockquote&gt;&lt;p&gt; The blockquote message here &lt;/p&gt;&lt;/blockquote&gt; </span></p>
<blockquote>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla dapibus sapien vel mauris viverra quis euismod dui tincidunt. Phasellus laoreet mattis est, eu vulputate sapien suscipit ac. Vestibulum porttitor justo a est elementum luctus. Nulla ac pharetra.</p>
</blockquote>
<h3>Highlights</h3>
<p>Example:<span class="notice-typo"> &lt;span class="highlight"&gt; highlighted message here &lt;/span&gt; </span></p>
<p>Lorem ipsum dolor sit amet <span class="highlight">consectetur adipiscing elit nulla</span> dapibus sapien vel mauris viverra quis euismod dui tincidunt.</p>
<p> </p>
<h3>Dropcaps</h3>
<p>Example:<span class="notice-typo"> &lt;span class="dropcap"&gt; L &lt;/span&gt; </span>. Use only the first letter of your text. Be careful not to overuse this feature.</p>
<p><span class="dropcap">L</span>orem ipsum dolor sit amet, consectetur adipiscing elit. Nulla dapibus sapien vel mauris viverra quis euismod dui tincidunt. Phasellus laoreet mattis est, eu vulputate sapien suscipit ac. Vestibulum porttitor justo a est elementum luctus. Nulla ac pharetra nulla. Quisque metus orci, cursus at sollicitudin sit.Phasellus laoreet mattis est, eu vulputate sapien suscipit ac. Vestibulum porttitor justo a est elementum luctus.</p>
<p> </p>
<h3>Code</h3>
<p>Example:<span class="notice-typo"> &lt;pre&gt; Your code goes here &lt;/pre&gt; </span></p>
<pre>#i-love-icetheme { 
    position: relative;
    float: left;
    width:960px;
}
</pre>
<p><br /><br /></p>
<h3>Floated blocks</h3>
<p>Example:<span class="notice-typo"> &lt;span class="IceBlockTextLeft"&gt; Your code goes here &lt;/span&gt; </span></p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla commodo, velit eu posuere tempus, magna tellus pellentesque massa, vitae bibendum mi libero at magna. Etiam ante mi, ornare eget consectetur vitae, bibendum eu justo. Aliquam faucibus posuere nulla non tincidunt. Nunc consequat erat vel sem scelerisque luctus. Vestibulum convallis posuere ante at fringilla. <span class="IceBlockTextLeft">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla commodo, velit eu posuere tempus, magna tellus pellentesque massa.</span> Morbi eu dui lorem. Vestibulum pulvinar, neque id porta tempor, nisl elit tempus odio, ut dignissim lorem quam a augue. Quisque vehicula felis nec nisi consectetur elementum. In dui ipsum, rutrum id viverra id, ultrices sit amet dui.Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed mi mi, egestas ut accumsan sit amet, aliquet vitae</p>
<p>Example:<span class="notice-typo"> &lt;span class="IceBlockTextRight"&gt; Your code goes here &lt;/span&gt; </span></p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla commodo, velit eu posuere tempus, magna tellus pellentesque massa, vitae bibendum mi libero at magna. Etiam ante mi, ornare eget consectetur vitae, bibendum eu justo. Aliquam faucibus posuere nulla non tincidunt. Nunc consequat erat vel sem scelerisque luctus. Vestibulum convallis posuere ante at fringilla. <span class="IceBlockTextRight">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla commodo, velit eu posuere tempus, magna tellus pellentesque massa.</span> Morbi eu dui lorem. Vestibulum pulvinar, neque id porta tempor, nisl elit tempus odio, ut dignissim lorem quam a augue. Quisque vehicula felis nec nisi consectetur elementum. In dui ipsum, rutrum id viverra id, ultrices sit amet dui.Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed mi mi, egestas ut accumsan sit amet, aliquet vitae</p>
<hr />
<h2>Blocks</h2>
<p>In case you want to decorate a div html tag you may use the block feature.</p>
<div style="float: left; width: 31%; margin: 7px 1%;">
<div class="ice-block1">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. <br /> <br /> Example:<br /> <span class="notice-typo"> &lt;div class="ice-block1"&gt;block text&lt;/div&gt; </span></p>
</div>
</div>
<div style="float: left; width: 31%; margin: 7px 1%;">
<div class="ice-block2">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. <br /> <br /> Example:<br /> <span class="notice-typo"> &lt;div class="ice-block2"&gt;block text&lt;/div&gt; </span></p>
</div>
</div>
<div style="float: left; width: 31%; margin: 7px  1%;">
<div class="ice-block3">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. <br /> <br /> Example:<br /> <span class="notice-typo"> &lt;div class="ice-block3"&gt;block text&lt;/div&gt; </span></p>
</div>
</div>
<div style="float: left; width: 31%; margin: 7px 1%;">
<div class="ice-block4">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. <br /> <br /> Example:<br /> <span class="notice-typo"> &lt;div class="ice-block4"&gt;block text&lt;/div&gt; </span></p>
</div>
</div>
<div style="float: left; width: 31%; margin: 7px 1%;">
<div class="ice-block5">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. <br /> <br /> Example:<br /> <span class="notice-typo"> &lt;div class="ice-block5"&gt;block text&lt;/div&gt; </span></p>
</div>
</div>
<div style="float: left; width: 31%; margin: 7px 1%;">
<div class="ice-block6">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. <br /> <br /> Example:<br /> <span class="notice-typo" style="color: #fff;"> &lt;div class="ice-block6"&gt;block text&lt;/div&gt; </span></p>
</div>
</div>
<hr />
<h2>Tooltips</h2>
<p>You may use tooltips to display your hidden content. They are CSS-based but the default Joomla one with Javascript can be used as well.</p>
<p>Example:<span class="notice-typo"> &lt;span class="hasTip" title="Tooltip Title::Tooltip Body"&gt; Tooltip Text &lt;/span&gt; </span> <br /> How nice and pratical are <span class="hasTip" title="Tooltip Title::Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla dapibus">Tooltips</span></p>
<p>Example:<span class="notice-typo"> &lt;span class="tooltip"&gt; Text goes here &lt;span&gt; Tooltip goes here &lt;/span&gt;&lt;/span&gt; </span> <br /> This is the default <span class="tooltip">CSS3 tooltip <span>Your custom description</span></span><br /> This is the <span class="tooltip yellow-tooltip">CSS3 tooltip with class yellow-tooltip<span>Your custom description</span></span><br /> This is the <span class="tooltip blue-tooltip">CSS3 tooltip with class blue-tooltip <span>Your custom description</span></span><br /> This is the <span class="tooltip pink-tooltip ">CSS3 tooltip with class pink-tooltip <span>Your custom description</span></span><br /> This is the <span class="tooltip navy-tooltip">CSS3 tooltip with class navy-tooltip <span>Your custom description</span></span></p>
<hr />
<h2>Tables</h2>
<p>Use the class "<strong>custom</strong>" to decorate your tables , Also the table with class "<strong>category</strong>" below is used by Joomla to output some of the tables into the the Joomla core components</p>
<p>Example: <span class="notice-typo"> <br /> &lt;table class="table"&gt;<br /> ... <br /> &lt;/table&gt; </span></p>
<table class="table table-striped" summary="This is a sample table from IceTheme for Joomla Templates" border="0"><caption>Table with Decoration</caption>
<thead>
<tr class="odd"><th scope="col">Column 1</th><th scope="col">Column 2</th><th scope="col">Column 3</th><th scope="col">Column 4</th></tr>
</thead>
<tfoot>
<tr class="odd"><th scope="col">Footer Col 1</th><th scope="col">Footer Col 2</th><th scope="col">Footer Col 3</th><th scope="col">Footer Col 4</th></tr>
</tfoot>
<tbody>
<tr>
<td>Row 1 / TD 1</td>
<td>Row 1 / TD 2</td>
<td>Row 1 / TD 3</td>
<td>Row 1 / TD 4</td>
</tr>
<tr class="odd">
<td>Row 2 / TD 1</td>
<td>Row 2 / TD 2</td>
<td>Row 2 / TD 3</td>
<td>Row 2 / TD 4</td>
</tr>
<tr>
<td>Row 3 / TD 1</td>
<td>Row 3 / TD 2</td>
<td>Row 3 / TD 3</td>
<td>Row 3 / TD 4</td>
</tr>
<tr class="odd">
<td>Row 4 / TD 1</td>
<td>Row 4 / TD 2</td>
<td>Row 4 / TD 3</td>
<td>Row 4 / TD 4</td>
</tr>
<tr>
<td>Row 5 / TD 1</td>
<td>Row 5 / TD 2</td>
<td>Row 5 / TD 3</td>
<td>Row 5 / TD 4</td>
</tr>
<tr class="odd">
<td>Row 6 / TD 1</td>
<td>Row 6 / TD 2</td>
<td>Row 6 / TD 3</td>
<td>Row 6 / TD 4</td>
</tr>
<tr>
<td>Row 7 / TD 1</td>
<td>Row 7 / TD 2</td>
<td>Row 7 / TD 3</td>
<td>Row 7 / TD 4</td>
</tr>
</tbody>
</table>
<hr />
<h1>Forms</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla dapibus sapien vel mauris viverra quis euismod dui tincidunt. Phasellus laoreet mattis est, eu vulputate sapien suscipit ac. Vestibulum porttitor justo a est elementum luctus. Nulla ac pharetra nulla. Quisque metus orci, cursus at sollicitudin sit.</p>
<p class="notice">This is a sample of the 'notice' style. Use this style to give your users a message that require a note</p>
<p class="success">This is a sample of the 'success' style. Use this style to give your users a message when a successful task was completed</p>
<p class="error">This is a sample of the 'error' style. Use this style to give your users a message when a task was wrongly completed</p>
<form method="post"><fieldset><legend>Sample Legend</legend>
<p><label for="input">Sample Input</label> <input id="name" class="inputbox" type="input" name="name" /></p>
<p><input id="radio" type="radio" /><label for="radio">Sample Radio Input</label></p>
<p><input id="checkbox" type="checkbox" /><label for="checkbox">Sample CheckBox Input:</label></p>
<p><label for="select">Sample Select Field:</label><br /><select id="select">
<option>Option One</option>
<option>Option Two</option>
</select></p>
<p><label for="textarea">Sample Textarea Field:</label><br /> <textarea id="textarea" rows="5" cols="30">Textarea text</textarea></p>
<button class="btn">Submit Button</button></fieldset></form>