Wordpress Themes - WP Forum at BFA
Click Here To DONATE! Support the theme development, get more attention and additional benefits based on your donation level. Your forum name will be highlighted.

Wordpress Themes - WP Forum at BFA » WordPress Themes » Atahualpa 3 Wordpress theme » Header configuration & styling »

Social Media Icons in Header


Build custom WP THEMES, without
coding.
Click here for THEMEFRAME

From the author of Atahualpa, the #1 most
downloaded (700,000+) theme @ wordpress.org
  #1  
Old Nov 10, 2011, 06:25 AM
sleenie
 
291 posts · May 2009
Texas and New Mexico
Send a message via Skype™ to sleenie
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;}
__________________
Sleenie
"Plan your work for today and everyday...then work your plan"
  #2  
Old Nov 10, 2011, 07:26 AM
lmilesw's Avatar
lmilesw
 
10,099 posts · Jul 2009
Central New York State USA
Where are you putting the code? Have you tried full paths to the images?
__________________
~Larry (CNY Web Designs)
This site should be a membership site since it so full of good stuff.
Please consider donating which gives you access to even more good stuff.
  #3  
Old Nov 10, 2011, 07:34 AM
sleenie
 
291 posts · May 2009
Texas and New Mexico
Send a message via Skype™ to sleenie
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
__________________
Sleenie
"Plan your work for today and everyday...then work your plan"
  #4  
Old Nov 10, 2011, 07:38 AM
sleenie
 
291 posts · May 2009
Texas and New Mexico
Send a message via Skype™ to sleenie
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
"Plan your work for today and everyday...then work your plan"
  #5  
Old Nov 10, 2011, 08:03 AM
sleenie
 
291 posts · May 2009
Texas and New Mexico
Send a message via Skype™ to sleenie
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
__________________
Sleenie
"Plan your work for today and everyday...then work your plan"
  #6  
Old Nov 10, 2011, 08:26 AM
lmilesw's Avatar
lmilesw
 
10,099 posts · Jul 2009
Central New York State USA
Where do you want to place them? Why do you have them as list items and then use CSS to say list style none?
__________________
~Larry (CNY Web Designs)
This site should be a membership site since it so full of good stuff.
Please consider donating which gives you access to even more good stuff.
  #7  
Old Nov 10, 2011, 08:30 AM
sleenie
 
291 posts · May 2009
Texas and New Mexico
Send a message via Skype™ to sleenie
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
"Plan your work for today and everyday...then work your plan"
  #8  
Old Nov 10, 2011, 08:31 AM
sleenie
 
291 posts · May 2009
Texas and New Mexico
Send a message via Skype™ to sleenie
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.
__________________
Sleenie
"Plan your work for today and everyday...then work your plan"
  #9  
Old Nov 10, 2011, 09:05 AM
lmilesw's Avatar
lmilesw
 
10,099 posts · Jul 2009
Central New York State USA
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.
__________________
~Larry (CNY Web Designs)
This site should be a membership site since it so full of good stuff.
Please consider donating which gives you access to even more good stuff.
  #10  
Old Nov 10, 2011, 09:19 AM
juggledad's Avatar
juggledad
 
22,263 posts · Mar 2009
OSX 10.8.5 WP 3.8.x Atahualpa 3.7.x Safari 6.x Firefox 25 XP
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
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #11  
Old May 17, 2012, 09:28 PM
jenniferdawnmclucas@gmail's Avatar
jenniferdawnmclucas@gmail
 
13 posts · Nov 2011
Pacific Northwest, USA
Hi! I added social media icons to my header using the code

Quote:
<div id="header_image_sociable">
<ul>
<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>
</ul>
</div>
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

Last edited by jenniferdawnmclucas@gmail; May 17, 2012 at 09:30 PM.
  #12  
Old May 17, 2012, 11:28 PM
lmilesw's Avatar
lmilesw
 
10,099 posts · Jul 2009
Central New York State USA
It looks like you got this figured out.
__________________
~Larry (CNY Web Designs)
This site should be a membership site since it so full of good stuff.
Please consider donating which gives you access to even more good stuff.
  #13  
Old May 24, 2012, 03:35 PM
jenniferdawnmclucas@gmail's Avatar
jenniferdawnmclucas@gmail
 
13 posts · Nov 2011
Pacific Northwest, USA
Quote:
Originally Posted by lmilesw
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!
  #14  
Old May 24, 2012, 03:53 PM
lmilesw's Avatar
lmilesw
 
10,099 posts · Jul 2009
Central New York State USA
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;
}
__________________
~Larry (CNY Web Designs)
This site should be a membership site since it so full of good stuff.
Please consider donating which gives you access to even more good stuff.
  #15  
Old May 24, 2012, 07:18 PM
jenniferdawnmclucas@gmail's Avatar
jenniferdawnmclucas@gmail
 
13 posts · Nov 2011
Pacific Northwest, USA
Perfect! Thanks so much!
  #16  
Old May 25, 2012, 09:27 PM
kletskater's Avatar
kletskater
 
85 posts · Jun 2010
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?

Last edited by kletskater; May 27, 2012 at 12:42 PM. Reason: new insights

Bookmarks

Tags
overlay header, social media

Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes


Similar Threads
Thread Thread Starter Forum Replies Last Post
[SOLVED] Social Media Mashup plug-in url's break through Atahualpa's sidebars issue clchleung Plugins & Atahualpa 6 Nov 10, 2011 10:55 AM
[SOLVED] Social media icons / Widget christina4733 Sidebars & Widgets 3 Oct 23, 2011 11:45 AM
Positioning of Social Media tags nick51 Post-Kicker, -Byline & -Footer 1 Jun 8, 2011 03:13 PM
[SOLVED] Page Menu with Social Media Icons Tammy Page & Category Menu Bars 4 May 4, 2011 03:31 PM
Add social icons to header dingest Header configuration & styling 1 Dec 16, 2010 08:23 PM


All times are GMT -6. The time now is 05:55 AM.


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