ShareTweet

This is a simple tutorial to demonstrate how to add icons or any other images to your site and give them a hover effect. These can be added to your header, footer, in a spot above your pages, or within a text widget in any sidebar area. Here are the steps. This tutorial is designed especially for those using Artisteer 3 generated themes.

What You’ll Need

1. Images to use (unless you create your own).
2. Image editing software such as Photoshop or Gimp (May not be necessary. See details below.)
3. An active WordPress installation and access to your theme’s image folder.

Steps

1. Create your images.

• Use free downloadable icons or create your own icons to use.
• If you want your icons to be in a different color, have a shadow, or another special feature, you’ll need to create an image that has the regular icon with the edited icon sitting directly above it. So, if your icon is 30px by 30px, your newly edited image should be 30px wide and 60px tall making space for both images. (The image to the right has a background style in the post, but the original image has no space around the icons at all.)
• Follow the steps above for every individual icon and save them as jpg, png, or gif files with names that match what they are.
• If you just want your images to change position (like bounce up when hovered over), you can skip the last two steps and just do the first.

2. Add the necessary divs to your header or text widget

• Open up your header.php file or the text widget that you’d like to add your images to. If in the header, add this code directly above the logo code.

<div class="social-wrapper">
<div class="facebook"><a href="url-to-facebook-here" title="Facebook" target="blank"></a></div>
<div class="twitter"><a href="url-to-twitter-here" title="Twitter" target="blank"></a></div>
<div class="rss"><a href="url-to-feed-here" title="Subscribe to Posts" target="blank"></a></div>
</div>

• Add as many lines as necessary depending upon how many icons you have. Just be sure to change the class name, the url, and the title for each.
• Upload your image files to your theme’s image folder.

3. Add the style to your css file.

• Now, you’ll want to do is to determine the size and position you want your icons to be in. To figure out how much width you’ll need, just multiply the width of an individual icon (plus a couple of pixels for padding) by the amount of icons you have. That will be the width of your wrapper. The height of the wrapper will be the exact height of one of your finished social icon images. (In the example above, it would be 60px.)
• Open up your style.css file, and add the following code:

div.social-wrapper
{
  position: absolute;
  display: block;
  width: 96px;
  height: 30px;
  top: 20px; (your images will float 20px below the top of the header.)
  right: 0; (your images will be on the right side of your header.)
  overflow: hidden;
}

.facebook a
{
  position: absolute;
  height: 60px;
  width: 30px;
  top: 0; (The top image from the one you created will appear.)
  left: 0;
  background-image: url('images/facebook.png'); (your actual image file name should be here.)
  background-repeat: no-repeat;
}

.facebook a:hover
{
  top:-30px; (The bottom image from the one you created will appear.)
}

.twitter a
{
  position: absolute;
  height: 60px;
  width: 30px;
  top: 0;
  left: 32px;
  background-image: url('images/twitter.png');
  background-repeat: no-repeat;
}

.twitter a:hover
{
  top:-30px;
}

• Notice that the only changes for the twitter code was the name, the position from the left, and image file name. Just continue to use the same code structure for as many icons as you have continuing to scoot each one a little further over from the left than the one before. Also, be sure the name given here matches the class exactly that you added in the header.
• Update your style sheet and view your changes. You may need to tweak the margins slightly to position your items exactly where you need them.

Note: If you don’t have access to your theme’s image folder, simply upload your images to somewhere else online and include the full image url between the quotation marks of the background-image url.

Other Suggestions

• Background Colors or Borders: You don’t need to edit an image at all if you want to simply add a different background color or border to it. If you did that, the code might look like the following:

.twitter a
{
  position: absolute;
  padding: 5px;
  height: 30px;
  width: 30px;
  top: 0;
  left: 32px;
  background-color: none;
  border: none;
}

.twitter a:hover
{
  background-color: #cccccc; (Adds a grey background.)
  border: 1px solid #cdcdcd; (Adds a darker grey border.)
}

• If you mess with background colors, you’ll need to be sure you have a padding around your image to be able to see it. Also, make sure that your heights listed are identical in both the wrapper and the images themselves, and that the top margin is the same for all of the images.
• Transparency Settings: You could also add an opacity filter to it. To view an example of what an opacity filter does, you can see the images in my Portfolio. The passive images have an opacity of 50% set, and the hovered images have an opacity of 100%.

I hope that helps. Let me know if you have any comments or questions, and if you want to see a simple tutorial on setting the opacity, check out css-tricks.com.

© 2011, Sarah. All rights reserved.

ShareTweet