Data, Design, Deities: Bypassing inline CSS generated by Gantry

As you know, I've started to use Gantry to develop a custom theme for WordPress. I quickly got stuck on the very first customisation I tried: changing the background colour (or replacing it with an image).

I couldn't find where the <body> colour was being set anywhere, in any of the CSS files that the Gantry theme uses. Firebug to the rescue! It showed that the body colour was being set "inline" (shows up as "#" in Firebug's CSS panel, instead of a particular CSS file). So, it turns out that Gantry indeed generates inline styles for certain elements, including the body background colour, in its style "override" panel. It seems a little ironic to have to override an override, if you know what I mean, but here's how to do it...

Either:

Find the styledeclaration.php "gizmo" in the Gantry plugin folder, and comment out the relevant lines which do "inline css for dynamic stuff" (it is well-commented). Now you can set your own body tag CSS rules without any fear of them being overridden by inline rules.
Alternatively, simply add "!important" to your CSS rules.

I've been applying the custom styles using the "styles.css" file inside the Gantry theme. I presume that's what it's there for (it's blank, after all).

Data, Design, Deities

Tuesday, December 13, 2011

Bypassing inline CSS generated by Gantry

No comments:

Post a Comment