- Jul 2, 2012
- 8,174
- 524
- 126
I love being able to apply my own CSS to some web sites that need it. Example: I was on a web site today that I frequently visit, and in the header where a banner ad would normally appear was a big red text banner declaring that I must have an ad-blocker running and asking if I wouldn't rather "experience" the full web site.
Decided that I was sick of looking at that thing. Let's see... Chrome right-click, Inspect element. It's inside a div named adblock-notice. Open the Stylish plugin for Chrome, create a quick style and save it for that domain.
While I was at it, I noticed that the top of the web page on the site was always a blank space, since it was used only for banner ads. Might as well get rid of the whole thing.
Nothing fancy, but I've also used it to fix other problems on frequently visited sites:
* A vBulletin forum was wrapped in a site's headers and footers, with its own CSS. That CSS was breaking the word wrapping in code boxes. Easily fixed. It was also causing a constant horizontal scrollbar to appear. Also fixed.
* Another forum, very old-school Perl, all text. Unreadable default font with no line spacing. Changed the font face and size, added line spacing.
* A web site's search box text was a difficult to read low contrast gray. So I changed the color to a higher contrast black.
Easy to change little things that can make a big difference in usability. You could use it to completely restyle a web site if you wanted, but that's time-consuming and subject to the site completely changing and breaking all your styles.
Stylish for Chrome
Decided that I was sick of looking at that thing. Let's see... Chrome right-click, Inspect element. It's inside a div named adblock-notice. Open the Stylish plugin for Chrome, create a quick style and save it for that domain.
Code:
#adblock-notice {
display: none !important;
}
While I was at it, I noticed that the top of the web page on the site was always a blank space, since it was used only for banner ads. Might as well get rid of the whole thing.
Code:
#element2 {
display: none !important;
}
Nothing fancy, but I've also used it to fix other problems on frequently visited sites:
* A vBulletin forum was wrapped in a site's headers and footers, with its own CSS. That CSS was breaking the word wrapping in code boxes. Easily fixed. It was also causing a constant horizontal scrollbar to appear. Also fixed.
* Another forum, very old-school Perl, all text. Unreadable default font with no line spacing. Changed the font face and size, added line spacing.
* A web site's search box text was a difficult to read low contrast gray. So I changed the color to a higher contrast black.
Easy to change little things that can make a big difference in usability. You could use it to completely restyle a web site if you wanted, but that's time-consuming and subject to the site completely changing and breaking all your styles.
Stylish for Chrome
Last edited: