How do I apply a shadow around the Header, Main content area and Footer?

  • While most people appear to be getting rid of their box-shadow, I am trying to add one with great difficulty.

    I am using the free version of Evolve

    How can I add a shadow to the header, main content area and footer area? #wrapper in CSS.

    I have tried adding the following CSS to the Custom CSS:
    #wrapper {
    box-shadow: 0px 0px 20px #000;
    }
    And using F12 Developers Tools-Microsoft Edge If I untick ‘box-shadow none !important; ‘ in:
    #wrapper, .entry-content .thumbnail-post, #search-text, #search-text-top:focus, ul.nav-menu ul, ul.breadcrumbs, .entry-content .wp-caption, thead, thead th, thead td, .home .type-post.sticky, .home .formatted-post, .page-template-blog-page-php .type-post.sticky, .page-template-blog-page-php .formatted-post, .tab-holder .tabs li a, .tab-holder .news-list li, #wrapper::before, #bbpress-forums .bbp-search-form #bbp_search, .bbp-search-form #bbp_search, .bbp-topic-form input#bbp_topic_title, .bbp-topic-form input#bbp_topic_tags, .bbp-topic-form select#bbp_stick_topic_select, .bbp-topic-form select#bbp_topic_status_select, .bbp-reply-form input#bbp_topic_tags {
    -webkit-box-shadow: none !important;
    -moz-box-shadow: none !important;
    -box-shadow: none !important;
    }
    It works, I get the box shadow but adding this rule to Custom CSS, I cannot make it work, even changing ‘ -box-shadow: none !important; ‘ to ‘ box-shadow: !important; ‘ doesn’t work.

    Can anyone please advise on how to put a shadow around #wrapper.

    The site is on my home server so cannot provide a link.

Viewing 5 replies - 1 through 5 (of 5 total)

  • Use this generator to help.
    https://www.cssmatic.com/box-shadow

    Thread Starter MikeAlan

    (@mikealan)

    Hi Denzil, Thank you for your reply and the generator link.

    I’m ok setting the shadow size and color, the problem is getting it to work after inserting it into Appearance/Custom CSS. My rule for providing a shadow the whole way round is:
    #wrapper {
    -moz-box-shadow: 0 0 20px #000;
    -webkit-box-shadow: 0 0 20px #000;
    box-shadow: 0 0 20px #000;
    }
    Using MS Edge F12 Developers Tools, this displays my rule and the default one both of which are built up in ‘admin-ajax.php’.
    If I untick the default rule ‘box-shadow none !important’ the shadow appear as I want it to.
    This tells me that the default rule is overwriting the Custom CSS rule. Can I get round this?

    Your help in getting the box-shadow to appear would be appreciated. Thank you.

    Hi,

    Try adding !important after your css code.

    #wrapper {
-moz-box-shadow: 0 0 20px #000 !important;
-webkit-box-shadow: 0 0 20px #000 !important;
box-shadow: 0 0 20px #000 !important;
}
    Thread Starter MikeAlan

    (@mikealan)

    Hi,

    Thanks for your reply.
    That’s just what I had done last night. I should have replied to let you know that I had found the answer. Not sure why I missed it to start with.
    Yes, it works perfectly now. Thanks for your help.

    You are welcome!

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘How do I apply a shadow around the Header, Main content area and Footer?’ is closed to new replies.