Skip to main content

Joomla tutorials for beginners

How to add a page class suffix in Joomla?

From this article you will find out how to use a Joomla page class suffix. This is a really useful feature to get a different look of the component area.

How to find a Joomla page class suffix name?

Usually in Joomla-Monster templates the page class suffix name ends with "-ps". In JM Portfolio template we use "contact-ps" page class to change the default view of the "Single Contact" view. This is how we present the page class suffix in the article:

How to add a page class suffix?

How to use page class suffix it?

Take a look on the default "Single Contact" page on JM Portfolio template:

How to add a page class suffix?

Now we will add the page class suffix to change the component view. In the back-end of your site go to:

Menus -> [menu name] -> [menu item]

In our example it is "Main Menu" menu:

How to add a page class suffix?

And "Contact" menu item:

How to add a page class suffix?

This is how the edit page of menu item looks like:

Joomla Page Class Suffix

  1. Go to the "Page Display" tab
  2. Page Class - type the suffix name here. Important! Add a blank space before the suffix name.
  3. Click on "Save & Close"

After applying the page class suffix, the "Single Contact" view looks as follows:

How to add a page class suffix?

Can I use multiple Joomla page class suffixes for a single page?

Of course. Remember to separate the suffixes by a blank space.

Where can I find a list of page class suffixes for my template?

On each demosite we publish an article about module class suffixes. If the template brings any page class suffix we include them to the same article. You can find it in main menu:

Features -> Module Suffixes

Let's take a look on JM Portfolio example:

How to add a page class suffix?

This is how the article looks like:

Module Suffixes in JM Portfolio template