Gantry Framework-Joomla How to edit logo from CSS

Question

I would like to know how can I edit CSS files(ex:Logo size, Logo path) I am using Grantry v4.1.24 and Joomla 3.3.1

See the example of how to change Logo;

#rt-logo {
background: url("/qatarclean/joomla_gantry/images/logo.png") no-repeat scroll 50% 0 transparent !important;
}

#rt-logo {
height: 140px;
width: 267px;
}

How can I find the CSS location for this and how to edit this? in Firebug it is only showing the only the folder path. I have created gantry-custom.css file and inserted above data. It doesn't work.

See the attached picture;

Also I want to know how to remove some lines from selected CSS file;

Thanks in Advance,

Sameera Silva

Answer 1

The Gantry Framework uses compiled LESS files. Rather than editing these directly, it is recommended (as you have done) that a custom CSS or custom LESS file is created so that your changes are not overwritten by a template update.

The use of !important might be the reason your override is not working.

You can get around this using CSS specificity as explained by Henning on the RocketTheme Forums at: http://www.rockettheme.com/forum/configuration-and-security/209832-want-nail-how-2use-template-name-custom-css-file-correctly#1028846

For more information on CSS specificity Henning recommends: http://www.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know

In this particular case, the following should fix the issue you are having:

div#rt-logo {
    background: url("/qatarclean/joomla-gantry/images/logodf.png") no-repeat scroll 50% 0 transparent !important;
}