Been tinkering with the site some more…

I have made a couple more changes and such. Some are just cosmetic, but a few will hopefully make the site easier to use. As always feel free to let me know what you think.

  1. I added an icon to all External links (links that point to any site other than this one), or rather all links with the “rel=external” attribute on them anyway.

    I used an icon similar to the Wikipedia external link icon(external link image) since it is fairly recognizable and seems like a good design candidate for a standard image.

    This won’t display in Internet Explorer 6 and lower however, because of the way I implemented it in CSS. I do believe it should show up in IE7 however.

    If anyone is interested, it’s fairly easily to implement. The css is:


    a[rel="external"] {
    background:url(images/external.png) no-repeat;
    background-position: center right;
    padding-right: 12px;
    margin-right: 2px;
    }

    Which applies this css to any anchor (a) elements with the “rel=external” attribute. As mentioned above though, it doesn’t work on IE 6 (it just doesn’t show up at all), and I don’t even know about other browsers. Works in Firefox 2.0 though.

    And you can change it for hover and visited as well:


    a:visited[rel="external"] {
    background:url(images/externalvis.png) no-repeat;
    background-position: center right;
    padding-right: 12px;
    margin-right: 2px;
    color: #C0C0C0;
    }


    a:hover[rel="external"] {
    background:url(images/externalover.png) no-repeat;
    background-position: center right;
    padding-right: 12px;
    margin-right: 2px;
    color: #9F1515;
    }

  2. I removed the Javascript which caused links with the rel=external attribute to be opened in new windows. By adding the icon to the links I figure people can decide on their own whether they want to open in a new window (or tab as the case may be). I had been thinking about removing this for awhile, but after visiting a few other sites where all of the links were set to open in a new window, I found it incredibly annoying. I never really noticed it here because I don’t tend to click the external links from my own site since I’ve already visited them all =) Apologies if that irritated anyone.

    Opening links in new pages is still useful for some things (images, image galleries, SWF, etc. etc.) but I won’t just apply it to all external links anymore.

  3. I changed the Leave a Comment link CSS a bit and added a little image(comments link image) to it as well. Not really much of a functional change, but I want the button to stand out so people who aren’t familiar with WordPress, or blog software in general, can still figure out how to leave comments and so that it stands out in general (since the comment link is in a different position on nearly every site I visit). Still kind of looks like ass, but I’ll leave it this way till I feel like messing with it again.

    It looks even more like ass on IE 6 because of IE 6’s inability to display transparent PNGs, but honestly I just don’t care anymore.

  4. I made some changes to the comment template (themefolder>comments.php) so that comment author’s urls also display the “rel=external” attribute, but do NOT any longer display the “rel="nofollow” attribute.

    I had been thinking this over for awhile, and had looked at several plugins and methods of editing the core WordPress files, but this method allows you to have the same functionality, without the autoinserted nofollow attribute and without having another plugin eating up system resources or mucking about in core files that would need to be mucked about in again at the next update.

    In the your theme’s comments.php just replace

    <?php comment_author_link() ?>

    with:

    <a href="<?php comment_author_url(); ?>" rel="external"><?php comment_author(); ?></a>

    Without the rel="external" if you don’t want it of course.

    This removes the “nofollow” attribute which allows people leaving comments on your blog to receive Google rank for the links back to their sites.

    3 caveats on this though:

    1. If you or anyone else uses a link to your website (i.e. the site the comment is being left on), then it will show up as an external link. Silly, but not really a big problem since the majority of people who are reading comments on your site aren’t going to click on your name in comments to jump to your site, which they are already reading =P

    2. The other thing is that this still doesn’t remove the nofollow attribute from links that are posted WITHIN comments. Only the links of the comment authors themselves. This is good for me, but if you want to remove the nofollow from all comment links, then you have to resort to the above mentioned core file edits or plugins.

    3. Also if you want to add rel=”external” to all external links (including those within the comments) automatically, you will need to resort to another method. I may try playing around with a javascript that will automatically add it to any absolute links that don’t start with the specified domain (www.ttancm.com in my case here), but that will have to wait until I have a lot more free time, and can probably be done better in PHP (possibly as a WordPress plugin?), but I don’t know enough php to even know where to begin.

  5. Also changed function edInsertLink in quicktags.js to add rel="external" again.

    This time instead of just always inserting the rel=external, it prompts me whether or not it should add it to links when they are created using the link quicktag button. It also prompts for a link title.

    I found this great code at http://laurenceo.com/?p=84. Here it is for anyone who is interested:

    function edInsertLink(myField, i, defaultValue) {
    if (!defaultValue) {
    defaultValue = 'http://';
    }
    if (!edCheckOpenTags(i)) {
    var URL = prompt('Enter the URL' ,defaultValue);
    var LINKMETA =
    ' title="'
    + prompt('Enter the Title', 'Title')
    + '"';
    if (confirm('Is this link external?')) {
    LINKMETA = LINKMETA + ' rel="external"';
    }
    if (URL) {
    edButtons[i].tagStart = '<a href="' + URL + '"' + LINKMETA +'>';
    edInsertTag(myField, i);
    }
    }
    else {
    edInsertTag(myField, i);
    }
    }

    If anyone is too lazy or frightened to mess with the code themselves you can just download my quicktags.js and upload it to your wp-includes/js/ directory. Back up your own quicktags.js first though.

    Here’s my quicktags.js file. This file also adds a P (paragraph button) to the quicktags bar.

  6. And finally, the biggie is not a change but a decision on an upcoming change. I spend a lot of time messing around with the guts of this site, especially for display related things, but I’ve found that the vast majority of the time spent (read: wasted) is trying to get things to look the same way in IE 6 as they do in every other major browser.

    So, I’m just going to stop bothering. IE 6 is buggy, and just doesn’t have support for way too many things. I’ll be upgrading my own IE to the newly released 7 soon, and once I do, I don’t think I will ever look at IE 6 again. So if you use IE as you main browser stuff is going to look/be screwed up, because I’m going to stop testing for it. If you use IE 6 (or lower), then I’d suggest upgrading anyway. 7 is a better build that supports more features, and is safer as well.

Also, not an improvement or anything by any means, but the site will be down for a few hours on Sunday (Pacific time) because my hosting service is tinkering with something or the other.

4 Comments

  1. Posted May 6, 2007 at 11:28 pm | Permalink

    Hello
    You are The Best!!!
    Bye

  2. Posted May 7, 2007 at 6:14 am | Permalink

    Ummm thank you. I assume either you found something helpful, or else you are a spambot that forgot to put a uri somewhere in the message =)

  3. Posted May 18, 2007 at 6:24 pm | Permalink

    Thanks for sharing. :)

  4. Posted May 19, 2007 at 12:58 am | Permalink

    No problem, hope you found something helpful, although a lot of this is outdated now =)

preload for rolloverimage please ignore preload for rolloverimage please ignore preload for rolloverimage please ignore preload for rolloverimage please ignore preload for rolloverimage please ignore