Joomla! 1.5 Template Reference: Part 2

Exclusive offer: get 50% off this eBook here
Joomla! 1.5 Template Design

Joomla! 1.5 Template Design — Save 50%

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

$26.99    $13.50
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: $26.99
Book Price: $44.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: $26.99
Book Price: $44.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.

Books From Packt

Drupal 6 Content Administration
Drupal 6 Content Administration

Choosing an Open Source CMS: Beginner's Guide
Choosing an Open Source CMS: Beginner's Guide

Joomla! E-Commerce with VirtueMart
Joomla! E-Commerce with VirtueMart

Plone 3 Theming
Plone 3 Theming

MODx Web Development
MODx Web Development

Magento: Beginner's Guide
Magento: Beginner's Guide

jQuery UI 1.6: The User Interface Library for jQuery
jQuery UI 1.6: The User Interface Library for jQuery

WordPress 2.7 Cookbook
WordPress 2.7 Cookbook

 

 

No votes yet

Post new comment

CAPTCHA
This question is for testing whether you are a human visitor and to prevent automated spam submissions.
9
4
x
3
T
s
Enter the code without spaces and pay attention to upper/lower case.
Code Download and Errata
Packt Anytime, Anywhere
Register Books
Print Upgrades
eBook Downloads
Video Support
Contact Us
Awards Voting Nominations Previous Winners
Judges Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software
Resources
Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software