With every JoomlaJunkie template you can use this style guide to help you create dynamic and eye catching content within your Joomla site.

Have you ever wondered how some of these big Joomla sites pack all sorts of fancy graphics and check-marks and stars into their content pages? Well it is easier then you might think. This article will show you the in and outs of some of the additional features we pack into our site.

Lets start 

The first thing to do is become comfortable with not using your WYSIWYG editor .  You can still keep it enabled, but press the little HTML button in it.  You will be presented with a blank window.  Don't let it scare you, it's your best friend.   :)

This is where you will be entering all the special code to make things work.  If you try to enter the codes below in your WYSIWYG window it will not work and you will have a mess.

Lets get our hands dirty now. 

Make important text pop.

Lets start by showing you how to add a block of color around some text. Maybe you have something that is important for the reader to notice, so you want to make sure it stands out. This type of effect is called a paragraph class. The next box is a example of a paragraph class.

<p class="tip> This is the code you insert into your article to highlight it. </p>

You will need to insert this code manually. Most WYSIWYG tools do not have the ability to add this. Even if they did, it is important that you understand how XHTML works and why you need to use the built in editors as little as possible. So, go into raw HTML mode by pressing the HTML button and viewing the popup. Here in the popup you will insert the paragraph class code in the highlighted box above.

Here at JoomlaJunkie we offer lots of options to show off your content. Here are all eight of them.

<p class="color-green"> This is the code you insert into your article to highlight it green. </p>

<p class="color-blue"> This is the code you insert into your article to highlight it blue. </p>

<p class="color-orange"> This is the code you insert into your article to highlight it orange. </p>

<p class="color-pink"> This is the code you insert into your article to highlight it pink. </p>

<p class="color-grey"> This is the code you insert into your article to highlight it grey. </p>

<p class="error"> This is the code you insert into your article to highlight it error. </p>

<p class="tips"> This is the code you insert into your article to highlight it as a tip. </p>

<p class="info"> This is the code you insert into your article to highlight it as information. </p>

Good looking tables.

You can add a plain old table, but why make it boring when you can style it up? Use this code to make a fancy table.

<table border="0" cellspacing="0" cellpadding="0" width="100%"><tbody><tr><th class="sectiontableheader">Section Table Header</th></tr> <tr><td>class="sectiontableentry1">This is the Section Table Entry 1</td> </tr> <tr> <td class="sectiontableentry2">This is the Section Table Entry 2</td> </tr> <tr> <td class="sectiontableentry1">This is the Section Table Entry 1</td> </tr> <tr> <td class="sectiontableentry2">This is the Section Table Entry 2</td> </tr> </tbody> </table>

Shout it out.

Blockquotes are great. These are really easy to use and really make a article pop. They are great for making a bold statement, or for really showcasing some really important quote or text.

This is a blockqoute. Use <blockquote> With your text inside here. </blockquote>

Great looking lists.

Have you ever seen a list with cool little stars and checkmarks next to them? It is not as hard as you might think. When you learn the basics of html it all gets easier. Simply use this code to make fancy lists.

<ul class="li-round1"> ><li>Morbi commodo, ipsum sed</li> <li>Lorem ipsum dolor sit amet</li> <li>Phasellus turpis ante</li> <li>Orci magna rhoncus neque</li> </ul>

Make your introductory words big and still use clean code doing it.

In your HTML window simply add <h2> these h tags to the text you want highlighted</h2>

<h1>This is Heading One </h1>

This is a normal paragraph. We put it here as a reference so you can compare normal text to the heading text.

<h2>This is Heading Two </h2>

This is a normal paragraph. We put it here as a reference so you can compare normal text to the heading text.

<h3>This is Heading Three </h3>

This is a normal paragraph. We put it here as a reference so you can compare normal text to the heading text.

<h4>This is Heading Four </h4>

This is a normal paragraph. We put it here as a reference so you can compare normal text to the heading text.

<h5>This is Heading Five </h5>

This is a normal paragraph. We put it here as a reference so you can compare normal text to the heading text.

<h6>This is Heading Six. </h6>