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.
do you know what to add to images to have the builtin lightbox show them in groups (with the arrow navigation [if possible?])
Well, no. 🙂 Also, I don’t use the builtin lightbox.
Hi,
I’m trying to display Twitter, RSS, Facebook and Youtube on the top right. I followed everything on here, but it doesn’t seem to show up. I’ve uploaded the png files via ftp FireZilla through my website url/wp-content/uploads
Here is my CSS code:
#header a.nav-extra.rss{background:url("/wp-content/uploads/mystique_icons/nav-rss.png") no-repeat scroll right top transparent;} #header a.twitter{background:url("/wp-content/uploads/mystique_icons/nav-twitter.png") no-repeat scroll right top transparent;} #header a.facebook{background:url("/wp-content/uploads/mystique_icons/nav-facebook.png") no-repeat scroll right top transparent;} #header a.myspace{background:url("/wp-content/uploads/mystique_icons/nav-myspace.png") no-repeat scroll right top transparent;}I don’t actually see a ‘User Function’ area, so I’m presuming that this area is the ‘Document Head Code’ textbox… and I have this in there:
function mystique_custom_nav_icons($nav_extra) { $nav_extra = 'RSS Feeds'; $nav_extra .= 'Follow me on Twitter!' ; $nav_extra .= 'Contact me on Facebook!'; $nav_extra .= 'Check me out on Youtube!'; return $nav_extra; } add_action('mystique_navigation_extra', 'mystique_custom_nav_icons');I very much appreciate your help. Thank you for your time.
Jackson
Are you sure you are using Mystique 2.x? Because I don’t have a ‘Document Head Code’ area in my Mystique Settings page. If you are not using Mystique 2.x, this example will not apply to you.
My mistake. You are right Kerem, sorry about that. After I installed 2.2.2… my settings page looks a bit messed up, and I can`t get my site properties normally like the old one, thus I can`t get the icons to show up… any ideas thanks!
That’s a common problem when upgrading Mystique to 2.x. We all went through that. 🙂 You have to remove all customizations from Mystique settings, empty your cache and install the theme from scratch. And “never” use Internet Explorer on Mystique’s settings page, it messes everything up.
Does Mystique theme add my gravatar automatically without extra plugin?
Yes, it uses gravatars following your WordPress preferences.
How do I reorder it Facebook, Twitter, RSS?
You never give the code for the twitter in the php examples above…
Thanks,
Adam
ps. also if you have a minute I’m trying to raise the navigation without having the reset of the content move up…
The following has first Twitter, next RSS and next Facebook. Change the order of lines to have your desired order. Just be sure that the first line starts with
$nav_extra =and the following lines with$nav_extra .=(there is a dot before the equal sign in the lines following the first line)function mystique_custom_nav_icons($nav_extra) { $nav_extra = 'Follow me on Twitter!'; $nav_extra .= 'RSS Feeds'; $nav_extra .= 'Contact me on Facebook!'; return $nav_extra; }To raise the navigation, add the following to the User CSS tab:
.header-wrapper .shadow-right{padding-bottom: 20px;}Change
20pxvalue to your liking.Thanks for the info!!!!
You’re welcome Victor.
Kerem nice work! Easy to implement, really clear step-by-step tutorial. Thanks!
I am glad that I could help Dustin.
Cheers!
Solved. How do u highlight ur comments?
Hi Zeroner,
By highlight, if you mean code highlighting, I am using the WP-Syntax plugin.
Ty.
¿Which plugin/script do u use for add the feature to reply/quote comments at ur web?
Hi,
What I’m trying to do is display only the Facebook, Twitter, and RSS feed icons. And ideally I’d like to do this without having the Mystique|Twitter widget added to the sidebars.
I think I need to use some variation on this code block, but I can’t figure out exactly how to tweak this.
function mystique_custom_nav_icons($nav_extra) { $nav_extra = 'RSS Feeds'; $nav_extra .= 'Contact me on LinkedIn!'; $nav_extra .= 'Contact me on Facebook!'; return $nav_extra; } add_action('mystique_navigation_extra', 'mystique_custom_nav_icons');Any help would be greatly appreciated.
thanks.
Hi, Peter.
What you want to do can be done with this code:
function mystique_custom_nav_icons($nav_extra) { $nav_extra = 'RSS Feeds'; $nav_extra .= 'Follow me on Twitter!' ; $nav_extra .= 'Contact me on Facebook!'; return $nav_extra; } add_action('mystique_navigation_extra', 'mystique_custom_nav_icons');Cheers!
Kerem,
I hope you can help me out with one more thing. I’ve made the changes according to your entry and now I’m not getting any icons at all. here are the codes that I have in the various locations. I tried being explicit with the location of the image and it’s not helping. I’ve checked and it’s readable by the world so I don’t think it’s a permission problem. Any thoughts?
thanks. Peter
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("/capricon/blog/wp-content/uploads/nav-icons.png") no-repeat scroll right top transparent} #header a.twitter{background:url("/capricon/blog/wp-content/uploads/nav-icons.png") no-repeat scroll -128px top transparent} #header a.linkedin{background:url("/capricon/blog/wp-content/uploads/nav-icons.png") no-repeat scroll -64px top transparent} #header a.facebook{background:url("/capricon/blog/wp-content/uploads/nav-icons.png") no-repeat scroll 0px top transparent}User Functions:
function mystique_custom_nav_icons($nav_extra) { $nav_extra = 'RSS Feeds'; $nav_extra .= 'Follow me on Twitter!' ; $nav_extra .= 'Contact me on Facebook!'; return $nav_extra; } add_action('mystique_navigation_extra', 'mystique_custom_nav_icons');Hi Peter,
You give the wrong background url for images. They should be like the following for your blog (you don’t need the linkedin part, so I am writing the only needed CSS):
#header a.nav-extra.rss{background:url("/blog/wp-content/uploads/nav-icons.png") no-repeat scroll right top transparent} #header a.twitter{background:url("/blog/wp-content/uploads/nav-icons.png") no-repeat scroll -128px top transparent} #header a.facebook{background:url("/blog/wp-content/uploads/nav-icons.png") no-repeat scroll 0px top transparent}That did it. Thank you!!!
You’re welcome.
Hi. İsminden Türk olduğun anlaşılıyor. Sana bir sorum var. Şu theme-in hangi versiyonunu kullanıyorsun?
In case if you didn’t uderstand…
I would like to know which version of this theme do you use?
Merhaba Azer, şu anda en son versiyon olan 2.1’i kullanıyorum.
Thank You for your help 🙂
Just wanted to say thank you for your detailed explanation on how to do this! It worked perfectly.
Curious–is there any advantage to using the one graphic file of 4 icons vs just the four individual icons? I prefer to use the 4 just so I don’t have to mess with them, but I thought there may be a reason you’ve used a single file.
Hi Christopher,
Yes, 1 image file instead of 4 means 3 less HTTP requests from the server and while it may seem like a very small advantage, these small things add up and help the page load faster.
Ok, I’ll give it a shot. Thanks a lot for your help!
Hi Kerem, thanks for the post, it’s great!
I wanted to ask you: up above you wrote “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”. Since I don’t want to use Twitter nor RSS, how can I remove them both?
Thank you for your efforts 🙂
Hi Filippo,
Use these lines in the function:
Be sure that the
=sign after the first$nav_extradoes not have a dot before it. That way, you will remove both Twitter and RSS icons.Kerem, I owe you a lot 😀 I love the result!
If I may… in Mark Hewitt’s blog I read about give transparency to the navbar, and the code works, but I really don’t like the black color. I searched in the css and it looks like the black color is given by an image (nav.png). Is there any way I can keep the transparency effect and choose the color I like?
Thanks again for your help!
You’re welcome Filippo 🙂
I have not tried anything about transparency, so I will not be able to help you on that. But maybe you can try editing nav.png in an image editing program and change its color. That may do it.
Can anyone explain why my first 2 posts are showing comments as closed? I’ve already checked the discussion and post comments to make sure they’re turned on.
I found a bit of code that might be relevant to the problem but don’t know if I can share it here and the php code comment thingy on Mystique’s site isn’t working.
I visited your site and all of your posts that I checked accept comments. Am I missing something here?
Here’s an example. I don’t know what it’s called…the post page or whatever. It just says “comments are closed” below the comment form.
http://doddemagen.com/2010/02/wordless-wednesday-24-feb-2010.html
Does the Discussion section for this individual post (in Edit Post panel) show comments enabled? Globally enabling or disabling comments does not affect earlier written posts.
I’m looking at it right now in the Quick Edit screen and it shows “allow comments”. Weird!
BTW, I’ve always allowed comments on my blog.
I’m out of ideas here 🙂
Thanks ever so much for your help! Worked like a charm!!!!
Have you considered putting together a forum for those that want to do small tweaks to the theme? I think it would be a hit!
You’re welcome Bernard.
The forum would better be on Milenko’s site, as I am just a user of his theme 🙂
I only wish! I know it’s been mentioned many times before. I’m wondering if he would approve an “unofficial” forum by one us users?
He’s working on it, give him some time:
http://digitalnature.ro/blog/site-update/
i have big problem i used this code and my blog got crazy 🙁 maybe i did something wrong i don’t know but how can i remove this code?
You just need to delete everything you have just added on User CSS and Advanced tabs Filip.
my bad then i tried code again and now everything looks just same i copied the code in user css and i placed the picture from this site in here as you can see from this http://i45.tinypic.com/34h7too.jpg picture but nothing snows on blog 🙁 do you have msn or any other kind of chat so i wouldn’t have to write comments it would be faster to talk
It’s too late here (03.27 am) 🙂 Send me an e-mail and I’ll check your site tomorrow to see if it can be sorted out.
What plugin are you using to display user pictures next to their comments?
—
Mike George
Mike it’s not a plugin. When you create a gravatar at http://www.gravatar.com and associate it with your e-mail address that you use when leaving comments, it gets displayed on every WordPress installation globally.
Thanks for all your help!!!
You’re welcome 🙂
Thank you very much for these tweaks. I just started using WordPress. I am more of an HTML programmer so I don’t know much PHP. This helped a lot, but for some reason i had to rename the image and move it to the root directory and change the code accordingly, I don’t know why i had to do that but it worked.
Thanks again
—
Mike George
That was probably because your blog is not installed at domain root level, but is installed in /wordpress/ Mike.
Glad that you figured it out. Cheers.
I could use some help if you can spare it. I have 4 icons (or did before we went to 2.0.) on my page. After upgrading to 2.0.x none of the icons were displaying. After following your tutorial, now (rather bizarre) two of the four icons are showing.
I should have RSS, Twitter, Facebook, MySpace icons… but what’s showing up is: RSS, __________, ____________, MySpace. Yes, there are two blank spots where the Twitter and Facebook icons should be. I did verify that the links to the images were correct too.
Any ideas? Thanks!
Hi, you are using separate icon files for all of your links. You have to use the following style for your situation:
#header a.nav-extra.rss{background:url("/wp-content/uploads/mystique_icons/nav-rss.png") no-repeat scroll right top transparent;} #header a.twitter{background:url("/wp-content/uploads/mystique_icons/nav-twitter.png") no-repeat scroll right top transparent;} #header a.facebook{background:url("/wp-content/uploads/mystique_icons/nav-facebook.png") no-repeat scroll right top transparent;} #header a.myspace{background:url("/wp-content/uploads/mystique_icons/nav-myspace.png") no-repeat scroll right top transparent;}Wow, that’s great! Thanks so much. That has been bothering me for 2 days!
The best part is, I don’t even have to worry about icon spacing now when I add the next 2 icons my church group requested. You’re a life-saver!
Now, if I can only figure out how to drop the navbar and content areas about 150 pixels lower than they are now, I’ll be finished with my tweaks. I had them dropped lower with 1.7.2, but with the 2.0.x branch of Mystique I have only figured out how to drop the content area, I can’t seem to lower the nav-bar too.
Anyway… thanks again! Big help!
You can lower them by adding this line:
#site-title {height: 240px;}Change
240pxin this example according to your liking.Cheers and you’re welcome. 🙂
Sweet man! You’re my hero! 🙂
Now, I think I’ll see if I can replace the WordPress link title text (FBC Refuge) with a large 100% transparent image that links to the home page. That way the background image (header) becomes a clickable link… or at least looks that way to the end user.
I’ll play with that after I get back from the grocery store. I’ll let you know how it works out. Thanks again for the help!
I am glad that I could help. 🙂
I’m sorry to keep bothering you, after all I know it’s not your theme. But I haven’t received much help in the content thread at digitalnature.
The tweak I said I was going to remake… well, I seem to be failing all over myself. I am getting a little frustrated because I was able to do this with 1.7.2, and it was easy… which probably means I got lucky and GUESSED correctly, because obviously I don’t know what I’m doing. That aside, with 2.0.x I’m not as lucky and not doing as good a job at guessing.
I want to make the entire “header” area a clickable “Home” graphic. With the old version, you were able to use the advanced pre-built feature “Replace title text with logo” and I was able to use that and a large transparent graphic to accomplish what I’m after. I can’t seem to pull it off in 2.0.x.
The link below will show you what I’m trying to do.
http://fbcscrefuge.org/wp-content/uploads/support/header-support.jpg
Hi JaceMan,
No problem, but actually that’s a little over my head also, as I am not a designer and do most things design-wise with trial and error. Maybe you can try asking it again on digitalnature with the information you just provided. Milenko is a little overwhelmed with the bugs people encounter in 2.x right now so he sometimes skips some questions, but somebody with better CSS knowledge will probably be able to answer your question there.
Thanks man, I’ll give it a try! Hopefully the included image will help.