The Template Color Chooser Module

The Versatility III demo features a Color Stylechanger module that is published to the header position and appears in the Control Panel drop down tab. This is a custom module and must manually be created for you to use something similar on your own site.

Basically, this module consists of a single image showing all of the available colorstyle thumbnails in a row. There is an image map that designates the links for each of the colorstyles within the image. You can create a duplicate of this module by following the directions below.

Click on the image below to view the full size version, save the image to your computer (color_chooser.png) and place it into your images/stories folder. Create a new module and paste the code below in the Custom Output section. Publish the module to the header module position, set Show Title to No, and Save.

<div style="text-align:center;margin:10px 0 0 -50px;">
<img name="color_chooser" src="images/stories/color_chooser.png" width="942" height="44" border="0" 
id="color_chooser" usemap="#m_color_chooser" alt="" /><map name="m_color_chooser" id="m_color_chooser">
<area shape="poly" coords="895,1,940,1,940,42,895,42,895,1" href="index.php?tstyle=style20" alt="Style 20" />
<area shape="poly" coords="848,1,893,1,893,42,848,42,848,1" href="index.php?tstyle=style19" alt="Style 19" />
<area shape="poly" coords="801,1,846,1,846,42,801,42,801,1" href="index.php?tstyle=style18" alt="Style 18" />
<area shape="poly" coords="754,1,799,1,799,42,754,42,754,1" href="index.php?tstyle=style17" alt="Style 17" />
<area shape="poly" coords="707,1,752,1,752,42,707,42,707,1" href="index.php?tstyle=style16" alt="Style 16" />
<area shape="poly" coords="660,1,705,1,705,42,660,42,660,1" href="index.php?tstyle=style15" alt="Style 15" />
<area shape="poly" coords="613,1,658,1,658,42,613,42,613,1" href="index.php?tstyle=style14" alt="Style 14" />
<area shape="poly" coords="566,1,611,1,611,42,566,42,566,1" href="index.php?tstyle=style13" alt="Style 13" />
<area shape="poly" coords="519,1,564,1,564,42,519,42,519,1" href="index.php?tstyle=style12" alt="Style 12" />
<area shape="poly" coords="472,1,517,1,517,42,472,42,472,1" href="index.php?tstyle=style11" alt="Style 11" />
<area shape="poly" coords="425,1,470,1,470,42,425,42,425,1" href="index.php?tstyle=style10" alt="Style 10" />
<area shape="poly" coords="378,1,423,1,423,42,378,42,378,1" href="index.php?tstyle=style9" alt="Style 9" />
<area shape="poly" coords="331,1,376,1,376,42,331,42,331,1" href="index.php?tstyle=style8" alt="Style 8" />
<area shape="poly" coords="284,1,329,1,329,42,284,42,284,1" href="index.php?tstyle=style7" alt="Style 7" />
<area shape="poly" coords="237,1,282,1,282,42,237,42,237,1" href="index.php?tstyle=style6" alt="Style 6" />
<area shape="poly" coords="190,1,235,1,235,42,190,42,190,1" href="index.php?tstyle=style5" alt="Style 5" />
<area shape="poly" coords="143,1,188,1,188,42,143,42,143,1" href="index.php?tstyle=style4" alt="Style 4" />
<area shape="poly" coords="96,1,141,1,141,42,96,42,96,1" href="index.php?tstyle=style3" alt="Style 3" />
<area shape="poly" coords="49,1,94,1,94,42,49,42,49,1" href="index.php?tstyle=style2" alt="Style 2" />
<area shape="poly" coords="2,1,47,1,47,42,2,42,2,1" href="index.php?tstyle=style1" alt="Style 1" />
</map>
</div>

Adding a "Read More" Style Link Button

The Versatility III template includes custom styling to allow you to turn any link into a "Read More" style button. There are different button colors based on the section they are in, and provide a nice touch to your modules and content items.

To enable this type of styling on your links, follow the directions below:

Inside the custom output section of your content item or custom module, structure the link you wish have display in the "Read More" styling by using the following syntax: (You can use any text you wish for the link button, in the example we are using "Read More...")

<a href="www.yourlink.com" class="readon">Read More..</a>

Custom Module Widths

The Versatility III module positions in the different panels are designed to use an equal width in that each module is the same width as the others in the same panel. However, in the demo frontpage you will notice that certain modules appear wider than others, particularly the "Versatility III Key Features" and "20 Color Variations" modules at the top where "20 Color Variations" is much wider including a large graphic.

You can set your own custom widths for each of your modules so that you can acheive the same effect by wrapping your module content in a <div> with a specified width. The following is an example of the format you would use.

<div style="width:530px">
Your module content items
</div>

The "20 Color Variations" Module

The "20 Color Variations" module on the front page of the demo is a custom module published to the User 1 position and consists of text with a right aligned 32 bit tranparent png image and a "Read More" style link button.

You can create a new custom module exactly like this one from your Admin Control Panel by going to Modules > Site Modules and selecting the "New" button in the top right corner. In the Custom Output section of the Edit Module page, enter the following example code:

<div style="width:530px">
<div class="contentheading">20 Color Variations!</div>
<img src="images/stories/screen_cards.png" alt="screenshot" class="screenshot" style="margin-top:-45px" 
width="295" height="240" /> <strong>Versatility III</strong> takes it to the next level with an 
amazing 20 color variations built-in. To see them for yourself, just click on the <strong> 
"Open Control Panel"</strong> button at the top of the page and click on a thumbnail.


<p>Continue reading to learn about the other great features Versatility III has under the hood.
</p>

<a href="index.php?option=com_content&task=view&id=21&Itemid=42" class="readon">Read more...</a>
</div>