Apply a CSS rule only in the homepage. K2, Gantry, Joomla

Question

I have a Joomla template that uses K2 and Gantry framework.

I have this rule in template.css

#rt-main.mb12 {
    height:0px;  !important;
}

I need to apply that rule only to the homepage of my site.

I activated the option "Class suffix" in template manager > advanced

The homepage in this case is a K2 category instead of a menu item.

How can apply the CSS rule only to the homepage?

Answer 1

From the backend of your site, go to Menus > your menu in question

Open the homepage link > page dislay options in the page class box, enter home, then save and close.

If you have a link to your home page in multiple menus, repeat for each one.

This will add the class of home to the body tag on your home page. Now in your CSS you can target just the home page with

.home #rt-main.mb12 {
    height:0px;  !important;
}  

You'll find this is a really easy and useful technique!

Good luck