Mark N Hewitt

This is an Updated tutorial of the Facebook Icon for Mystique Theme I did in January. The Hack is now a one of Edit for the Mystique theme after 1.9+ (this won’t work for earlier versions), no need to edit the header.php or style.css after each mystique theme update, thank good . So Here we Go.

First make sure you have got the lastest Mystique Theme Version 1.9+

In admin navigate to mystique setting, Advanced and in the User functions box after the <?php

function mystique_my_icons($nav_extra){
$nav_extra .= '<a href="**yourfacebookurl**" class="nav-extra facebook" title="My FaceBook Profile!"></a rel="nofollow">';

$nav_extra .= '<a href="**yourmyspaceurl**" class="nav-extra myspace" title="My Myspace Profile!"></a rel="nofollow">';

}

add_action('mystique_nav_extra', 'mystique_my_icons');

You can add as many icons as you like I personally have 9 on mine

Save Changes and then go to the next User CSS tab and add the following

#header{display:block;position:relative;z-index:5;}

#header .nav-extra{width:64px;height:44px;display:block;position:absolute;top:-26px;z-index:10;}
#header .nav-extra span{display:none;}
#header .nav-extra.rss{background:transparent url(/wp-content/uploads/mystique_icons/nav-icons.png) no-repeat right top;right:20px;}
#header a.twitter{background:transparent url(/wp-content/uploads/mystique_icons/nav-icons.png) no-repeat left top;right:84px;}
#header a.facebook{background:transparent url(/wp-content/uploads/mystique_icons/nav-icons.png) no-repeat center top;right:147px;}
#header a.myspace{background:transparent url(/wp-content/uploads/mystique_icons/nav-myspace.png) no-repeat right top;right:209px;}

{If you are using theme 2.0.2 then please use this code for the user.css ALSO using more than 3 icon brakes the navbar in IE with ver 2.0.2}

#header p.nav-extra{position:absolute;top:-40px;z-index:10;right:10px;}

#header a.nav-extra{width:64px;height:64px;display:block;float:right;}
#header a.nav-extra.rss{background:transparent url(/wp-content/uploads/mystique_icons/nav-icons.png) no-repeat right top;right:20px;}
#header a.twitter{background:transparent url(/wp-content/uploads/mystique_icons/nav-icons.png) no-repeat left top;right:84px;}
#header a.facebook{background:transparent url(/wp-content/uploads/mystique_icons/nav-icons.png) no-repeat center top;right:147px;}
#header a.myspace{background:transparent url(/wp-content/uploads/mystique_icons/nav-myspace.png) no-repeat right top;right:209px;}

Again Save Changes
The calculation for the spacing icons is easy, as you can see its just 20 + 64 +64 +64 +64 +64 +64 and so on, I also changed the height:-34; from 34 to 44 and the top:-18px; from 18 to 26 on line 101 of style.css to show more of the icons.

Now you will need to ftp into your webserver and make a new folder called mystique_icons in the uploads folder i.e. website_root/wp-content/uploads/ and add the following Icons into the mystique_icons folder.

RIGHT CLICK and SAVE AS or download the Icon pack at the bottom of the post.

Replacement for the original nav-icons

and now the extra icons

More icons

More icon can be made, just ask Download all the colour icons in one pack Nav Icon Zip - all 28 Icons

The reason I have not updated my site past version 2 is explained in the video below