Taking Joomla’s page suffix feature to new heights
This blog post is written in relation to this previous blog post: “Rational Magic and new menu system”
The
page suffix feature in Joomla! is one that is often under-utilized. The idea behind page suffix is to give you additional control over an individual page of your website. An example of this could be setting a custom background image on a specific page. The way the
default Joomla page suffix is setup, this wouldn’t actually be possible, but the theory is there ;0)
Problems with default page suffix in Joomla
The problem with the way the default page suffix is setup in Joomla is that when you add a
custom page suffix for a page, some of the elements on that page get messed up (i.e. the content heading and what not). The other problem is that, in order to really take advantage of this, the page suffix actually needs to be set on a much higher element on the page, i.e. as a class on the body element.
The reason why the page suffix doesn’t quite work as expected is because there is no space between the
.contentheading class and the custom suffix, so you end up with a class
.contentheadingmy-custom-page-suffix and since the template only makes provision for
.contentheading, you loose the usual styling.
Simple solution: Joomla 1.5 template override
The above problems can easily be remedied by taking advantage of
Joomla! 1.5 template overrides and adding a space in between. This would then give us 2 different classes:
.contentheading and
.mypagesuffix, which means the heading will keep its original styling, but we now have further control over how it is displayed.
BEFORE
get('pageclass_sfx')?>>
How to take Joomla’s page suffix feature to the next level
Now that is all well and good and already an improvement, but we at JoomlaJunkie don’t like to do anything half baked, so we decided to incorporate the
page suffix as an optional class on the body tag, giving you complete control over every element of the page.
FOR EXAMPLE:
- Set a page suffix on your site’s services page via your menu item – lets be creative and call it “services”.
- Now, if you go to that page on the frontend of your site, you will notice you body tag now looks like this:
which means that you can target any element on the page using css specificity (see below).
If you want to change the background on the page, you would simple add the following to your css:
body.services {
background: #fff url(../images/my-custom-services-bg.jpg) no-repeat bottom left;
}
What can you apply this to?
This concept applies to pretty much everything that exists within the page body. You could override the way your menu looks, your read more buttons, general typography, etc etc. The sky and your own creative imagination is the limit ;0)
Right now, there is a lot to be excited about if you are a JoomlaJunkie club member! If you are not yet a club member, then there’s something special for you too: We are currently having a festive season special so join the joomlajunkie club now and get yourself a personal, business or developer membership for less. Existing club members will be pleased to know that this month we are also having a 25% discount on all renewals. This won’t be repeated soon, so go ahead and take full advantage of the reduced rates. (Valid until 31 December 2008)
Tags: css, Joomla, useful tips
