Need help? Check out our Support site, then


Chunk theme CSS borders

  1. Hiya, just getting to grips with wordpress & CSS and have picked up some great tips from the forums already.

    I'm trying to adjust the left hand border on the Chunk theme as not all pages will be blog style posts (though one will be eventually). Is it possible to adjust this in CSS per page/ at all?!

    Thanks!

    The blog I need help with is socialjelly.wordpress.com.

  2. Hi there, you can target pages by preceding the main selector with the page body class and that will leave posts and post related pages (archives, tags, categories) alone so the post metadata will still have room. Add the following to your custom CSS and then decrease the 199px value to your desired left margin and then add whatever you subtract from that to the width in the second rule.

    .page #contents {
        margin-left: 199px;
    }
    
    .page .hentry .main {
    width: 580px;
    }

    If you want to take it down to 0, use the following instead, which will remove the left border line and widen the content area by the 199px taken off the left margin.

    .page #contents {
        margin-left: 0;
        border-left: none;
    }
    
    .page .hentry .main {
        width: 779px;
    }
  3. perfect thank you so much!

    Next up is adding social media icons to the header (chunk text widget sits in footer only). I originally wanted them in a side bar but the few things I've read up on imply that it can distort the site. I have the icons uploaded and ready to roll.

    site is http://www.socialjelly.wordpress.com

    thanks again thesacredpath

  4. You are welcome. Add the following and then you can adjust the top and right values to place the icons where you want them. You can also change the "right" to "left" if that makes more sense for your placement. The third rule below assumes you also wish to hide he widget title. You can leave it out if you want to keep the "Follow Me" title.

    #container {
        position: relative;
    }
    
    #text-3 {
        position: absolute;
        top: 0;
        right: 0;
    }
    
    #text-3 .widget-title {
        display: none;
    }

Topic Closed

This topic has been closed to new replies.

About this Topic