Docs

[coryyeakel]

Hey guys,

I’ve been up and down the forums several different times now but I can’t find a solution to what I’m looking for. Here’s what I’m trying to do:

I’m currently using the Integrity stack. I want to recreate the sidebar used on the Ethos stack, where the background color of the sidebar (and entire right side of the page) is different from the Post body (and entire left side of the page), EXACTLY like on this post: http://demo.theme.co/ethos-1/the-million-dollar-jacket/

Can someone tell me how I can achieve this? I’m trying to achieve this look on Single Posts only.

Thanks!
Cory

[coryyeakel]

This reply has been marked as private.

[Rue Nel]

Hello There,

Thanks for writing in! Do you want something like this, http://prntscr.com/dkrtwy?
If that is the case, please add the following css code in the customizer, Appearance > Customize > Custom > CSS

.site > .x-container:before {
    content: "";
    display: block;
    position: fixed;
    top: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    background-color: red;
    z-index: -1;
}

.x-content-sidebar-active .site > .x-container:before {
    right: -64%;
}

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

[coryyeakel]

Hey Rue,

That’s the look I want, but unfortunately that code isn’t a good solution. As soon as you change the size of the screen, it alters the position of the background. See below screenshots for examples.

Here it is looking fine with customizer open: https://gyazo.com/608888887ab12cef99d94967ee91171a
Then when you collapse the customizer sidebar: https://gyazo.com/af65b5d9a442be15d6624dbc8b456bbc
Tablet view: https://gyazo.com/cbc546787dee8ab072d6827abf81d8a1
Mobile view: https://gyazo.com/4df71cc35362a13db21630818124b892

Is there another solution I can try? Something that moves responsively with the sidebar, instead of independently on its own?

[Rue Nel]

Hello There,

Sorry if that doesn’t work out. Please use this code instead:

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

  .site > .x-container:before {
    content: "";
    display: block;
    position: absolute;
    margin: -40px;
    top: 0;
    bottom: 0;
    width: 100%;
    height: 105%;
    background-color: red;
    z-index: -1;
  }

  .x-content-sidebar-active .site > .x-container:before {
    left: 76%;
  }
}

Please let us know if this works out for you.

[coryyeakel]

Hi Rue,

There still seems to be some alteration as the screen sizes down. I was thinking maybe there’s a different way to target this: instead of trying to target the background color of the sidebar (and right side of the page), can the CSS target the background color of the content (and right side of the page)?

I think going that way will help fix the alteration issue. Let me know.

[Rue Nel]

Hello There,

Thanks for updating us in! Please be advised that Ethos and Integrity stack has a different structure. The given code adds a background color to the container which is why you we have this .x-container:before in the code. The background color were added in the container and not in sidebar. The latest code will only affect the screen size greater than 979 pixels. Do you also want to have a background color when you are viewing the site in smaller screen (smaller than 979 pixels)? Please give us your thoughts.

Thank you.

[Author]

Posts