Authority Pro: Remove Shaded Box, Image Shadow and Blue Line Elements

A member of the StudioPress Community forum asked how to remove the shaded boxes, image shadow and blue elements from the Authority Pro Child Theme to make it visually cleaner for them. Below are instructions on how to remove those elements.

**Note: Depending on your child theme version – the line numbers may or may not be the same. This tutorial is using 1.0.3**

Before you get started, always make a backup copy of your files or keep the original file handy in case you need it.

Home Page – Hero (Top Section) – Open style-hero.css in your child theme:

To remove the background square box, comment out line 27 of the stylesheet as shown below:

.hero-section-column.right::before {
/*	background: #f4f4f4;*/
content: "";
display: block;
right: 0;
height: calc(100% - 140px);
position: absolute;
top: 70px;
width: 142%;
z-index: -1;
}

To remove the blue line at the right of the image, comment out line 40 of the stylesheet as shown below:

.hero-section-column.right::after {
/*	background: #000cff;*/
content: "";
display: block;
height: 5px;
position: absolute;
right: 0;
top: 105px;
transform: translateX(50%);
width: 40px;
}

To remove the hero image shadow, comment out line 142 of the stylesheet as shown below:

.hero-portrait {
/*	box-shadow: 0 20px 80px rgba(0,0,0,.2);*/
border: 10px solid #fff;
margin-right: 15px;
max-width: 400px;
vertical-align: middle;
width: 100%;
}

Three Home Page Image Areas – open style-front.css in your child theme:

To remove the square background from behind the image, comment out line 39 as shown below:

.widget_media_image::before {
/*    background: #f4f4f4;*/
content: "";
display: block;
right: 0;
height: calc(100% - 140px);
position: absolute;
top: 70px;
width: 142%;
z-index: -1;
}

To remove the blue lines next to the images, comment out line 51 as shown below:

.widget_media_image::after {
/*	background: #000cff;*/
content: "";
display: block;
height: 5px;
position: absolute;
right: 0;
top: 105px;
transform: translateX(50%);
width: 40px;
}

To remove the box shadow behind the images, comment out line 28 as shown below.

.widget_media_image img {
/*    box-shadow: 0 20px 80px rgba(0,0,0,.2);*/
box-sizing: content-box;
border: 10px solid #fff;
vertical-align: middle;
}

Featured Posts Thumbnail Images – Open style.css in your child theme:

To remove the square boxes from behind the home page post thumbnail images, comment out line 1648 as shown below. This will also remove the background on pages and posts.

.authority-featured-image::before,
.featuredpost .has-post-thumbnail > a::before {
/*	background: #f4f4f4;*/
content: "";
left: -30px;
height: calc(100% + 20px);
position: absolute;
top: 30px;
width: calc(100% + 60px);
z-index: -1;
}

To remove the box shadow from behind the home page post thumbnail images, comment out line 1693 as shown below. This will also remove the background on pages and posts.

.authority-featured-image img,
.featuredpost .has-post-thumbnail img {
/*	box-shadow: 0 16px 65px rgba(0,0,0,.18);*/
vertical-align: middle;
}

That’s it!