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

MikeAlan
(@mikealan)

8 years ago

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)

Denzel Chia
(@denzel_chia)

8 years ago

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

Thread Starter MikeAlan
(@mikealan)

8 years ago

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.
Denzel Chia
(@denzel_chia)

8 years ago
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)

8 years ago

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.

Denzel Chia
(@denzel_chia)

8 years ago

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.

Tags