Jump to content
Sign in to follow this  
suzannecarver

Social media icons

Recommended Posts

suzannecarver

I have some custom social media icons...how do I change these out?

Share this post


Link to post
Share on other sites
cmunns

You would have to change the CSS where the path is defined to the images. This is how they show up in theme.css ` /* @ 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;} ` If you place your new images in the same folder as the old ones then you would just change the name and not what precedes it.

Share this post


Link to post
Share on other sites
suzannecarver

This is great. Would it not be better to simply replace the graphic files? Will this Themes.css file not be updated eventually and cause my changes to be lost?

Share this post


Link to post
Share on other sites
cmunns

you could replace the images if you wish, but that still runs risk of getting saved over. In both cases do it through base.css and add images to the images folder of the base theme. If you replace those images,however, you will have to duplicate the sprite. Find the sprite-socialicons.png and you'll see what I'm talking about.

Share this post


Link to post
Share on other sites
suzannecarver

Hello..this is what I have thrown in and I am seeing nothing. {#background-image:none;background-color:#000000;} .icons .twitterlink {background: urlhttp://riversidevillagepub.com/wordpress/wp-content/uploads/2010/11/twitter-wood-grain-e1289241451111.png}'>http://riversidevillagepub.com/wordpress/wp-content/uploads/2010/11/twitter-wood-grain-e1289241451111.png} I believe that it is simply in my code here...do you see my problem? Thank you. http://riversidevillagepub.com/wordpress/

Share this post


Link to post
Share on other sites
cmlstudios
.icons .twitterlink {background: urlhttp://riversidevillagepub.com/wordpress/wp-content/uploads/2010/11/twitter-wood-grain-e1289241451111.png}
should be
.icons .twitterlink {background: url('http://riversidevillagepub.com/wordpress/wp-content/uploads/2010/11/twitter-wood-grain-e1289241451111.png') top left no-repeat;}

Note the parentheses around the filename. The quotes are not strictly needed but I use them from habit. So it's url('filename'). If you want a good reference for CSS, try the w3schools.com website. Chris

Share this post


Link to post
Share on other sites
nett-ed

What file are you putting the css in? It looks like your currently active theme is PlatformPro and not a child theme so changing the base.css file would only affect a child theme if it were active. Maybe try throwing this in the custom css rules through the PlatformPro theme settings panel PlatformPro >> Settings >> Custom Code:

	.icons .twitterlink {
	background:url("http://riversidevillagepub.com/wordpress/wp-content/uploads/2010/11/twitter-wood-grain-e1289241451111.png") no-repeat scroll top left transparent;
	}
	.icons .twitterlink a {
	height:32px;
	width:32px;
	}

Share this post


Link to post
Share on other sites
bryan-hadaway

Okay, I've updated your Twitter code: ` .icons .twitterlink { background:url("http://riversidevillagepub.com/wordpress/wp-content/uploads/2010/11/twitter-wood-grain-e1289241451111.png") no-repeat scroll left top transparent; width:32px; height:32px; margin-top:-4px; } ` And you should remove the instance of: `.icons .twitterlink:hover` altogether. Also if you notice your Twitter icon is too big, you want to resize it to 22 x 22 pixels and also reflect that change in the CSS. Thanks, Bryan

Share this post


Link to post
Share on other sites
inov8ed

Is there a simpler way of making all the social media icons larger? Say 32x32 or 64x64? This would be a nice option in the settings (hint, hint). -Adam

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  

×