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:
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
Great tip. Thanks.