Docs

[WPH2o]

Hello,

I’ve read all of the (closed) Renew sidebar background color threads.

https://community.theme.co/forums/topic/renew-sidebar-color/
https://community.theme.co/forums/topic/renew-sidebar-color-and-width/
https://community.theme.co/forums/topic/customize-sidebar-and-blog-pages-for-renew-child-theme/
https://community.theme.co/forums/topic/sidebars-background-color/
https://community.theme.co/forums/topic/sidebars-background-color-2/
https://community.theme.co/forums/topic/sidebar-background-color/
https://community.theme.co/forums/topic/sidebar-background-color-2/
https://community.theme.co/forums/topic/sidebar-background-color-3/
https://community.theme.co/forums/topic/sidebar-background-color-4/
https://community.theme.co/forums/topic/sidebar-css-colors/

None of them solve the issue with the sidebar background color only going to the bottom of the last sidebar widget.

On a few themes (Ethos and Integrity, I believe), the background color goes all the way down to the footer.

I need to change the sidebar background of Renew so that it:

1. Goes all the way up to the page title background color without a gap

2. Goes all the way down to the footer section of the page.

The best example is an Ethos page with a sidebar.

Thank you for the help.

Chris

[Rupok]

Hi Chris,

Thanks for writing in! Please provide your URL so that we could check and assist better.

Cheers!

[WPH2o]

This reply has been marked as private.

[Rue Nel]

Hello There,

Thanks for providing the url. Do you want something like this?
http://prntscr.com/e79qdw
http://prntscr.com/e79qmq

If that is the case, please add the following css code in the customizer, Appearance > Customize > Custom > CSS

.x-content-sidebar-active .site > .x-container.max.width.offset {
    margin-top: 0;
    margin-bottom: 0;
}

.x-content-sidebar-active .x-main,
.x-content-sidebar-active .x-sidebar {
    padding-top: 30px;
    padding-bottom: 30px;
}

.x-content-sidebar-active .x-sidebar {
    background-color: red;
    padding-left: 20px;
    padding-right: 20px;
}

Feel free to change the background color. Hope this helps.

[WPH2o]

Thank you for the code and the reply.

That is VERY close.

I want the sidebar bg to go all the way to the right margin, as it does with the Renew stack.

See this site (which uses X Renew): https://tytnetwork.com/

Thank you,

Chris

[Rue Nel]

Hello Chris,

Thanks for updating in! Do you want something like this?

If that is the case, please add the following css code in the customizer, Appearance > Customize > Custom > Edit Global CSS

@media(min-width: 980px){
  .x-sidebar-content-active .site > .x-container.max.width.offset {
    position: relative;
  }

  .x-sidebar-content-active .site > .x-container.max.width.offset:before {
    content: "";
    display: block;
    position: absolute;
    top: -2.75em;
    left: calc(-10000em + 34%);
    bottom: -10000em;
    bottom: -2.75em;
    width: 10000em;
    background-color: red;
    z-index: 0;
  }

  .x-sidebar-content-active .site > .x-container.max.width.offset .x-main,
  .x-sidebar-content-active .site > .x-container.max.width.offset .x-sidebar {
    position: relative;
    z-index: 100;
  }
}

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

[Author]

Posts