Add Social Media Icons

[vauxflow 0]

Hi folks. Please can someone help a total newbie in lay mans terms please. I wish to do the following: I want to change the StumbleUpon icon link in the Header to the MySpace icon can someone please tell me how and what I need to change as I have searched the FAQ for a good few hours and cannot find a direct answer. I also noticed in the sprite collection of icons that there are coloured icons and the grey ones that I am currently using, does anyone know where I can also get a Bebo icon the same that also functions the same way as my current social icons? Thanks in advance

[hajir 0]

In your dashboard, go to 'Appearances' and click editor. Find Theme Functions (functions.php) Locate the following: // what the function does??“in this case adds a stumbleupon icon to the header of your theme. The class referenced in the link can be seen in the style.css // and is the image from the CSS is placed in the images folder ?> <?php } Now notice the stumbleupon link and icon file between the ?> and <?php ... You can imitate the same code just copy and past it underneath it or just change the same one if you don't want stumbleupon. Hope that helps.

[hajir 0]

For icons, I usually find everything I need here: http://www.iconfinder.com/free_icons just grab the color version fo whatever you need and change it to grey by photoshop or a program similar.

[vauxflow 0]

Hi Hajir, Woo Hoo getting there. Ok so I have now managed to change the StumbleUpon address to the MySpace address: `` However although the link when clicked now directs you to the correct MySpace URL the icon is still showing the StumbleUpon icon. I don't know how to change the StumbleUpon icon to the included grey MySpace icon thats in the sprite. Regarding the iconfinder.com site... Yes I have used this site and did manage to download a Bebo icon but only the coloured version. If I make it grey like the others using Photoshop then how would I get it to change to colour when hoovered over like my current icons?

[vauxflow 0]

Anyone? Just real anxcious in getting this sorted as I've been trying for almost two days now. Simply want to change the StumbleUpon Icon to the MySpace grey icon included in the sprite but dont know where to start with coding. Also want to add a Bebo Icon that I have already got but don't know where or how to place it with the other social icons in Platform. As below, I've changed the StumbleUpon code in functions.php to link to the required MySpace URL but the StumbleUpon icon still shows instead of the MySpace icon. ``

[vauxflow 0]

Bump

[bryan-hadaway 3]

You need to of course change the graphic: http://www.pagelines.com/demos/platformpro/wp-content/themes/platformpro/images/sprite-socialicons.png you'll want to find on your website: http://www.yourwebsite.com/wp-content/themes/platformpro/images/sprite-socialicons.png add a MySpace icon over the StumbleUpon icon in a graphic editor (free one here: http://www.gimp.org/) then upload and overwrite the current image file. Thanks, Bryan

[vauxflow 0]

Wordpress Link But how do I go about adding additional icons for Social sites? What coding do I alter and where? I know where the icon sprites are Bryan as I've been looking at them for two days now, I need help with what coding to add and edit to make the additional icons appear and for their URL links to work when clicked on. Also how do I get the grey icons that I'll be adding to show color when hovered over like the current Platform icon set.

[bryan-hadaway 3]

Can I get a link please? Point and case of what can help things move along faster sometimes: http://www.pagelines.com/forum/topic.php?id=6153 Thanks, Bryan

[vauxflow 0]

Web Link as above in previous post Bryan. Thanks

[bryan-hadaway 3]

Ahh, sorry... must of hit the topic within seconds of your last update and missed it. Anyways, here are your icons: As formerly instructed you'll want to paste over StumbleUpon with MySpace. Here are icons here: http://www.google.com/images?q=myspace+icon&hl=en&biw=1600&bih=765&gbv=2&tbs=isch:1,isz:ex,iszw:20,iszh:20 If you've never used a graphics editor and aren't looking to learn you'll need to turn to a pro: http://www.pagelines.com/pros/ Thanks, Bryan

[vauxflow 0]

No problem with the graphics Bryan, thats one thing I'm good with Photoshop Only problem I have with pasting over the top Bryan is that I need to add at least 3 other icons so this is why I need to know how to and where to add the links and coding. Pasting over the StumbleUpon icon will work but when I try to add other icons then I'll simply be overwriting the previous each time, hope that makes sense?

[bryan-hadaway 3]

I see, you're looking to add more than just MySpace. Okay, so we could just use: ` add_action('pagelines_branding_icons_end', 'add_icons_to_branding'); function add_icons_to_branding(){ ?> <?php } ` and more directly just add a normal icon image link instead of fussing with the CSS sprites image. You'd just upload the icons via the WordPress Media upload. And if you want to keep up with the whole B&W to color on hover theme perhaps it would be best if you just created a second sprites graphic to use for additional icons and I could help you with the CSS. Thanks, Bryan

[vauxflow 0]

Great Bryan. I already have my icons sitting here on desktop waiting lol, grey and color version are good to go. The script code in your above post Bryan, sorry but where would I paste that. Told you, newbie!

[bryan-hadaway 3]

Appearance > Editor > Theme Functions Thanks, Bryan

[vauxflow 0]

Where should I upload the icons to Bryan? Also, will the above script allow both color and grey versions of icons to be recognised and function like my current ones? *Sorry, I should have also asked where abouts within functions.php should I paste the script code above.

[bryan-hadaway 3]

The CSS is what is going to allow that effect. So, I'm think for safe measure I better have you add classes like so: `` Where whatever is the actual name of the social network lowercase. Upload images to the Media tab in the main WordPress admin area. Thanks, Bryan

[vauxflow 0]

Sorry it looks like we posted at the same time again please see my added piece in my previous post. Thanks

[vauxflow 0]

Bryan or anyone who can help. Could someone please give me the full script coding and tell me where I need to paste it into so that I can add additional Social icons that also function like my current social icons, e.g grey then when hovered over change to color. Thanks.

[Kate 3]

Hi Craig - What Bryan gave you above is the full script, with the exception that you don't include the image tag. You just need to paste the code anywhere inside of functions.php. In addition, you would just add to it for other icons. For instance, to add GoogleBuzz: ` add_action('pagelines_branding_icons_end', 'add_icons_to_branding'); function add_icons_to_branding(){ ?> <?php } ` This is the CSS (in the theme files) that controls the icons:

/* @ Header Icons */
	.icons {text-align: right;position: absolute;bottom: 15px; right:0px;line-height: 20px;height: 24px;}
	.icons a {display: block;width: 22px; height: 22px; margin-left: 7px; float: right;text-align: right;}
	.icons .twitterlink {background: url(../images/sprite-socialicons.png) no-repeat -22px 0;}
	.icons .youtubelink {background: url(../images/sprite-socialicons.png) no-repeat -44px 0;}
	.icons .linkedinlink {background: url(../images/sprite-socialicons.png) no-repeat -66px 0;}
	.icons .facebooklink {background: url(../images/sprite-socialicons.png) no-repeat -88px 0;}
	.icons .rsslink {background: url(../images/sprite-socialicons.png) no-repeat 0 0;}
	.icons .twitterlink:hover {background-position: -22px -22px;}
	.icons .youtubelink:hover {background-position: -44px -22px;}
	.icons .linkedinlink:hover {background-position: -66px -22px;}
	.icons .facebooklink:hover {background-position: -88px -22px;}
	.icons .rsslink:hover {background-position: 0px -22px;}

So, assuming you added the icons to the original PNG in the correct way, your CSS for the two links above would be something like this:

.icons .whatever{background-position:-110px -22px;}
	.icons .whatever:hover{background-position:0px -22px;}
	.icons .GoogleBuzz{background-position:-132px -22px;}
	.icons .GoogleBuzz:hover{background-position:0px -22px;}

And you would just continue that way as you add social icons. Note that you don't need to re-add that first bit of CSS I gave you. Just add the second part (with the two new classes) to your custom code (CSS) section.

[vauxflow 0]

Ok now I'm totally lost. Can someone simply give me the block script that I need to paste in so that I can add additional icons that work exactly the same as my current ones (grey to color on hover) As I stated, I'm new to this so I need only the block script that will achieve what I want and also where or what php files I need to paste it into. Thanks

[vauxflow 0]

Ok so have been trying to figure this out myself and now after altering the functions.php file I can no longer access my wordpress site, in fact it doesnt appear any longer at all, instead I get this code in the browser: Parse error: syntax error, unexpected '}' in /home/ctechweb/public_html/savelennox/wordpress/wp-content/themes/platformbase/functions.php on line 1 Luckily I was able to upload a backup functions.php file and overwrite the screwed up one so now at least the site is back online. Please can anyone help with this as I'm now so fed up with trying to add a few simple icons and being unable to that I'm now thinking of completely junking the whole Platform stuff. I just want a little clear direction as to what script needs altered and where so that I can add social icons that will function as my current ones. As said I am new to this and trying my best to help myself but instead I'm making a bad job of it. I know this will be simple for someone who has experience but I do not hence my questions. Been at this now for almost 4 days and it getting stupid now.

[Kate 3]

Hi Craig - Since you're really struggling with this, you can e-mail us and we can implement it (assuming you have the new image ready to go). Also: the code I listed above is necessary as that's how the "current" icons work too. It takes two parts: adding code in functions.php, and adding code to the CSS.

[vauxflow 0]

Hi Kate, yes the icons I have made have been ready for days now and uploaded to my server, I just need help with the script to make them appear and link to the accounts required, as said I have little understanding of this at present so if possible baby steps please. I have sent an email ref this topic as requested. Thanks

[vauxflow 0]

Still trying to figure this out, any chance Support could help with this please, almost 5 days now still messing about with this. Starting to think this was a bad purchase.