Need help? Check out our Support site, then

Remove image borders in Twenty Twelve theme

  1. Hi All
    I am unable to remove the fine grey border around all my images in the Twenty Twelve theme on
    I have tried changing the Image border to 0 in Image details but it is still there.
    I have searched the forums and tried changing the code in the Text tab to
    style="border: 0px solid #000000;"
    and also
    I have also tried adding a border which is white but the fine grey border remains. It does seem to go if I add a border of another colour, but returns if I change it back to white or none.
    I have the custom upgrade and have tried adding

    img[class*="align"], img[class*="wp-image-"], #content .gallery .gallery-icon img {
    border: none;
    to the CSS (it was a suggested fix for the Twenty Eleven theme) - a bit of a long shot and it didn't work either!
    I'm all out of ideas and wonder if I'm trying to do something that can't be done.
    I am new to CSS, so please be gentle with me.
    Thanks in advance.

    The blog I need help with is

  2. Hi there,

    You were pretty close with the CSS from Twenty Eleven. The border *is* gone, but what you saw as borders were actually shadows. Here's how to remove them (I'm modifying your code a little):

    img[class*="align"], img[class*="wp-image-"], #content .gallery .gallery-icon img {
    	border: none;
    	box-shadow: none;
  3. You sir are my new best friend!
    Thank you hafizr so much for restoring my sanity. This has worked a treat.

    Can you tell me whether it is possible to also removed the shadow from the image in the header?

  4. Hi there, to remove the box shadow from the header in Twenty Twelve, add the following CSS.

    img.header-image {
        box-shadow: none;
  5. Thank you thesacredpath! It has worked.

    Can I ask one final question that has been bugging me? Again I think it might be a CSS question and I apologise if it should sit elsewhere.

    Is it possible to align centrally the menu items at the top? At the moment everything is aligned left and now that all my pages are up there is a little gap to the right (I'm getting nitpicky now I know).
    Thanks again gentlemen for your help.

  6. To center your menu, add the following CSS. I've limited this to 600px and wider since at 599 is when the minified menu activates.

    @media screen and (min-width: 600px) {
    .main-navigation ul.nav-menu, .main-navigation div.nav-menu > ul {
        text-align: center;
    .main-navigation li {
        margin-right: 0;
    .main-navigation li a {
        padding-left: 20px;
        padding-right: 20px;
  7. Thank you so much thescaredpath. You are a CSS wizard! I will go and leave you in peace now, with grateful thanks for all your help. Couldn't be happier.

  8. You are welcome.

  9. Can you tell me exactly where to add the

    img.header-image {
    box-shadow: none;

    I'm assuming it goes in the style.css stylesheet?
    Thank you so much for your help!

  10. @libbygedney, there are two sites linked to your username, and one self-hosted site (Wagner Pools). CSS is theme specific, so can you verify which site you are talking about please?

  11. The site uses the Twenty Twelve theme and that's the one I want to get rid of the shadow box around the header image.
    Thanks again.

  12. Hi thesacredpath...I just want to let you know I figured it out once I used a childs theme! I used the plug-in 'One-Click Childs Theme' and it was super-easy. Thank you so much for the coding.

  13. @libbygedney, that is great. For future reference, is a self-hosted WordPress installation using the software from

    The general support forum for self-hosted installations is at: . There are a number of forums there you can post in depending on what you need help with.

    For questions on the self-hosted version of Twenty Twelve, there is a help forum at: .

Topic Closed

This topic has been closed to new replies.

About this Topic