1

[sylvia]

sylvia

#2469

Have a question for the pros here….looking at you Ken and Josh, lol!

How could I add an image in the sidebar, which would also be a link when clicked on? I know I can use the text widget to add images, but I don’t like the white background/border that it creates around the image. If I try to eliminate this border using css…it affects all the sidebar widgets…is there a way of adding an image and being able to style the background or border without affecting the other sidebar widgets?? Or is this just a limitation of the graphene theme because the same css is used on all sidebar widgets?

Any information, as always….is SUPER APPRECIATED!

[Anonymous]

Anonymous

#20334

Give me the url of the image, and the link you want it to go to.

[Anonymous]

Anonymous

#20335

Something like this in a text widget box:

<a href="THE LINK YOU WANT IT TO GO TO"><img src="YOUR IMAGE SOURCE URL" style="border:none;" /></a>

This is called “inline” styling and it sets near the top in the priority level. Inline styles will overwrite any rules in your stylesheet.

[soapy]

soapy

#20336

Josh,

Thanks for the reply…..but that doesn’t do it. That inline css will set “no border” around the image itself….but what I’m referring to is the white background/border beneath the image. If you look at the image in the text widget on kens page:

http://blog.kjodle.net/2011/09/12/fun-with-text-widgets-part-one/

You will notice a thick white border that outlines the entire image. I can try and adjust it using the css rule:

.sidebar div.sidebar-wrap

But that affects all the widgets…..whereas I only want it to affect the one widget that I am working with! It’s a tricky one!

[Kenneth John Odle]

Kenneth John Odle

#20337

Okay, this is easy IF you use Firebug.

Basically, WP assigns every widget a unique ID. If you look at my blog with Firebug and take a peek at the “Check Your Browser” (now with new! improved! illustration), you will see that it has an ID of text-7. So I can write any CSS I like that affects only that widget like this:

#text-7 {style elements here;}

[Kenneth John Odle]

Kenneth John Odle

#20338

But if you are talking about this border:

that really isn’t a border. It’s just the background that shows up because the picture doesn’t fill the entire widget space.

To control just one aspect of that widget, use code like this:

#text-7 img {style elements here;}

Using that code will allow you to control the appearance of an image in just that one widget.

[soapy]

soapy

#20339

Ken,

Thats exactly what i’m talking about…..and thats awesome that you can style widgets independently….exactly what i’m looking for!

Ken / Josh……THANK YOU!!!!!!!!!!!!!!!!!!!!

[soapy]

soapy

#20340

Hey Ken….that code worked great, thank you very much!

[kent]

kent

#20341

I think I have the same question, but I haven’t figured out the answer as quickly as Soapy. The mirror of my site is below. I figured out how to change the background with Ken’s instructions but that’s about it.

http://www.kardiackid.com

You’ll see the ad on the right. I made the background blue to highlight the issue. I’d like to make the ad image the right width to fill that area and be centered.

I’ve also tried a header widget, but that made it overlap the sidebar instead of sitting above it.

I’m sure this is not as complicated as I imagine, but I can’t quite figure it out. Any help would be appreciated.

[Kenneth John Odle]

Kenneth John Odle

#20342

try adding this to your custom CSS:

#text-12 img {

padding, margin: 0px;

border:none;

width: 200px;

}

and then adjust the actual width until it fits the area of the text widget.