Posts tagged theme

If you are using Wordpress and the Mystique theme, such as this site, then the following instructions will help you with adding additional social icons above the menu bar.

Creating the images
The number of image files you need to create depends on the number of icons you wish to have. You can combine three icons per image file and use CSS to pull the desired icon from the file to display.

For example, below are the two image files used by this site. Since I only have six icons, I can make them all fit into two files. This is important because the browser only has to download two images to display these six icons. Each HTTP request back to the server can slow down a website. Using CSS to display the images also helps by allowing the browser to cache the images and reduce text in the HTML file.

These images were created in Photoshop using a transparent background. You can download various free social media icons. Search the internet and find some that you like that are 64 x 64 pixels. To create the tilted look, rotate the icon 30° and then resize so the height is 64 pixels. The total width of the image should be 64 x the number of icons, but remember to only store three per image file.

Changes to the CSS
Inside the Mystique theme, open the style.css file. Around 100 lines down into the file, you will see some code similar this:

#header .nav-extra
{width:64px;height:36px;display:block;position:absolute;bottom:18px;z-index:10;}
#header .nav-extra span
{display:none;}
#header .nav-extra.rss
{background:transparent url(images/nav-icons.png) no-repeat right top;right:20px;}
#header a.twitter
{background:transparent url(images/nav-icons.png) no-repeat left top;right:85px;}

Just below this block of CSS is where we will add our additions, which will be very similar to the last line of CSS implementing the twitter class on the “a” tag.

Add the following CSS to use the same image files and icons that I have used. You can change the name following the “a.” to anything you wish, but it should be something descriptive.

#header a.facebook
{background:transparent url(images/nav-icons.png) no-repeat center top;right:147px;}
#header a.myspace
{background:transparent url(images/nav-icons2.png) no-repeat right top;right:209px;}
#header a.flickr
{background:transparent url(images/nav-icons2.png) no-repeat center top;right:273px;}
#header a.linkedin
{background:transparent url(images/nav-icons2.png) no-repeat left top;right:338px;}

Here I have added additional icons for Facebook, MySpace, Flickr, and LinkedIn.

To reference the correct icon, using the background: CSS property, you can call the image file (nav-icons.png and nav-icons2.png). Using the top right, left and center keywords, you can select the icon file to use from the image. In the above example, the nav-icons.png file has three icons…by selecting the center one, I’m pulling out the Facebook icon from the first image above.

The “right” property positions the icon however many pixels from the right side of the screen. You can adjust this number to increase or reduce the amount of space between the icons.

Changes to the header
The last thing we need to do is add the HTML code to the header template. This will tell your browser to display the icons. Open the header.php file within the mystique theme, then look for the following block of code around line 55.

if ($twituser): ?>
  <a href="http://www.twitter.com/<?php echo $twituser; ?>" class="nav-extra twitter"
    title="<?php _e("Follow me on Twitter!","mystique"); ?>">
    <span><?php _e("Follow me on Twitter!","mystique"); ?></span>
  </a>
<?php endif; ?>

Next, we’ll add in our new icon HTML below the HTML shown above.

<a href="http://www.facebook.com/YOURPROFILE" class="nav-extra facebook"
  title="<?php _e("My Facebook Profile.", "mystique"); ?>">
  <span><?php _e("My Facebook Profile.", "mystique"); ?></span>
</a>

<a href="http://www.myspace.com/YOURPROFILE" class="nav-extra myspace"
  title="<?php _e("My MySpace Profile.", "mystique"); ?>">
  <span><?php _e("My MySpace Profile.", "mystique"); ?></span>
</a>

<a href="http://www.flickr.com/photos/YOURPROFILE/" class="nav-extra flickr"
  title="<?php _e("My Flickr Photos.", "mystique"); ?>">
  <span><?php _e("My Flickr Photos.", "mystique"); ?></span>
</a>

<a href="http://www.linkedin.com/in/YOURPROFILE" class="nav-extra linkedin"
  title="<?php _e("My LinkedIn Profile.", "mystique"); ?>">
  <span><?php _e("My LinkedIn Profile.", "mystique"); ?></span>
</a>

Make sure that you replace YOURPROFILE with the correct link information to your profile for these social media sites.

One thing that is important to notice is the CLASS attribute. There are two classes added to each “a” tag: nav-extra and the name of whatever social media icon you are displaying. This name must match the name specified in the CSS above that follows the “a.”.