Override a CSS setting
On one of the web forums I regularly visit, the text setting (for my monitor resolution and platform) is a little too squashed together in the “line height” — even though when you did deep into the CSS, you find:
line-height: normal;
in the relevant snippet of CSS values.
Hmmm, there must be a way to fix this!
Quick Google search: “firefox override css for domain” — the first result was helpful!
What I discovered is that there is a way to permanently “adjust” css values for a domain name — at least using Firefox, I’m not sure if other browsers can do this too, but nowadays they just might have this kind of functionality — so that you can impose your own preferences and override the site’s css values.
In Firefox, it requires installing the free add-on called Stylish.
Stylish lets you customise the look of a website using your own styles.
In my case, I just wanted to change a font size in the css from “12px” to “10pt” — that’s all it took to solve my problem.
So, after installing Stylish and re-starting Firefox, I wrote a really simple bit of css code that applied just to the domain used by the forum:
@namespace url(http://www.w3.org/1999/xhtml);
@-moz-document domain("copywritersboard.com") {
.vb_postbit {
font-size: 10pt;
}
}
In this case, I clicked on the Stylish icon in the Firefox status bar, and chose “Write Style …” and then (as my web page was on the forum site) chose “For copywritersboard.com” from the fly-out sub-menu (as I was on the Copywriter’s Board forum site).
Stylish automatically generated the opening 2 lines and closing line of code, all I had to add in was the “.vb_postbit” section with my font-size setting and the surrounding curly braces { and }.
Done!
Now, every time I visit the site and read the posts, the font used is automatically displayed to my preference.
Of course, Stylish is much more powerful, and can do a lot more that just this little change: I could change fonts, background colors, sizes, headings, font colors … to whatever suits my preferences.
Stylish works best when used in conjunction with the free Web Developer toolbar add-on for Firefox. With this toolbar enabled, I was able to turn on the feature called “View Style Information” under the CSS button — that way, I simply clicked on a post, and it highlighted the relevant css code properties (class name and values) — so I could easily override the value with a simple user style in Stylish.
The only “downside” is that, if you use more than one computer, you’d need to have this free add-on installed with the same code on all of the relevant machines. Still, for me, that’s only 2 computers.
But now, when I’m reading my favourite forum, I can have the post threads look the way I want them to without imposing my preferences on anyone else!
