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">
  <tr>
    <td valign="top" >Joomla! 1.5 - 'Experience the Freedom'!....</td>
  </tr>
  <tr>
    <td valign="top" ></td>
  </tr>
</table>

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 🙂

Advertisements

Author: prescienta

Prescientas ruler

Leave a Reply

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

WordPress.com Logo

You are commenting using your WordPress.com 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