page-class-text-boxThe Page Class option appears in the Menu Items under the "Page Display" tab. This option allows you to add a class name to a specific page or all pages withing a category.

This class name allows you to target specific styling for that page or pages that will no affect any other pages on your site.

For example, you may wish to have a different background image or color scheme for specific sections of your web site.

This class name will be added to the initial <body> element for the page or pages that you choose. The class will show up at the top of the HTML for your page. For example, you may add a class name of "booksection". If you look at the HTML for the page with your browsers web developer tools, you will see this class name added to the classes for the <body> tag.

<body class="site com_content view-article no-layout no-task itemid-15 booksection ">

You will see that each page of your site has its own class name "itemid-XX", where XX is the id number for that article. You can target that with your styling if you do not wish to add a class name or edit your Protostar template files. The drawback with this is that you can not style a group of pages with this method, you would have to add the "itemid=XX" to your stylesheet for each page.

Note that if you have a Category Blog or Category List type Menu Item, this class name will be added automatically to each page under that category.

Protostar must be edited to recognize the page class

The Protostar Template for Joomla 3 is not written to recognize Page Classes.

In order for Protostar's Template to recognize this setting you must make two additions to your index.php in the template -> protostar folder in your Joomla 3 files on your hosting company server. Do not modify the index.php right on the root directory.  You are only modifying the one in the Protostar Template folder.

1: Make a copy of the current index.php file, before you edit the original file.

2: Open up the original index.php file in a text editor like Notepad++ or under the text editor available in the Template: Customise section of Template Manager.

3: Add this code inside the <?php ?> section ABOVE the <!DOCTYPE html>.

$app = JFactory::getApplication('site');
$pageclass = & $app->getParams('com_content');

Note this code is written in PHP - it must be placed before the closing ?> symbol.

4: The body tag already has a number of class parameters added, but you need to add two more lines to get the page class to be added as well.  Wathc that you only have the semi-colon after the late line. The final <body> tag should look like this:

<body class="site <?php echo $option
    . ' view-' . $view
    . ($layout ? ' layout-' . $layout : ' no-layout')
    . ($task ? ' task-' . $task : ' no-task')
    . ($itemid ? ' itemid-' . $itemid : '')
    . ($params->get('fluidContainer') ? ' fluid' : '')
    . (' ')
    . ($pageclass ->get('pageclass_sfx'));

5: Go into your Menu Item in the Joomla 3 Admin Interface. Assign a Page Class under Advanced Options -> Page Display options -> Page Class, for example "aboutpage". 

6: Bring up that page in a browser window (or refresh the page) and look at the Source Code using Firebug or something like that. You will see the page class added at the end of all the other classes on the <body> tag.

<body class="site com_content view-article no-layout no-task itemid-119 aboutpage ">

Now you can add specific styling in your stylesheet for elements on that page. For example:

body.aboutpage {color: #fd6734;}

Has helped you with understanding Joomla?

If you would like to make a small contribution to help fund this resource, that would be great, but do not feel obligated in any way.

Donation Amounts

Still not finding a special topic?

Use Google's Search function below for search the content of