Typography

The Scenica template comes with it's own custom typography. You'll be able to customize the look of your Joomla website when you utilize these custom template styles.

Here are examples of the several different types of html styles you have at your fingertips.

This is an H1 header.

Nunc massa est, venenatis faucibus accumsan eu, condimentum ut sapien. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed ut interdum libero. Suspendisse potenti. Etiam neque nisi, eleifend eu dignissim sed, tempus a ante.

This is an H2 header.

Fusce condimentum leo a quam vestibulum dignissim. In eu arcu lacus, non vestibulum odio. Praesent laoreet porttitor tincidunt. Phasellus tempor, tellus eget adipiscing tristique, ante purus ullamcorper nulla, ac egestas sem leo at leo. Mauris pulvinar elit sapien, vel sagittis erat.

This is an H3 header.

This is an H4 header.

This is an example blockquote

To use this style use the following code:

<blockquote>...</blockquote>

"Nulla facilisi. Nulla facilisi. Nulla facilisi. Maecenas consectetuer dui malesuada massa. Nullam vulputate. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum molestie. Suspendisse vel neque eu felis mattis faucibus. Ut et metus. Integer vitae quam in nibh sollicitudin dictum. Donec odio erat, rhoncus non, varius non, auctor et, sem".

This is an example blockquote floating left.

To use this style use the following code:

<blockquote class="left">...</blockquote>

"Nulla facilisi. Nulla facilisi. Nulla facilisi. Maecenas consectetuer dui malesuada massa. Nullam vulputate. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas."

Praesent dictum, velit id tempor sodales, magna libero ornare erat, sit amet congue risus arcu eu diam. Cras tempor metus nisi, non eleifend augue. In risus nunc, dignissim id sollicitudin ut, blandit ac urna. Fusce imperdiet justo vel odio adipiscing tincidunt non.

This is an example blockquote floating right.

To use this style use the following code:

<blockquote class="right">...</blockquote>

" Suspendisse vel neque eu felis mattis faucibus. Ut et metus. Integer vitae quam in nibh sollicitudin dictum. Donec odio erat, rhoncus non, varius non, auctor et, sem."

Duis commodo. Sed vulputate velit non erat. Nam ac nisi in eros molestie mollis. Etiam odio ligula, rhoncus ut, fringilla id, blandit quis, tortor. Fusce nulla. Integer mauris felis, mollis eu, nonummy vel, lobortis ac, nisi.

Notice Styles are shown below

This is a sample of the 'alert' style. Use this style to denote very important information to your users. To use this use the folllowing html: .... This is a sample of the 'info' style. Use this style to denote pieces of information or tips for your readers and visitors. To use this use the folllowing html: .... This is a sample of the 'note' style. Use this style to denote items in your content that you would like your users to note or pay attention to. To use this use the folllowing html: .... This is a sample of the 'download' style. Use this style to denote information containing a download or information about an available download on your site. To use this use the folllowing html: ....

This is an example <pre> ... </pre> tag

* {
margin:0px;
padding:0px;
}
html {
height:100%;
margin-bottom:1px;
}
body {
font-size:85%;
font-family:Arial,Helvetica,sans-serif;
line-height:1.5em;
margin:0;
}

List Styles

This is an unordered list

Cras dignissim
Dolor quis ultrices scelerisque
Lacus lectus euismod orci
A egestas tortor leo vitae leo
Curabitur ante. Sed velit.

This is an ordered list

Cras dignissim
Dolor quis ultrices scelerisque
Lacus lectus euismod orci
A egestas tortor leo vitae leo
Curabitur ante. Sed velit.

Special List Styles

To use this style create a list in the following format: <ul class="bullet1"><li>....</li><li>....</li>...</ul>.

To use this style create a list in the following format: <ul class="bullet2"><li>....</li><li>....</li>...</ul>.

To use this style create a list in the following format: <ul class="bullet3"><li>....</li><li>....</li>...</ul>.

To use this style create a list in the following format: <ul class="bullet4"><li>....</li><li>....</li>...</ul>.

To use this style create a list in the following format: <ul class="bullet5"><li>....</li><li>....</li>...</ul>.

To use this style create a list in the following format: <ul class="bullet6"><li>....</li><li>....</li>...</ul>.

To use this style create a list in the following format: <ul class="bullet7"><li>....</li><li>....</li>...</ul>.

To use this style create a list in the following format: <ul class="bullet8"><li>....</li><li>....</li>...</ul>.

To use this style create a list in the following format: <ul class="bullet9"><li>....</li><li>....</li>...</ul>.

To use this style create a list in the following format: <ul class="bullet10"><li>....</li><li>....</li>...</ul>.

To use this style create a list in the following format: <ul class="bullet11"><li>....</li><li>....</li>...</ul>.

To use this style create a list in the following format: <ul class="bullet12"><li>....</li><li>....</li>...</ul>.

To use this style create a list in the following format: <ul class="bullet13"><li>....</li><li>....</li>...</ul>.

To use this style create a list in the following format: <ul class="bullet14"><li>....</li><li>....</li>...</ul>.

To use this style create a list in the following format: <ul class="bullet15"><li>....</li><li>....</li>...</ul>.

To use this style create a list in the following format: <ul class="bullet16"><li>....</li><li>....</li>...</ul>.

To use this style create a list in the following format: <ul class="bullet17"><li>....</li><li>....</li>...</ul>.

To use this style create a list in the following format: <ul class="bullet18"><li>....</li><li>....</li>...</ul>.

To use this style create a list in the following format: <ul class="bullet19"><li>....</li><li>....</li>...</ul>.

To use this style create a list in the following format: <ul class="bullet20"><li>....</li><li>....</li>...</ul>.

Custom Button Styles

To use these styles use the code displayed below:

<a href="#" class="button black">Rectangle</a>
<a href="#" class="button black bigrounded">Rounded</a>
<a href="#" class="button black medium">Medium</a>
<a href="#" class="button black tiny">Tiny</a>
<a href="#" class="button green">Rectangle</a>
<a href="#" class="button green bigrounded">Rounded</a>
<a href="#" class="button green medium">Medium</a>
<a href="#" class="button green tiny">Tiny</a>
<a href="#" class="button red">Rectangle</a>
<a href="#" class="button red bigrounded">Rounded</a>
<a href="#" class="button red medium">Medium</a>
<a href="#" class="button red tiny">Tiny</a>
<a href="#" class="button gray">Rectangle</a>
<a href="#" class="button gray bigrounded">Rounded</a>
<a href="#" class="button gray medium">Medium</a>
<a href="#" class="button gray tiny">Tiny</a>
<a href="#" class="button white">Rectangle</a>
<a href="#" class="button white bigrounded">Rounded</a>
<a href="#" class="button white medium">Medium</a>
<a href="#" class="button white tiny">Tiny</a>
<a href="#" class="button orange">Rectangle</a>
<a href="#" class="button orange bigrounded">Rounded</a>
<a href="#" class="button orange medium">Medium</a>
<a href="#" class="button orage tiny">Tiny</a>
<a href="#" class="button blue">Rectangle</a>
<a href="#" class="button blue bigrounded">Rounded</a>
<a href="#" class="button blue medium">Medium</a>
<a href="#" class="button blue tiny">Tiny</a>
<a href="#" class="button pink">Rectangle</a>
<a href="#" class="button pink bigrounded">Rounded</a>
<a href="#" class="button pink medium">Medium</a>
<a href="#" class="button pink tiny">Tiny</a>
<a href="#" class="button rose">Rectangle</a>
<a href="#" class="button rose bigrounded">Rounded</a>
<a href="#" class="button rose medium">Medium</a>
<a href="#" class="button rose tiny">Tiny</a>