Did you come here from joomlajunkie.com? This is our new home and we are in the process of moving so some links on joomlajunkie are already redirecting to here.

hide forever

Welcome to Prothemer - the new home for JoomlaJunkie.com

only the blog for now but there is much more coming soon...

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:

  1. Set a page suffix on your site’s services page via your menu item – lets be creative and call it “services”.
  2. 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)



  • Say hello to the Joomla module class suffix builder – modFX

    This blog post is written by ModFX developer Zahir. Easy styling for your template modules! When I first heard about the ingenious feature in......

  • Joomla template update: Rational Magic and new menu system

    I am pleased to say that the latest version of Rational Magic (Joomla 1.5 template) is now available in the club. If you purchased......

  • How to fix xhtml and css validation errors in Virtuemart

    In case you don’t already know, Virtuemart is an online shopping cart extension for Joomla! and is often listed as one of the most......

  • Tags: , ,

    No Responses to "Taking Joomla’s page suffix feature to new heights"

    Leave a Comment |  RSS feed for comments on this post. |  TrackBack URL

    Leave a Reply

    CommentLuv Enabled