Wordpress Themes - WP Forum at BFA

Wordpress Themes - WP Forum at BFA (http://forum.bytesforall.com/index.php)
-   Atahualpa 3 Wordpress theme (http://forum.bytesforall.com/forumdisplay.php?f=2)
-   -   [SOLVED] How do I place a background image in only one widget? (http://forum.bytesforall.com/showthread.php?t=8631)

igrowkids Jul 31, 2010 06:13 AM

[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!

lmilesw Jul 31, 2010 07:18 AM

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

igrowkids Jul 31, 2010 05:20 PM

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;
}


lmilesw Jul 31, 2010 06:41 PM

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;


igrowkids Jul 31, 2010 08:36 PM

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;
}


lmilesw Jul 31, 2010 09:34 PM

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 09:43 AM.

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