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.

       //$twituser = get_mystique_option('twitter_id');
       // if(is_active_widget('TwitterWidget'))
       $twitinfo =  get_option('mystique-twitter');
       $twituser = $twitinfo['last_twitter_id'];
       if ($twituser): ?>
      <a href="<?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; ?>
       <a href=""  class="nav-extra linkedin" title="<?php _e("Contact me on LinkedIn!","mystique"); ?>"><span><?php _e("Contact me on LinkedIn!","mystique"); ?></span></a>
       <a href=""  class="nav-extra facebook" title="<?php _e("Contact me on Facebook!","mystique"); ?>"><span><?php _e("Contact me on Facebook!","mystique"); ?></span></a>

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.

You may also like...

12 Responses

  1. Steve Farmer says:

    Thank you for this. Will try to update my blog icons later, also need to create linked in account.

    I love your ‘share the knowledge’ widget. Where did you get it from?


    • Kerem says:

      Hi Steve,

      ‘Share the Knowledge’ is a new background that will be released on v3.1 of Sexy Bookmarks. After working on the new sprite generator and being close friends, I requested it personally from Josh and he was very generous to do it. You will get your hands on it probably in a few days 🙂


  2. Hello, could zou tell me the name of the social sharing plugin you-re using at the bottom of every post? PLS 😀

    • Kerem says:

      It’s named Sexy Bookmarks. The version I use is not on the official plugin directory yet though. It’s a beta that I contributed some work to. You can download it from this link.

  3. Thanks very much for your promptitude 😀

  4. Eyl says:

    wow! I’ve made it.thanks for this useful tutorials!

  5. Sharad says:

    Thank you very much for these setting deails

  6. Uttam Poudel says:

    hi kerem,
    i’ve little error when i add that icon to take help from this post. Icon didnt display in nav bar but icons link display under bar. Whats is solution.

    • Kerem says:

      Hi Uttam,

      I have since switched to Mystique 3, which makes adding these images much easier and invalidates this post. I recommend you to do that also.

  7. Uttam Poudel says:

    Where to find mystique 3 . i’ve

Leave a Reply

Your email address will not be published. Required fields are marked *