Spanned Fish

One of the forgotten css rules is the one that allow to delete the dotted border that is present around links. Because it’s ugly for sure, I always want to, but because it’s not so visible, I always forget. I won’t anymore from now

here is the tip :

a {
outline: 0;
}

Every single time I’m using the shortening method for:

margin-top: 10px;
margin-bottom: 5px;
margin-left: 3px;
margin-right: 30px;

transformed into

margin : 10px 30px 5px 3px;

 
I can’t remember the order of these items. So I have to go and look over the web to find it. Boring and time wasting. So, last time it happend, I decided to do something I’ve should have done a long time ago. I tried to find some logic into the shortened method. And without any surprise, there is one. And the very simple way to remember it, it to think about a clock.
 

Yes, you just have to think in this very easy way. And as a non native developer, I know some web designers that would be very happy to know this little tip.

Here is the order if you want to copy/paste it:

margin: top right bottom left;

I have recently made a theme for a friend’s blog that don’t like to have long user pseudo or trackback title in comments. If the comment_author () output is too long, some part of the text overflows the div box. Even if it can be fixed through CSS, I thought – and because it’s not a good thing to modify core files in wordpress – I needed to create a special function to achieve my friend’s goal. Here’s how to do so :

So, we just have to modify the comment_author() function (which is located in wp-include/comment-template.php  line 47) and set up a new function that we will call comment_author_short(). We will insert in the function file of your theme. By doing so you’ll avoid to see this function disappearing after your next wordpress update. Now, the code.

Initial function :

function comment_author() {
$author = apply_filters('comment_author', get_comment_author() );
echo $author;
}

New function

function comment_author_short() {
$author = apply_filters('comment_author', get_comment_author() );
$chaine = $author;
$max=35;
if(strlen($chaine)>=$max){$chaine=substr($chaine,0,$max);
$espace=strrpos($chaine," ");
$chaine=substr($chaine,0,$espace)."..."; }
echo $chaine;
}

Because I’m not a native developer, I’ve no problem to explain that this code snippet shorten the output, echos the the shorten string (here chaîne, in french), and that you can change the maximum value by modifying the $max value (here, 35 characters), but I won’t explain the details.

Then, we just have to modify the file comments.php (or different file in your Wordpress theme folder that deals with comments template). To do so, search for the comment_author() function (via ctrl+f on windows) and add “_short” to its end. It must look like that :

<?php echo comment_author_short() ; ?>

And so, you will be able to have clean trackbacks in your comments, and avoid people letting comments with a long name. I will probably make a little Wordpress plugin in order to make it simple for people that prefer not to enter inside Wordpress’s code.

source of the shortening snippet : Php scripts (fr)

Everytime that I design a website, I have to use clickable images. The simpler, very simpler way is to do as presented below :

<a href="http://spannedfish.com/"><img src="logo.gif"/></a>

But this solution is not very accessible. If the user disable image rendering, he will see nor the logo nor alternative text.

So we’ll use a trick found at Haacked that I’ve just modified and used for one of my blogs. The aim is to use a W3C XHTML 1.0 Strict valid code that will allow a css background to be clickable. Here is the code you should have in your html page :

<div id="header">
        <a href="http://spannedfish.com/">
        <span>Alternative Text</span>
        </a>
</div>

There is the CSS code to include in your style sheet

#header
{
    background: url(logo.gif);
    width: 180px;
    height: 135px;
    position: relative;
}
 
#header a
{
    position: absolute;
    top: 0;
    left: 0;
    width: 180px;
    height: 135px;
}
 
#header a span
{
    display: none;
}

The width and height in the CSS must correspond to your image size. Note that the position attribute, as well as the margins can be changed.

<span> Fish </span>