« My life is about to restart, well hopefully

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

[code lang="css" light="on"]#header a.facebook{background:transparent url(images/nav-icons.png) no-repeat center top;right:148px;}[/code]

after the twitter icon code

[code lang="css" firstline="83" highlight="89"]#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;}[/code]

Next you have to open header.php located in /site_root/wp-content/themes/mystique/ and add the code

[code lang="php" light="on"]<a href="http://www.facebook.com/**YOURACCOUNT**" class="nav-extra facebook" title="<?php _e("Add me on FaceBook!","mystique"); ?>"><?php _e("Add me on FaceBook!","mystique"); ?></a>[/code]

after the twitter icon code. Please change the **YOURACCOUNT** to the right url for your facebook account.

[code lang="php" firstline="45" highlight="58"]
<?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"); ?>"><?php _e("Follow me on Twitter!","mystique"); ?></a>
<?php endif; ?>

<a href="http://www.facebook.com/**YOURACCOUNT**" class="nav-extra facebook" title="<?php _e("Add me on FaceBook!","mystique"); ?>"><?php _e("Add me on FaceBook!","mystique"); ?></a>
[/code]

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

[code lang="css" firstline="83" highlight="90,91,92,93,94,95"]
#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;}
[/code]

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

[code lang="php" firstline="45" highlight="55,56,57,58,59,60,61,62,63,64,65,66,67,68,69,70"]
<?php
//$twituser = get_mystique_option('twitter_id');
// if(is_active_widget('TwitterWidget'))
$twitinfo = get_option('mystique-twitter');
$twituser = $twitinfo['last_twitter_id'];

<a href="/contact-me" class="nav-extra contact" title="<?php _e("Contact Me!","mystique"); ?>"><?php _e("Contact Me!","mystique"); ?></a>
[/code]

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.

This entry was posted by MarkNHewitt on January 8, 2010 at 9:58 pm, and is filed under My Web Portfolio, My Work, Mystique theme edits. Follow any responses to this post through RSS 2.0.You can leave a response or trackback from your own site.

Comments (72)
Pings (1)
Related Posts

#53 written by Brent 2 years ago

Thanks! Works beautifully!

Reply Quote
#54 written by Mike 2 years ago

Thanks Mark – great resource.

Any idea how to make the icons rest underneath the nav bar as opposed to on top? Thought that would be cool.

Reply Quote
- #55 written by Mark Hewitt 2 years ago
  
  That would probably need a Javascript edit, you could ask the theme developer, that’s over my head
  
  Reply Quote
#56 written by jay 2 years ago

could you please add the facebook logo seperatly? as i cant edit the picture!

Reply Quote
- #57 written by Mark Hewitt 2 years ago
  
  Separate facebook icon Added
  
  Reply Quote
  - #58 written by Mike 2 years ago
    
    Cool – thanks anyway. You’re the man.
    
    Reply Quote
#59 written by Mile 2 years ago

in 1.9+ changing header.php won’t work. instead use the theme settings > advanced > user functions:

for eg.
[code lang="php"]
function mystique_my_icons($nav_extra){
$nav_extra .= '<a href="..." class="nav-extra youtube">Watch my Videos on YouTube!</a>';
$nav_extra .= '<a href="..." class="nav-extra lastfm">What have I been Listening to - Last FM!</a>';
return $nav_extra;
}

add_action('mystique_navigation_extra', 'mystique_my_icons');
[/code]

you should do the same for the css (user css), so you don’t have to modify theme files.

Reply Quote
- #60 written by Mark Hewitt 2 years 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
 
 Reply Quote
#61 written by Mark Hewitt 2 years 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

Reply Quote
#62 written by shabi 2 years 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?

Reply Quote
- #63 written by Mark Hewitt 2 years 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
  
  Reply Quote
#64 written by Technology Bookmarks 2 years 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

Reply Quote
#65 written by Jadeye 2 years ago

Nice theme! I also use this theme with some small modification, yours look much better.
Thanks for the icons.

Reply Quote
#66 written by Shahid 1 year 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

Reply Quote
- #67 written by Uriz 1 year 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:
 
 [code]
 
 [/code]
 
 On that case, you have the capability of choosing what to hide and show on every filtered post. Hope that would help you. ^_^
 
 - Uriz
 
 Reply Quote
#68 written by Ruben Woudsma 1 year 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?

Reply Quote
#69 written by David Grega 1 year 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.

Reply Quote
#70 written by Chuck 1 year ago

Mark,

I’m still stuck on how to change the default “wordpress” account in twitter to my own. Any help would be appreciated.

Reply Quote
#71 written by Ankur Thakur 1 year ago

Hey Guyz,

I don’t know why, but this may help some of you people. Actually, I was not having the problem with the code. Fortunately, I just thought to open the nav icons through my browser to check. And see what happens. It says “You don’t have permissions to access the file”

So, I just saw that the images are not set as PUBLIC to all (CHMOD 777). So, when I made all images to 777 or PUBLIC, I was able to access them through my Browser and now it is working

Please check my website for Demo if you wish to see.

Reply Quote
Type your comment

You may use these HTML tags: <a> <abbr> <acronym>  <blockquote> <cite> <code> <del>   <pre> <q> <strike> 

Notify me of follow-up comments by email.
Notify me of new posts by email.
Written from (location)
« Previous 1 2 3
Comment Feed for this Post