Posts tagged Social

Adding Facebook and LinkedIn icons on Mystique v2.x

151

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.

Adding up on Mark Hewitt’s Mystique Facebook Icon Hack

12

UPDATE: This post is only valid for Mystique versions up to 1.7.2. Newer versions need a different approach which can be found on this post.

Well, Mystique is a beautiful theme, but the original icons for Twitter and RSS Feed you see on the upper right were not very appealing to the eye. And the Facebook and LinkedIn icons? They are not part of the theme.

So, what I have done to add those extra icons is, follow the instructions on Mark Hewitt’s Facebook Icon for Mystique Theme post. But editing the style.css file and uploading the icons over and over is not necessary after each theme update, so here are more update friendly instructions:

First, download the following image (all icons created by Mark, I only merged the LinkedIn icon into the default icon set), 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. But instead of editing the style.css file directly, 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:

Go to Top