liquid/fluid layout with min max width

Are you asking about a flexible width layout like the one in Garland or a fully fluid theme?

A flexible width theme can be created by adding something like the following lines to theme.css in your subtheme.

/* Set a flexible width with max/min widths.*/
body > #container {
  width: 100%;
  max-width: 1260px;
  min-width: 975px;
}

This overrides the page width setting on the theme settings page.

A fully fluid theme is made the same way except you wouldn't have pixel width constraints and you have more widths to override. (Sidebars for example.)

Hi, well theres more than a couple of ways of doing this, so here is three ways you can do this - take your pick...

1. No hacking core, fluid width, liquid center column, fixed width sidebars (normal theme settings for sidebars apply)
If you don't want to hack the core theme then you can override the width setting in your subthemes preprocess page function:

// Override the themes width, in this case we are setting it to 85%
function adaptivetheme_subtheme_preprocess_page(&$vars, $hook) {
  if (theme_get_setting('layout_enable_settings') == 'on') {
    $vars['at_layout_width'] = '#container{width:85%;}';
    $vars['layout_settings'] = '<style type="text/css">'. $vars['at_layout_width'] . $vars['at_layout'] .'</style>';
  }
}

2. Hacking core, fluid width, liquid center column, fixed width sidebars (normal theme settings for sidebars apply)
If you don't give a rats ass about hacking the core theme then you can add one line of code to the main theme-settings.php file, down on line 446 add an option to the options array:

  '100%' => t('100% Fluid'),

Then you can select this in the normal theme settings for your subtheme.

3. No hacking core, fluid width, liquid center column, fluid width sidebars (layout theme settings disabled)
Cybergarou is correct that to make AT have fluid width sidebars (the above methods would retain the px width sidebars as per the theme settings, which I personally think is the better option) would require you to fully override the whole layout, which isnt as hard as it sounds, in fact there are plenty of examples in Genesis which uses the same methods but different selectors - so some thought is required as to how to apply them. You would also want to disable the Layout Theme Settings by changing the defaults in your subthemes info file:

  // NOTE, only disable these if you are going to write your own layout CSS or rely on AT's internal layout CSS.
  settings[layout_enable_settings]            = 'off'
  settings[layout_enable_width]               = 'off'
  settings[layout_enable_sidebars]            = 'off'
  settings[layout_enable_method]              = 'off'

Once you have them disabled (remember to clear the theme registry and then click "Reset to defaults" to reset the theme settings), you can add your hard coded layout to theme.css,

// this is an example of a fluid width layout you could use
 #container {width: 100%;}
.two-sidebars .content-inner {margin: 0 25.25%;}
.sidebar-first .content-inner {margin-left: 25.25%;}
.sidebar-last .content-inner {margin-right: 25.25%;}
#sidebar-first {width: 24.25%; margin-left: -100%;}
#sidebar-last {width: 24.25%; margin-left: -24.25%;}

Just remember this at all times - the Skinr block width classes are designed to work with a fixed with layout and fixed width sidebars (based on 960grids) which is what the theme setting widths adhere to, so therefor they wont be useful if your sidebars and/or regions are fluid, your site could break, or at least look weird.

As an alternative you can use Panels and Gpanels (the fluid ones), or keep the px width sidebars used in the first two methods outlined and only use Skinr widths on blocks in sidebars.

I think I'll commit a version to DEV that includes the 100% width option added to the core theme - since AT's layout method is extremely "adaptable" it seems a shame not to have it in the core theme. Rocking man!

Are there any plans on having fluid skinr settings? The Fusion theme sets skinr widths as units and then exposes a theme setting on whether the theme is fixed or fluid.

I am going to implement this - since we use a grid class this is relatively easy to do. Sorry this has taken so long to get to, Drupal 7 core development has taken all my time this year :)

Hey Jeff, AT is built using a Grid structure like http://en.wikipedia.org/wiki/Grid_(page_layout)

So, we should be able consistently implement 960 style sites using AT, right?

Can we set the default width of the page (e.g. "960px") and then work in percentages?

Btw, thanks again for all your work on D7. We're pushing to get AT up for both our new D7 theme & also as a default for future D7 development.

Not really like that grid you reference, there is no typographic grid, only a layout grid - as in a horizontal grid of columns, no vertical typographic grid (like newspapers have).

You can design to 960 templates, but AT does not include all the 12 column classes, only some of them, only the most common ones that integrate strongly and cleanly with the 16 column grid classes (it has all the 16 col grids), for example I include "320" (4 col 80px) because its impossible to divide a 960px page into 3 even columns without that width.

You can work in percentages, all the Gpanels that ship with AT are in percentages and are designed to work at any width. If you download Pixture Reloaded theme for D7 (AT7 subtheme) you will see these working.

Ping me if you want any help setting things up or have questions or feedback, one thing I might do in the next release (there is one coming soon, I need to fix some small bugs), is hard code the ARIA Roles into the markup, thinking about it only, it does mean I might have to add even more templates so just thinking about it :)

For a sub-theme i create i want to set min- and max-width in the theme configuration.
I don't want to hack the core and tried to use your first suggestion in answer #2, but I have no luck.
I'm on D7, so this is not the right thread, but it seems to be the same as in D6.

Perhaps you have an idea where I'm wrong. This is what I did:

In theme-settings I added

    if (theme_get_setting('layout_enable_width') == 'on') {
      $form['layout']['page_layout']['layout_width'] = array(
        '#type' => 'select',
        '#title' => t('Page width'),
        '#prefix' => '<div class="page-width">',
        '#suffix' => '</div>',
        '#default_value' => theme_get_setting('layout_width'),
        '#options' => array(
          '600px' => t('600px'),
          '660px' => t('660px'),
          '720px' => t('720px'),
          '780px' => t('780px'),
          '840px' => t('840px'),
          '900px' => t('900px'),
          '960px' => t('960px'),
          '1020px' => t('1020px'),
          '1080px' => t('1080px'),
          '1140px' => t('1140px'),
          '1200px' => t('1200px'),
          '1260px' => t('1260px'),
          '1320px' => t('1320px'),
          '1380px' => t('1380px'),
          '1440px' => t('1440px'),
          '1500px' => t('1500px'),
          '80%'  => t('80%'),
          '85%'  => t('85%'),
          '90%'  => t('90%'),
          '95%'  => t('95%'),
          '100%' => t('100%'),
        ),  
        //'#attributes' => array('class' => 'field-layout-width'),
     );  
      //min-width settings
      $form['layout']['page_layout']['layout_min_width'] = array(
        '#type' => 'select',
        '#title' => t('Page min width'),
        '#prefix' => '<div class="page-width">',
        '#suffix' => '</div>',
        '#default_value' => theme_get_setting('layout_min_width'),
        '#options' => array(
          '600px' => t('600px'),
          '660px' => t('660px'),
          '720px' => t('720px'),
          '780px' => t('780px'),
          '840px' => t('840px'),
          '900px' => t('900px'),
          '960px' => t('960px'),
        ),  
        //'#attributes' => array('class' => 'field-layout-width'),
      );  
      // max-width settings
      $form['layout']['page_layout']['layout_max_width'] = array(
        '#type' => 'select',
        '#title' => t('Page max width'),
        '#prefix' => '<div class="page-width">',
        '#suffix' => '</div>',
        '#default_value' => theme_get_setting('layout_min_width'),
        '#options' => array(
          '1080px' => t('1080px'),
          '1140px' => t('1140px'),
          '1200px' => t('1200px'),
          '1260px' => t('1260px'),
          '1320px' => t('1320px'),
          '1380px' => t('1380px'),
          '1440px' => t('1440px'),
          '1500px' => t('1500px'),
        ),
        //'#attributes' => array('class' => 'field-layout-width'),
      );

    } // endif width

This gives me the possibility to chose a min- and a max-width in my theme settings.

In my template.php I added

function at_designum_preprocess_page(&$vars, $hook) {
   if (theme_get_setting('layout_enable_settings') == 'on') {
      $vars['at_layout_width'] = 'div.container{width:'. theme_get_setting('layout_width') . ';' . 'min-width:' . theme_get_setting('layout_min_width') . ';' . 'max-width:' . theme_get_setting('layout_max_width') . ' ;}';

//   drupal_add_css($vars['layout'], array('group' => CSS_THEME, 'type' => 'inline'));
//      $vars['at_layout_width'] = '#container{width:85%;}';
//      $vars['layout_settings'] = '<style type="text/css">'. $vars['at_layout_width'] . $vars['at_layout'] .'</style>';
   }
}

But my min-width and max-width don't show up in my markup.
Any suggestions?

Rgds,
noble

You'd need to be printing $vars['at_layout_width'] in the template (html.tpl.php head), and putting it inside style tags also, I think this is actually a pretty good idea, I'll think about it some more tomorrow and come back with a patch that makes this work properly.

Hey Jeff,
thanks for your quick reply.

I use "Pixure Reloaded" as draft for my theme and afaics it has no own html.tpl.php. In Pixture Reloaded it is possible to set a fixed or a fluid theme width. This gave me the idea to add min- and max-width. But this only makes sense when chosing a fluid width setting. I wanted to solve this later, but perhaps you can get a solution for this, too.

A second idea I think about is if its possible to get the sidebar width in % too.
In template.process.inc I found that you work with margins to push the content and the sidebar to it's right place.
Is it possible to do this with %?

Thanks in advance
noble

But this only makes sense when chosing a fluid width setting

In this case we want to use Drupal 7's form_state to expose new options only when certain options are selected, such as a fluid width. You can see an example of form_state used on the breadcrumb settings.

I think min/max width only makes sense for the 100% width setting, so we can use this to trigger form_state and expose a new min/max width setting.

I could be possible to do the sidebars in fluid width, in fact the only reason they are not included is to simplify the UI - I have to be mindful to not add options just because we can, I try to think what the most likely use cases will be (based on my experience and user feedback), I'm not sure that many users want fluid width sidebars which can make theme and site development more tricky, such as when displaying image banners or other page elements that are fixed width.

OK, I have created a patch that adds min-max width for the 7.x branch.

What this does:

If you select 100% width for Page width a checkbox will appear that asks if you want additionally set min and max widths, if you check that box two more select list will appear, one for min width and one for max width. The layout logic has been changed to account for these new settings. I have not patched Pixture Reloaded at this stage, all the work was done with AT Subtheme and the core theme.

Sounds good, but I can't download the patch.
When clicking on the attachment I get redirected to the front page.

The # sign wasn't stripped from the patch when uploading the file.

It's an annoying bug I've run into before.

Well thats not annoying is it...

I'm wondering if it is possible to use the option 1 (liquid center column, fixed width sidebars) mentioned in Jeff's #2 comment also with Drupal 6? Many thanks Jeff for creating such an amazing theme. And sorry, if I have asked this question in wrong place.

Doesn't look like this patch applies cleanly to latest dev or 7.x-1.2, will it be included in a later version?

Lets move forward, not back, well and truly fixed in both 7.x-2.x and 7.x-3.x by default.