Adding up on Mark Hewitt’s Mystique Facebook Icon Hack

UPDATE: This post is only valid for Mystique versions up to 1.7.2. Newer versions need a different approach which can be found on this post.

Well, Mystique is a beautiful theme, but the original icons for Twitter and RSS Feed you see on the upper right were not very appealing to the eye. And the Facebook and LinkedIn icons? They are not part of the theme.

So, what I have done to add those extra icons is, follow the instructions on Mark Hewitt’s Facebook Icon for Mystique Theme post. But editing the style.css file and uploading the icons over and over is not necessary after each theme update, so here are more update friendly instructions:

First, download the following image (all icons created by Mark, I only merged the LinkedIn icon into the default icon set), and upload it to your site. It will go to the SITE_ROOT/wp-content/uploads/ directory, if you did not change your upload destination.

OK, now that you have uploaded your image to your site, you will have to edit your site style. But instead of editing the style.css file directly, you will add the necessary changes to Mystique’s settings, so that they will not be overwritten after a theme update. Go to your admin panel and select Mystique settings under Appearance. In the settings page, select the User CSS tab, and add the following lines there:

#header .nav-extra.rss{background:transparent url(/wp-content/uploads/nav-icons.png) no-repeat right top;right:20px;}
#header a.twitter{background:transparent url(/wp-content/uploads/nav-icons.png) no-repeat -128px top;right:84px;}
#header a.linkedin{background:transparent url(/wp-content/uploads/nav-icons.png) no-repeat -64px top;right:148px;}
#header a.facebook{background:transparent url(/wp-content/uploads/nav-icons.png) no-repeat 0px top;right:212px;}

The numbers after no-repeat in these lines select which icon to show. 0px is the first icon (i.e. Facebook), -64px is the second one (i.e. LinkedIn) etc. with decreasing 64 pixels. And the numbers at the very end of the lines show where these icons will be from the right side. For example, 84px will put the icon to 84 pixels left of the right side.

If you want to lift the icons up a little bit, also add the following line:

#header .nav-extra{width:64px;height:46px;display:block;position:absolute;bottom:18px;z-index:10;}

The height element in this line determines the height of the icons.

Now that you have readied your icons, let’s show them on your site. You have to manually edit the header.php file in SITE_ROOT/wp-content/themes/mystique folder unless Milenko (designer of Mystique) comes up with another solution in the future versions of the theme.

Open header.php with a text editor and add the last two lines in the following code. These lines will go just after twitter code (they should go about lines 61-62 in version 1.72 of the theme). I have also included some of the original code for you to be able to find where to add the lines.

      
      ">
      
       /* ADD THE FOLLOWING LINES */
       ">
       ">

Change YOUR_LINKEDIN_USER and YOUR_FACEBOOK_USER according to your contact info.

If you don’t need one or both of these icons (for example only to have the fancy Twitter and RSS icons Mark created), just delete the according lines from both header.php and User CSS tab of Mystique settings.

That’s all, you can find additional info and icons on Mark’s post.