Wright Framework Powered

Sed ac est eu nisi venenatis semper. Nulla mollis tristique risus id consectetur. Fusce ac tortor orci. Donec a enim felis, ultricies vestibulum orci. Suspendisse libero magna, suscipit in scelerisque in, accumsan eu augue. Vivamus mattis hendrerit orci id pretium.

Joomla 2.5 ready

Cras dictum condimentum nibh, id vehicula libero tristique nec. Aenean euismod placerat sem, eget varius sem interdum ut. Etiam ultricies ligula in lectus lobortis accumsan. Sed tellus augue, facilisis eu pharetra id, vehicula nec dolor. Sed in augue at nunc sagittis semper.

Easy to Install

Duis fringilla tellus quis purus consequat sagittis. Vestibulum cursus congue nunc in feugiat. Curabitur sollicitudin rhoncus eros, ut faucibus tortor commodo ac. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis eu velit libero, quis consequat odio.

Typography

The Halcyon 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>










Contact

Have a question?

We may have answered it already. Head to our Joomlashack’s Support Center! You can search our knowledge base articles, browse public issues in the discussion area, or create a new ticket if you can't find an answer to your question.