[janihParticipant]

Hello,

I would like to have content area borders in Renew stack just like they are in Integrity. Is there an easy css trick for that? I don’t need a border below the navbar or header, just on the left and right side.

http://theme.co/x/demo/renew/1/5-reasons-you-need-the-x-theme/
http://theme.co/x/demo/integrity/1/5-reasons-you-need-the-x-theme/

Thank you!

[FriechModerator]

Hi There,

Thanks for writing in! Please navigate to Appearance > Customize. And in Customizer under the Layout and Design panel, set the Site Layout option to Boxed.

Hope it helps, Cheers!

[janihParticipant]

Hi,

thank you for you reply. I already have a boxex layed. I would like to have the content area borders with Renew stack. Ingtegrity has them but Renew is without borders

[Rue NelModerator]

Hello There,

Sorry for the confusion. To have the content area borders with Renew stack, please add the following css code in the customizer, Appearance > Customize > Custom > CSS or insert this code in your child theme’s style.css (if you are using a child theme)

.x-renew .entry-wrap {
    display: block;
    padding: 60px;
    background-color: #fff;
    border-radius: 4px;
    box-shadow: 0 0.15em 0.35em 0 rgba(0,0,0,0.135);
}

We would loved to know if this has work for you. Thank you.

[janihParticipant]

Unfortunately that added the shadow on the edge of the post. See the attached image.

I found this other code here:
https://community.theme.co/forums/topic/add-a-dropshadow-in-renew-stack/

/* header */
.x-navbar {
    -moz-box-shadow:    0 0 0.35em 0 rgba(0,0,0,0.3);
    -webkit-box-shadow: 0 0 0.35em 0 rgba(0,0,0,0.3);
    box-shadow:         0 0 0.35em 0 rgba(0,0,0,0.3);
}
/* slider */
.x-slider-container.below {
    -moz-box-shadow:    0 0 0.35em 0 rgba(0,0,0,0.3);
    -webkit-box-shadow: 0 0 0.35em 0 rgba(0,0,0,0.3);
    box-shadow:         0 0 0.35em 0 rgba(0,0,0,0.3);
}

/* footer widget and footer */
.x-colophon.top,
.x-colophon.bottom {
    -moz-box-shadow:    0 0 0.35em 0 rgba(0,0,0,0.3);
    -webkit-box-shadow: 0 0 0.35em 0 rgba(0,0,0,0.3);
    box-shadow:         0 0 0.35em 0 rgba(0,0,0,0.3);
}
/* content */
.x-container-fluid {
    -moz-box-shadow:    0 0 0.35em 0 rgba(0,0,0,0.3);
    -webkit-box-shadow: 0 0 0.35em 0 rgba(0,0,0,0.3);
    box-shadow:         0 0 0.35em 0 rgba(0,0,0,0.3);
}

It doesn’t work either. It adds the shadow to the footer widget and footer only. I made a slight variation to the above code because it added the shadow to right side only.

[ThaiModerator]

Hi There,

Please try with this CSS:

.x-main {
    box-shadow: -2px 0 2px rgba(0, 0, 0, 0.7), 2px 0 2px rgba(0, 0, 0, 0.7);
}

Let us know how it goes!

[janihParticipant]

Hi,

thank you! 🙂

I just had to add header and footer areas. Now it works with this code!

.x-navbar,
.x-main,
.x-colophon.top,
.x-colophon.bottom {
    box-shadow: -1px 0 1px rgba(0, 0, 0, 0.1), 1px 0 1px rgba(0, 0, 0, 0.1);
}

[ThaiModerator]

Glad it worked 🙂

If you need anything else, please let us know.

[janihParticipant]

Oh no! I was cheering too early 🙁

It works on the front page, but on a post page the .x-main shadow is only around the post (and header and footer). Shouldn’t be around the post but around the white content area

[ThaiModerator]

Hi There,

Please remove the previous CSS and add the following CSS:

.site{
    box-shadow: -5px 0 5px rgba(0,0,0,0.9),5px 0 5px rgba(0,0,0,0.9);
}

Hope it helps 🙂

[janihParticipant]

Yes, now it works 🙂

thank you!

[ThaiModerator]

You’re very welcome 🙂

[Author]

Posts