page-class-text-boxAt this writing, the Protostar Template for Joomla 3 is not written to recognize Page Classes.

Page classes are assigned in your Menu Item under the Advanced Options -> Page Display options -> Page Class. 

It is a great styling tool to be able to add a class to the entire page.  It allows you to style elements for that page alone, or for all pages with that class, without affecting all the other pages on your site.

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 - rename the copy to something with the date in it, for example: index3-4-14.php.  This way if you have several index___.php files you will know which one is most recent.

2: Open up the original index.php file in a text editor like Notepad++. 

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 BJ.Zemplate.com 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 bj.zemplate.com.