5

I want to add a custom CSS to a page of my website... I have edited the Page class Suffix of the page I want to edit, but I dont know why, the class doesn't appear in the body when I go to that page...

How could I add a class to the body of the page I want to change...?

Improve this question
3
  • 1
    Just to clarify, the class does not appear in the body tag, it will appear within a <div> within the main content area.
    – Lodder
    Feb 26, 2015 at 19:03
  • If you look in the source for itempage, you'll find your page class appended to it. It's not helpful if you need the class for anything outside of the article content, but see below for my solution in that event.
    – Faye
    Feb 26, 2015 at 21:06
  • I know this was asked really long time ago, but why do we need to alter Joomla code to implement page suffix?
    – Muteshi
    Jul 10, 2017 at 12:53

4 Answers 4

Reset to default
6

If you want to add the page class to the body, then add this code above the doctype:

<?php
  $app = JFactory::getApplication();
  $menu = $app->getMenu()->getActive();
  $pageclass = '';

  if (is_object($menu))
    $pageclass = $menu->params->get('pageclass_sfx');
?>

And this code to your body

<body id="<?php echo $pageclass ? htmlspecialchars($pageclass) : 'default'; ?>">

Anything without a page class will use an id of "default", anything with the page class defined will appear as the id of the body. Obviously you can change that id to class if that's what you need.

Improve this answer
8
  • Yeah, But I only want to add it to TWO pages of my website. Not to the body tag in general. I just want the class in the body tag in ONLY two pages.
    – Antonio
    Feb 26, 2015 at 21:27
  • Just don't style the default. Or rewrite the php so that it's an if statement, meaning if the page class is filled in, add it to the body, otherwise ignore it. If you don't attach any styles to the other ids, you won't have a problem.
    – Faye
    Feb 26, 2015 at 21:31
  • And how can I do an if statement giving to the body a class depending on the page I am...
    – Antonio
    Feb 26, 2015 at 23:39
  • I don't know php man, I can't help you. But if you can see the url, you can write something like that. I'm telling you though, you don't need to be so specific. If all your pages have default in the id, and two other pages have custom ids, just style the custom pages differently and let the rest use your normal styles.
    – Faye
    Feb 27, 2015 at 0:07
  • Here's an example of a site where we used this: integrityconsulting.ca - Just check the code for the body id, you'll see how it works.
    – Faye
    Feb 27, 2015 at 0:13
3

Having read the comments, do as REactionFaye suggests, except for the last bit. You'll want your body tag to be:

<body <?php if ($pageclass != '') echo 'class="'.htmlspecialchars($pageclass).'"';?>>

In this case, the class attribute is only set for the menu items actually having a pageclass suffix configured.

Improve this answer
1

You would need to modify index.php because Joomla doesn't add the page class to the body element it adds it to the parent <div> for the view, e.g. com_content for articles. In index.php you need:

<body class="<?php echo $this->pageclass_sfx;?>"

You might also want to create a template override for the view type as well, to remove the page class from that, so it isn't duplicated within the document body.

Improve this answer
0

I have the same issue, the Joomla $pageclass variable indicates that when creating a menu you need to give page class name under the page display option.

And call this in body tag:

<body class=" <?php echo $pageclass; ?>">

Note: When ever you create new menu, you need a separate class name in body tag, we need to add the page class.

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.