Need help? Check out our Support site, then


Create a sidebar for Chunk Theme?

  1. Hi, I was wondering if there is a way to create a sidebar for the Chunk theme. I don't like making readers scroll all the way to the bottom to search, follow, etc. I have CSS customization, just still figuring out how it works! Thanks!

    The blog I need help with is thehuepoint.com.

  2. Chunk is a little bit of a challenge. The sidebar can be moved to the right side, but it ends up making the site fairly wide to accommodate the added width for a sidebar, and it can mean that some people using narrower monitors may have to scroll horizontally to be able to view the sidebar. Also, it means making a new header image that is wider than the existing and inserting it through CSS too. Give this a try and see what you think. You will need to create a 990px wide x 170px high header image and upload it to your media library. When you get that done, post back here and we can help get that inserted into the header area for you.

    Make sure and click around on all your pages and some of your posts to make sure that there isn't anything else that blows up with the following changes.

    body {
        background-image: linear-gradient(rgba(0, 0, 0, 0.22), rgba(255, 255, 255, 0) 80px);
    }
    
    #container {
        background: none repeat scroll 0 0 transparent;
        margin-left: auto;
        margin-right: auto;
        padding-left: 0;
        padding-right: 0;
        position: relative;
        width: 990px;
    }
    
    #header, #menu {
        width: 990px;
    }
    
    #contents {
        width: 590px;
    }
    
    #widgets {
        border-top: medium none;
        float: right;
        position: absolute;
        right: 0;
        top: 505px;
        width: 160px;
    }
  3. Thank you for the help! I applied the code and made a minor change (just changed background-image to "none" instead of linear-gradient) for personal preference. The only problem is that the sidebar seems to be distorted. Is there a way to alter that? I tried messing around with it, but the adjustments I tried didn't do the trick. If it helps, here are the codes I have already in place:

    body {
    background-image: none;
    }
    #site-description {
    background: none;
    background-image: none;
    }
    body {
    background-image: none(rgba(0, 0, 0, 0.22), rgba(255, 255, 255, 0) 80px);
    }

    #container {
    background: none repeat scroll 0 0 transparent;
    margin-left: auto;
    margin-right: auto;
    padding-left: 0;
    padding-right: 0;
    position: relative;
    width: 990px;
    }

    #header, #menu {
    width: 990px;
    }

    #contents {
    width: 590px;
    }

    #widgets {
    border-top: medium none;
    float: right;
    position: absolute;
    right: 0;
    top: 505px;
    width: 160px;
    }

    And my blog is thehuepoint.com

    Thank you!!

  4. Whoops! Sorry, I missed copying and pasting one new rule. Add this at the bottom of your CSS and it will fix the issue.

    #widgets .widget {
    width: 160px;
    }

    Again, sorry.

  5. For some reason, that didn't seem to do the trick either! I don't know what is distorting it!

  6. Try clearing the floats for each individual widget. Here's an example:

    #widgets .widget {
    	clear: both;
    	width: 100%;
    }
  7. You might also check a different version I had started here:
    http://en.forums.wordpress.com/topic/how-do-i-add-a-sidebar?replies=6#post-1229316

  8. I resolved the distortion! Thank you all for the help!

    Last thing to fix now is the header image. I know I have to resize it, and then what?

    My blog is thehuepoint.com

    Thank you again!

  9. In my opinion you should make some other adjustments first: center the header and the footer, separate the right sidebar with a border, and increase the width of the main column (at the moment it's narrower than its actual contents - you're not seeing this because there's no border). Try the following:

    Change this:

    #header, #menu {
        width: 800px;
    }

    to:

    #header, #menu, #footer {
        width: 103%;
    }

    Change this:

    #contents {
        width: 590px;
    }

    to:

    #contents {
        border-right: 1px solid #CCCCCC;
        width: 630px;
    }

    And add these:

    #menu {
        text-align: center;
    }
    #menu li {
        display: inline;
        float: none;
    }
    .hentry .main {
        width: 600px;
    }
  10. Hello everyone,
    I am using the Book Lite template and I have the same issue, I would like to create a side bar starting at the top right just under the feature image to showcase the widgets.
    Would it be a similar change to the CSS?
    Thanks a lot for your help.

  11. @gennynielson, since you are using a different theme, would you mind starting a new thread in the CSS forum on this so that it doesn't confuse people coming to this thread in the future. Thanks and I'll keep an eye out for your posting.

Topic Closed

This topic has been closed to new replies.

About this Topic