Inserting Picture

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

    Josh

    #20334

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

    Josh

    #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

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

    Mod

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

    Mod

    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

    #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

    #20340

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

    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.

    Mod

    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.

    kent

    #20343

    Ok, thanks. I did that, here’s how it looks. The widget width is 255 (I’m pretty sure). That green image is also 255. The blue is still the background.

    http://kardiackid.com/

    I hadn’t tried adjusting the image properties, just the widget. I got it to display mostly correctly with a header widget, but it was an absolute position. It wouldn’t stack on top of the sidebar. So is there a way to make that text widget completely unformatted?

    Please excuse me if I’m guessing in the wrong direction. I’m trying to learn as I go.

    Thanks.

    kent

    #20344

    Wait, I got it closer, with this:

    #text-12 {

    background-color:#2880c3;

    margin:0px;

    padding:0px;

    border:none;

    }

    But now it’s overlapping the sidebar below it.

Viewing 12 posts - 1 through 12 (of 12 total)

You must be logged in to reply to this topic.