Jump to content
Sign in to follow this  
jongowcomcastnet

PlatformPro adding Flickr Social Icon to Nav

Recommended Posts

jongowcomcastnet

PlatformPro has settings for adding Facebook, Twitter, LinkedIn, and YouTube to Nav section. How (in detail) would I go about adding "Flickr" or swapping out LinkedIn or YouTube for Flickr? Thanks...

Share this post


Link to post
Share on other sites
bryan-hadaway

` #header .icons .youtubelink { background: url("../images/sprite-socialicons.png") no-repeat scroll -132px 0 transparent; } #header .icons .youtubelink:hover { background: url("../images/sprite-socialicons.png") no-repeat scroll -132px -22 transparent; } ` Add that to Custom Code > Custom CSS and then simply add your Flickr URL to the YouTube field. Thanks, Bryan

Share this post


Link to post
Share on other sites
jongowcomcastnet

Thanks Bryan, That code hides the Youtube icon and if I click on the "transparent" space it does take me to flickr but what I need is the flickr icon to show up , not something that is invisible

Share this post


Link to post
Share on other sites
cmunns

The code provided should have given you the flickr icon, but the path may be wrong if you are using base or something like that. Do you have a link so I can check for the correct directory.

Share this post


Link to post
Share on other sites
jongowcomcastnet

the social icons image png is in: /wp-content/themes/platformpro/images

Share this post


Link to post
Share on other sites
jongowcomcastnet

OK..Thanks Brian and Adam. I played around a little and got it work and also changing to all colored versions of the icons by adding the following to the custom CSS section

#header .icons .youtubelink {
	    background: url("/wp-content/themes/platformpro/images/sprite-socialicons.png") no-repeat scroll -132px -22 transparent;
	}
	
	#header .icons .youtubelink:hover {
	    background: url("/wp-content/themes/platformpro/images/sprite-socialicons.png") no-repeat scroll -132px -22 transparent;
	}
	
	#header .icons .youtubelink {background-position: -132px -22px;}
	.icons .twitterlink {background-position: -22px -22px;}
	.icons .youtubelink {background-position: -132px -22px;}
	.icons .linkedinlink {background-position: -66px -22px;}
	.icons .facebooklink {background-position: -88px -22px;}
	.icons .rsslink {background-position: 0px -22px;}

Share this post


Link to post
Share on other sites
prolifenz

thanks Bryan, that was a good fix. note, ensure you have 22px instead of just 22 for the rollover image, otherwise it won't show up. also - my sprite image was located in images/icons/social_icon_sprite.png have a play, you'll get there.

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  

×