How to Joomla” series I will explain how to use page class suffix in Joomla.

Joomla! creates HTML pages that use Cascading Style Sheets to control the appearance of the page. This includes things like fonts, colours, 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.

Where can I find page class suffix parameter?

Page Class Suffix is a parameter in Joomla! content Menu Items configuration. In order to find and use it you have to:

1. Edit the menu item configuration by clicking on menu item title in the menu manager.

Where do I see this page class suffix on the frontend of the website?

In the templates from Joomlabamboo (and usually other template clubs and templates), the page class suffix is added to the body tag. In some cases you can also find this page class suffix added to the module chrome output or in othe rmarkup generated by Joomla, however in general you only need to attach it to the body tag to be able to make use of it in your css.

For example, on the previous screenshot you can see that I defined the “test_class” page class suffix for the Home page menu item.

If you check website source code using Chrome developer tools for example, you can see that this page class suffix has been added to the body tag among the other classes that the template I am using. Most of the Joomlabamboo T3 templates will append these helpful hooks to the body class which allow you to target specific pages, categories or views on your site.

How can I use this page class suffix?

In this example I am going to use the default quickstart package for the Nebula template. In this package there is a menu item defined with the Articles » Category Blog menu type. That menu item type creates a category blog on the Frontend of the website with each blog article title presented in the full website width layout. Each title has a white background colour surrounded with a shadowed box as seen on the following screenshot.

If I want to change the appearance of this title on just one blog page but keep the appearance of the other pages as the default values as per the default template, we can use the page class suffix for that one category blog page.

1. Add “myblog” class suffix to the category blog page menu item.

2.Add the following code into the custom css file:

.myblog article .article-title {<br></br> border-radius: 15px;<br></br> background: aliceblue;<br></br> }

1. When you check your blog page now, you should see the following article blog title layout

The Page class suffix can also be used to change the layout and styling of any element on the page so you can also change the layout and styling of module output.

For example, the module with “hot” module class suffix applied in the module configuration in the Nebula template has the following layout and styling on the frontend of the web site

For our blog page and just for that page we will change this layout and styling to the following one

This can be applied by adding the following css code into the custom css file -

.myblog .hot h3:after {<br></br> content: "New Hot badge";<br></br> background: red;<br></br> top: 0px;<br></br> right: 0px;<br></br> border-radius: 0px 4px 0px 0px;<br></br> }

Don't leave home without it ...

As you can see, the Page class suffix is an incredibly versatile Joomla feature that, with a little bit of css knowledge, gives you enormous power over the appearance of individual pages on your site. If you add the core page classes found in most of our T3 based Joomla templates, you have a very powerful and flexible toolkit for creating a unique and personal Joomla site.

blog comments powered by Disqus