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 Forums
Headings are defined with the <h1> to <h6> tags. <h1> defines the most important heading. <h6> defines the least important heading. For more information about headings please visit the HTML Headings on w3schools
Example: <h1>This is Heading 1</h1>
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.
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.
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.
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.
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.
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.
This is a Headline
This is a Subheadline that should go after the main headline
Use: <p class="ice-headline">for the headline </p> and use for <p class="ice-headline"> the subheadline </p>
There are 3 kinds of HTML lists. Unordered list which starts with <ul> and it is used to display a set of items which the order does not matter. Ordered list which starts with <ol> and as the name suggests the order is important. The third is the Definition lists which starts with <dl> and each item has a description.
Example Unordered List:
<ul>
<li> This is a unordered list </li>
<li> This is a unordered list </li>
<li> This is a unordered list </li>
</ul>
Example Ordered List:
<ol>
<li> This is a ordered list </li>
<li> This is a ordered list </li>
<li> This is a ordered list </li>
</ol>
Example Definition List:
<dl>
<dt> Coffee </dt>
<dd> black hot drink </dd>
<dd> white cold drink </dd>
</dl>
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.
Example:
<ul class="check">
<li> This is a unordered list </li>
<li> This is a unordered list </li>
<li> This is a unordered list </li>
</ul>
Example: <blockquote><p> The blockquote message here </p></blockquote>
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.
Example: <span class="highlight"> highlighted message here </span>
Lorem ipsum dolor sit amet consectetur adipiscing elit nulla dapibus sapien vel mauris viverra quis euismod dui tincidunt.
Example: <span class="dropcap"> L </span> . Use only the first letter of your text. Be careful not to overuse this feature.
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.Phasellus laoreet mattis est, eu vulputate sapien suscipit ac. Vestibulum porttitor justo a est elementum luctus.
Example: <pre> Your code goes here </pre>
#i-love-icetheme {
position: relative;
float: left;
width:960px;
}
Example: <span class="IceBlockTextLeft"> Your code goes here </span>
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. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla commodo, velit eu posuere tempus, magna tellus pellentesque massa. 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
Example: <span class="IceBlockTextRight"> Your code goes here </span>
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. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla commodo, velit eu posuere tempus, magna tellus pellentesque massa. 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
In case you want to decorate a div html tag you may use the block feature.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Example:
<div class="ice-block1">block text</div>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Example:
<div class="ice-block2">block text</div>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Example:
<div class="ice-block3">block text</div>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Example:
<div class="ice-block4">block text</div>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Example:
<div class="ice-block5">block text</div>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Example:
<div class="ice-block6">block text</div>
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.
Example: <span class="hasTip" title="Tooltip Title::Tooltip Body"> Tooltip Text </span>
How nice and pratical are Tooltips
Example: <span class="tooltip"> Text goes here <span> Tooltip goes here </span></span>
This is the default CSS3 tooltip Your custom description
This is the CSS3 tooltip with class yellow-tooltipYour custom description
This is the CSS3 tooltip with class blue-tooltip Your custom description
This is the CSS3 tooltip with class pink-tooltip Your custom description
This is the CSS3 tooltip with class navy-tooltip Your custom description
Use the class "custom" to decorate your tables , Also the table with class "category" below is used by Joomla to output some of the tables into the the Joomla core components
Example:
<table class="table">
...
</table>
| Column 1 | Column 2 | Column 3 | Column 4 |
|---|---|---|---|
| Footer Col 1 | Footer Col 2 | Footer Col 3 | Footer Col 4 |
| Row 1 / TD 1 | Row 1 / TD 2 | Row 1 / TD 3 | Row 1 / TD 4 |
| Row 2 / TD 1 | Row 2 / TD 2 | Row 2 / TD 3 | Row 2 / TD 4 |
| Row 3 / TD 1 | Row 3 / TD 2 | Row 3 / TD 3 | Row 3 / TD 4 |
| Row 4 / TD 1 | Row 4 / TD 2 | Row 4 / TD 3 | Row 4 / TD 4 |
| Row 5 / TD 1 | Row 5 / TD 2 | Row 5 / TD 3 | Row 5 / TD 4 |
| Row 6 / TD 1 | Row 6 / TD 2 | Row 6 / TD 3 | Row 6 / TD 4 |
| Row 7 / TD 1 | Row 7 / TD 2 | Row 7 / TD 3 | Row 7 / TD 4 |
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.
This is a sample of the 'notice' style. Use this style to give your users a message that require a note
This is a sample of the 'success' style. Use this style to give your users a message when a successful task was completed
This is a sample of the 'error' style. Use this style to give your users a message when a task was wrongly completed