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 »

[SOLVED] How to display an background image and two icons on top of it in a customhea


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 May 4, 2010, 10: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 4, 2010, 11:48 PM
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, 09:48 AM
juggledad's Avatar
juggledad
 
22,253 posts · Mar 2009
OSX 10.8.5 WP 3.8.x Atahualpa 3.7.x Safari 6.x Firefox 25 XP
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, 10: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, 10: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

Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes


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 06:32 PM
Replacing rss/email/comments icons in top left of header with newsletter glennvogelsang Header configuration & styling 4 Feb 2, 2010 08: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 04:25 AM
[SOLVED] Background image doesn't display for post pages Tim F Header configuration & styling 1 Jul 26, 2009 05:59 PM
Body background image wont display anne Atahualpa 3 Wordpress theme 9 Mar 13, 2009 03:05 PM


All times are GMT -6. The time now is 03:32 AM.


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