relocate sidebar

  • Resolved uniterra

    (@uniterra)


    6 years, 12 months ago

    Dear Ben,
    is there any way to move the sidebar horizontally so that it will not appear in the white boxed area but rather left of the white area. If this is possible, the next question is how to change the text colour displayed in the sidebar.

    If moving the sidebar (displaying categories and tags in my case) to the left, would it then be possible to display it either on the top of an entry (just below the header) or below the text entry?

    By the way, I crashed my whole site when trying to restore it from a backup (16 gb!!!) after reinstalling xampp… Reworking it from the scratch right now, because I lost all code responsible for inserting pictures in the posts along the way…

    Thank you for any support!

Viewing 3 replies - 1 through 3 (of 3 total)
  • Theme Author Ben Sibley

    (@bensibley)

    Hello,

    The categories/tags in the sidebar sit below the post content on mobile devices, and you can keep it that way on wider screens too by adding this CSS:

    .entry-meta-bottom.float .entry-categories,
.entry-meta-bottom.float .entry-tags {
  position: static;
  width: auto;
  text-align: left;
  padding: 0;
}
.entry-meta-bottom.float .entry-categories a,
.entry-meta-bottom.float .entry-tags a {
  display: inline-block;
  margin-right: 0.375em;
}

    I’m not sure if you’ve seen the Tracks CSS snippets collection, but there’s a lot of cool pre-written customizations like this one available there.

    Thread Starter uniterra

    (@uniterra)

    Thanks a lot. I had seen this solution for moving the sidebar down to the bottom permanently. And I also already used quite a few of the CSS snippets. But is there also a way to move the sidebar further to the left (outside the main body to the area with black background) on large screens?

    Theme Author Ben Sibley

    (@bensibley)

    This code should work quite well:

    @media all and (min-width: 1600px) {
	
  .entry-categories,
  .entry-tags {
    left: auto !important;
    right: calc(100% + 24px) !important;
    color: white;
  }
}

    The one trouble with this is that you can’t guarantee there will enough space without the text getting cut off on the left side. I’ve used a media query to delay this layout from taking effect until the screen is 1600px or wider which seems to work pretty reliably from my testing.

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘relocate sidebar’ is closed to new replies.