This is an article from Mark N Hewit, – all credits to Mark!
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**" title="My FaceBook Profile!"></a rel="nofollow">'; |
$nav_extra .= '<a href="**yourmyspaceurl**" 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.
All the icons may be downloaded in a Icon Pack made by Mark N Hewit.
