Add box Shadow Effect

Support
#1

Hi,

I would like to add a box shadow effect to the website to distinguish edge of the site as the background is the same colour.

I have tried entering some css but didn’t work.

box-shadow: 0 1px 6px;
-webkit-box-shadow: 0 1px 6px;

Any ideas? I have included a photo of the effect I am looking to create.

Thanks in advance

#2

Hello Tim,

Thanks for writing in!

To resolve your issue, please add the following CSS code in the X > Theme Options > Global CSS (http://prntscr.com/evui3r)

.x-root .site, .x-root .x-site {
    box-shadow: 0 1px 6px rgba(0,0,0,0.75);
    -webkit-box-shadow: 0 1px 6px rgba(0,0,0,0.75);
    border: none;
}

We would love to know if this has worked for you. Thank you.

#3

It worked perfectly, thank you so much

#4

On behalf of my colleague, you’re welcome. Cheers! :slight_smile:

#5

May I ask one more question?

I want to add a line in between above div x container which I think is .x-colophon bottom I have the line as an image. Am I looking at the right place? I have tried .x-colophon bottom" {background-image:http://localhost:8888/wp-content/uploads/2019/04/line3.png} but it didn’t seem to work?

#6

Hi Tim,

Please try:

.x-colophon.bottom {
    background-image: url(http://localhost:8888/wp-content/uploads/2019/04/line3.png);
}

Hope this helps.

#7

It worked thank you, but it’s repeated multiple times?

#8

Hey Tim,

You can update the previous code with the following one:

.x-colophon.bottom {
    background-image: url(http://localhost:8888/wp-content/uploads/2019/04/line3.png);
    background-repeat: no-repeat;
}

Let us know how this goes!

1 Like
#9

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.