[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! |
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
|
Thanks!
This is the css I inserted - Code:
div#text-4{ 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> Code:
div#guarantee span { |
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> HTML Code:
div#text-4{ |
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 */ |
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.
|
All times are GMT -6. The time now is 06:27 AM. |
Powered by vBulletin® Copyright ©2000 - 2024, Jelsoft Enterprises Ltd.