Add sidebar to all pages in Duster

  • Resolved John O.

    (@jkahn)


    13 years, 5 months ago

    I’m trying to add the sidebar to all pages in the Duster theme. I’ve come across the following fix but am still having trouble getting it to work.

    Everyone says to change <div id="content" class="widecolumn"> to "narrowcolum"… however my theme doesnt have that line. Instead it has <div id="content" role="main">

    I’ve got the sidebar to appear by adding <?php get_sidebar(); ?> to single.php…. but its aligned below the page because the current post area is taking the whole width.. how to i change <div id="content" role="main"> to make it work with the sidebar on Duster? Hope that makes sense.

Viewing 7 replies - 1 through 7 (of 7 total)

  • +1

    the ‘special’ styles for singular pages (single posts, static pages) all start with .singular in style.css;

    you need to edit them all to adjust to a newly added sidebar;

    this will also cause problems, if you are using page templates that are still without sidebar.

    Thread Starter John O.

    (@jkahn)

    I figured this one out, for the Duster theme at least. This is the code I added to my child theme to get the sidebar to appear on all singular pages. You’ll have to play around with .entry-title and /hentry to get everything aligned properly. Also, if you’re using Disqus, you’ll have to add custom CSS to reduce its width and get it to work with your new single page layout. I’ll provide that code below as well. 

    .singular .entry-header .entry-meta {
   left: 0;
   margin-left: 10px;
   margin-top: -23px;
   position: absolute;
   top: 0;
}

.singular .hentry {
   border-bottom-color: -moz-use-text-color;
   border-bottom-style: none;
   border-bottom-width: medium;
   padding-bottom: 0;
   padding-left: 0;
   padding-right: 0;
   padding: 0;
   padding-top: 25px;
   position: relative;
}

.singular .entry-title {
   color: #616161;
   font-size: 36px;
   font-weight: bold;
   line-height: 48px;
}

    This is the code for to reduce the width of Disqus. Again you’ll have to play with the width and padding to get it aligned how you like it. Add this code to “Custom CSS” from the “Apperance” section of Disqus in your admin panel. Cheers. 

    #disqus_thread { width: 550px !important; }

#disqus_thread {
padding:12px;
padding-left: 100px;
margin-bottom:-10px;
}

    Thanks for this John, I was able to use a variant of this, and some other lines to put together a child theme for the new Twenty Eleven to enable the sidebar for the posts.
    Kim

    John O

    Could you please go into detail about where you put this code in “single.php”?

    <?php get_sidebar(); ?>

    Mine is not showing up.

    Thanks

    @kimjcastleberry Can you please share the code you used as I have been unsuccessful with figuring it out myself!

    Thanks!

    @nvolkert https://just-ask-kim.com/add-sidebar-to-wordpress-twenty-eleven-theme-posts/ However, disclaimer is that that solution is inelegant. It looks great on the surface but it unfortunately makes a mess of the mobile responsive css. Someone with more css skills than me needs to dig further on it.

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘Add sidebar to all pages in Duster’ is closed to new replies.