Theme Joomla Color Fusion has a large selection of built in module and content styles. The content styles (Typography and style guide) below are for you to use with your content for your site - for example if you use tables in your site, then you can use the built in template content style for tables shown below so that the tables fit in to the theme of Theme Joomla Color Fusion.

The various module styles (module suffixes and positions) can be seen around the content styles on this page and are controlled by adding the relative suffix as displayed on this page to your module. All the Theme Joomla Template styles on this page are controled via pure CSS and XHTML, giving your site a good layout with minimal load time.

Content Styles

This is for a sample color note style. To style use < p class="style_one" > in your paragraph tag, and the paragraph will style as shown here. You can set these color styles in the selected color CSS file.

This is for a sample color note style. To style use < p class="style_two" > in your paragraph tag, and the paragraph will style as shown here. You can set these color styles in the selected color CSS file.

This is for a sample color note style. To style use < p class="style_three" > in your paragraph tag, and the paragraph will style as shown here. You can set these color styles in the selected color CSS file.

This is for a sample color note style. To style use < p class="style_four" > in your paragraph tag, and the paragraph will style as shown here. You can set these color styles in the selected color CSS file.

This is for a sample color note style. To style use < p class="style_five" > in your paragraph tag, and the paragraph will style as shown here. You can set these color styles in the selected color CSS file.

this is a paragraph with the class "error" applied as follows: < p class="error" >

this is a paragraph with the class "notice" applied as follows: < p class="notice" >

this is a paragraph with the class "color" applied as follows: < p class="color" >

here is some code, to show how a <pre> tag will stytle. {
margin: 0;
padding: 0;
background-image: url(../images/bg.png);
background-repeat: repeat-x;
background-color: #3A3A3A;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 13px;
height: 100%;
color: #E0E0E0;
}

This is a blockqoute - Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam congue posuere enim. Phasellus turpis ante, tempus non, facilisis eget, bibendum id, eros.

This is Heading One (h1)

This is a normal paragraph - Aliquam aliquet,e st a ullamcorper condimentum, tellus nulla fringilla elit, a iaculis nulla turpis sed wisi. Fusce volupat. Etiam sodales ante id nunc. Proin ornare dignissim lacus. Nunc porttitor nunc a sem.

This is Heading Two (h2)

This is a normal paragraph - Aliquam aliquet,e st a ullamcorper condimentum, tellus nulla fringilla elit, a iaculis nulla turpis sed wisi. Fusce volupat. Etiam sodales ante id nunc. Proin ornare dignissim lacus. Nunc porttitor nunc a sem.

This is Heading Three (h3)

This is a normal paragraph - Aliquam aliquet,e st a ullamcorper condimentum, tellus nulla fringilla elit, a iaculis nulla turpis sed wisi. Fusce volupat. Etiam sodales ante id nunc. Proin ornare dignissim lacus. Nunc porttitor nunc a sem.

This is Heading Four (h4)

This is a normal paragraph - Aliquam aliquet,e st a ullamcorper condimentum, tellus nulla fringilla elit, a iaculis nulla turpis sed wisi. Fusce volupat. Etiam sodales ante id nunc. Proin ornare dignissim lacus. Nunc porttitor nunc a sem.

This is Heading Five (h5)

This is a normal paragraph - Aliquam aliquet,e st a ullamcorper condimentum, tellus nulla fringilla elit, a iaculis nulla turpis sed wisi. Fusce volupat. Etiam sodales ante id nunc. Proin ornare dignissim lacus. Nunc porttitor nunc a sem.

This is Heading Six (h6)

This is a highlight phrase.