Joomla! 1.5 Template Reference: Part 2

Share this page via Facebook, Twitter or LinkedIn.

Your message has been sent.

How would you like to send this article:

Save this article to your account for easy access.

by Tessa Blakeley Silver | July 2009 | Joomla! Content Management Open Source

Read Part One of Joomla! 1.5 Template Reference here.

Common Joomla! CSS

As you can see, via template overrides, you can pretty much define any CSS ids or classes you want. For those of you who are into creating and tweaking template overrides, unless you're going to create a highly custom, private, not-for-the-public template, my recommendation is you continue to use Joomla's general CSS ids and classes for component and module output as much as possible.

This is a good way to ensure your template is familiar to other Joomla! administrators, especially if you want to offer your template to the public or for commercial sale. It's easy for them to look up and customize CSS rules rather than forcing them to discover all the new and interestingly-named CSS ids and classes you created. For those of us working with Joomla's core output or the Beez template overrides (which attempts to use Joomla's standard CSS), here is a list of some of the most common CSS ids and classes. Those of you familiar with Joomla! 1.0 template design will be pleased to find these haven't really changed.

This list has been put together after a bit of research and a lot of experimentation with the Web Developer Toolbar CSS tools. It is probably not complete, but if you account for these items in your CSS rules, you'll be pretty well covered for most Joomla! projects, and it will be easy to spot any ids or classes not covered here and add them to your CSS sheet.

The Joomla.org forum has a post with a fairly comprehensive list, most of which you'll recognize here, so it's definitely worth checking out: http://forum.joomla.org/viewtopic.php?t=125508.

Joomla! 1.5 CSS ids

#active_menu	This is generated by the type="modules" include. Use it to style and control the currently selected main menu item.
#blockrandom	This is generated by the type="component" include when you're using the wrapper. This is the iFrame's id.
#contact_email_copy	This is generated by the type="component" include when you're in the contact form page view. This is a field name id.
#contact_text	This is generated by the type="component" include when you're in the contact form page view. This is a field name id.
#emailForm	This is generated by the type="component" include when you're in the contact form page view. This is a field name id.
#mainlevel	This is generated by the type="modules" include. Use it to style and control the main menu div holding each main menu item.
#mod_login_password	This is generated by the type="modules" include. This is a field name id.
#mod_login_remember	This is generated by the type="modules" include. This is a field name id.
#mod_login_username	This is generated by the type="modules" include. This is a field name id.
#poll	This is generated by the type="modules" include by the poll module. You can control the placement of the entire id with this.
#search_ordering	This is generated by the type="component" include when you're in the search form page view. This is a field name id.
#search_searchword	This is generated by the type="component" include when you're in the search form page view. This is a field name id.
#searchphraseall	This is generated by the type="component" include when you're in the search form page view. This is a field name id.
#searchphraseany	This is generated by the type="component" include when you're in the search form page view. This is a field name id.
#searchphraseexact	This is generated by the type="component" include when you're in the search form page view. This is a field name id.
#voteid1,#voteid2,#voteid3, and so on	This is generated by the type="modules" include. This is generated by the poll module and are field name ids for the radio buttons.

Joomla! 1.5 Template Design

Create your own professional-quality templates with this fast, friendly guide

Published: June 2009
eBook Price: £16.99
Book Price: £27.99
See more

Select your format and quantity:

Joomla! 1.5 CSS classes

.article_separator	This is generated by the type="component" include. You can style the space/separations between articles in the blog or news flash views.
.back_button	This is generated by the type="component" include code. It's used to style the main back button, which is similar to hitting the back button in your browser.
.blog	This is generated by the type="component" include if you're in blog view.
.blog_more	This is generated by the type="component" include if you're in blog view. It indicates there are more blog stories in the links below.
.blogsection	This is generated by the type="component" include if you're in blog view. It formats additional blog links.
.button	This is generated by the type="modules" include. Use it to consistently style and control buttons generated by any of the modules.
.buttonheading	This is generated by the type="component" include if you're in blog view. Use this to control the layout and style of the PDF, email, and print controls.
.category	This is generated by the type="component" include code if you're in blog view. Use it to control the layout and style of links to categories such as "Latest News" or "Popular" or "Most Read".
.componentheading	This is generated by the type="component" include if you're in latest news or blog view.
.contact_email	This is generated by the type="component" include code when you're in the contact form page view. Use it to control the overall placement and style of all the contact form elements.
.content_rating	This is generated by the type="component" include as well as the type="modules" include. Style the ratings output of the content that has been voted on.
.content_vote	This is generated by the type="component" include as well as the type="modules" include. Style the link or button that allows the user to vote on the content.
.contentdescription	This is generated by the type="component" include as well as the type="modules" include. Style the descriptions of the content that can be voted on.
.contentheading	This is generated by the type="component" include. Use it to style the titles of articles and headings.
.contentpaneopen	This is generated by the type="component" include as well as the type="modules" include. It indicates the start of the content.
.contenttoc	This is generated by the type="component" include code. Use it to style the TOC listings some content may generate.
.createdate	This is generated by the type="component" include as well as the type="modules" include. It controls the style of the displayed creation date of an article or a blog entry.
.fase4rdf	This is generated by the type="component" include It's part of a great type of dynamic formatting class offered and lets you style the news RSS feeds you can set up through Joomla.
.frontpageheader	This is generated by the type="component" include If you're using the home page module, style the front page headers with this class.

.inputbox	This is generated by the type="component" include as well as the type="modules" include. Use this to consistently style and control all form fields generated by the mosMainBody or a module.
.latestnews	This is generated by the type="modules" code. The class is wrapped around a list of latest news links, which you can control with additional rule calls; that is, .latestnews td or .latestnews li, depending on the output options you've chosen.
.mainlevel	This is generated by the type="modules" include. It lets you style and control main menu items displayed in the #mainlevel id.
.modifydate	This is generated by the type="component" include. It accompanies date information if an article has been modified.
.module	This class is generated by the type="modules" include when using the "rounded" style option.
.moduletable	This class is generated by the type="modules" include when using the table, horiz, none, or xhtml style options.
.mosimage	This is generated by the type="component" include. Use it to control and style images placed with articles.
.mosimage_caption	This is generated by the type="component" include. Use it to control and style image captions placed with articles.
.mostread	This is generated by the type="modules" code. It is similar to .latestnews. The class is wrapped around a list of latest news links, which you can control with additional rule calls; that is, .latestnews td or .latestnews li, depending on the output options you've chosen.
.newsfeed	This is generated by the type="component" include in the News Feeds view. Use it to control and style the overall news feed display.
.newsfeeddate	This is generated by the type="component" include in the News Feeds view. Use it to control and style the news feed displayed dates.
.newsfeedheading	This is generated by the type="component" include in the News Feeds view. Use it to control and style the news feed headers.
.pagenav	This is generated by the type="component" include. Use it to control and style the overall placement of next and previous page navigation.
.pagenav_next	This is generated by the type="component" include. Use it to control and style the next page button.
.pagenav_prev	This is generated by the type="component" include. Use it to control and style the previous page button.
.pagenavbar	This is generated by the type="component" include. Use it to control and style the overall placement of next and previous page navigation.
.pagenavcounter	This is generated by the type="component" include. Use it to control and style the overall placement of the page counter under the navigation.
.pathway	This class is generated by the mospathway(); include.
.polls	This is generated by the type="modules" include. This is generated by the poll module, and you can use it to set alternating backgrounds for your poll-select items.

.pollsborder	This is generated by the type="modules" include. This is generated by the poll module, and you can use it to style the outside border of the module. Not to be confused with the .pollstableborder class!
.pollstableborder	This is generated by the type="modules" include. This is generated by the poll module, and you can use it to style the border of the table generated by the module.
.readon	This is generated by the type="component" include as well as the type="modules" include. Use this to consistently style and control all the "Read More" links for truncated news, news flashes, and blog items.
.search	This is generated by the type="modules" include. This is generated by the search module, and you can use it to control and style the main search field.
.sectionentry1	This is generated by the type="modules" include. This is generated by the poll module, and you can use it to set alternating backgrounds for your poll-select items.
.sectionentry2	This is generated by the type="modules" include. This is generated by the poll module, and you can use it to set alternating backgrounds for your poll-select items.
.sectionheader	This is generated by the type="component" include as well as the type="modules" include. You can use it to control section header titles displayed by modules and content.
.small	This is generated by the type="component" include as well as the type="modules" include. It's used to denote author names and other data related to an article or blog post.
.smalldark	This is generated by the type="component" include as well as the type="modules" include.
.sublevel	This is generated by the type="component" include as well as the type="modules" include. It's also used to denote sub items of navigation.
.syndicate	This is generated by the type="modules" include. Use this to style the syndicate button layout or borders of your syndicate module.
.syndicate_text	This is generated by the type="modules" include. Use this to style the syndicate layout if you're using text instead of buttons.
.text_area	This is generated by the type="component" include. Use it to control and style the text areas of forms much like the .inputbox class.

Joomla! 1.0 to 1.5 conversion

The fact that Joomla! has left its core CSS ids and classes alone is a great aid in helping you update 1.0 templates to 1.5. Once you've changed your legacy mos... tags to the new, appropriate jdoc include tags, you should find that your CSS is able to style just fine. Of course, if you went from a table-based layout to a table-less layout with overrides, you'll need to tweak your CSS to affect divs with those same CSS rules instead of tables, which can be a little different, but the general bulk of the work shouldn't be too bad.

Template parameters

Joomla! 1.5 allows you to pass parameters from the Administration panel to your template, giving your Joomla! administrator additional control over the template in some very useful ways. For your reference, the essentials you need to know are covered in the next few sections.

Define a parameter in the templateDetails.xml file

You'll want to place your parameter definitions within <param> tags inside the <params>...</params> tags at the bottom of the templateDetails.xml file before the closing </install> tag. For example:

<install>
...
<params>
  <param name="logoType" type="list" default="image" label="Logo
				type" description="Type of Logo">
   <option value="graphicHead">Graphic</option>
   <option value="textHead">Text</option>
  </param>
  <param name="logoText" type="text" default="" size="50"
	label="Logo text" description="Your Logo Text" />
  <param name="sloganText" type="text" default="" size="50"
	label="Slogan" description="Your Slogan Text" />
</params>
...
</install>

Retrieve a parameter in the template file

Most importantly, you'll need to create a params.ini file and make sure it is writeable (Joomla! will install your template, and if this file is included in your templateDetails.xml file, install it to be writable, if the server allows.) The params.ini file is key, as that's where the results will be stored for later retrieval by the template.

To retrieve a parameter within your index.php page, place the following code were you'd like the parameter to be displayed or referenced by PHP code.

<?php $myParam = $this->params->get( 'parameterName' ); ?>

The parameterName will be whatever you specify it to be in your templateDetails. xml file. So, based on my sample code above, the parameter name can be logoType, logoText, or sloganText.

Useful standard parameter types

Here are the most useful types that can be used in a template:

text:

<param name="parameterName" type="text" default="Some text"
label="Enter some text" description="" size="10" />

textarea:

<param name="parameterName" type="textarea" default="default"
label="Enter some text" description="" rows="10" cols="5" />

list:

<param name="parameterName" type="list" default="" label="Select
					an item" description="">
  <option value="item1">Item 1</option>
  <option value="item2">Item 2</option>
</param>

radio buttons:

<param name="parameterName" type="radio" default="0" label="Select
					an option" description="">
  <option value="0">1</option>
  <option value="1">2</option>
</param>

hidden variable:

<param name="parameterName" type="hidden" default="" />

calendar display:

<param name="parameterName" type="calendar" default="5-30-2009" 
label="Select your birth date!" description="" format="%d-%m-%Y" />

Joomla's documentation site has a great tutorial on template parameters, which includes a full list of standard parameter types and how to implement them: http://docs.joomla.org/Tutorial:Template_parameters.

Summary

We've taken a look at the essentials you'll need most to constantly look up, from jdoc include tags and standard CSS output, to overrides, chrome, and template parameters. We've also seen key points to be noted for all you template developers upgrading 1.0 templates to 1.5.

Joomla! 1.5 Template Design

Create your own professional-quality templates with this fast, friendly guide

Published: June 2009
eBook Price: £16.99
Book Price: £27.99
See more

Select your format and quantity:

About the Author :

Tessa Blakeley Silver

Tessa Blakeley Silver's background is in print design and traditional illustration. She evolved over the years into web and multi-media development, where she focuses on usability and interface design. Prior to starting her consulting and development company hyper3media (pronounced hyper-cube media) http://hyper3media.com, Tessa was the VP of Interactive Technologies at eHigherEducation, an online learning and technology company developing compelling multimedia simulations, interactions, and games that met online educational requirements like 508, AICC, and SCORM. She has also worked as a consultant and freelancer for J. Walter Thompson and The Diamond Trading Company (formerly known as DeBeers) and was a Design Specialist and Senior Associate for PricewaterhouseCoopers' East Region Marketing department. Tessa authors several design and web technology blogs. Joomla! Template Design is her first book.