6 {{ upvoteCount | shortNum }}
6 {{ upvoteCount | shortNum }}

Change width for left sidebar and main area, borders ++

by larsjorgenbr
5 replies
  • WEB DESIGN
    • |
Just installed Generatepress and it's close to perfect for my project. I do however need some help with changing a couple of things:

I want to make the left sidebar more narrow (about 75% of the current width) and the main area wider. I also want to have less space between the sidebars and main area, and borders between the areas.

I also want the site header to have smaller letters, I want to have the site description next to the header instead of under (but not in the middle or all the way to the right)....AND I want the header area to be more narrow, to take less space.

This is probably a lot of coding, but it'll be awesome if someone can help me out with some or all of it. Not expecting one of you to help me out with everything here, but if someone reading this knows of a quick fix for some of it, I'd love to hear it. Oh, and I'm planning on doing this with a child theme.

This is my site: Kvisestopp | Et steg nærmere vakker hud

Thanks!
#area #borders #change #left #main #sidebar #width
  • Profile picture of the author JosephI
    Here's the look you're looking for, I think, and the css code below is only to adjust what you have now live and to get you started but may not be the right code to use.
    Some of the items need to be coded correctly or differently on the actual site but these can help you find them on your css style sheet.
    Hope I'm expressing it clearly.

    Also, when you make or add an element adjustment, others get screwed up and also need adjustments.
    You could be adding another extensive style sheet.
    Good luck

    https://dl.dropboxusercontent.com/u/...enShot007..png

    div.widget-area.grid-25.grid-parent.sidebar.pull-75 {
    width: 20%;
    border-color: #807c80;
    border-width: 2px;
    margin-left: -50px;
    }

    aside.widget.inner-padding.widget_pages {
    border-width: 1px;
    border-style: solid;
    padding: 5px;
    }

    div.content-area.grid-parent.push-25.grid-50 {
    border-width: 1px;
    border-style: solid;
    width: 58%;
    }

    p.main-title a {
    font-size: 24px;
    }

    p.main-title {
    width: 50%;
    margin-top: -20px;
    }

    p.site-description {
    width: 50%;
    margin-left: 20%;
    margin-top: -4%;
    }

    div.inside-header {
    height: .9em;
    }

    div.inside-right-sidebar {
    padding: 10px;
    }
    {{ DiscussionBoard.errors[9925949].message }}
  • Profile picture of the author larsjorgenbr
    Awesome, just a few small tweaks and this will be perfect. Thanks!

    Edit: Is it btw possible to only get a line between the sidebars and main area instead of a box all the way around the areas?
    {{ DiscussionBoard.errors[9928889].message }}
  • Profile picture of the author JosephI
    Sure, just specify where and how you want it.

    div.content-area.grid-parent.push-25.grid-50 {
    border-style: solid;
    border-color: #c771c7;
    border-left-width: 4px;
    }
    {{ DiscussionBoard.errors[9928986].message }}
  • Profile picture of the author larsjorgenbr
    I must remove the other border divs before putting in this instead, right?
    {{ DiscussionBoard.errors[9929234].message }}
  • Profile picture of the author JosephI
    Yes or just make the change to reflect new. Either way.
    Don't hesitate to experiment a bit, you won't kill it :-)
    {{ DiscussionBoard.errors[9929283].message }}

Trending Topics