Adding borders to images in Twenty Twelve after having removed the drop shadow

  • Unknown's avatar
    songofthecedars · Member ·

    Howdy y’all,

    I’m using the Twenty Twelve theme and have used the following CSS code to remove the drop shadow and rounded edges that get added to images by default:

    .entry-content img,
    .comment-content img,
    .widget img,
    img.header-image,
    img.wp-post-image {
    border-radius: 0;
    box-shadow: 0 0 0 rgba(0,0,0,0);
    }

    .main-navigation ul.nav-menu,
    .main-navigation div.nav-menu > ul {
    border-bottom: 0;
    border-top: 0;
    }

    My question now is, can I selectively add borders back into images as I post them? For instance in HTML I could type border=”2 in an image tag to add a 2-pixel black border around it. It seems that I’m unable to do so in Twenty Twelve, i.e. my only options are either the default rounded edged border with a drop shadow, or no border at all. Of course I can always add a border in an image editing program before posting if that’s what I have to do, but I’d rather do it in code if possible.

    The blog I’m working on is at http://songofthecedars.com

    Thanks!

    The blog I need help with is: (visible only to logged in users)

  • Unknown's avatar
    justpi · Member ·

    a) The second piece of code isn’t related to images: it removes the borders of the top menu.

    b) The border-radius property is a bit misleading: as you wrote, it means rounded edges. It rounds the edges of the image as well as the border, but it works for the image only if there’s no border, and it doesn’t exclude adding a border. Add this rule to your first code and see for yourself:
    border: 2px solid #000000;

    c) The HTML border attribute is deprecated. Almost all the changes in the so-called Text editor require the style attribute, with appropriate properties and values (the same properties and values you’d use in the CSS editor). If you’re going to need this in the Text editor, consult this post of mine:
    http://wpbtips.wordpress.com/2009/10/14/borders-pt-1/

    d) What you’ll add in the CSS editor and what you’ll add in the Text editor depends on what the majority of the images should be, and on how much variety you need. For example, if you need plain images mostly, and bordered images occasionally, with borders of varying color or thickness or type, you keep the CSS you added and you add the border in the Text editor as per the post I linked to. But if those occasional bordered images should all have the same kind of border (e.g. 2px solid black, with 2px of space between image and border), you don’t even do that. You define such a class in the CSS editor: 

    .bordered {
    border: 2px solid #000000;
    padding: 2px;
}

    and then you simply add the word “bordered” along with the rest of the classes of the image code.

  • Unknown's avatar
    sheils13 · Member ·

    Hey songofthecedars! Thanks for posting the css code. I’m also using twentytwelve and didn’t like the drop shadows and rounded edges. Cheers!

  • The topic ‘Adding borders to images in Twenty Twelve after having removed the drop shadow’ is closed to new replies.