Jump to content

How to remove sidebar from General Blog page

Recommended Posts

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

Link to comment
  • Replies 9
  • Created
  • Last Reply

Top Posters In This Topic

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;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment

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.

245248425_ScreenShot2022-04-02at11_50_51.thumb.png.d0165e88d9db06fa41f8fa4ad0b2c138.png

951716587_ScreenShot2022-04-02at11_52_23.thumb.png.98f85786561c42ca1234131195c6a589.png

 

 

Link to comment

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>

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 2 weeks later...
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

Link to comment
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. 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment

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

Link to comment
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  ⬇️

Improve your online store with our extensions.
About: Squarespace Circle Leader since 2017. I value honesty, transparency, appreciation and great design ♥.
Work: Squarespace Developer and founder of SF Digital, building the features Squarespace didn't include™.
Content: Links in my posts may refer to SF Digital products or may be affiliate links.

Buy me a coffee

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.