Wordpress Themes - WP Forum at BFA - Social Media Icons in Header

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)

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:

Code:

div id="header_image_sociable">

  <ul>

    <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>

    </ul>

 </div>



#header_image_sociable {position: relative; right:40px; top: 20px; z-index: 99;}

#header_image_sociable ul {list-style-type: none;}

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

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'

Thanks

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.

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

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

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.

Larry,

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.

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.

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

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

Quote:

into Overlay Header Image area and

Quote:

#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

It looks like you got this figured out.

Quote:

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!

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;

}

Perfect! Thanks so much!

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?