Typography

The Hyacinth 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.

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 H4 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 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: <div class="alert">....</div>
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: <div class="info">....</div>
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: <div class="note">....</div>
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: <div class="download">....</div>
This is a sample of the 'warn' style. Use this style to denote information containing a warning on your site. To use this use the folllowing html: <div class="warn">....</div>
This is a sample of the 'accept' style. Use this style to denote information that is accepted on your site. To use this use the folllowing html: <div class="accept">....</div>
This is a sample of the 'idea' style. Use this style to denote information containing an idea on your site. To use this use the folllowing html: <div class="idea">....</div>
This is a sample of the 'secure' style. Use this style to denote information that is secure on your site. To use this use the folllowing html: <div class="secure">....</div>
This is a sample of the 'author' style. Use this style to denote information about an author on your site. To use this use the folllowing html: <div class="author">....</div>
This is a sample of the 'mycomment' style. Use this style to denote information of a comment on your site. To use this use the folllowing html: <div class="mycomment">....</div>
This is a sample of the 'time' style. Use this style to denote information containing time on your site. To use this use the folllowing html: <div class="time">....</div>
This is a sample of the 'tools' style. Use this style to denote information containing tools on your site. To use this use the folllowing html: <div class="tools">....</div>

 


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
  1. Cras dignissim
  2. Dolor quis ultrices scelerisque
  3. Lacus lectus euismod orci
  4. A egestas tortor leo vitae leo
  5. Curabitur ante. Sed velit.

Special List Styles
  • To use this style create a list in the following format: <ul class="accent"><li class="bullet1" >....</li><li class="bullet1" >....</li></ul>.
  • To use this style create a list in the following format: <ul class="accent"><li class="bullet2" >....</li><li class="bullet2" >....</li></ul>.
  • To use this style create a list in the following format: <ul class="accent"><li class="bullet3" >....</li><li class="bullet3" >....</li></ul>.
  • To use this style create a list in the following format: <ul class="accent"><li class="bullet4" >....</li><li class="bullet4" >....</li></ul>.
  • To use this style create a list in the following format: <ul class="accent"><li class="bullet5" >....</li><li class="bullet5" >....</li></ul>.
  • To use this style create a list in the following format: <ul class="accent"><li class="bullet6" >....</li><li class="bullet6" >....</li></ul>.
  • To use this style create a list in the following format: <ul class="accent"><li class="bullet7" >....</li><li class="bullet7" >....</li></ul>.
  • To use this style create a list in the following format: <ul class="accent"><li class="accept" >....</li><li class="accept" >....</li></ul>.
  • To use this style create a list in the following format: <ul class="accent"><li class="clock" >....</li><li class="clock" >....</li></ul>.
  • To use this style create a list in the following format: <ul class="accent"><li class="tick" >....</li><li class="tick" >....</li></ul>.
  • To use this style create a list in the following format: <ul class="accent"><li class="golf" >....</li><li class="golf" >....</li></ul>.
  • To use this style create a list in the following format: <ul class="accent"><li class="tennis" >....</li><li class="tennis" >....</li></ul>.
  • To use this style create a list in the following format: <ul class="accent"><li class="color" >....</li><li class="color" >....</li></ul>.
  • To use this style create a list in the following format: <ul class="accent"><li class="cup" >....</li><li class="cup" >....</li></ul>.
  • To use this style create a list in the following format: <ul class="accent"><li class="date" >....</li><li class="date" >....</li></ul>.
  • To use this style create a list in the following format: <ul class="accent"><li class="drink" >....</li><li class="drink" >....</li></ul>.
  • To use this style create a list in the following format: <ul class="accent"><li class="smile" >....</li><li class="smile" >....</li></ul>.
  • To use this style create a list in the following format: <ul class="accent"><li class="exclamation" >....</li><li class="exclamation" >....</li></ul>.
  • To use this style create a list in the following format: <ul class="accent"><li class="heart" >....</li><li class="heart" >....</li></ul>.
  • To use this style create a list in the following format: <ul class="accent"><li class="music" >....</li><li class="music" >....</li></ul>.
  • To use this style create a list in the following format: <ul class="accent"><li class="rainbow" >....</li><li class="rainbow" >....</li></ul>.
  • To use this style create a list in the following format: <ul class="accent"><li class="star" >....</li><li class="star" >....</li></ul>.

Custom Button Styles

To use these styles use the code displayed below:

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