Wordpress Themes - WP Forum at BFA

Wordpress Themes - WP Forum at BFA (http://forum.bytesforall.com/index.php)
-   Header configuration & styling (http://forum.bytesforall.com/forumdisplay.php?f=15)
-   -   Social Media Icons in Header (http://forum.bytesforall.com/showthread.php?t=15922)

sleenie Nov 10, 2011 06:25 AM

Social Media Icons in Header
I have a site running ATA3.7.1 and WP 3.2.1 I'm trying to add social media icons to my headers and can't get themto show up. Done this before and it worked.

This is the code I'm using:


div id="header_image_sociable">
    <li><a href="http://facebook.com/helpfullawyer">
      <img src="/wp-content/images/facebook.png" alt="Facebook" /></a></li>
    <li><a href="http://twitter.com/helpfullawyr">
      <img src="/wp-content/images/twitter.png" alt="Twitter" /></a></li>
    <li>a href=http://www.linkedin.com/in/helpfullawyer">
      <img src=/wp-content/images/linkedin.png" alt="Linkedin /></a></li>

#header_image_sociable {position: relative; right:40px; top: 20px; z-index: 99;}
#header_image_sociable ul {list-style-type: none;}

lmilesw Nov 10, 2011 07:26 AM

Where are you putting the code? Have you tried full paths to the images?

sleenie Nov 10, 2011 07:34 AM

I put it in CSS/Insets. Is that not where it should go?

Yes, I added the full path and nothing. Still doesn't show'


sleenie Nov 10, 2011 07:38 AM

Duh...I just added it to the Header area. Of course it is not where it should be but I'll see if I can figure that out. It's actually above the header now not overlayed.

sleenie Nov 10, 2011 08:03 AM

Well, that didn't work. Now it is above the header not overlayed. And for some reason my Linkedin in one does show and I have some code the my Megamenu that seems to have creeped in there. Strange.

It's jackkrobinsom.com

lmilesw Nov 10, 2011 08:26 AM

Where do you want to place them? Why do you have them as list items and then use CSS to say list style none?

sleenie Nov 10, 2011 08:30 AM

Well, I've tried it now in both places. I can't see what I've put in HTML/CSS inserts, I can see what I put inthe header but it's above not overlayed. i did manage to fix the Linkedin link though. Now if I could just get them in the right place.

sleenie Nov 10, 2011 08:31 AM


Was just following the instructions inside of ATA You know me I'm pretty literal. Espcially when I'm trying to figure out what I'm doing and follwoing insructions. Unless I read them wrong.

lmilesw Nov 10, 2011 09:05 AM

The place to put that code is in the Configure Header Area box. Then position it relatively and set a height to 0 so it doesn't take up the space where it was.

juggledad Nov 10, 2011 09:19 AM

If you want it overlaying the header image, put the HTML in ATO->Header Image->Overlay Header Image and the CSS in the CSS Inserts

jenniferdawnmclucas@gmail May 17, 2012 09:28 PM

Hi! I added social media icons to my header using the code


<div id="header_image_sociable">
<li><a href="http://www.facebook.com/jenniferdawnmclucas" target="_blank">
<img title="Like me on Facebook" src="http://jenniferdawnmclucas.com/wp-content/uploads/2012/05/Facebook-Coach.png" width="46" height="49" alt="Facebook" /></a></li>
<li><a href="https://twitter.com/#!/jenslifebetween" target="_blank">
<img title="Follow me on Twitter" src="http://jenniferdawnmclucas.com/wp-content/uploads/2012/05/Twitter-Coach.png" width="46" height="49" alt="Twitter" /></a></li>
<li><a href="http://feeds.feedburner.com/jenniferdawnmclucas" target="_blank">
<img title="Subscribe to Jennifer's Life Between" src="http://jenniferdawnmclucas.com/wp-content/uploads/2012/05/RSS-Coach.png" width="46" height="49" alt="Subscribe" /></a></li>
into Overlay Header Image area and


#header_image_sociable {position: relative; right:40px; top: 20px; z-index: 99;}
#header_image_sociable ul {list-style-type: none;}
#header_image_sociable { position: absolute; right: 5px; top: 200px; }
#header_image_sociable ul {
margin: 0;
padding: 0;
list-style-type: none;
#header_image_sociable ul li { display: inline; }
into CSS Inserts. It's working exactly as I expected it too, thanks to all the information here!

Now I'd like to take the social media icons off just my static homepage. I assume I'll need to add another line to the CSS Inserts, but I can't figure out what it's supposed to be. The page id for my homepage is 1413. I sure appreciate your help!

Jennifer's Life Between

lmilesw May 17, 2012 11:28 PM

It looks like you got this figured out.

jenniferdawnmclucas@gmail May 24, 2012 03:35 PM


Originally Posted by lmilesw (Post 85359)
It looks like you got this figured out.

I haven't. The social icons are still on the header on my homepage. It covers part of my blog title. I still can't figure out what line of code to use to remove the social media icons from only my homepage. I'd love some help. Thanks!

lmilesw May 24, 2012 03:53 PM

You just have to target only the front page with some CSS. Put the following in the CSS Inserts box of the theme options and the icons will be gone from just the home page.
HTML Code:

body.home #header_image_sociable {
    display: none;

jenniferdawnmclucas@gmail May 24, 2012 07:18 PM

Perfect! Thanks so much!

kletskater May 25, 2012 09:27 PM

I am impressed by all your hard work.
I adapted the code for my situation, but have a page-broad banner.
My header image stays on-top so the social images are not visible
how do I get the social icons on top of my banner, or can the code be placed elsewhere except in the ATA Header Image Overlay area?

All times are GMT -6. The time now is 06:47 AM.

Powered by vBulletin® Copyright ©2000 - 2022, Jelsoft Enterprises Ltd.