17

I would like to add custom CSS styling to some of my pages to give them a unique style, and override the default template styling.

How can I achieve this in Joomla?

Improve this question

4 Answers 4

Reset to default
15

There are several ways to add custom CSS code to a specific page. Here's a couple of alternatives:

Alt. 1 - Page class
Use page classes. In the menu item editor, under the "Page display" tab, there's a field called "Page class". This will add a class to your <body> tag (or a <div class="YOURCLASS">...</div> around your content), depending on how your template is configured.

enter image description here

Then simply create a new rule in your template's CSS file, using the class you specified.

E.g. Add mycustomclass to the "Page class" field in your menu item, and put this in your CSS file:

.mycustomclass p {font-color:red;} // Make text red on this particular page

Alt. 2 - Custom CSS modules
Several modules are available for this purpose. One example is Custom CSS, a module that allows you to add any CSS code and publish it to the pages you want to style.

A similar option is Custom HTML Advanced, a module that lets you add HTML, JavaScript and CSS to your pages. The code can be added to the <head> tag automatically.

Alt 3. - load additional CSS stylesheet
Another alternative is to check the current menu item ID in your template's index.php file, and load another CSS stylesheet if needed:

<?php 
   $currentMenuId = JSite::getMenu()->getActive()->id ;
   if ($currentMenuId == "14") {
       echo '<link rel="stylesheet" type="text/css" href="mystyle.css">';
   }
?>
Improve this answer
1
  • I use the first alternative (with page class) but are you aware of a way to apply these styles in the editor? For example titles don't have the same font depending on the category they belong to, how can I apply the font inside the editor depending on the page they are displayed on?
    – web-tiki
    Commented Jan 19, 2017 at 9:49
10

One of my favorite approaches is to create dynamic classes for the body element.

So:

<?php
  $app    = JFactory::getApplication();
  $menu   = $app->getMenu();
  $active = $menu->getActive();
  $class  = $active->alias . " pageid-" . $active->id;
?>
<body class="<?php echo $class; ?>">

Some examples of what the above code will produce is:

Home page:

<body class="home pageid-13">

About us page:

<body class="about-us pageid-15">

Now you can create custom specific styles per page, using the above classes.

Update 2023

Getting the menu in Joomla 4:

use Joomla\CMS\Factory;
$app = Factory::getApplication();
$menu = $app->getMenu();
$activeMenuitem = $menu->getActive();

https://docs.joomla.org/Menu_and_Menuitems_API_Guide

Improve this answer
3
  • I like this solution, it's very useful, and easy to implement. +1
    – johanpw
    Commented Nov 25, 2014 at 20:20
  • Just started Joomla and like @johanpw, I like this solution.
    – lance2k
    Commented Dec 27, 2023 at 6:21
  • @lance2k Hello. If you are on Joomla4 read this guide, in order to use up-to-date code: docs.joomla.org/Menu_and_Menuitems_API_Guide
    – FFrewin
    Commented Dec 28, 2023 at 6:27
4

This is another method of doing the same thing.

Goes above the doctype:

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

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

Goes in your index where your body class is:

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

Now, anything you add into the menu item's page class will appear in the body id. Any menu item without a class will automatically be body id="default".

Improve this answer
1

If you only want to change the content area, use "Page Class" in "Page Display" Tab inside your menu item.

If you want to change the style for the entire menu item page, try this:

  • By item id:

As an example in the default Protostar template you can see in the <body> tag a class like:

<body class="... itemid-101 ...">

This corresponds to the menu item with the Id 101. From here you can add a class in the file user.css for the new CSS class .item101 {}, this works for the entire <body> tag.

The code used here, in the index.php file:

<?php echo $itemid ? ' itemid-' . $itemid : ''; ?>

Regards.

Improve this answer

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