The styles below are used by appending a class to a tag.
This is an image with the class "border_img"
Enter class name to img tag <img class="border_img" />
Default list example
This is a list with the class "linked"
Enter class name to ul tag <ul class="linked" />
This is a list with the class "special"
Enter class name to ul tag <ul class="special" />
This is a read more link with the class "readon"
Enter class name to a tag <a class="readon" />
this is a paragraph with the class "blue"
<p class="blue" > Text goes here</p>
this is a paragraph with the class "green"
<p class="green" > Text goes here</p>
this is a paragraph with the class "red"
<p class="red" > Text goes here</p>
this is a paragraph with the class "yellow"
<p class="yellow" > Text goes here</p>
this is a paragraph with the class "grey"
<p class="grey" > Text goes here</p>
this is a paragraph with the class "bluefill"
<p class="bluefill" > Text goes here</p>
this is a paragraph with the class "greenfill"
<p class="greenfill" > Text goes here</p>
this is a paragraph with the class "redfill"
<p class="redfill" > Text goes here</p>
this is a paragraph with the class "yellowfill"
<p class="yellowfill" > Text goes here</p>
this is a paragraph with the class "greyfill"
<p class="greyfill" > Text goes here</p>
this is a paragraph with the class "quote"
<p class="quote" > Text goes here</p>
This code allows you to display an animated button created with css3:
Note: If you would like to add your own text into the button, just modify the code below or edit an existing button in the custom module of the demo template.
<p><a class="a-button" href="#"> <span>Check flight times</span> <img src="/images/modules/clock.png border="0" alt="Image" /> </a></p>
Available color suffixes for the button:
1) this is an anchor with class "a-button yellow"
2) this is an anchor with class "a-button orange"
3) this is an anchor with class "a-button green"
4) this is an anchor with class "a-button blue"
Available images for the button (just change the path to the image):
1) this is a button with image "clock.png"
2) this is a button with image "bell.png"
3) this is a button with image "plane.png"
4) this is a button with image "signs.png"
5) this is a button with image "entry.png"
For more details on how to use and modify the button code and styles, please visit this site:
http://tympanus.net/codrops/2011/11/07/animated-buttons-with-css3/
This template provides some backend parameters for convenient template management. Navigate Extensions->Template Manager and click on the proper template name to set up template parameters.