• 0
Sign in to follow this  
Followers 0

Add Social Media Icons

Question

Posted · Report post

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

Share this post


Link to post
Share on other sites

34 answers to this question

  • 0

Posted · Report post

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.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

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.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

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?

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

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. ``

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Bump

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

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

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

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.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Web Link as above in previous post Bryan. Thanks

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Ahh, sorry... must of hit the topic within seconds of your last update and missed it. Anyways, here are your icons: sprite-socialicons.png 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

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

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?

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

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(){ ?> Social <?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

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

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!

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Appearance > Editor > Theme Functions Thanks, Bryan

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

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.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

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: `Social` 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

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

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

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

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.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

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.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

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

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

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.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

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. ;)

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

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

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

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.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Hi Craig - Just e-mailed you back about this. Please check it out, and reply with the info when you get the chance. All the best, Kate

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!


Register a new account

Sign in

Already have an account? Sign in here.


Sign In Now
Sign in to follow this  
Followers 0