Home arrow About Romsey arrow History
History

The demo for Simplix utilises a large stock of inline styling. This basically means that the HTML used in the custom modules and content have customisations which employ the characteristics of the template to make the "perfect" content.

This demo content section will take you through the general techniques used to further your understand and help you realise Simplix's try potential.

Beautiful Design - Front page Module

Below is the code for the module used on the front page called Beautiful Design. The module uses a left aligned image with right aligned content, with a read more button at the bottom. 
<img border="0" align="left" style="margin-right: 10px; margin-bottom: 1px;" 
alt="image" src="images/front_thumb1.jpg"/>
A subtle, yet powerful layout and design that is perfect for any project.
<br/><a class="readon" 
href="index.php?option=com_content&task=view&id=18&Itemid=35">Learn more...</a>
 

Read More Buttons

Read more buttons are automatically generated for content items that use the intro and main text option. However, you can easily insert them manually as witnessed on this demo. Use the following code: 
<a href="your_link" class="readon">Read More...</a>

Alternating coloured Read More Buttons

On the main tutorials section page, you will observe 2 types of read more buttons, in reference to the colour. This is a built in feature for the module hilites. However, the PNGfix and Demo Content buttons are not part of a module-hilite but still resemble the alternating buttons. In respects to style10, the red read more buttons are what would appear by default. Enact the following change to call another read more button. 
<a href="#" class="readon">Read More...</a>
Above is the standard HTML code for the read more button, we insert extra tags to load a different coloured button: 
<div id="section2">
<a href="#" class="readon">Read More...</a>
</div>