Having some problems with box shadow [how to add to div?]

Tagged: 

Author Posts

Martin_1 May 16, 2015 at 3:38 pm

Heads up! this post was created when Microthemer was at version 3. The current version is 7. Some references to the interface may be out of date.

Hi,

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.

Does anyone know how to do this with Microthemer?

Sebastian May 17, 2015 at 2:52 am

Hi Martin,

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):

Blending the dark background

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?

Cheers,
Sebastian


Martin_1 May 18, 2015 at 8:24 pm

Hi,

I tried your solution but it keeps giving me a small blank space at the right hand side.

I am not sure how to solve that.

screenshot

Regards,

Martin

Sebastian May 19, 2015 at 3:23 am

Hi Martin,

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.

Cheers,
Sebastian

Martin_1 May 20, 2015 at 4:05 pm

Hi Sebastian,

Aftre changing some parts and adding a special ID to the full width div I got it to work for the top:

box-shadow: -0px -10px 50px #D2D2D2;

but how do I also get it on the bottom of the same div?

Getting closer and closer to what I want :-).

Sebastian May 21, 2015 at 4:43 am

Hi Martin,

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.

Cheers,
Sebastian

You must login or register to reply to this topic.