Jump to content
brightonkeller

Incorporating a Sprite into web page for social media icons

Recommended Posts

brightonkeller

HI there,

 

Currently I am using the social media widget (plugin) to display my custom social media icons on the upper top right hand side of my blog (right column). I would like to create a sprite file for my icons to help with page speed and site performance. I'm very intimidated though. Does anyone think they could help me with this?

 

website: http://www.brightontheday.com

Share this post


Link to post
Share on other sites
Rob

Hi Brighton!

 

Okay, image sprites seem like such fun. I found this: http://css-tricks.com/css-sprites/ which seems a quite comprehensive explanation. This is more specific to social icons: http://wpmu.org/how-to-add-social-media-icons-using-css-sprites/

 

First, you'll want to create your image and write down the coordinates for each social icon. For each icon within the image, you'll need a corresponding hover version (with perhaps a different shade or color).

 

Then, you'll upload it to your Media Library. Copy and paste the URL of the image into a text file, for later use.

 

Then, start crafting a unique class.  The example above uses .nav, but that's for a main menu, so we don't want to use that.  Let's call it mysocials.

 

You'll then craft your CSS using that class and for each action needed, as described in those articles.

 

Then, with the coordinates in their proper order (this gets a bit complex) put the whole CSS together and paste it to Dashboard > PageLines > Site Options > Custom Code. 

 

Go to Dashboard > Appearance > Widgets and apply a text widget below your current plugin's widget. Apply the links, wrapped in a div which uses that class. Then, save the widget and test it.

 

When you do it correctly, you will be able to see the basic image and on mouseover, the alternate. Now, your image sprites work. Once tested and you're satisfied, remove the original plugin widget and you can then deactivate and later delete the plugin.

  • Like 1

Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
brightonkeller

how do I "start crafting a unique class". what does that mean?  I've done everything else and have the image url ready to go. 

Share this post


Link to post
Share on other sites
brightonkeller

also, I see that in the wpmu link, they give me the code for the sidebar.php. I'm wondering though if it's okay to edit this in my ftp? or should i use a child theme?

Share this post


Link to post
Share on other sites
Rob

Something like this:

 

<div class="mysocial">

Then in between, all the links you want would go here, each with that class.

<a class="mysocial" id="pinterest" href=....

</div>


Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
Rob

You shouldn't edit core files.  The method I'm recommending doesn't require that.


Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
brightonkeller

ohhhhh ok! thanks so much. I will try this and see how it works. 

Share this post


Link to post
Share on other sites
Rob

I'm sure you'll do just fine!


Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
brightonkeller

i just can't figure this out. I'm using the file provided in this zip -> http://azmind.com/2012/11/06/social-icons-sprites-35-ready-to-use-icons-psd-png-html-css/

and the nice thing is that he has included the code. but I'm just  so confused. Do I need to save the guides as slices? should there be ONE file with all the sprites or does each icon need to be saved separately? Do I need to go into php at all? I'm so lost. 

Share this post


Link to post
Share on other sites
Rob

Brighton,

 

First, take a cool drink of water! I find that always relaxing. A whiskey chaser doesn't hurt either!

 

The code he provided needs just a little change. It's the class="icons" he's using.  We also use that class for the social media icons found in the branding area, so you'd have a CSS conflict if you're using the same class.

 

That's where you'd use something unique like mysocial (as suggested earlier).  His code includes the html but not the links for all the social media, which is very kind of him.  Now, all you need to do is fill in the blanks. For example, where he has 

<a class="twitter" href=""></a>

, you just need to add the URL for your twitter account between the ""'s

 

Any social media icons you don't want to use, just remove the code he provided for those.  So, if you're not using Netvibes, don't include that one. Without the link, the class won't be called, thus the sprite won't appear.

 

Normally, you don't want multiple images.  That defeats the purpose of sprites, but this fellow is recommending it and seems to include the icons. You'll just upload each image to your media library, again noting the location (url), and use the coordinates he provided.

 

Place the code he offers with the html into the text widget I mentioned above, but change class="icons" to class="mysocial" and remember to remove any you don't want to appear or else you'll have more than 30 social media links.

 

In a text editor, the CSS he provided should be edited to replace every instance of .icons to .mysocial.  Use search and replace to do this easily. Change the URL of the image as well, replacing ../img/social-icons with the basic URL of your media library location.

 

Copy the edited CSS and paste it into Dashboard > PageLines > Site Options > Custom Code anywhere after body {}. Save.

 

View your site to see if they look good.


Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
brightonkeller

thanks so much. but yes, I kind of figured out the hard way everything you've just told me. but I WANT to use just the ONE image and direct the browswer "to call" the correct image via css. is that possible?

Share this post


Link to post
Share on other sites
Danny

Hi,

 

If you wish to incorporate a sprite image to replace the current social icons. You will first need to create a sprite image, containing all your icons. Then you will most likely need to use a hook, to insert your icons and then you will need to use custom CSS for each icon and use the background position property.

 

You can find your preferred hook location using the Action Map plugin.


Please search our forums, before posting!

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


×