Change sidebar background color completely till end

Try this:

.col-3cm .main-inner {
  background: #fff;
  }

This works but only for the homepage.

Also, how I can add a separator (like this https://i.imgur.com/QK86OYM.jpg) between content and sidebar?

Thanx in advance.

Can you post a link to your web site? That would help us see the issues. Thanks.

Hi, that’s not possible as of now as I’m optimizing the theme on local server using Xampp.

Hope you can get it sorted. Thanks.

Well, it makes it pretty difficult to try different options unless we can see the actual code you’re running. Perhaps you could put up a test version in an add-on domain or a subdomain on your host?

I agree with your point. Will setup a sub domain and test the theme on it tomorrow. Will be beneficial for me and easier for you as well. ??

Hi bdbrown, I’ve finally setup a test domain to show you the changes and it should help you as well.

I’ve been able to change the sidebar background to white on index page but unable to do it completely on single pages. Eg: https://test.webtrickz.com/?p=9

The non-widget area isn’t changing to white. Also, how I can add a separator (like this https://i.imgur.com/QK86OYM.jpg) between content and sidebar?

Try this for your sidebar background:

.col-2cl .main-inner {
  background: #fff;
  }

Try this for your separator:

.col-2cl .s1 {
  box-shadow: inset 4px 1px 6px -6px;
  }

That worked! You’re awesome bdbrown. I can’t thank you enough, really appreciate your help. ??

But I want the separator to be simple in #EEEEEE without box shadow as the one in hueman theme here: https://i.imgur.com/tlzCg9w.png

Also, I separator only shows upto the widget area and doesn’t appears on index page. Plz look into it.

Thank You!!

The separator in your example is created using a border. That doesn’t work on the sidebar because it pushes the sidebar to the bottom of the page. If you just want a separator on the main sidebar on the right side, on every page, this box-shadow is about as close as you can come:

.s1 {
  box-shadow: inset 1px 0 1px 0 #ded;
  }

If you want separators on two sidebars, like your front page, you could use a border on the content container:

.home .content {
  border-right: 1px solid #eee;
  border-left: 1px solid #eee;
  }