Inserting Picture

  • sylvia


    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!



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



    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.




    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:

    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


    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


    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.




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



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



    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.

    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


    try adding this to your custom CSS:

    #text-12 img {
    padding, margin: 0px;
    width: 200px;

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

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

  • 1
  • 2
  • You must be logged in to reply to this topic.