Create a sidebar for Chunk Theme?

  • Author
    Posts
  • #1261681

    thehuedawg
    Member

    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.

    #1261828

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

    thehuedawg
    Member

    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!!

    #1261867

    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.

    #1261868

    thehuedawg
    Member

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

    #1261887

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

    #widgets .widget {
    	clear: both;
    	width: 100%;
    }
    #1261888

    justpi
    Member

    You might also check a different version I had started here:
    https://en.forums.wordpress.com/topic/how-do-i-add-a-sidebar?replies=6#post-1229316

    #1261890

    thehuedawg
    Member

    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!

    #1261893

    justpi
    Member

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

    #1261894

    gennynielson
    Member

    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.

    #1261895

    @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.

The topic ‘Create a sidebar for Chunk Theme?’ is closed to new replies.