Extra nav-icons for the Mystique Theme

New System for the Extra Icons Details HERE

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 .= '';

$nav_extra .= '';

}

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.

and now the extra icons

More icons

More icon can be made, just ask Download all the colour icons in one pack

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

This tutorial was written for the theme up to 2.0.2 and since version 2.3 the themes code has change that much that this tutorial no longer works. It needs a new hack developing but at the moment I haven’t the time to look into it, but as the icons are not working properly in IE8 (see the video) I can’t even see the point of developing it this theme hack further.