• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar
  • Skip to footer

The Cre8tive Diva - WordPress Developer

Digital Nomad | Helping WordPress & Genesis Framework Website Owners All Over the World

  • Home
  • About
    • Accessibility Statement
    • Terms of Service & Privacy
  • Services
    • Blogger to WordPress Migration
    • Buddypress Installation
  • My Work
  • Blog
    • Tutorials
    • Five on Friday
    • Genesis Framework
    • Tipsy Tuesday
    • WordPress
  • Contact
Home » Authority Pro: Remove Shaded Box, Image Shadow and Blue Line Elements

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!

  • Like my Signature? Get the Signature Widget for Genesis right here!

  • FacebookTweetPinPrint

    Filed Under: Genesis Framework, Genesis Themes, Tutorials, WordPress

    Reader Interactions

    Comments

    1. Kristin says

      December 31, 2018 at 4:59 pm

      Anita, thank you SO much for making this nice theme one I’ll use now! Really appreciate you saving me so much time!

      • Anita Carter says

        December 31, 2018 at 5:01 pm

        You’re welcome Kristin!! Thanks for letting me know! I appreciate it.

    Primary Sidebar

    It's just me and my dog Bella. I am a freelance web developer at Cre8tiveDiva.com. I build websites using WordPress and the Genesis Framework, WooCommerce and provide troubleshooting and support. I also build with Shopify. I love chocolate, lots of coffee!

    Sign Me Up!

    Receive my blog posts, tips and updates delivered to your inbox!

    Yes, Sign Me Up

    *By signing up you will receive new blogs, updates on products, services and important alerts.

    Categories

    • Design
    • eCommerce
    • Five on Friday
    • Fonts
    • Free Themes
    • Freebie Friday
    • Genesis Framework
    • Genesis Plugins
    • Genesis Themes
    • Genesis Untapped
    • Instagram
    • MailChimp
    • News
    • Plugins
    • Press This News
    • Social Media
    • Tipsy Tuesday
    • Troubleshooting
    • Tutorials
    • Uncategorized
    • Web Development
    • WooCommerce
    • WordPress
    • WordPress Plugins

    Footer

    Digital Nomad! I can be anywhere I wanna be now.

    Latest Blog Posts

    • Temporary Fix When Using Genesis Blocks Posts and Page Grid with Genesis Simple Share
    • How to Add Reading Time to a WordPress Genesis Child Theme Without a Plugin
    • How to Add “Shop” to WooCommerce Breadcrumbs when Using Yoast

    Looking for Something?

    Copyright © 2012–2023 · Designed with by Me! · Hosted on SiteGround