16

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?

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">';
   }
?>
  • 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 Jan 19 '17 at 9:49
9

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.

  • I like this solution, it's very useful, and easy to implement. +1 – johanpw Nov 25 '14 at 20:20
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".

1

Also you can try with this extension to assign different stylesheets to your menu items: http://extensions.joomla.org/extensions/extension/style-a-design/templating/css2switch-basic

Regards.

protected by FFrewin Jan 17 '17 at 18:13

Thank you for your interest in this question. Because it has attracted low-quality or spam answers that had to be removed, posting an answer now requires 10 reputation on this site (the association bonus does not count).

Would you like to answer one of these unanswered questions instead?

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