Wordpress Themes - WP Forum at BFA
There will be no more development for Atahualpa (or any other theme), and no support. Also no new registrations. I turned off the donation system. I may turn the forum to read only if it gets abused for spam. Unfortunately I have no time for the forum or the themes. Thanks a lot to the people who helped in all these years, especially Larry and of course: Paul. Take care and stay healthy -- Flynn, Atahualpa developer, Sep 2021

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

[SOLVED] horizontal social icons overlay header image: positioning woes


  #1  
Old Jun 18, 2014, 03:12 PM
morgana123
 
48 posts · Jun 2010
Hi Juggledad and lmilesw,

Running WP 3.9.1 ATA 3.7.15.

Not great at CSS, sorry. Trying to display social icons horizontally over header image, but display:inline doesn't change the ul to horizontal.

In ATO -> Header image -> Overlay header image, I have:
HTML Code:
<div id="header_image_sociable">
  <ul>
    <li><a href="mailto:CLWardHT@me.com"><img class="aligncenter size-full wp-image-164" alt="email" src="http://www.cherry-leeward.com/wp-content/uploads/2013/08/email.png" width="32" height="32" /></a></li>
    <li><a href="http://www.linkedin.com/pub/cherry-lee-ward/13/24b/816"><img class="aligncenter size-full wp-image-162" alt="linkedin" src="http://www.cherry-leeward.com/wp-content/uploads/2013/08/linkedin.png" width="32" height="32" /></a></li>
    <li><a href="https://plus.google.com/103385025499347441047/posts"><img class="aligncenter size-full wp-image-163" alt="googleplus" src="http://www.cherry-leeward.com/wp-content/uploads/2013/08/googleplus.png" width="32" height="32" /></a></li>
    <li><a href="https://twitter.com/ShamanicHealing"><img class="aligncenter size-full wp-image-161" alt="twitter" src="http://www.cherry-leeward.com/wp-content/uploads/2013/08/twitter.png" width="32" height="32" /></a></li>
    <li><a href="http://facebook.com/cherrylee.ward"><img class="aligncenter size-full wp-image-160" alt="facebook" src="http://www.cherry-leeward.com/wp-content/uploads/2013/08/facebook.png" width="32" height="32" /></a></li>
    <li><a href="http://pinterest.com/"><img class="aligncenter size-full wp-image-159" alt="pinterest" src="http://www.cherry-leeward.com/wp-content/uploads/2013/08/pinterest.png" width="32" height="32" /></a></li>
    <li><a href="http://feeds.feedburner.com/Cherry-leeWardsBlog"><img class="aligncenter size-full wp-image-165" alt="rss" src="http://www.cherry-leeward.com/wp-content/uploads/2013/08/rss.png" width="32" height="32" /></a></li>
  </ul>
 </div>
In ATO -> CSS inserts, I have:
HTML Code:
#header_image_sociable {position: fixed; top: 140px; right: 100px;}
#header_image_sociable ul {list-style-type: none;}
#header_image_sociable ul li { display: inline; }
Please, what am I doing wrong?

TIA for any points in the right direction!! Pointers to a recommended CSS tutorial much appreciated, too.

Site in question: http://cherry-leeward.com/DEV2/

Last edited by juggledad; Jun 18, 2014 at 07:57 PM.
  #2  
Old Jun 18, 2014, 04:59 PM
juggledad's Avatar
juggledad
 
23,765 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
1) if you want the images horizontal, why are you putting them in a list?
2) have you used the FireBug extension inn FireFox to look at the CSS - you should, you can change the CSS on the fly and see what it does (use the 'examine' button and then select an element on teh page)
3) if you don't know CSS tahe a tutorial - http://htmldog.com/guides/css/beginner/ is a good start and remember you won't learn it all in a day or week or month, but if you do a little each day, you will learn it over time (did you learn math in a week??)
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #3  
Old Jun 18, 2014, 05:07 PM
morgana123
 
48 posts · Jun 2010
Good pointer on the tutorial - THANK YOU!

I was placing them in a UL to add the positioning to them all at once, but I gather that's not right. I'll try using Firebug to see how to add positioning for each individually, yes?

Thank You again!!
  #4  
Old Jun 18, 2014, 07:56 PM
juggledad's Avatar
juggledad
 
23,765 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
I assume you want them in a line, so try this instead
code overlay
HTML Code:
<div id="header_image_sociable">
<a href="mailto:CLWardHT@me.com"><img class="aligncenter size-full wp-image-164" alt="email" src="http://www.cherry-leeward.com/wp-content/uploads/2013/08/email.png" width="32" height="32" /></a>
<a href="http://www.linkedin.com/pub/cherry-lee-ward/13/24b/816"><img class="aligncenter size-full wp-image-162" alt="linkedin" src="http://www.cherry-leeward.com/wp-content/uploads/2013/08/linkedin.png" width="32" height="32" /></a>
<a href="https://plus.google.com/103385025499347441047/posts"><img class="aligncenter size-full wp-image-163" alt="googleplus" src="http://www.cherry-leeward.com/wp-content/uploads/2013/08/googleplus.png" width="32" height="32" /></a>
<a href="https://twitter.com/ShamanicHealing"><img class="aligncenter size-full wp-image-161" alt="twitter" src="http://www.cherry-leeward.com/wp-content/uploads/2013/08/twitter.png" width="32" height="32" /></a>
<a href="http://facebook.com/cherrylee.ward"><img class="aligncenter size-full wp-image-160" alt="facebook" src="http://www.cherry-leeward.com/wp-content/uploads/2013/08/facebook.png" width="32" height="32" /></a>
<a href="http://pinterest.com/"><img class="aligncenter size-full wp-image-159" alt="pinterest" src="http://www.cherry-leeward.com/wp-content/uploads/2013/08/pinterest.png" width="32" height="32" /></a>
<a href="http://feeds.feedburner.com/Cherry-leeWardsBlog"><img class="aligncenter size-full wp-image-165" alt="rss" src="http://www.cherry-leeward.com/wp-content/uploads/2013/08/rss.png" width="32" height="32" /></a>
</div>
css inserts
HTML Code:
#header_image_sociable {position: absolute; right:40px; top: 20px;}
#header_image_sociable  a:link,
#header_image_sociable  a:visited,
#header_image_sociable  a:active,
#header_image_sociable  a {float:right;}
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #5  
Old Jun 26, 2014, 08:03 AM
morgana123
 
48 posts · Jun 2010
Thanks very much, juggledad ... I had missed your second reply until just now, and greatly appreciate it!

All the best,
morgana123
  #6  
Old Jul 2, 2014, 12:09 PM
morgana123
 
48 posts · Jun 2010
I would hug you for this if you were nearby - this is an excellent fix - THANK YOU, THANK YOU!!


Bookmarks



Similar Threads
Thread Thread Starter Forum Replies Last Post
[SOLVED] How to add social media icons pamlita Atahualpa 3 Wordpress theme 2 Oct 11, 2012 01:01 PM
Social Media Icons in Header sleenie Header configuration & styling 15 May 25, 2012 10:27 PM
Positioning of Social Media tags nick51 Post-Kicker, -Byline & -Footer 1 Jun 8, 2011 04:13 PM
Add social icons to header dingest Header configuration & styling 1 Dec 16, 2010 09:23 PM


All times are GMT -6. The time now is 12:51 AM.


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