WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] Extend width of fixed width column (4 posts)

  1. mroshaw
    Member
    Posted 4 years ago #

    Hi!

    I am using a rather splendid theme called Green Park 2 by Cordobo.

    I want to make a simple change, but am clueless I'm afraid.

    Can someone tell me how to increase the width of a column in a fixed width, 2 column theme such as Green Park 2?

    In particular, I want to increase the width of the first column, so that the sidebar doesn't take up so much empty space.

    My site is here.

    Link to the theme is here.

    Thank you in advance for your kind assistance!

  2. alchymyth
    The Sweeper & Moderator
    Posted 4 years ago #

    in this theme it seems to depend on the width in the following styles ( to be found in style.css )

    #header,
    #main,
    #footer {
      background-color: #fff;
      text-align: left;
      margin: 0 auto 3px;
      width: 985px;
    }

    #nav { position: absolute; top: 75px; left: 0; width: 985px; }

    ul#menu {
      background: #89CB11 url(img/navigation.png) top left repeat-x;
      display: block;
      height: 41px;
      padding: 0 28px 0 18px;
      width: 939px;
    }

    #footer { padding: 10px 28px; width: 929px; }

    (there might be more)
    increase the width in each of these by the same amount.
    you also need to adapt the width of at least one graphic: http://www.mroshaw.co.uk/wp-content/themes/cordobo-green-park-2/img/bg-body.png

    good luck ;-)

  3. Cordobo
    Member
    Posted 4 years ago #

    Hi mroshaw,

    if you want to keep the 985px width you only need to change 3 CLASSES/IDs (marked bold):

    #container { float: left; margin: 0 <strong>-350px</strong> 0 0; width: 100%; } <em>/* -350px is the width of the sidebar, e.g. -300px reduces the width to 300px */</em> 
    
    #content {
      border-right: 3px solid #D5DADD;
      margin: 0 <strong>350px</strong> 0 0; <em>/* reduce it to the same px-width as in #container */</em>
      overflow: hidden;
      padding: 19px 0 0;
    }
    
    #sidebar {
      background-color: #fff;
      border-left: 3px solid #D5DADD;
      float: right;
      margin-left: -3px;
      padding: 15px 20px 15px 10px;
      <strong>width: 320px;</strong> <em>/* the width of 350px - 15px - 15px padding */</em>
    }

    You might adjust some CLASSES with the width of width: 576px; like the date in the blue box below the headline to fit the new width.

    I try to add a simpler solution to the admin panel in the next releases.

    HTH, Cordobo

  4. mroshaw
    Member
    Posted 4 years ago #

    Awesome Cordobo and alchymyth!

    Question answered and solution applied - thanks to you both! :)

Topic Closed

This topic has been closed to new replies.

About this Topic