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 »

[SOLVED] How do I place a background image in only one widget?


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 Jul 31, 2010, 06:13 AM
igrowkids
 
21 posts · Jul 2010
Noosa, Australia
[SOLVED] How do I place a background image in only one widget?

I want to place a background image in a TEXT widget at the top of the righthand sidebar. All widgets currently share the same background but I want one to be different.

Can anyone help here?

www.igrowkids.com.au

Thanks!
  #2  
Old Jul 31, 2010, 07:18 AM
lmilesw's Avatar
lmilesw
 
10,077 posts · Jul 2009
Central New York State USA
When you put a new text widget in the sidebar it get it's own id such as div#text2 or div#text3. You will have to use Firebug in Firefox or look at the source code to determine what it is then just use a background statement in ATO>Add HTML/CSS Inserts>CSS Inserts
__________________
~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 Jul 31, 2010, 05:20 PM
igrowkids
 
21 posts · Jul 2010
Noosa, Australia
Thanks!

This is the css I inserted -

Code:
div#text-4{
background:url(/wp-content/themes/atahualpa353/images/guarantee.png);
background-repeat: no-repeat;
height: 65px;
border: solid 0px;
}
Now I need to make the image clickable and hide the link text.

This is the html I inserted in the TEXT widget -

HTML Code:
<a href="http://www.igrowkids.com.au" title="iGrow Kids Clothes online shopping guarantee"<div id="guarantee"><span>100% Guarantee</span></div></a>
And now I haven't got it working quite right...and I think is is because I am not referencing it correctly in the css...

Code:
div#guarantee span {
display:none;
}
  #4  
Old Jul 31, 2010, 06:41 PM
lmilesw's Avatar
lmilesw
 
10,077 posts · Jul 2009
Central New York State USA
The code you have for the hyperlink is missing a > after guarantee" but I think you are trying to make this more difficult than it needs to be. How about putting this in the text widget
HTML Code:
<a href="http://www.igrowkids.com.au" title="iGrow Kids Clothes online shopping guarantee"><img src="http://www.igrowkids.com.au/wp-content/themes/atahualpa353/images/guarantee.png" /></a>
and this in CSS Inserts
HTML Code:
div#text-4{ 
background:transparent;
}   
__________________
~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.
  #5  
Old Jul 31, 2010, 08:36 PM
igrowkids
 
21 posts · Jul 2010
Noosa, Australia
I did this just now...but the colour background of the widgets comes back. My image has transparent areas which I want to maintain without a background colour.

So, I placed a totally transparent .png as the background image AND give it the transparency attribute (is this the right term?) as you suggested. This way the text is transparent AND I get my background transparent AND the transparency in the guarantee.png is evident.

Here is the css code I now have:

Code:
/* Add transparency to Guarantee Text widget */
div#text-4{
background: transparent url(/wp-content/themes/atahualpa353/images/transparent.png);
border: solid 0px;
}
  #6  
Old Jul 31, 2010, 09:34 PM
lmilesw's Avatar
lmilesw
 
10,077 posts · Jul 2009
Central New York State USA
I thought the background:transparent should have given you a transparent background on which you could put your png file. But hey It's working and that's what matters. Good job.
__________________
~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.

Bookmarks

Tags
background, image, widget

Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes


Similar Threads
Thread Thread Starter Forum Replies Last Post
Sidebar Widget ~ Bullets & Background Image? Velma Sidebars & Widgets 10 Mar 1, 2010 08:29 AM
[SOLVED] Background Image in New Widget Areas? Rashell Sidebars & Widgets 2 Dec 31, 2009 05:18 PM
[SOLVED] How to place background image on a static page Shepherd Jim Post-Kicker, -Byline & -Footer 8 Nov 5, 2009 06:31 PM
Side bar widget - font-weight and background image? bamboojungles Sidebars & Widgets 1 Jun 2, 2009 08:32 AM


All times are GMT -6. The time now is 08:02 AM.


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