DocsThesisHide Posts Sidebar

Hide Posts Sidebar

Thesis theme comes with posts sidebar. It is placed on all posts and pages, and to hide it there is support for internal tag and for custom CSS.

Option 1: Internal tag

If you prefer to hide posts sidebar only in certain posts/pages, you can use the internal tag system in Ghost:

  1. Log in to Ghost admin
  2. Go to Posts, and open the post
  3. Open the Post settings sidebar
  4. Specify the #hide-posts-sidebar to Tags
  5. Click Publish

The sidebar will now appear only in posts with the #hide-posts-sidebar internal tag.

⚠️

Remember that internal tags starting with # are not visible to readers and are used only for theme features and integrations.

Option 2: Custom CSS

Code Injection is required to add custom CSS.

You can hide the sidebar on all pages with the following CSS:

<style>
  .main {
    grid-template-columns: var(--sidebar--width) minmax(0, 1fr);
  }
 
  .content > .header > .button,
  .sidebar-posts {
    display: none;
  }
 
  @media (max-width: 950px) {
    .content > .header > .button {
      display: block;
    }
 
    .header > .breadcrumbs {
      justify-content: center;
    }
  }
</style>

Use the body class to show/hide sidebar on different pages. For example, show the sidebar only in posts:

<style>
  body:not(.post-template) .main {
    grid-template-columns: var(--sidebar--width) minmax(0, 1fr);
  }
 
  body:not(.post-template) .content > .header > .button,
  body:not(.post-template) .sidebar-posts {
    display: none;
  }
 
  @media (max-width: 950px) {
    body:not(.post-template) .content > .header > .button {
      display: block;
    }
 
    body:not(.post-template) .header > .breadcrumbs {
      justify-content: center;
    }
  }
</style>