How to remove sidebar from General Blog page

Site URL: https://www.wholelifesolutions.biz/blog

Hello,

We added the sidebar plugin to our website - and it has been working alright, except for it showing up on this page: https://www.wholelifesolutions.biz/blog which we don´t want it to.

We emailed the developer but the instructions that he gave us to block it from showing on that page didn´t work, and they were very vague. I thought maybe someone here would have a quick css solution to prevent the sidebar from showing up on this one particular page?

Regards,

Amanda

Hi. I see no sidebar on blog list page. Did you solve it, or you mean individual posts?

Hello, 

No the issue hasn´t been solved - you can see the sidebar here: https://www.wholelifesolutions.biz/blog

Still looking for insight. 

Thank you,

Amanda

17 hours ago, SeventhSense said:

Hello, 

No the issue hasn´t been solved - you can see the sidebar here: https://www.wholelifesolutions.biz/blog

Still looking for insight. 

Thank you,

Amanda

Add to Design > Custom CSS

/* blog page - remove sidebar */
body.view-list .Main-content.maincontent>.sidebar {
    display: none !important;
}

Hi, thank you - but it didn´t quite work.

I put in what you said and the only change was that the background color for the sidebar disappeared but the sidebar is still there.

And it also shrunk it.  I am attaching 2 screen shots - first one is with your recommended code. Second one is how it was before.

That is weird.

Try adding this to Settings > Advanced > Code Injection > Header

<style>
  /* blog page - remove sidebar */
body.view-list .Main-content.maincontent>.sidebar {
    display: none !important;
}
</style>

On 4/2/2022 at 7:00 AM, tuanphan said:

On 4/2/2022 at 5:01 PM, tuanphan said:

<style>
  /* blog page - remove sidebar */
body.view-list .Main-content.maincontent>.sidebar {
    display: none !important;
}
</style>

 

Hi, thanks for getting back to me. I have the same thing happen as above when this is installed, it all turns orange behind. Then I tried to delete it and it didn´t go back... yikes. You can see the live version of it at www.wholelifesolutions.biz/blog - I will paste here all the custom css we have in the design, maybe you can help me to spot the error to get it back to how it should be? White background like in the screenshot above... 

h1.BlogItem-title {
   color: #000000;
  font-size: 48px;
  font-family: Serif1 !important;
}

h2 {
    font-size: 25px !important;
    font-family: Serif1 !important;
}

h3 {
    font-size: 20px !important;
    font-family: Serif1 !important;
}

#post-6217f0e40ab4dc575a7a31aa{

  background-color : white;
  
  }

.collection-type-blog .Main {

  background-color : white;
  
  }

main.Main.Main--blog-list {
  margin-top: 75px;
}

/* Plugin Sidebar - Custom Styles */
html .sidebar::before {
  content: '{"breakpoint":"768px","positionOnMobile":"bottom","sticky":"yes","stickyTop":"20px"}'!important;
}

html .sidebar {
  width: 330px;
}

html .sidebar__inner {
  position: -webkit-sticky;
  position: sticky;
  top: 20px;
  z-index: 2;
  height: auto;
  padding: 7px;
  background: #ecf6ec;
  border: 1px solid;
}

html body:not(.sidebar-is-stacked) .sidebar {
  width: 350px;
}

html body.template-v7_1 .sidebar .page-section .content-wrapper {
  padding: 7px!important;
}

html body.template-v7_1 .sidebar .page-section,html body.template-v7_1 .sidebar .page-section .section-background {
  background-color: transparent!important;
}

html body.has-sidebar.template-v7_1:not(.sidebar-is-stacked):not(.sqs-edit-mode-active) .page-section.has-sidebar>.content-wrapper .contentwrapper .content,html body.has-sidebar.template-v7_1:not(.sidebar-is-stacked):not(.sqs-edit-mode-active) .page-section.has-sidebar~.page-section.section-has-sidebar>.content-wrapper>.content {
  padding-right: ~"calc(350px + 30px)";
}

* end Plugin Sidebar

On 4/15/2022 at 11:02 PM, SeventhSense said:

Hi, thanks for getting back to me. I have the same thing happen as above when this is installed, it all turns orange behind. Then I tried to delete it and it didn´t go back... yikes. You can see the live version of it at www.wholelifesolutions.biz/blog - I will paste here all the custom css we have in the design, maybe you can help me to spot the error to get it back to how it should be? White background like in the screenshot above... 

h1.BlogItem-title {
   color: #000000;
  font-size: 48px;
  font-family: Serif1 !important;
}

h2 {
    font-size: 25px !important;
    font-family: Serif1 !important;
}

h3 {
    font-size: 20px !important;
    font-family: Serif1 !important;
}

#post-6217f0e40ab4dc575a7a31aa{

  background-color : white;
  
  }

.collection-type-blog .Main {

  background-color : white;
  
  }

main.Main.Main--blog-list {
  margin-top: 75px;
}

/* Plugin Sidebar - Custom Styles */
html .sidebar::before {
  content: '{"breakpoint":"768px","positionOnMobile":"bottom","sticky":"yes","stickyTop":"20px"}'!important;
}

html .sidebar {
  width: 330px;
}

html .sidebar__inner {
  position: -webkit-sticky;
  position: sticky;
  top: 20px;
  z-index: 2;
  height: auto;
  padding: 7px;
  background: #ecf6ec;
  border: 1px solid;
}

html body:not(.sidebar-is-stacked) .sidebar {
  width: 350px;
}

html body.template-v7_1 .sidebar .page-section .content-wrapper {
  padding: 7px!important;
}

html body.template-v7_1 .sidebar .page-section,html body.template-v7_1 .sidebar .page-section .section-background {
  background-color: transparent!important;
}

html body.has-sidebar.template-v7_1:not(.sidebar-is-stacked):not(.sqs-edit-mode-active) .page-section.has-sidebar>.content-wrapper .contentwrapper .content,html body.has-sidebar.template-v7_1:not(.sidebar-is-stacked):not(.sqs-edit-mode-active) .page-section.has-sidebar~.page-section.section-has-sidebar>.content-wrapper>.content {
  padding-right: ~"calc(350px + 30px)";
}

* end Plugin Sidebar

You mean entire page turn to orange?

I checked some code in page source, it looks like you adjusted something in Site Styles, caused this. 

Hi there.... no - I didn´t touch anything in the site styles, the change happened when I put in the code that you had suggested, and I wasn´t ever able to get back to what it was afterwards. 

Whatever happened is odd, because you can see the styles for the sidebar and everything have been changed. I need to find a way to get back to where I was at before.  I cleaned up the code a little for easier viewing - you can see that the code is there and as far as I can tell correct to have the background white - but for some reason it isn´t working.  That is my first concern, to get the main blog articles page and the individual blog posts back to white for the sake of easy reading for our audience. 

Do you think you can help me with this, or should I start a new thread? 

Here is the custom css code now:

h1.BlogItem-title {color: #000000;
  font-size: 48px;
  font-family: Serif1 !important;}

h2 {font-size: 25px !important;
    font-family: Serif1 !important;}

h3 {font-size: 20px !important;
    font-family: Serif1 !important;}

.collection-type-blog .Main {background-color : white;}

main.Main.Main--blog-list {margin-top: 75px;}

/* Plugin Sidebar - Custom Styles */
html .sidebar::before {
  content: '{"breakpoint":"768px","positionOnMobile":"bottom","sticky":"yes","stickyTop":"20px"}'!important;
}

html .sidebar {
  width: 330px;
}

html .sidebar__inner {
  position: -webkit-sticky;
  position: sticky;
  top: 20px;
  z-index: 2;
  height: auto;
  padding: 7px;
  background: #ecf6ec;
  border: 1px solid;
}

html body:not(.sidebar-is-stacked) .sidebar {
  width: 350px;
}

html body.template-v7_1 .sidebar .page-section .content-wrapper {
  padding: 7px!important;
}

html body.template-v7_1 .sidebar .page-section,html body.template-v7_1 .sidebar .page-section .section-background {
  background-color: transparent!important;
}

html body.has-sidebar.template-v7_1:not(.sidebar-is-stacked):not(.sqs-edit-mode-active) .page-section.has-sidebar>.content-wrapper .contentwrapper .content,html body.has-sidebar.template-v7_1:not(.sidebar-is-stacked):not(.sqs-edit-mode-active) .page-section.has-sidebar~.page-section.section-has-sidebar>.content-wrapper>.content {
  padding-right: ~"calc(350px + 30px)";
}

* end Plugin Sidebar

3 minutes ago, SeventhSense said:

Whatever happened is odd...but for some reason it isn´t working. 

A technical issue ("bug) is currently preventing users from testing their Custom CSS whilst they are logged onto their 7.0 or 7.1 website. This could be affected your tests. See my post below on Friday:

Was this post informative? Please give feedback by clicking an icon below  ⬇️