The Template Color Chooser Module

The ColorMatic 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.

Save the image below (colormatic-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;">
<img name="colormaticchooser" src="images/stories/colormatic-chooser.png" 
width="792" height="46" style="border:0;" id="colormaticchooser" usemap="#m_colormaticchooser" 
alt="" /><map name="m_colormaticchooser" id="m_colormaticchooser">
<area shape="rect" coords="742,0,792,46" href="index.php?tstyle=style15" title="Style 15" alt="Style 15" />
<area shape="rect" coords="689,0,739,46" href="index.php?tstyle=style14" title="Style 14" alt="Style 14" />
<area shape="rect" coords="636,0,686,46" href="index.php?tstyle=style13" title="Style 13" alt="Style 13" />
<area shape="rect" coords="583,0,633,46" href="index.php?tstyle=style12" title="Style 12" alt="Style 12" />
<area shape="rect" coords="530,0,580,46" href="index.php?tstyle=style11" title="Style 11" alt="Style 11" />
<area shape="rect" coords="477,0,527,46" href="index.php?tstyle=style10" title="Style 10" alt="Style 10" />
<area shape="rect" coords="424,0,474,46" href="index.php?tstyle=style9" title="Style 9" alt="Style 9" />
<area shape="rect" coords="371,0,421,46" href="index.php?tstyle=style8" title="Style 8" alt="Style 8" />
<area shape="rect" coords="318,0,368,46" href="index.php?tstyle=style7" title="Style 7" alt="Style 7" />
<area shape="rect" coords="265,0,315,46" href="index.php?tstyle=style6" title="Style 6" alt="Style 6" />
<area shape="rect" coords="212,0,262,46" href="index.php?tstyle=style5" title="Style 5" alt="Style 5" />
<area shape="rect" coords="159,0,209,46" href="index.php?tstyle=style4" title="Style 4" alt="Style 4" />
<area shape="rect" coords="106,0,156,46" href="index.php?tstyle=style3" title="Style 3" alt="Style 3" />
<area shape="rect" coords="53,0,103,46" href="index.php?tstyle=style2" title="Style 2" alt="Style 2" />
<area shape="rect" coords="0,0,50,46" href="index.php?tstyle=style1" title="Style 1" alt="Style 1" />
</map>
</div>

Adding a "Read More" Style Link Button

The ColorMatic 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 ColorMatic 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 "Colormatic Key Features" and "15 Color Variations" modules at the top where "15 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 "15 Color Variations" Module

The "15 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">15 Color Variations!</div>
<img src="images/stories/chooser-screenshot.png" alt="screenshot" class="screenshot" width="295" height="240" /> 
<strong>ColorMatic</strong> comes with an unprecedented 15 color variations built-in. 
To check them out for yourself, just click on the <strong> "Open Control Panel"</strong> button 
at the top of the page and click on a thumbnail.


<p>The design is more than just a pretty face, there are many other great features to explore.  Continue reading 
to find out about all the great stuff <b>ColorMatic</b> 
has under the hood.</p>

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