Dark Light

People who don’t read the site purely though an RSS aggregator will not have noticed the new thing that’s happening on this site, that is that Amazon and Livejournal links are being prefixed with an icon. The LJ icon mimics the one the site uses to show users on the system, and the Amazon one is there because people may think I’m trying to make them buy things secretly…

Actually, if you’re using IE, or any one of a few browsers really, you won’t see the effect at all, because it uses CSS3 selectors to get the effect. The code is thus:

a[href*="livejournal.com"] {
        background: url("/assets/spanicons/userinfo.gif") left center no-repeat;
        padding-left: 16px;
}
a[href*="livejournal.com/community"] {
        background: url("/assets/spanicons/ljcommunity.gif") left center no-repeat;
        padding-left: 16px;
}
a[href*="www.amazon."] {
        background: url("/assets/spanicons/amazon.png") left center no-repeat;
        padding-left: 10px;
}

What this does is selects all links where the href attribute contains the string “livejournal.com” (I’m likely to change this to a sequence that matches either “livejournal.com/~” or “livejournal.com/user/”, but that doesn’t catch all LJ URLs, since paid users can also have “username.livejournal.com”, The down side to this is that currently it matches any LJ URL, but since almost all of the LJ URLs I’ll use will be to a user in some case – given as everything on LJ is a user – I’m not too worried about this. The only difference is for Communities, and I later have a special rule for them anyway). This could also be begins with replacing the ”*=” with ”^=”, or ends with by replacing it with a ”$=”.

To each of these we then apply the required icon as a background image to the link:


background: url("/assets/spanicons/userinfo.gif");

Aquarionics

Then stop it repeating and aligns it to the left:


background: url("/assets/spanicons/userinfo.gif") left center no-repeat;

Aquarionics

(This could have been done with multiple statements, for example:


background-image: url("/assets/spanicons/userinfo.gif");
background-repeat: no-repeat;
background-align: left center;

but that isn’t my style)

Finally it puts a padding equal to the size of the image – 16px for this icon – to the left, effectivly shunting the text up for the image.


background: url("/assets/spanicons/userinfo.gif") left center no-repeat;
        padding-left: 16px;

Aquarionics

There are a couple of footnotes to all this, though. As I said, IE users (Which are still 90% of users, though Fx is gaining) won’t see anything. It’s not a perfect rendition of the LJ tag either, since the actual form for that is the image is a link to the user profile and the text to the diary, but for my purposes it works fine.

Related Posts