Hi Jeff,

I wanted to change the colums width for my subtheme but now I'm totally lost.
My plan is to have a fixed layout with 856px and one fixed right sidebar with 200px. So I decided to Genesis 2c as a base layout.

In page .css I changed the following:

#container {
  width: 856px;     /* Width for IE6 */
}
body > #container {
  width: 856px;      /* Width for all other browsers */
  max-width: 856px; /* set a maximum width */
  min-width: 856px; /* set a minimum width */

Now I would have to add and change the following:

#genesis-2c .two-sidebars .content-inner{margin-right:520px;}
#genesis-2c .sidebar-left .content-inner{margin-right:260px;}
#genesis-2c .sidebar-right .content-inner{margin-right:260px;}
#genesis-2c #sidebar-left{width:240px;margin-left:-500px;}
#genesis-2c #sidebar-right{width:240px;margin-left:-240px;}
#genesis-2c .sidebar-left #sidebar-left{width:240px;margin-left:-240px;}

And this is my problem ... I don't know exactly what modifications would be correct ...
Could you help me out or point me to the right direction?

Thanks in advance,

Andreas

Comments

Jeff Burnz’s picture

Jeff Burnz commented

No problem, paste the modified layout into your subthemes page.css file. I added some comments to explain what each line line does.

/* The first 3 lines of the layout control the margins for the main content column (.content-inner) */

/* both sidebar widths + the width of the gutter between each column */
#genesis-2c .two-sidebars .content-inner{margin-right:440px;}

/* width of the left sidebar + right gutter */
#genesis-2c .sidebar-left .content-inner{margin-right:220px;}

/* width of the right sidebar + right gutter */
#genesis-2c .sidebar-right .content-inner{margin-right:220px;}


/* These lines set the width of the sidebars and position them */

/* position the left sidebar when both sidebars are active */
#genesis-2c #sidebar-left{width:200px;margin-left:-420px;}

/* position the right sidebar */
#genesis-2c #sidebar-right{width:200px;margin-left:-200px;}

/*  override the position of the left sidebar when the right sidebar is in-active */
#genesis-2c .sidebar-left #sidebar-left{width:200px;margin-left:-200px;}

You have sparked an idea actually, I'm thinking I could build a form/widgety thing on my website so you could just select your required layout, enter the values for the sidebar widths and then it generates the layout for you. Cool.

Jeff Burnz’s picture

Jeff Burnz commented

This has been added to the Genesis documentation on modifying the layout:

http://drupal.org/node/439670#modify-layout

culfin’s picture

culfin commented

This works like a charm! ... thank you so much for your support. :-)

Jeff Burnz’s picture

Jeff Burnz commented
Status: Active » Fixed

Status: Fixed » Closed (fixed)

Automatically closed -- issue fixed for 2 weeks with no activity.

ArgentOfChange’s picture

ArgentOfChange commented

I'd also suggest adding #genesis-2c #main-content somewhere, with the same styles as #genesis-2c .two-sidebars .content-inner for the admin pages.

Jeff Burnz’s picture

Jeff Burnz commented

@ArgentOfChange (and my fellow Kiwi), what would be purpose of adding this class, not sure i follow your reasoning.

ArgentOfChange’s picture

ArgentOfChange commented

Ugh, how embarassing - my bad!

For some reason when I first applied the styles #main-content would overlap the sidebars. But that didn't happen once I set a different value for the minimum and maximum width for #container.