Black, Blue, and Purple
How I waste my free time
In between trying to get a simple Arduino project thrown together and farting around with the Yahoo! UI Library, I took a timeout to play around with Firefox add-on (back in my day they were extensions) named Stylish.
The subject came up on Jyte that black text on a white background wasn't the friendliest design for some people. Unfortunately, most sites don't support user specific skins so if the site's design causes you problems, from a vision related impairment for instance, then you're just shit out of luck. That's where Stylish comes in. It lets you create custom CSS overrides on a per site basis.
Can you see me now?
Yet another thing to do when you're bored: see if you can completely change the color scheme of a site to make it hideously ugly for no good reason. It took a little work, but I managed to make a really nasty looking blue and purple on black style for Jyte.
Most of the work was just finding all the nasty little inherited background colors, background images, etc. One interesting problem came up because Jyte has a set of menus that are images of text. They have a white highlight built into them and look like complete crap on the new black background. I thought it wouldn't be a problem to turn links with images into links with the image alt attribute as the link text and then hide the image.
Let the CSS fun begin
I thought maybe some sweet CSS action like this would work:
.nav_item a img:before {
content:attr(alt);
}
.nav_item a img {
visibility:hidden;
width:0;
}
Oh, how lovely that would be. Apparently it'll work in some builds of Firefox but got turned off in later versions. I think it was a feature request specifically to make my life more difficult. :before and :after pseudo elements for other elements work fine, just not images.
So, with a lot of trial and error I wound up with the less than ideal:
.nav_item a[href="/home"]:before {
content:"Home";
}
.nav_item a[href="/home"] img {
visibility:hidden;
width:0;
}
Since I no longer had access to the alt attribute on the image I had to manually insert the correct link text for each menu item. I did this for each menu by using an attribute selector to find each link by its href attribute, then hard coded the content to the correct text and finally hid the image.
You nasty, nasty boy
Oh, it's nasty all right, but it works. The only problem is I was trying to make the CSS overrides generic and there's a dynamic menu that includes the user name. Luckily there's only one such dynamic menu so I just made an entry to handle all such menus as the dynamic one and let the more specific rules clean up after the fact. Ta da! A custom, site specific CSS override that no one will ever use because it looks like it was beaten with a bag of hammers and makes your eyes hurt to read.
The interesting thing is that there are now ways for users to make the sites they frequent more appealing and possibly more accessible via add-ons like Stylish and Greasemonkey. It's not ideal for non-technical users, but sites like Userscripts and Userstyles can help by acting as repositories with aids created by the more technical members of the community.
Leave a Reply