Tuesday, October 13, 2009

Override Apex CSS style

I was struggling with this for a long time before I found a simple solution. I just wanted to override a particular CSS style for one page. The style in the CSS file is defined as:

.t14Standard td.t14data{border:1px solid #AAA;border-left:none;border-top:none;}

I wanted to change this to:

.t14Standard td.t14data {border:1px solid #AAA;border-left:none;}

Sounds easy if you know how inheritance and overriding work in CSS, right? I just put this style in the HTML header of my page:

But nothing happened. Luckily, Firefox and Firebug put me on the right track. Firebug showed me that my style was not used, but the style in the CSS file was. It took me a while to figure out why. Apex put my style in front of the CSS imported style. So, in the header of the page template I simply had to move #HEAD# to the end of the section, after the link to the stylesheet (replace the [] by <>; Blogger won't accept the tags):

[link rel="stylesheet" href="#IMAGE_PREFIX#themes/theme_14/theme_V22.css" type="text/css" /]