Front Page Banner Image

The Banner on the front page content is generated through a mixture of HTML and CSS. Below is the HTML code.

<div id="promo" />

This is controlled by the following CSS reference.

#promo {
background: url(../images/style9/firenzie_promo.jpg) no-repeat;
height:194px;
margin-bottom:-20px;
width:600px;
}

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>

Subtle bordered modules

You will observe in the demo that the majority of modules in the white sections had subtle grey borders surrounding them. This is done through custom HTML code. It is a great technique if you have lots of different sections in the white area that are referring to various subjects, such as this demo.

The following outlines the processes we used:

In this demo, we chose to use faux moduling. This means that we "faked" the module positions available to speed up the process but creates the same output. For this, we have our module , example: Example Page Top Tier. This top tier module will take on the characteristics of using the modules from user2-5, if you are using Layout A. This is created in Admin > Modules > Site Modules > New. Also referred to as a custom module.

There is a white box at the bottom in which we insert the following:

<div style="border:1px solid #eee;">
<h3>Module Header</h3>
Your module content would go here.
</div>

This is the basic HTML output of a module in Joomla, we are just using our manual way. style="border:1px solid #eee;" is what produces the thin grey border around our faux module. The extra code between the <div>...</div> is just our content.