WordPress automatically adds a border around all gallery images with inline styles on the page from the gallery shortcode. There are a number of ways to remove the borders, if you decide you want a more subtle look for your website galleries. This tutorial shows you how to remove the borders using CSS for the Twenty Twelve theme and the Genesis Sample theme.
Twenty Twelve Theme Gallery Borders
In Twenty Twelve, the featured image and the images inserted into the post have a slight border-shadow around the images and a slightly rounded corner. This is the code in the stylesheet (style.css) that creates the shadow and rounded corners.
.entry-content img,
.comment-content img,
.widget img,
img.header-image,
.author-avatar img,
img.wp-post-image {
border-radius: 3px;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
}In addition to the subtle shadow, the WordPress default gallery code also adds a 2px border to gallery images which may be more than you want. The WordPress gallery shortcode creates a new piece of code that is added inline on the page for every gallery you add to the post. This is the default gallery shortcode style that adds an additional 2px border to the gallery images.
#gallery-1 img {
border: 2px solid #CFCFCF;
}Custom CSS to Remove Gallery Borders for Twenty Twelve Theme
To give the gallery images the same subtle shadow with no extra border, as other post images, you can add this CSS to your Custom CSS editor. (How to use a Custom CSS editor.)
#content .entry-content a img,
#content .entry-content img {
border: 0;
}The CSS in the editor will override the inline styles. And now you have a nice subtle shadow frame around the gallery images.
Genesis Sample Theme Gallery Borders
In the Genesis Sample theme, the featured image and the images inserted into the posts don’t have any borders or shadows. However, the gallery images have the WordPress default 2px border.
Custom CSS to Remove Gallery Borders for Genesis Sample Theme
The default inline gallery code that adds the 2px borders is the same as for the Twenty Twelve theme above. If you would like to remove this border for the gallery images, this is the Custom CSS you would add to your editor. You will need to use the !important declaration for this theme to override the inline gallery styles.
.entry-content a img,
.entry-content img {
border: 0 !important;
}And this is how the gallery images look now – borders removed.
You can remove these default gallery borders for any WordPress theme you are using, although the CSS could be a bit different for your theme. The !important declaration can help, as used in the Genesis theme.
You can also remove ALL the default gallery styles (not just the borders) by adding the following code to your child theme functions.php.
// Remove inline WordPress styles added with the gallery shortcode.
add_filter( 'use_default_gallery_style', '__return_false' );But then you will need to add your own styles to your theme stylesheet. The details for adding your own styles will have to wait for another tutorial!
Leave a Reply