Jump to content


Photo
- - - - -

Add Social Media Icons


  • Please log in to reply
34 replies to this topic

#1 vauxflow

vauxflow

    Advanced Member

  • Members
  • PipPipPip
  • 39 posts

Posted 14 February 2011 - 10:45 PM

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

#2 hajir

hajir

    Advanced Member

  • Members
  • PipPipPip
  • 63 posts

Posted 14 February 2011 - 10:49 PM

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.

#3 hajir

hajir

    Advanced Member

  • Members
  • PipPipPip
  • 63 posts

Posted 14 February 2011 - 10:51 PM

For icons, I usually find everything I need here:

Please Login or Register to see this Hidden Content

just grab the color version fo whatever you need and change it to grey by photoshop or a program similar.

#4 vauxflow

vauxflow

    Advanced Member

  • Members
  • PipPipPip
  • 39 posts

Posted 14 February 2011 - 11:03 PM

Hi Hajir, Woo Hoo getting there. Ok so I have now managed to change the StumbleUpon address to the MySpace address: `

Please Login or Register to see this Hidden Content

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

#5 vauxflow

vauxflow

    Advanced Member

  • Members
  • PipPipPip
  • 39 posts

Posted 14 February 2011 - 11:48 PM

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

Please Login or Register to see this Hidden Content

`

#6 vauxflow

vauxflow

    Advanced Member

  • Members
  • PipPipPip
  • 39 posts

Posted 15 February 2011 - 02:20 AM

Bump

#7 bryan-hadaway

bryan-hadaway

    Advocate

  • Members
  • PipPipPipPipPip
  • 3697 posts

Posted 15 February 2011 - 03:21 AM

You need to of course change the graphic:

Please Login or Register to see this Hidden Content

you'll want to find on your website:

Please Login or Register to see this Hidden Content

add a MySpace icon over the StumbleUpon icon in a graphic editor (free one here:

Please Login or Register to see this Hidden Content

) then upload and overwrite the current image file. Thanks, Bryan

#8 vauxflow

vauxflow

    Advanced Member

  • Members
  • PipPipPip
  • 39 posts

Posted 15 February 2011 - 03:28 AM

Please Login or Register to see this Hidden Content



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.

#9 bryan-hadaway

bryan-hadaway

    Advocate

  • Members
  • PipPipPipPipPip
  • 3697 posts

Posted 15 February 2011 - 03:31 AM

Can I get a link please? Point and case of what can help things move along faster sometimes:

Please Login or Register to see this Hidden Content

Thanks, Bryan

#10 vauxflow

vauxflow

    Advanced Member

  • Members
  • PipPipPip
  • 39 posts

Posted 15 February 2011 - 03:38 AM

Web Link as above in previous post Bryan. Thanks

#11 bryan-hadaway

bryan-hadaway

    Advocate

  • Members
  • PipPipPipPipPip
  • 3697 posts

Posted 15 February 2011 - 03:48 AM

Ahh, sorry... must of hit the topic within seconds of your last update and missed it. Anyways, here are your icons:

Please Login or Register to see this Hidden Content

As formerly instructed you'll want to paste over StumbleUpon with MySpace. Here are icons here:

Please Login or Register to see this Hidden Content

If you've never used a graphics editor and aren't looking to learn you'll need to turn to a pro:

Please Login or Register to see this Hidden Content

Thanks, Bryan

#12 vauxflow

vauxflow

    Advanced Member

  • Members
  • PipPipPip
  • 39 posts

Posted 15 February 2011 - 03:51 AM

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?

#13 bryan-hadaway

bryan-hadaway

    Advocate

  • Members
  • PipPipPipPipPip
  • 3697 posts

Posted 15 February 2011 - 04:06 AM

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

Please Login or Register to see this Hidden Content


#14 vauxflow

vauxflow

    Advanced Member

  • Members
  • PipPipPip
  • 39 posts

Posted 15 February 2011 - 04:13 AM

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!

#15 bryan-hadaway

bryan-hadaway

    Advocate

  • Members
  • PipPipPipPipPip
  • 3697 posts

Posted 15 February 2011 - 04:19 AM

Appearance > Editor > Theme Functions

Thanks, Bryan

#16 vauxflow

vauxflow

    Advanced Member

  • Members
  • PipPipPip
  • 39 posts

Posted 15 February 2011 - 04:28 AM

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.

#17 bryan-hadaway

bryan-hadaway

    Advocate

  • Members
  • PipPipPipPipPip
  • 3697 posts

Posted 15 February 2011 - 04:32 AM

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:

`

Please Login or Register to see this Hidden Content

`

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

#18 vauxflow

vauxflow

    Advanced Member

  • Members
  • PipPipPip
  • 39 posts

Posted 15 February 2011 - 04:37 AM

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

#19 vauxflow

vauxflow

    Advanced Member

  • Members
  • PipPipPip
  • 39 posts

Posted 15 February 2011 - 05:47 AM

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.

#20 Kate

Kate

    Advocate

  • Members
  • 3039 posts

Posted 15 February 2011 - 12:37 PM

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

Please Login or Register to see this Hidden Content


Please Login or Register to see this Hidden Content


`
This is the CSS (in the theme files) that controls the icons:

Please Login or Register to see this Hidden Content


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:

Please Login or Register to see this Hidden Content


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.