Adding body class to template

General questions relating to Joomla! 4.x.

Moderator: General Support Moderators

Forum rules
Forum Rules
Absolute Beginner's Guide to Joomla! <-- please read before posting.
Forum Post Assistant - If you are serious about wanting help, you should use this tool to help you post.
Windows Defender SmartScreen Issues <-- please read this if using Windows 10
Post Reply
vincebodie
Joomla! Enthusiast
Joomla! Enthusiast
Posts: 151
Joined: Thu Sep 02, 2010 3:57 am

Adding body class to template

Post by vincebodie » Mon May 20, 2024 7:55 pm

I used to be able to modify any J3 template with this code to add a body class to the template:

Code: Select all

First 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');
?>

(Many templates have a place to add head code via the Joomla admin)

And this code to your body:
<body class="<?php echo $pageclass ? htmlspecialchars($pageclass) : 'default'; ?>">

Anything without a page class will use a class of "default", anything with the page class defined will appear as the class entered into “Page Class” in the Menu Manager.
Having a unique body class on each page is extremely useful. I've done some searching but come up dry with a solution for J4/5. Using the above code in J4 throws this error:

Code: Select all

0 - Cannot access protected property Joomla\CMS\Menu\MenuItem::$params
screen-grab- 2024-05-20 at 12.51.48 PM.jpg
Anyone got a fix for this? Sorry for my lack of knowledge of PHP and Javascript, I'm just a lowly html/css geek! ;-)
You do not have the required permissions to view the files attached to this post.

SharkyKZ
Joomla! Hero
Joomla! Hero
Posts: 2990
Joined: Fri Jul 05, 2013 10:35 am
Location: Parts Unknown

Re: Adding body class to template

Post by SharkyKZ » Mon May 20, 2024 7:58 pm

Change $menu->params to $menu->getParams().

vincebodie
Joomla! Enthusiast
Joomla! Enthusiast
Posts: 151
Joined: Thu Sep 02, 2010 3:57 am

Re: Adding body class to template

Post by vincebodie » Mon May 20, 2024 8:39 pm

SharkyKZ wrote: Mon May 20, 2024 7:58 pm Change $menu->params to $menu->getParams().
OK thanks, that worked for desktop but not for mobile. What's interesting is that in Firefox's inspector I am still seeing this for the body class in mobile view:

Code: Select all

<body id="s5_body" class="s5_responsive_mobile_present">
But this when viewing the mobile view page code directly using "view source":

Code: Select all

<body id="s5_body" class=" home homie">
The latter is what is set for the page class in the home page menu item and what I'm after for both views. There must be something in the template that overrides that for mobile views. Perhaps I need to bring this up with the template providers?
screen-grab- 2024-05-20 at 1.35.06 PM.jpg
screen-grab- 2024-05-20 at 1.38.19 PM.jpg
screen-grab- 2024-05-20 at 1.40.13 PM.jpg
You do not have the required permissions to view the files attached to this post.

User avatar
Per Yngve Berg
Joomla! Master
Joomla! Master
Posts: 31084
Joined: Mon Oct 27, 2008 9:27 pm
Location: Romerike, Norway

Re: Adding body class to template

Post by Per Yngve Berg » Mon May 20, 2024 8:55 pm

JFactory is deprecated.

All the code you need is in the Cassiopeia Template.

vincebodie
Joomla! Enthusiast
Joomla! Enthusiast
Posts: 151
Joined: Thu Sep 02, 2010 3:57 am

Re: Adding body class to template

Post by vincebodie » Tue May 21, 2024 5:26 am

Per Yngve Berg wrote: Mon May 20, 2024 8:55 pm JFactory is deprecated.

All the code you need is in the Cassiopeia Template.
Thanks for that, good to know. I added the code from Cassiopeia and I still have the same issue. The body class renders fine for desktop, but on mobile it still renders it as:

Code: Select all

<body id="s5_body" class="s5_responsive_mobile_present">

User avatar
Pavel-ww
Joomla! Ace
Joomla! Ace
Posts: 1681
Joined: Tue Jun 30, 2020 12:17 pm

Re: Adding body class to template

Post by Pavel-ww » Tue May 21, 2024 7:31 am

vincebodie wrote: Tue May 21, 2024 5:26 am Thanks for that, good to know. I added the code from Cassiopeia and I still have the same issue. The body class renders fine for desktop, but on mobile it still renders it as:

Code: Select all

<body id="s5_body" class="s5_responsive_mobile_present">
Hi.

When you work with code and ask questions on the forum, always provide a link and turn OFF JCH Optimize, completely cleaning its cache.

It has nothing to do with PHP. It seems that on your site there is JS that changes Body classes if the screen width is less than a value determined in this script.

I do not know which file it is, since JCh Optimize does not allow to determine this.
1.jpg
Judging by the name of the selector, this JS removes the sidebar on mobile devices using for this its own Body class.
You do not have the required permissions to view the files attached to this post.

vincebodie
Joomla! Enthusiast
Joomla! Enthusiast
Posts: 151
Joined: Thu Sep 02, 2010 3:57 am

Re: Adding body class to template

Post by vincebodie » Tue May 21, 2024 3:30 pm

Pavel-ww wrote: Tue May 21, 2024 7:31 am
vincebodie wrote: Tue May 21, 2024 5:26 am Thanks for that, good to know. I added the code from Cassiopeia and I still have the same issue. The body class renders fine for desktop, but on mobile it still renders it as:

Code: Select all

<body id="s5_body" class="s5_responsive_mobile_present">
Hi.

When you work with code and ask questions on the forum, always provide a link and turn OFF JCH Optimize, completely cleaning its cache.

It has nothing to do with PHP. It seems that on your site there is JS that changes Body classes if the screen width is less than a value determined in this script.

I do not know which file it is, since JCh Optimize does not allow to determine this.
1.jpg
Judging by the name of the selector, this JS removes the sidebar on mobile devices using for this its own Body class.
OK duly noted, and here's the site:
https://feminapt.com

There is something going on with css on this site that breaks the layout when JCH Optimize is turned off. I'm guessing there are two css calls that conflict when it's turned off, but when it's on it chooses the correct one. I will sniff this out and report back.

User avatar
Pavel-ww
Joomla! Ace
Joomla! Ace
Posts: 1681
Joined: Tue Jun 30, 2020 12:17 pm

Re: Adding body class to template

Post by Pavel-ww » Wed May 22, 2024 7:19 am

vincebodie wrote: Tue May 21, 2024 3:30 pm There is something going on with css on this site that breaks the layout when JCH Optimize is turned off.
Hi.

I think you just need to clean the cache of your browser after turning off JCH Optimize. I did not notice any violations of the layout.

And the problem with Body classes comes from this file
1.jpg
The logic of the script should be rewritten so that it does not replace the classes, but adds to the existing ones.
You do not have the required permissions to view the files attached to this post.


Post Reply

Return to “General Questions/New to Joomla! 4.x”