How to add border to specific image widget photo

  • Author
    Posts
  • #1279614

    xenoncats
    Member

    Does anyone have any idea of how to add a specific border around the photo in “Today’s Cat” widget without affecting any other photos on my site?

    I used the image widget to set it up and regularly change the photo and want the photo to have a border.

    If possible, I want to add it to my custom CSS. I am using Twenty Eleven theme.

    The blog I need help with is catcharisma.com.

    #1279824

    This will do it and you can edit the size and color of the border as you desire. Since the theme didn’t have borders on the images to begin with, I had to downsize the image just a little or the right border was cut off.

    #image-2 img {
    border: 3px solid #CC0000;
    width: 97%;
    }
    #1279825

    Oh yeah, so you know how I did this, I looked at your source code (view source) found the image widget and then got the unique id for that particular widget. The border will only show on this specific widget.

    #1279826

    xenoncats
    Member

    Oh thank you so much. I too looked at the source code and found “image-2” but could not figure out the part before the first wavy bracket.

    Do you know why is the right border cut off?

    #1279829

    The “width setting of 97% should take care of that. The image widget doesn’t account for a border since the theme wasn’t designed for a border. Are you seeing the right border cut off? What browser are you seeing that in? It isn’t cut off in Firefox or Safari.

    #1279832

    xenoncats
    Member

    I am using Safari and no it isn’t cut off.

    #1279833

    Great, then you are good to go.

    #1279835

    xenoncats
    Member

    Yes thanks again.

    #1279836

    You are welcome.

The topic ‘How to add border to specific image widget photo’ is closed to new replies.