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] How to display an background image and two icons on top of it in a customhea


  #1  
Old May 4, 2010, 11:59 PM
dyuane
 
6 posts · Jan 2010
I created a custom widget area in my header area.

<?php bfa_widget_area('name=header_widget_areatop&cells= 2&width_1=900&width_2=100&before_widget=<div id="%1$s" class="header-widget %2$s">&after_widget=</div>'); ?>

cell 1 has a text widget with
-----------------------------------------------
<a href="http://174.120.136.130/~lilia10/shop" target="_blank"><img src="http://174.120.136.130/~lilia10/shop/wp-content/themes/atahualpa/images/tree1info2.jpg"alt="Lilia Day Spa Home Page" border="0" /></a>
-----------------------------------------------

in cell 2 have another text widget with
------------------------------------------------
<a href="http://174.120.136.130/~lilia10/shop" target="_blank"><img src="http://174.120.136.130/~lilia10/shop/wp-content/themes/atahualpa/images/tree1info2rightside.jpg"alt="Lilia Day Spa Home Page" border="0" /></a>

<a href="http://www.facebook.com/pages/Anderson-SC/Lilia-Day-Spa/182249049008?v=wall&ref=ts" target="_blank"><img src="http://174.120.136.130/~lilia10/shop/wp-content/themes/atahualpa/images/Facebook48.png" vspace="10" alt="Lilia Day Spa Facebook Page" border="0"/></a>

<a href="http://twitter.com/liliadayspa" target="_blank"><img src="http://174.120.136.130/~lilia10/shop/wp-content/themes/atahualpa/images/Twitter48.png" alt="Lilia Day Spa on twitter" border="0" /></a>
----------------------------------------------------------
It looks great in Firefox but in IE the twitter and facebook icon are listed below. If I take out the background image file then you will see the default icon of the website. The facebook and Twitter icons are suppose to be in their proper area.

http://174.120.136.130/~lilia10/shop/
Wordpress Version 2.9.2
ATA Atahualpa 3.4.6

Thanks
Dyuane
  #2  
Old May 5, 2010, 12:48 AM
dyuane
 
6 posts · Jan 2010
currently widget area two has the following. with this in the text widget it fits perfect in firefox but not in ie.

<a href="http://www.facebook.com/pages/Anderson-SC/Lilia-Day-Spa/182249049008?v=wall&ref=ts" target="_blank"><img src="http://174.120.136.130/~lilia10/shop/wp-content/themes/atahualpa/images/Facebook48.png" vspace="10" alt="Lilia Day Spa Facebook Page" border="0"/></a>

<a href="http://twitter.com/liliadayspa" target="_blank"><img src="http://174.120.136.130/~lilia10/shop/wp-content/themes/atahualpa/images/Twitter48.png" alt="Lilia Day Spa on twitter" border="0" /></a>

If I just post the

<a href="http://174.120.136.130/~lilia10/shop" target="_blank"><img src="http://174.120.136.130/~lilia10/shop/wp-content/themes/atahualpa/images/tree1info2rightside.jpg"alt="Lilia Day Spa Home Page" border="0" /></a>

the header area looks great but then I don't have my twitter and facebook icon.
  #3  
Old May 5, 2010, 10:48 AM
juggledad's Avatar
juggledad
 
23,765 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
in both safari and IE8 is see the two icons - the face book on top of the twitter - nicely arranged at the right end of your image. Is this not what you want?
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #4  
Old May 5, 2010, 11:15 AM
dyuane
 
6 posts · Jan 2010
in ie7. it was show the regular background and not the background image from
http://174.120.136.130/~lilia10/shop...2rightside.jpg

I tried putting in div style and it would show the tree1info2righside but then the facebook icon was not clickable.

any help is appreciated.
  #5  
Old May 5, 2010, 11:19 AM
dyuane
 
6 posts · Jan 2010
I just figured it out I had to put this in to get the background to work and the other two icons to be clickable.

<div style="background-image: url(http://174.120.136.130/~lilia10/shop/wp-content/themes/atahualpa/images/tree1info2rightside.jpg);" </div>


<a href="http://www.facebook.com/pages/Anderson-SC/Lilia-Day-Spa/182249049008?v=wall&ref=ts" target="_blank"><img src="http://174.120.136.130/~lilia10/shop/wp-content/themes/atahualpa/images/Facebook48.png" vspace="10" alt="Lilia Day Spa Facebook Page" border="0"/></a>

<a href="http://twitter.com/liliadayspa" target="_blank"><img src="http://174.120.136.130/~lilia10/shop/wp-content/themes/atahualpa/images/Twitter48.png" alt="Lilia Day Spa on twitter" border="0" /></a>





thanks,

Bookmarks



Similar Threads
Thread Thread Starter Forum Replies Last Post
How to move the layout container down to show some background image at the top? MikeG Header configuration & styling 3 Apr 1, 2010 07:32 PM
Replacing rss/email/comments icons in top left of header with newsletter glennvogelsang Header configuration & styling 4 Feb 2, 2010 09:52 PM
[SOLVED] Too much red background at top - how to move main body w/white background hi Andante Header configuration & styling 2 Dec 18, 2009 05:25 AM
[SOLVED] Background image doesn't display for post pages Tim F Header configuration & styling 1 Jul 26, 2009 06:59 PM
Body background image wont display anne Atahualpa 3 Wordpress theme 9 Mar 13, 2009 04:05 PM


All times are GMT -6. The time now is 09:53 PM.


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