Actions

Using Class Suffixes

From Joomla! Documentation

Revision as of 21:28, 12 January 2009 by Dextercowley (Talk | contribs)

Quill icon.png
Page Actively Being Edited!

This article is actively undergoing a major edit for a short while.
As a courtesy, please do not edit this page while this message is displayed. The user who added this notice will be listed in the page history. This message is intended to help reduce edit conflicts; please remove it between editing sessions to allow others to edit the page. If this page has not been edited for several hours, please remove this template, or replace it with {{underconstruction}} or {{incomplete}}.

This tutorial will show you how to use Page, Module, and Menu Class Suffixes in Joomla! 1.5 to fine-tune the appearance of your site. For the tutorial, we will assume you have the Joomla! 1.5.9 Sample site available.

Contents

Background

Joomla! creates HTML pages that use Cascading Style Sheets to control the appearance of the page. This includes things like fonts, colors, margins, and background. The CSS files are part of your template.

When Joomla! creates a page, it creates different CSS classes that are then referenced in the CSS file to specify which style will apply to which parts of the HTML page. These class names are pre-programmed into Joomla!. But Joomla! allows you to modify or add CSS classes by way of the Class Suffix parameters. This lets you fine-tune the appearance of specific pages with no programming and very little work. The best way to understand this is to see specific examples.

When Would You Use a Class Suffix?

Say, for example, that your website contains a number of Section Blog layouts, each for a different Section. If you are happy to have all of these pages styled the same way, then you wouldn't need to use a Page Class Suffix. However, say you want each of these sections styled differently than the others. For example, maybe you want a different background color or image for each different section.

If you modify the styling for the standard CSS classes in the Section Layout, it will affect all of the Section Layout Menu Items in the same way. However, using a different Page Class Suffix on each Section Layout Menu Item will allow you to create different CSS classes for each individual Menu Item so you can style these differently.

Page Class Suffix

Before you start, make sure you have the Joomla! sample website available. Also, make sure the default template is set to "rhuk_milkyway" (in the Extensions → Template Manager).

How It Works Without a Page Class Suffix

Before we add a Page Class Suffix, let's see how this pages works without one. In the front end, navigate to Example Pages → Section Blog. In your browser, select the option to view the page source code. For example, in Firefox, press Ctrl+U. In Internet Explorer, select View → Source. In Safari, select View → View Source.

Using the "Find" command, find the first occurrence of the word "componentheading". It should look like the following:

<div class="componentheading">

Browse down the file and find the following tags:

<table class="blog" cellpadding="0" cellspacing="0"> 
<table class="contentpaneopen">
<td class="contentheading" width="100%">
<table class="contentpaneopen">

Note: The following screenshots were made using the free Firefox add-in called "Firebug". Firebug allows you to quickly see the relationship between the HTML elements in your source and the text and graphics shown on the page. It is a very handy tool, and you can get it here.

The screenshot below shows you the "componentheading" class. It is the page title area above the blog article.

Componentheading class firebug.png

This screenshot shows you the entire "blog" class. This is the outer table into which all of the articles will fit.

Blog class firebug.png

The next screenshot shows you the "contentpaneopen" class for an article heading. This includes the article title and the PDF, Print, and Email icons to the right.

Contentpaneopen class title firebug.png

This screenshot shows you the "contentpaneopen" class for the body of the article. This includes the author and date information as well as the actual article text.

Contentpaneopen class article firebug.png

So this gives us a good understanding of how Joomla! allows us to style the elements on a Section Blog layout. Joomla! writes out these classes as part of the HTML. And the template contains CSS that provides the styling information for these various elements and classes.

Page Class Suffix (No Space)

Now that we see how this works without a Page Class Suffix, let's try it with one. In the back end, navigate to Menus → Example Pages and click on "Section Blog". This should display the "Menu Item: [Edit]" screen for the Section Blog Layout. Click Parameters (System) to show the System Parameters. In the "Page Class Suffix" field enter the value "_myBlogSuffix" and click the Save button.

Now, go back to the front end and again navigate to Example Pages → Section Blog. Notice right away that we lost the styling for the page and article titles. Let's look closer to see why.

Using the browser "Find" command, find the first occurrence of "_myBlogSuffix". It is in a "div" tag and looks like this:

<div class="componentheading_myBlogSuffix">

. If you look through the source, you should also see the following classes: blog_myBlogSuffix, contentpaneopen_myBlogSuffix, and contentheading_myBlogSuffix.

By adding the Page Class Suffix, we changed all of these class names. That means that special styling in the CSS file that refers to the "base" class names (like componentheading, blog, and so on) will not be applied, since those classes no longer exist on the page.

Now, you can fix this problem by editing your templates CSS file to add the same styling for the new classes (for example, "componentheading_myBlogSuffix"). But there is a much easier way to do this.


Page Class Suffix (With a Leading Space)

Again in the back end, go back to Menus → Example Pages → Section Blog. We're going to change the value of the Page Class Suffix. This time we're going to enter in a leading space and call it <space> + "myBlogClass".

Now, go back to the front end and re-display the Example Pages → Section Blog. Notice that our styling is back! Let's look at the HTML source to see what is going on. Open the source and find the first occurrence of "myBlogClass". It should like this:

<div class="componentheading myBlogClass">

Because we put a leading space in the Page Class Suffix, we created a second class instead of changing the name of the first class. So we didn't break any of the existing CSS styling for this page (as long as our new class name doesn't conflict with any existing class names).

At this point, we've modified the HTML to allow for some new styling. Now we need to use these new classes to actually style our page.