Mystique theme for WordPress has reached version 2.0. Milenko is very active on updating it. With 2.0, you don’t need to edit any theme files manually, and this makes it much easier to add new social networking icons and replace the default Twitter and RSS icons. Here is how to do it:
First, download the image below (all icons were created by Mark Hewitt, I only merged the LinkedIn icon into the default icon set. You can find other icons on his site.), 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. 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:
/* Extra navigation icons */
#header a.nav-extra.rss{background:url("/wp-content/uploads/nav-icons.png") no-repeat scroll right top transparent}
#header a.twitter{background:url("/wp-content/uploads/nav-icons.png") no-repeat scroll -128px top transparent}
#header a.linkedin{background:url("/wp-content/uploads/nav-icons.png") no-repeat scroll -64px top transparent}
#header a.facebook{background:url("/wp-content/uploads/nav-icons.png") no-repeat scroll 0px top transparent}
The numbers after scroll 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.
If you want to lift the icons up a little bit, add the following lines before the lines you have just written:
#header p.nav-extra {top:-46px;height:54px;}
#header a.nav-extra {height:60px;}
You can change the height of the icons by changing the value of -46px in the first line.
Now that you have readied your icons, let’s show them on your site. Now select the Advanced tab from Mystique Settings, left to the User CSS tab that you are currently on. In the User functions section, add the following -and read the warning below a few times before adding it-. (do not remove the first line that says php there!)
WARNING! The following code is PHP code, that means, it will render your blog unusable if you don’t know PHP and try to change the contents of the code. Backup your WordPress database before adding this code.
function mystique_custom_nav_icons($nav_extra)
{
$nav_extra .= '<a href="YOUR_LINKEDIN_PROFILE" class="nav-extra linkedin" title="Contact me on LinkedIn!"><span>Contact me on LinkedIn!</span></a>';
$nav_extra .= '<a href="YOUR_FACEBOOK_PROFILE" class="nav-extra facebook" title="Contact me on Facebook!"><span>Contact me on Facebook!</span></a>';
return $nav_extra;
}
add_action('mystique_navigation_extra', 'mystique_custom_nav_icons');
If you want to remove Twitter icon and only want to show RSS, Facebook and LinkedIn icons, add this code instead of the one above:
function mystique_custom_nav_icons($nav_extra)
{
$nav_extra = '<a href="'.get_bloginfo('rss2_url').'" class="nav-extra rss" title="RSS Feeds"><span>RSS Feeds</span></a>';
$nav_extra .= '<a href="YOUR_LINKEDIN_PROFILE" class="nav-extra linkedin" title="Contact me on LinkedIn!"><span>Contact me on LinkedIn!</span></a>';
$nav_extra .= '<a href="YOUR_FACEBOOK_PROFILE" class="nav-extra facebook" title="Contact me on Facebook!"><span>Contact me on Facebook!</span></a>';
return $nav_extra;
}
add_action('mystique_navigation_extra', 'mystique_custom_nav_icons');
If you want to change the order of the icons, change the order of the lines in the example. Also, you can remove a line altogether if you don’t want to show an icon. For example the following code only shows RSS and Facebook icons with Facebook icon at the right and RSS icon at the left:
function mystique_custom_nav_icons($nav_extra)
{
$nav_extra = '<a href="YOUR_FACEBOOK_PROFILE" class="nav-extra facebook" title="Contact me on Facebook!"><span>Contact me on Facebook!</span></a>';
$nav_extra .= '<a href="'.get_bloginfo('rss2_url').'" class="nav-extra rss" title="RSS Feeds"><span>RSS Feeds</span></a>';
return $nav_extra;
}
add_action('mystique_navigation_extra', 'mystique_custom_nav_icons');
Change YOUR_LINKEDIN_PROFILE and YOUR_FACEBOOK_PROFILE according to your contact info. That’s all, now you should have the new icons on your site.
Okay… so i literally just uploaded the png file… copied and pasted the two pieces of code … and it doesn’t work. i started over a coulple times… i can not figure out what i’m doing wrong. Is this out of date due to new theme version or something?
The links are there the image just isn’t showing up.
joshsliffe@gmail.com
westclub.summitrdu.com
Your nav-icons.png which should be at http://westclub.summitrdu.com/wp-content/uploads/nav-icons.png is not there. Check again.
And… yes! Now is working just fine!
Permission problems, the *right top* thing you said, and, all my files are under a wordpress folder (/wordpress/wp-content/themes/…). I have tried yesterday with and without it in the address. But, it was late in the night…
Thank you!
My User CSS
/* Extra navigation icons */ #header p.nav-extra {top:-46px;height:54px;} #header a.nav-extra {height:60px;} #header a.nav-extra.rss{background:url("/wordpress/wp-content/themes/mystique/images/nav_icons/nav-rss.png") no-repeat scroll right top transparent} #header a.twitter{background:url("/wordpress/wp-content/themes/mystique/images/nav_icons/nav-twitter.png") no-repeat scroll right top transparent} #header a.googlebuzz{background:url("/wordpress/wp-content/themes/mystique/images/nav_icons/nav-googlebuzz.png") no-repeat scroll right top transparent} #header a.delicious{background:url("/wordpress/wp-content/themes/mystique/images/nav_icons/nav-delicious.png") no-repeat scroll right top transparent} #header a.flickr{background:url("/wordpress/wp-content/themes/mystique/images/nav_icons/nav-flickr.png") no-repeat scroll 0px top transparent}I am glad that I could help André.
Cheers 🙂
Hey, thank you very much! Sorry for botter you with that. I read the first comment but I really suck on CSS.
About the files, the problem was actually permission. I moved the files by FTP between folders and messed all the permission.
I do understand this thing of information overload.
Thank you, Kerem!
And I try both, positive and negative in the CSS values.
As a reply to your former two comments,
First, you are using separate images, so you should use
right topin your CSS for all icons like the one for the RSS icon. You could find this in the very first comment on this post as someone also had the same problem as yours. 🙂The other thing, it is a very fine line between writing a helpful tutorial and making it an information overload. First, the dot problem you mentioned is a PHP feature and to explain what it means I would have to start explaining PHP variables and how they are set and reset, so I did not want to go into that stuff. But basically, if you don’t put a dot before the equals sign, you reset a variable and if you put the dot, you append something to that variable. The second one, the difference in the names of icons is over me, it is the decision of Milenko who is the designer of Mystique, I am just a user like you who tries to find his way through CSS.
Cheers.
Also, all images that you have set as icon images are getting “file not found” errors. That is, they do not exist in the location that you tell they are. You should first correct that error.
Thanks!
I trying to use but it doesn’t work. I know this is not a tutorial for CSS but, some things like a dot here ($nav_extra .=) and not there ($nav_extra =) or why it is called #header a.nav-extra.rss then a.twitter does not make sense or need more explanation.
I don’t thing your code is wrong, but I miss some attention to details to personalize with generic examples.
My USER CSS
/* Extra navigation icons */ #header p.nav-extra {top:-46px;height:54px;} #header a.nav-extra {height:60px;} #header a.nav-extra.rss{background:url("/wp-content/themes/mystique/images/nav_icons/nav-rss.png") no-repeat scroll right top transparent} #header a.twitter{background:url("/wp-content/themes/mystique/images/nav_icons/nav-twitter.png") no-repeat scroll 192px top transparent} #header a.googlebuzz{background:url("/wp-content/themes/mystique/images/nav_icons/nav-googlebuzz.png") no-repeat scroll 128px top transparent} #header a.delicious{background:url("/wp-content/themes/mystique/images/nav_icons/nav-delicious.png") no-repeat scroll 64px top transparent} #header a.flickr{background:url("/wp-content/themes/mystique/images/nav_icons/nav-flickr.png") no-repeat scroll 0px top transparent}My function
Great tutorial.
I don’t like to use /wp-content/uploads as folder. Instead, better use the default theme folder /mystique/images/
Just a tip for not delete accidentally any image.
You can use any folder you want. But when using Mystique’s folder, you need to upload the image again after updating the theme. That’s why I suggest the uploads folder.
Everything worked, except the image is not displayed. When I mouse over the navigation bar the title shows and the link works, but no image. My domain is not registered yet. Is that why the image does not display? My uploaded images are under (“/thevillageswebsites.com/wordpress/wp-content/uploads/FacebookIcon.png”) but as you can see, my temporary domain is listed above.
You have a configuration error and the browser tries to download (“/thevillageswebsites.com/wordpress/wp-content/uploads/2010/07/FacebookIcon.png”). After correcting that issue, it should work.
Great theme!
Thanks, working on a new project and have decided to go with this theme. Looked around the net found a few articles and your made it a simple 2 minute process. Much thanks.
-Steve
I am happy to be able to help Steve.
Cheers.
great i m also using this theme for my blog.. i want it to use in my own way.. my blog is similar to this one [removed for inappropriate content]
eg: Mystique Settings>>Content>>Post Previews>> Content=”100 words/filtered”
i have all posts with images and then text in them(and image is not uploaded onto my site its linked from another site and embed in html code eg: )
is there anyway that image and text both shows when ‘100words/filtered’ is chosen.
thanks in advance
You should set post previews to “full” in Mystique and use a plugin for previews. “Post Teaser” plugin can work for you.
Hi,
Very nice web, I use this theme too and this tutorial helped me to put those icons on my blog.
What plugin did you use for that “Share the knowledge” Sharer, I like it very much! I want that ^^
I would apreciate some info!
Bye!
It is Sexy Bookmarks which I had the chance to be able to contribute some code to.
Cheers!
Hey. I don’t want to add new icons, I’d just like to place an image to the left of the current Twitter and RSS icons. I don’t want it to link anywhere or have any hover effect. Is this possible?
Cheers.
It’s probably possible, but I don’t know how to do it. Maybe someone can answer that on Mystique’s own comments section on Milenko’s site.
it doesnt work. i try it via localhost
You are probably doing something wrong. You should follow the steps more carefully.
I can not thank you enough! This works perfectly and is exactly what I was looking for. Many thanks!
You’re welcome Adam. I checked out your site and being both an HDR and automobiles fan, it was like I was in heaven! Keep up the good work. 🙂
Wow dude! This was awesome! Thanks for the help! It worked like a charm!
Wow this is great just what i needed 🙂
worked perfect for me thank you very mutch for this solution
The results are visable at http://www.beeldenbewerk.nl
Thanks for the tuto. I have a portal which frontpage is not wordpress, and its theme is custom and not mystique. Despite of this, I figured out how to add the icons into a div of a page (my test page is http://www.esquerrarubi.cat/index20100330.html ), but not the animation. I mean, if you hover over with the mouse, nothing happens.
I would need to have this working, in the front page which is not wordpress.
Do you know which part I am missing?
Sorry, I don’t know the animation either. I am not a designer, I mostly find what to do by trial and error.
Never mind i got it right, i places the second block of code in the wrong sectiion. Thank you very much for this extremely helpful tutorial. Good day.
Hi, it was night here, so sorry for the late reply. I am glad you have figured it out. Cheers.
Umm, i guess, i don=t know how to integrate a code into a comment, eather. Here it is a capture that contains the code i used: http://img26.imageshack.us/img26/9126/capturebwr.jpg .
Thank you.
Hello, i did everything just as you indicated, but i can’t add more icons except the two that already exist, [twitter and rss]. I can chenge the icon of these two as many times as i want, but i cannot add more icons. Im using individual icons for twitter and rss, qas for all the other that are not shown. I hope this is not a problem.
I wil give to you the code that showd connect the icon with the corespondent site, this one is onlz for facebook:
function mystique_custom_nav_icons($nav_extra) { $nav_extra .= 'Contact me on Facebook!'; return $nav_extra; } add_action('mystique_navigation_extra', 'mystique_custom_nav_icons');Help me, please.