Joomla Theme pt. 3

The layout of a Joomla theme is really more about CSS than anything else. An example is menus – they are usually a bunch of <ul>’s, so to make them look cool you need to know how to change the layout of a <ul> (there are hundreds of CSS tutorials around the net). Other modules are dumped as a <table>; an example could be the newsflash module.

In my setup, the newsflash module is linked to the top position. So to draw the newsflash, the php will contain something like this

<jdoc:include type=”modules” name=”top” />

this will result in this output

<table class="contentpaneopen">
    <td valign="top" >Joomla! 1.5 - 'Experience the Freedom'!....</td>
    <td valign="top" ></td>

It would seem logical that we just create some CSS for table.contentpaneopen – however – ALL the tables are of this class, and obviously, we need the newsflash to look completely different. The solution is to wrap the top position in a <div>

<div id=”newsflash”><jdoc:include type=”modules” name=”top” /></div>

in the CSS, we can then address the newsflash with this selector

div#newsflash table.contentpaneopen
background: fuchsia;

the individual <td>’s are addressed like so

div#newsflash table.contentpaneopen td
background: #456;

This was a pretty brief intro to the Joomla way of thinking. Now go play 🙂


Author: prescienta

Prescientas ruler

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s