Splasho |

Apr/06

13

How To: Highlight Links to your Site with Fx

I have a number of ways to find out the URLs of websites which are linking to me. Pingbacks, web statistics and Google can all give me access to this information. It often interests me to know what comments other bloggers make, the trouble is that none of these services tell me where on the page the reference to Splasho is located.

My method for dealing this was generally a quick search through the source code. Now I have a better solution for Firefox users, inspired by a thread on Gooogle Blogoscoped.

The end result is this, extra CSS applied to the links to make them stand out:
google.png

The first thing you need to do is to grab a new, very versatile, extension. Get Stylish from Mozilla Update. In the words of its creator, “Stylish is to CSS what Greasemonkey is to Javascript.” If you feel geeky (or don’t want more extensions) you can edit userContent.css instead, but Stylish makes it significantly easier.

After its installed, you can either use this form to generate the code automatically:

http://

Or use the more complex method outlined below if you want to use custom CSS.

Once you’ve installed the extension restart Firefox and you should see a new button on your statusbar. Press it and then click Manage Styles.

statusbar.png

Press Add to add a new style-rule. Put something like Highlight links in the description.

The code you need is this, with a few editions.

a[href^="http://splasho.com"]{
-moz-outline:2px dashed #FF0000 !important; /* A */
}
@-moz-document domain(splasho.com) {
a[href^="http://splasho.com"]{
-moz-outline:0 !important; /* B */
}
}

Obviously you need to change every occurrence of splasho.com to the domain name of your blog or site. If you want you can play with other aspects too. You can can apply any CSS you like to links to your site by editing the line marked A. I like the red -moz-outline because it doesn’t affect the appearance of the site I’m on and is just an overlay over the top. If you really want your links to stand out you could use text-decoration:blink;.

Unfortunately any CSS will affect your site too and unless you want every link on your site to look a bit odd you need to reverse it, thats whats going on in B. A more generic formula is:


a[href^="http://YOURDOMAIN"]{
/* CSS STYLE FOR LINKS TO YOUR SITE */
}
@-moz-document domain("YOURDOMAIN") {
a[href^="http://YOURDOMAIN"]{
/* CSS TO COUNTERACT THE STYLE BEFORE WHICH WILL APPLY ONLY ON YOUR SITE */
}
}

If all this simply confuses you, just use the simple form above.

Once its all done all links should be highlighted on all pages which aren’t on your domain. Hooray! If you have problems do ask in the comments.

[Credit to Philipp Lenssen for the idea and many in the thread for ideas on accomplishing it]

No tags

No comments yet.

Leave a Reply

<<

>>

Theme Design by devolux.nh2.me