I am using the Avada theme from Themeforest and I am tring to create a shadow above a darkgrey full width div. http://theme-fusion.com/avada/one-page-parallax/ If you scroll down you come to a part where it states:
“Incredible Features: The Proof Is In The Pudding
Avada is loaded with useful features, each one with its own meaningful purpose. We listen to our users and integrate their feature requests on a regular basis. Avada is not only built by us, but also by our users.”
I want to add a shadow above that darkgrey part so it blends in with the white background above it.
If you double-click the black box with the text you referenced you should be able to create a selector for it. Watch out though because in the demo it only seems to have generic classes that may be used elsewhere – you could end up targeting more than you want. But perhaps the Avada theme also lets you insert your own custom classes?
I also noticed that it uses quite a few inline styles that you will not be able to override using Microthemer (because Microthemer can’t match the CSS specificity of inline styles).
All of that aside, here is how I did what you asked (it may not be as pretty as you had in mind):
To achieve this I set box-shadow to:
box-shadow: -20px -20px 20px #333333;
If you look at the top right of the image I have pasted a screenshot of how you would enter the values in Microthemer.
An alternative approach would be to add a gradient to the white box above, but I see that it has inline background styles which would override any gradients you apply with Microthemer. I’m not sure if they theme allows you to easily turn this off?
If you increase 2nd and 3rd number to -40 and 40 but keep the first number the same you may find that this solves the issue. Like this:
box-shadow: -20px -40px 40px #333333;
The first number (-20px) pulls the horizontal shadow to the left. I found that this was necessary to avoid the blank space problem on the left when I was testing with firebug. But by increasing the spread you should be able to cover up the blank areas on both sides.
If that doesn’t work please send me a link to your site and I will have another play with firebug.
Would it be possible to send me a link to your site via our contact form or post it here?
I will probably need to view your site because from looking at your shadow settings I would expect the shadow to spread over the bottom too. So something may be obscuring it.
.
.