Styling the Explicitly Styled

Every now and then I run into a site that has some explicit CSS styling on an element that really doesn’t fit with the site design. If the site is a one-off or ‘custom’ website, that’s easy to change but when it’s a 3rd party product or one that will need upgrading at some point, making changes to many files removing an explicit style is an unpalatable option.

I was working on a site that contained this bit of HTML in *many* files and having bits of red text splattered all over the website looked horrible.

[code]
<span style=”color: #900; font-weight: bold;”>
[/code]

The last two times I ran into this I was able to fix the problem with a little JQuery script in the site header.

[code]
// Tweak span colors without modding all files in the website
$(document).ready(function () {
$(‘span’).each(function(i){
if ($(this).css(‘color’) == “rgb(153, 0, 0)”) {
$(this).css(‘color’, ‘#000’);
}
});
});
[/code]

The code above simply goes through all the Span’s in a page and checks the color that’s applied and if it’s Red (rgb(153, 0, 0)), it gets replaced with Black.

I expected to be able to see the colour change some time after the page rendering had completed but it’s fast enough that you never see it.  Perfect!