Jump to content
Sign in to follow this  
thk0418

Header Social icons

Recommended Posts

thk0418

how to I Make Facebook and Twitter icons permanently have colors and I like to add address and phone number under it..

Share this post


Link to post
Share on other sites
Danny
Hi thk0418, To add an email address and phone number, please read the following post. http://www.pagelines.com/forum/discussion/14846/make-header-jpeg-link-to-email-instead-of-root#Item_2 To make the icons in the header have permanent color, add the following code to your Platform Settings -> Custom Code -> CSS Rules: [code].icons .youtubelink { background: url(./images/sprite-socialicons.png) no-repeat -44px -22px !important; } .icons .linkedinlink { background: url(./images/sprite-socialicons.png) no-repeat -66px -22px !important; } .icons .facebooklink { background: url(./images/sprite-socialicons.png) no-repeat -88px -22px !important; } .icons .twitterlink { background: url(./images/sprite-socialicons.png) no-repeat -22px -22px !important; } .icons .rsslink { background: url(./images/sprite-socialicons.png) no-repeat 0 -22px !important; }[/code]

Please search our forums, before posting!

Share this post


Link to post
Share on other sites
thk0418
and I placed address and phone number.. need to add facebook and twitter top of the text Where do I go for CSS rules? www.tasteofkitchen.com *******[FB]***[Tw]******* FOR RESERVATIONS, PLEASE CALL Toronto Street EAST Telephone: (123)456-7890

Share this post


Link to post
Share on other sites
thk0418
[code] .icons .youtubelink { background: url(./images/sprite-socialicons.png) no-repeat -44px -22px !important; } .icons .linkedinlink { background: url(./images/sprite-socialicons.png) no-repeat -66px -22px !important; } .icons .facebooklink { background: url(./images/sprite-socialicons.png) no-repeat -88px -22px !important; } .icons .twitterlink { background: url(./images/sprite-socialicons.png) no-repeat -22px -22px !important; } .icons .rsslink { background: url(./images/sprite-socialicons.png) no-repeat 0 -22px !important; }[/code] Don't work for me..

Share this post


Link to post
Share on other sites
kastelic
Take your new css code out from inside the body rule so instead of this: [code] body{ .icons .youtubelink { background: url(./images/sprite-socialicons.png) no-repeat -44px -22px !important; } .icons .linkedinlink { background: url(./images/sprite-socialicons.png) no-repeat -66px -22px !important; } .icons .facebooklink { background: url(./images/sprite-socialicons.png) no-repeat -88px -22px !important; } .icons .twitterlink { background: url(./images/sprite-socialicons.png) no-repeat -22px -22px !important; } .icons .rsslink { background: url(./images/sprite-socialicons.png) no-repeat 0 -22px !important; } } [/code] You have exactly the code that Danny gave.

Share this post


Link to post
Share on other sites
thk0418
now it's gone.. =( tasteofkitchen.com and something happen to footer lol

Share this post


Link to post
Share on other sites
thk0418
it works now.. fixed the footer problem.. still social icon is invisible =(

Share this post


Link to post
Share on other sites
Danny
Hi thk0418, OK I know what the problem is the path to the image had to be changed slightly, replace the code you currently have with this. [code].icons .youtubelink { background: url(/wp-content/themes/platformpro/images/sprite-socialicons.png) no-repeat -44px -22px !important; } .icons .linkedinlink { background: url(/wp-content/themes/platformpro/images/sprite-socialicons.png) no-repeat -66px -22px !important; } .icons .facebooklink { background: url(/wp-content/themes/platformpro/images/sprite-socialicons.png) no-repeat -88px -22px !important; } .icons .twitterlink { background: url(/wp-content/themes/platformpro/images/sprite-socialicons.png) no-repeat -22px -22px !important; } .icons .rsslink { background: url(/wp-content/themes/platformpro/images/sprite-socialicons.png) no-repeat 0 -22px !important; }[/code]

Please search our forums, before posting!

Share this post


Link to post
Share on other sites
thk0418
that worked!! thank you!! now how do i move the icons to top of the text?

Share this post


Link to post
Share on other sites
Danny
Add this to your custom css: [code].KVR_mail {width: 250px;position: absolute;top: 30px;right: 0;}[/code]

Please search our forums, before posting!

Share this post


Link to post
Share on other sites
thk0418
thanks!!! one last thing.. how to i put that in the top middle of the text?

Share this post


Link to post
Share on other sites
Danny
What do you mean ?

Please search our forums, before posting!

Share this post


Link to post
Share on other sites
thk0418
I mean how do i move my social icons right side to the middle(center) Now: **********************[FB][Tw] FOR RESERVATIONS, PLEASE CALL Toronto Street EAST Telephone: (123)456-7890 Like this: *******[FB]*[Tw]******* FOR RESERVATIONS, PLEASE CALL [u] [/u]Toronto Street EAST [u] [/u]Telephone: (123)456-7890

Share this post


Link to post
Share on other sites
Danny
Would it be possible for you to remove the
tags from your code please.

Please search our forums, before posting!

Share this post


Link to post
Share on other sites
Danny
Try this thk0418 [code].icons {right: 85px !important;} .KVR_mail {width: 250px;position: absolute;top: 30px;right: -100px;text-align: left;}[/code]

Please search our forums, before posting!

Share this post


Link to post
Share on other sites
thk0418
[code].icons {right: 85px !important;} .KVR_mail {width: 250px;position: absolute;top: 30px;right: -100px;text-align: center;}[/code] I changed text-align: center; THANKS FOR ALL YOUR HELP DANNY!!!!!

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  

×