The great thing about CSS is that, if done correctly, it can make your life much easier. Here’s a little trick that will label links based on their attributes without you having to add additional HTML when posting the link. This trick hinges on the fact that you can identify parameters in your CSS following the a beyong the usual :hover, :visited, etc.

Note: Doesn’t seem to be working in IE8… I’ll check for other version of IE later, but FireFox, Chrome, etc. are fine.)

Suppose that you’d like to have an icon next to any link that would identify it as being a mailto link, or a link that will open in a new window.

Setup your CSS as follows:

a[href^="mailto:"] {
 padding-left:20px;
 background: transparent url(icons/mail.gif) no-repeat center left;
}
a[target $='_blank'] {
 padding-left:20px;
 background: transparent url(icons/newWin.gif) no-repeat center left;
}

Now, what about file types? No problem, setup your CSS as follows:

a[href$='.doc'] {
 padding-left:20px;
 background: transparent url(icons/word.png) no-repeat center left;
}
a[href$='.xls'] {
 padding-left:20px;
 background: transparent url(icons/excel.png) no-repeat center left;
}
a[href$='.jpg'] {
 padding-left:20px;
 background: transparent url(icons/pic.png) no-repeat center left;
}

You can see it in action here.

If you want to apply the same formatting to several file types, e.g, the same image icon for .jpg, .jpeg, .gif, etc., you can avoid retyping the CSS for each by setting up your CSS as follows:

a[href$='.jpg'],
a[href$='.jpeg'],
a[href$='.gif'] {
 padding-left:20px;
 background: transparent url(icons/pic.png) no-repeat center left;
}

If you’d prefer that your icons appear following the text as opposed to preceeding it, change your CSS to read:

 padding-right:20px;
 background: transparent url(icons/pic.png) no-repeat center right;

Depending on the size of your icons, you may need to play with the padding. Here, I’ve used 20px as my icons are 16px wide so, given that we are centering the icon within the padding, I get a nice 2px buffer on either side. Also, if you have tall icons, or you’d like to use a smaller font size, you can add some line-height to your CSS so that the icon doesn’t get cropped.

The icons that I’m using in this example can be found here. They are licensed under a Creative Commons Attribution 2.5 License, so you can use them anywhere, for any purpose, and make whatever alterations to them that you would like.

Web Site Stuff CSS, web design, Web Development

Darren Rowse over at ProBlogger.com had a great post yesterday where he made a very good argument against the use of  mailto links. I won’t get into the details here but, if you’re interested, you can read his 10 reasons here.

I thought, however, that I would offer some help to anyone who, after having read the article, was convinced that they should switch to a contact form.

There are several good contact form plugins available for WordPress. Here are a three that you might want to consider. All of the info shown below has been taken from wordpress.org

Contact Form 7 by Takayuki Miyoshi

Downloads: 119,120
Average rating: 4 out of 5
Requirements: 2.2 or higher (works with 2.7 beta)
Features: Contact Form 7 can manage multiple contact forms. You can customize the form as well as the mail contents with simple markup. The form supports Ajax-powered submitting, CAPTCHA, Akismet spam filtering, and so on.

Enhanced WordPress Contact Form by Joost de Valk

I wasn’t able to find this plugin in the listing at wordpress.org, so I’m not entirely sure how many times it has been downloaded or what rating it has received.

Enhanced WP Contact Form has several very nice features. It will include in the email the page from which the user was referred to your contact form. In the case that one of the original referrers was a search engine, it will tell you what keywords the user had used in order to arrive at your blog. Spam protection is offered as well as the option for the user to cc themselves.

This is the contact form that I’m currently using.

cforms II by Oliver Seidel

Downloads: 331,093
Average rating: 4 1/3 out of 5
Requirements: 2.0.2 or higher (works with 2.7)
Features: cforms is a highly customizable, flexible, and powerful form builder plugin. It covers a variety of use cases and features ranging from attachments to multi-form management. You can even have multiple forms on the same page. It is compatible with the Comment Luv, Subscribe To Comment, and WP Ajax Edit Comments plugins.

Web Site Stuff Blogging, Web Development, wordpress

A great way to increase your blog’s exposure is by submitting it to RSS directories.

Kelly Verge over at backlinkage.com has posted a great article with a comprehensive list of RSS directories. He’s taken the time to trim out all of the niche specific directories as well as those who require payment.

Take a look here.

Web Site Stuff RSS, SEO, Web Development

This is a follow up to my CSS image mouse over post.

So, the problem is that Internet Explorer ignores the pseudoclass :hover unless it’s applied to a link, i.e., img:hover won’t work (no pun intended ).

Here’s how to make them all play nice.

This is what we came up with last time:

HTML:

<a href="target.html" class="highlight"><img src="yourimage.png"></a>

CSS:

.highlight img{
 border:0;
}
.highlight img:hover{
 background-color:#ff6c00;
}

Now, we were on the right track, so this isn’t all throw away, we just need to make a few adjustments.

First of all, as I said above, IE doesn’t like it when :hover is applied to anything other than a link, so let’s break down and give it what it wants. Tell your .highlight class that it’s to deal with a link and not an image. While you’re at it, you can delete the border:0; as it will no longer do us any good here. It should read as follows:

a.highlight {
}
a:hover.highlight {
  background-color:#ff6c00;
}

Now, we just have to deal with the fact that there is a big ugly border on our image. Add a new class called .noborder and put the border:0; in there.

.noborder {
 border:0;
}

Go ahead and apply that class to the image in your HTML.

<a href="target.html" class="highlight"><img src="yourimage.png" class="noborder"></a>

And that’s that! We’ve managed to trick IE into doing what FireFox had been doing for us all along. There’s just one problem… refresh document in a FireFox browser… no dice; it’s broken.

So we had it working in FireFox but not IE, now we force it to work in IE and it breaks FireFox… are we doomed to crawling back to javascript to get us out of this one?

Actually, no. This is an easy fix! Were you wondering why I kept that empty a.highlight class?

Add the following to your a.highlight class (I used 100×100 because that’s the size of my image, replace those values with your own dimensions):

height:100px;
width:100px;
display:block;

Voila! You now have a nice image mouse over effect that it completely cross-browser compatible using only one image and without resorting to javascript.

Your final code should look like this:

HTML:

<a href="target.html" class="highlight"><img src="yourimage.png" class="noborder"></a>

CSS:

a.highlight {
 width:100px;
 height:100px;
 display:block;
}
a:hover.highlight {
 background-color:#ff6c00;
}
.noborder {
 border:0;
}

Here it is in action.

I hope that this proves to be useful, have fun!

Web Site Stuff CSS, web design, Web Development

This issue came up during my first Drupal installation attempt. Drupal won’t actually install if you have register_globals turned on. If you have this problem, here’s how to fix it.

Step 1 - Is PHP running as an Apache module or as CGI?

This is straight forward. In fact, the whole guide is, but this step more so.
Create a new file called phpinfo.php. If you’re using this guide to troubleshoot a Drupal installation, you will want to place the file in the same directory as Drupal in order to ensure that the results are accurate.

Inside this file, place the following code:

<?php phpinfo(); ?> 

Now run the file by aiming your browser at http://www.yoursite.com/phpinfo.php

Near the top of the file, next to ”Server API” you will see either “CGI” or “Apache“.

You’ll want to delete the phpinfo.phpfile so as to prevent looky loos from getting information about your server configuration but, if PHP is running as CGI, you’ll need it in a moment, so don’t delete it quite yet (those of you with PHP running as an Apache module can go ahead and delete it now).

Step 2 - Fix it! (think Oscar Rogers/SNL… good times… back to the guide)

If in the last step you learned that PHP was running as an Apache module, then:

Add this line to your .htaccess file:

php_flag register_globals 0

If you have a very low end hosting package, this may not work as your host might have restrictions on what you are able to accomplish through .htaccess edits. If this is the case, get on the phone to your host and kindly ask them to consider turning register_globals off… or consider changing hosts.

That’s all for the Apache group!

If in the last step you learned that PHP was running as CGI, then:

Aim your browser back to your phpinfo.php file and look for the row that shows you the path to the php.ini file. If you can access this file then add then open it up and add the following line:

register_globals = off

If you can’t access the file, or were unable to edit it for whatever reason, be hopeful that your host has enabled the use of custom php.ini files and try the following:

Create a file called php.ini(again, if this is being done for a Drupal installation, make sure that the file is created in the same directory as Drupal) and add the following line of code:

register_globals = off

Step 3 - Copy the original php.ini file (you can skip this step if you were able to edit an existing php.ini file in step 2).

If making a new php.ini file in step 2 resolved your issue, then you’ll want to make a copy of the original php.inifile so that you’re not inadvertently changing settings that you shouldn’t be.

For this step, you’ll need two pieces of information: The path to the original php.ini file, and the path for your new copy. The current path can be obtained by aiming your browser back at that phpinfo.php file; the php.ini path will be displayed in one of the rows (it usually starts with /usr/local/…).

Create a new file called copyini.php and insert the following code:

<?php system("cp /usr/local/lib/php.ini /home/YOU/php.ini"); ?>

In the above code snippet, be sure to replace /usr/local/lib/with whatever showed in the results of your php.ini file, and /home/YOU/ with your target directory. don’t forget to include php.ini on the end of both paths.

Aim your browser at this file. It will produce a blank screen, but it will have placed a copy of the original php.ini file into your target directory. Open up that copy and search for the line register_globals and turn it off.

The last step is to once again address those looky loos. Open your .htaccessfile and add the following code snipet:

<Files php.ini>
order allow,deny
deny from all
</Files>

That will keep them from looking at your php.ini file.

I hope that helps!

Web Site Stuff Drupal, Web Development