Typography

Contenido

Título *

<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"> &lt;div class="ice-block6"&gt;block text&lt;/div&gt; </span></p>
</div>
</div>
<hr />
<p><br /><br /></p>
<h2>Tooltips</h2>
<p>Example:<span class="notice-typo"> &lt;ul class="tooltip-example"&gt; Text goes here &lt;span&gt; Tooltip goes here &lt;/span&gt;&lt;/span&gt; </span></p>
<ul style="list-style: none;">
<li><a title="" href="#" target="_parent" rel="tooltip" data-placement="left" data-original-title="Descritpion goes here"><span>Tooltip on left</span></a></li>
<li><a title="" href="#" target="_parent" rel="tooltip" data-placement="top" data-original-title="Descritpion goes here"><span>Tooltip on top</span></a></li>
<li><a title="" href="#" target="_parent" rel="tooltip" data-placement="right" data-original-title="Descritpion goes here"><span>Tooltip on right</span></a></li>
<li><a title="" href="#" target="_parent" rel="tooltip" data-placement="bottom" data-original-title="Descritpion goes here"><span>Tooltip on bottom</span></a></li>
</ul>
<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" border="0" summary="This is a sample table from IceTheme for Joomla Templates"><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" name="name" type="text" placeholder="Text input" /></p>
<p><label class="radio"> <input id="optionsRadios1" checked="checked" name="optionsRadios" type="radio" value="option1" /> Sample Radio Input </label></p>
<p><label class="checkbox"> <input type="checkbox" value="" /> 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> <textarea id="textarea" cols="30" rows="5">Textarea text</textarea></p>
<button class="btn">Submit Button</button></fieldset></form>

Publicando

Categoría *

Etiquetas

Note

Alias del autor

Estado

Destacar

Inicio de la publicación

Final de la publicación

Acceso

Idioma

Metadatos

Metadescripción

Metapalabras clave

Open Source Content Management

Ir a la vista de búsquedas

Navegación

Buscar