Jump to content
Sign in to follow this  
dancemoves

Social icon images?

Recommended Posts

dancemoves

How do I replace the social icons on the top right of my website with my own social icons images? And how do I add my own email icon and link there as well? Thank you for your help.

Share this post


Link to post
Share on other sites
kastelic

.icons .rsslink { background: url("./images/sprite-socialicons.png") no-repeat scroll 0 0 transparent; } This rule sets the background of all the rss icon to one big sprite image that contains all of them.They are all set to this same sprite. Then for each individual on they are positioned with CSS background positioning. So to change the images, I would create a transparent .png with all your icons on it and upload it, overriding this rule with your new image. Then for each different icon position it accordingly.

Share this post


Link to post
Share on other sites
dancemoves

Jimmy, I created a transparent .png with all my icons on it and uploaded it to my media library. Then I copy and pasted the rule to the CSS rules under custom coding and tried to insert the new .png. It didn't work. I have no clue as to what I'm doing. I definitely need more direction. I'm not sure where else I need to up load it and where. Could you please be very specific on how exactly to do this. I really do appreciate it!! Thank you so much for helping me out. M

Share this post


Link to post
Share on other sites
timlinson

What's your site link and the exact rule you used?

Share this post


Link to post
Share on other sites
dancemoves

www.knoxvilledancemoves.com I placed this- .icons .rsslink { background: url("./images/sprite-socialicons.png") no-repeat scroll 0 0 transparent; } in the CSS Rules in the Custom Code section under the Platform Pro Settings. I then tried to replace the sprite-socialicons with the newly transparent social icons.png that I created (and saved under the media library.) The result was that it took off one of the social icons from the header and place a "tweet link" to every page. I have no clue as to what I'm doing.... Sigh but I'm determined. Thanks for helping me!!! M

Share this post


Link to post
Share on other sites
Kate

Hi Melissa, What's the name and URL of your new image? If you uploaded it via the media library, you should be able to get the link to it from there. We'll have to use that for the new CSS code. (The current code is referring to the old social icons.)

Share this post


Link to post
Share on other sites
Kate

Hey Melissa, I can only help you out with the Facebook, Twitter, and RSS icons, because those are the only ones currently set to show in the header. Please replace the following code with what's currently in your Custom CSS:

.icons a{height:30px !important;width:30px !important;}
	.icons .rsslink {
	background:url("http://www.knoxvilledancemoves.com/wp-content/uploads/2011/07/DMsocialmedia-e1309835736592.png") no-repeat scroll -120px 0px !important;
	}
	.icons .twitterlink{background:url("http://www.knoxvilledancemoves.com/wp-content/uploads/2011/07/DMsocialmedia-e1309835736592.png") no-repeat scroll -90px 0px !important;}
	.icons .facebooklink{background:url("http://www.knoxvilledancemoves.com/wp-content/uploads/2011/07/DMsocialmedia-e1309835736592.png") no-repeat scroll -60px 0px !important;}

Share this post


Link to post
Share on other sites
dancemoves

Ok I've redone the transparency.... and inserted it several different ways. It's kind of working however its not lined up right. The sizes must be kind of messed up. I have been working on this for the last THREE days!!! I'm beyond frustrated.

Share this post


Link to post
Share on other sites
dancemoves

Thank you Kate. That does it. However how do I insert the color changes that were in the sprite-images? (gray shadowed image when hoverd over)ColoredSM.png If I'm making a transparency that needs to fit this code, could you please tell me what size to make the links? This would be helpful. Thank you for your help!! I can't tell you how frustrated I've been trying to get this to work. Thank you 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  

×