Download & Extend

Make sidebars capable of being fixed width

Project:MAYO
Version:7.x-1.x-dev
Component:Code
Category:feature request
Priority:normal
Assigned:Unassigned
Status:active

Issue Summary

I've already partially done this so I am supplying my code here. The limitation here is that it will make the content area a fixed width as well. That's because this was a "quick and dirty" fix in just an hour or so.

What I would really like to do is either have the layout changed significantly so that it can work with fixed sides and fluid content just with a change in HTML and CSS, or, add some JavaScript to the browser resize event so that it recalculates the width of the content area each time the browser is resized. However, my JavaScript is a little rusty right now and I think such a change to the CSS/HTML would a fundamental change to the theme which I can't really undertake right now.

However, here's a starting point if you are interested (I can't give you a diff/patch because this is from a copy of the theme with a whole bunch of other changes so it would be a mess that way). This is from about line 138 in the page.tpl.php file:

  $sb_layout_style = theme_get_setting('sidebar_layout_style');
  $sb_first_width = theme_get_setting('sidebar_first_width');
  $sb_second_width = theme_get_setting('sidebar_second_width');

  if ((!empty($sb_first_width) && stripos($sb_first_width, 'px') !== FALSE) ||
      (!empty($sb_second_width) && stripos($sb_second_width, 'px') !== FALSE)) {
    // Fixed width layout

    $sb_first_width = empty($sb_first_width) ?  '250px' : $sb_first_width;
    $sb_second_width = empty($sb_second_width) ?  '250px' : $sb_second_width;

    $content_width = intval(preg_replace('/%|px/i', '', $page_width));
    if ($page['sidebar_first']) {
      $content_width -= intval(preg_replace('/%|px/i', '', $sb_first_width));
    }
    if ($page['sidebar_second']) {
      $content_width -= intval(preg_replace('/%|px/i', '', $sb_second_width));
    }
    $content_width -= intval(preg_replace('/%|px/i', '', $page_margin )) * 2;
    $content_style = 'width: ' . $content_width . 'px;';
  } else {
    // Liquid layout
    $sb_first_width = empty($sb_first_width) ?  '25%' : $sb_first_width;
    $sb_second_width = empty($sb_second_width) ?  '25%' : $sb_second_width;

    $content_width = 100;
    if ($page['sidebar_first']) {
      $content_width -= intval(preg_replace('/%|px/i', '', $sb_first_width));
    }
    if ($page['sidebar_second']) {
      $content_width -= intval(preg_replace('/%|px/i', '', $sb_second_width));
    }
    $content_style = 'width: ' . $content_width . '%;';
  }

  $sb_first_style = 'width: ' . $sb_first_width . ';';
  $sb_second_style = 'width: ' . $sb_second_width . ';';

Comments

#1

Almost forgot, in the theme form sidebar field validation I changed this routine to this (essentially a copy of the page validation routine):

/**
* Validate sidebar width
*/
function mayo_sidebar_width_validate($element, &$form_state) {
  if (!empty($element['#value'])) {
    $width = $element['#value'];

    // check if it is liquid (%) or fixed width (px)
    if(preg_match("/(\d+)\s*%/", $width, $match)) {
      $num = intval($match[0]);
      $wMin = 15;
      $wMax = 40;
      if($wMin <= $num && $num <= $wMax) {
        return;
      }
      else {
        form_error($element, t('The width for the liquid width sidebar must be a value between ' . $wMin  . '% and ' . $wMax . '%.'));
      }
    }
    else if(preg_match("/(\d+)\s*px/", $width, $match)) {
      $num = intval($match[0]);
      $wMin = 1;
      $wMax = 500;
      if($wMin <= $num && $num < $wMax) {
        return;
      }
      else {
        form_error($element, t('The width for the fixed width layout must be a value between  ' . $wMin  . 'px and ' . $wMax . 'px.'));
      }
    }
  }
}

#2

Then all as you need to do is change the help text on the form fields to reflect the new behavior and you are done (at least in a quick form, could do with refinements for sure).

#3

I love Mayo!!! If we're voting, then count me it for fixed sidebar with variable width - it would make this theme more awesome for sure.

#4

As it says on the project page "Maintenance fixes only". I wish there was more time available for new features. Happily I see Mayo is now number 20 out of 249 in downloads for 7.x with 4554 sites using it. We'll leave this open and see if more people jump in and ask for it.

#5

I think that this feature is "must have". Before this theme I used Pixture Reloaded, but this theme more flexible. But on Pixture I had main content (with flexible width) and Sidebar with banners/iframes (with fixed width)

#6

+1

Would be great to see this feature come to life (although the project page says "Maintenance fixes only")

nobody click here