Doing Stuff
Facebook Icon for Mystique Theme
This tutorial is now out of date, it will only work for the mystique version pre 1.9 A new tutorial can be found HERE
This is how I managed to put a facebook icon next to the twitter and rss icon on the mystique wordpress theme available from Digitalnature
First of all I edited the style.css file located in /site_root/wp-content/themes/mystique/ and added the code
#header a.facebook{background:transparent url(images/nav-icons.png) no-repeat center top;right:148px;}
after the twitter icon code
#header{display:block;position:relative;z-index:5;height:180px;}
#header .nav-extra{width:64px;height:36px;display:block;position:absolute;bottom:18px;z-index:10;}
#header .nav-extra span{display:none;}
#header .nav-extra.rss{background:transparent url(images/nav-icons.png) no-repeat right top;right:20px;}
#header a.twitter{background:transparent url(images/nav-icons.png) no-repeat left top;right:85px;}
#header a.facebook{background:transparent url(images/nav-icons.png) no-repeat center top;right:148px;}
Next you have to open header.php located in /site_root/wp-content/themes/mystique/ and add the code
<a href="http://www.facebook.com/**YOURACCOUNT**" class="nav-extra facebook" title="<?php _e("Add me on FaceBook!","mystique"); ?>"><span><?php _e("Add me on FaceBook!","mystique"); ?></span></a>
after the twitter icon code. Please change the **YOURACCOUNT** to the right url for your facebook account.
<?php
//$twituser = get_mystique_option('twitter_id');
// if(is_active_widget('TwitterWidget'))
$twitinfo = get_option('mystique-twitter');
$twituser = $twitinfo['last_twitter_id'];
if ($twituser): ?>
<a href="http://www.twitter.com/<?php echo $twituser; ?>" class="nav-extra twitter" title="<?php _e("Follow me on Twitter!","mystique"); ?>"><span><?php _e("Follow me on Twitter!","mystique"); ?></span></a>
<?php endif; ?>
<a href="http://www.facebook.com/**YOURACCOUNT**" class="nav-extra facebook" title="<?php _e("Add me on FaceBook!","mystique"); ?>"><span><?php _e("Add me on FaceBook!","mystique"); ?></span></a>
Finally I edited the nav-icon.png image with photoshop (a little rough around the edges but it looks ok. Milenko could do it better as he has the original files 
)
Right Click and Save as and then ftp up to your server into the/site_root/wp-content/themes/mystique/images/ folder
Maybe something like this is going to be implemented into an upcoming release of mystique and maybe with a setting for facebook username, fan page or url in theme settings in future but for now at least you can have a facebook icon next to the twitter and RSS icon.
I’m not sure if this was the correct way to do this or if there is a better way but it seams to work. Thanks for looking
UPDATE :
I have made some better iconfiles
nav-icons.png
Download all the colour icons in one pack DOWNLOAD
Other icons can be made, if you have a request then please ask in the comments or ask me via the contact page.
How about a nav-icon set I made for another website I’m working on over @ Zerokillers Clan
alt nav-icons
The other set of icons was achieved by adding more lines off code to header.php and style.css
style.css
#header{display:block;position:relative;z-index:5;height:180px;}
#header .nav-extra{width:64px;height:44px;display:block;position:absolute;bottom:18px;z-index:10;}
#header .nav-extra span{display:none;}
#header .nav-extra.rss{background:transparent url(images/nav-icons.png) no-repeat right top;right:20px;}
#header a.twitter{background:transparent url(images/nav-icons.png) no-repeat left top;right:84px;}
#header a.facebook{background:transparent url(images/nav-icons.png) no-repeat center top;right:147px;}
#header a.youtube{background:transparent url(images/nav-youtube.png) no-repeat right top;right:209px;}
#header a.lastfm{background:transparent url(images/nav-lastfm.png) no-repeat right top;right:273px;}
#header a.flickr{background:transparent url(images/nav-flickr.png) no-repeat right top;right:338px;}
#header a.myspace{background:transparent url(images/nav-myspace.png) no-repeat right top;right:402px;}
#header a.linkedin{background:transparent url(images/nav-linkedin.png) no-repeat right top;right:466px;}
#header a.contact{background:transparent url(images/nav-contact.png) no-repeat right top;right:530px;}
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 from 34 to 44 on line 85 of style.css to show more of the icons.
and now header.php
<?php
//$twituser = get_mystique_option('twitter_id');
// if(is_active_widget('TwitterWidget'))
$twitinfo = get_option('mystique-twitter');
$twituser = $twitinfo['last_twitter_id'];
if ($twituser): ?>
<a href="http://www.twitter.com/<?php echo $twituser; ?>" class="nav-extra twitter" title="<?php _e("Follow me on Twitter!","mystique"); ?>"><span><?php _e("Follow me on Twitter!","mystique"); ?></span></a>
<?php endif; ?>
<a href="http://www.facebook.com/**YOURACCOUNT**/" class="nav-extra facebook" title="<?php _e("My FaceBook Profile!","mystique"); ?>"><span><?php _e("My FaceBook Profile!","mystique"); ?></span></a>
<a href="http://www.youtube.com/**YOURACCOUNT**" class="nav-extra youtube" title="<?php _e("Watch my Videos on YouTube!","mystique"); ?>"><span><?php _e("Watch my Videos on YouTube!","mystique"); ?></span></a>
<a href="http://www.last.fm/user/**YOURACCOUNT**" class="nav-extra lastfm" title="<?php _e("What have I been Listening to - Last FM!","mystique"); ?>"><span><?php _e("What have I been Listening to - Last FM!","mystique"); ?></span></a>
<a href="http://flickr.com/photos/**YOURACCOUNT**" class="nav-extra flickr" title="<?php _e("My Photo's on Flickr!","mystique"); ?>"><span><?php _e("My Photo's on Flickr!","mystique"); ?></span></a>
<a href="http://www.myspace.com/**YOURACCOUNT**" class="nav-extra myspace" title="<?php _e("My MySpace Profile!","mystique"); ?>"><span><?php _e("My MySpace Profile!","mystique"); ?></span></a>
<a href="http://uk.linkedin.com/in/**YOURACCOUNT**" class="nav-extra linkedin" title="<?php _e("My Linkedin Profile!","mystique"); ?>"><span><?php _e("My Linkedin Profile!","mystique"); ?></span></a>
<a href="/contact-me" class="nav-extra contact" title="<?php _e("Contact Me!","mystique"); ?>"><span><?php _e("Contact Me!","mystique"); ?></span></a>
Not forgetting to replace the **YOURACCOUNT** for your details. Finally uploading the nav-icons2.png file to the images folder of the mystique theme.
Any questions feel free to ask.
About the author
Mark N Hewitt, Father of 3, Webmaster, Computer / Printer Engineer, Blogger.
| Print article | This entry was posted by Mark Hewitt on January 8, 2010 at 9:58 pm, and is filed under My Personal Life. Follow any responses to this post through RSS 2.0. You can leave a response or trackback from your own site. |
about 6 months ago
could you please add the facebook logo seperatly? as i cant edit the picture!
about 6 months ago
Separate facebook icon Added
about 6 months ago
Cool – thanks anyway. You’re the man.
about 6 months ago
in 1.9+ changing header.php won’t work. instead use the theme settings > advanced > user functions:
for eg.
function mystique_my_icons($nav_extra){ $nav_extra .= '<a href="..." class="nav-extra youtube"><span>Watch my Videos on YouTube!</span></a>'; $nav_extra .= '<a href="..." class="nav-extra lastfm"><span>What have I been Listening to - Last FM!</span></a>'; return $nav_extra; } add_action('mystique_navigation_extra', 'mystique_my_icons');you should do the same for the css (user css), so you don’t have to modify theme files.
about 6 months ago
That’s so cool it will be nice not to have to re-edit after update. I will update the tutorial, keeping the icons available.
Thanks for the Great Theme
about 6 months ago
This post is now out of date for the new 1.9.9 version please see http://www.marknhewitt.co.uk/archives/1921 for the new tutorial
about 5 months ago
hloo… i want the alt-nav icons on my theme,,,,there is no icon files of these black icons….
how can i use these?
about 5 months ago
right click and save image as on the black icons, I do intend making a new page dedicated to the icons so users can download or request different icons, and maybe I will make a few more styles just for the mystique theme
about 3 months ago
Hi
I have update to latest mystiqaue after updating images are not displayed in main page ,please help thanks in advance.
This is my site http://trickbin.com
Regards
about 3 months ago
Nice theme! I also use this theme with some small modification, yours look much better.
Thanks for the icons.
about 2 months ago
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 http://www.egydown.com (no spamming)
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
about 2 months ago
Hi Shahid,
Regarding your question, about showing both image and text at “100 words, filtered” mode, my answer would be “no” i think it would be better if you choose “Full” instead of “100 words, filtered”. If your worried about the filtering and the “More >” button on every post, add this code instead:
On that case, you have the capability of choosing what to hide and show on every filtered post. Hope that would help you. ^_^
- Uriz
about 1 month ago
Hi Mark, I just analysed your code and the code of the latest Mystique theme and found the main difference between the solution you are currently using on your website and the solution as it is been provided via Mystique.
As you can see in the following response on Mystique it has to do with absolute position and float, see:
http://digitalnature.ro/projects/mystique/comment-page-200/#comment-10343
Maybe this is any help for you and your visitors reading this post?
about 1 month ago
To get the advice from the blog for 2.0.2 to work in 2.4.2:
Change the add_action in the custom PHP to:
add_action(‘mystique_navigation_extra’, ‘mystique_my_icons’);
Add the following line of code before } in the mystique_my_icons functions:
return $nav_extra;
The CSS works as-is on Firefox 4. I have not tested on MSIE.