Special Offer: Buy All 48 Premium WordPress Themes for Just $74.99. Learn more

Remove Box Shadow (Border) Effect for Images

image box shadow

By default most of our WordPress themes (both Free and Premium) comes with box shadow (border) effect around them. In some cases you may want simply to remove that effect. Here are all of the necessary instructions how it can be done:

1. Login to Admin Panel and navigate to Left Menu -> Appearance -> Theme Editor

2. Open style.css

3. Find the following code and remove the code marked in bold below:

#home-content-wrapper img,
#main-content-wrapper img,
#footer-main img {
max-width:100%;
height:auto;
-webkit-box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.3);

}

#home-content-wrapper a:hover img,
#main-content-wrapper a:hover img,
#footer-main a:hover img {
-webkit-box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.7);
-moz-box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.7);
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.7);
opacity:0.7;
}

4. Save Changes

Also, in case you want to remove the box shadow effect for page borders:

box shadow page

it can be done in a similar way:

1. Login to Admin Panel and navigate to Left Menu -> Appearance -> Theme Editor

2. Open YourTheme/inc/actions.php

3. Find the following code and DELETE it:

if ( $isBoxedLayoutSelected ) {
    
        $custom_css .= ‘ #body-content-wrapper{box-shadow: 0 0 10px #000000;}’;
    }

4. Save changes

 

About the Author

Tihomir Ivanov is a WordPress web developer, founder of tishonator.com, a fan of Linux and Open Source, a gym enthusiast, a vegan, a fan of minimalism, good movies and books :)

Leave a Reply