History: How to change the side column widths

• «
• »

            Possibly in the future there will be an admin interface for changing the side column widths in the main page layout, but for now there are basically two ways to change the width of the one of the side columns.

# use an existing layout template file and redefine the grid classes related to the columns
# copy and modify an existing layout template file and change the grid div classes related to the column

(The descriptions here are for changing the width of the __right__ side column from 2/12 to 3/12 of the page width. Later there will be examples for other column width changes.)

The Bootstrap grid uses column width classes, like col-md-2, and positioning "push" and "pull" classes. The first specify the column width (expressed as a percentage of the container width, in equivalents of twelfths), and the push and pull classes move the column's display position relative to the other columns. The center column is first in the page source, followed by the side columns, so push/pull put the columns in the correct positions. (Bootstrap has a "mobile first" design approach, which means content columns display in a mobile device in the order they are in the page code, and secondarily have to have their positions adjusted for larger displays. The "m" in the grid classes means the specification is  for medium size displays and larger; in small displays, all the grid divs/columns are 100% wide.)

For more information, see [http://www.helloerik.com/the-subtle-magic-behind-why-the-bootstrap-3-grid-works].

!!! Change the widths by adding CSS rules
This method is probably the easier one.

To use CSS to redefine the column widths, make a new CSS  rule that widens the current

-+#col3.col-md-2 { width: 16.66666667%; }+- to -+width: 25%;+- (the width of a col-md-3 div - using the id as well is needed so other instances of the class aren't affected, such as in wiki layouts or module zones) and narrowing the current

-+#col1.col-md-8.col-md-push-2.col1 { width: 66.66666667%; }+- to -+width: 58.33333333%;+- (the width of a col-md-7 div).

(You don't need to change the col-md-push-2 value because this is what pushes the center column away from the left margin, which isn't involved in the right column changes.)

Since the center column becomes narrower, the left column needs to be pulled less (the left column is pulled across the center column to be positioned at the left side). So add CSS to change:

-+#col2.col-md-2.col-md-pull-8 { right: 66.66666667%; }+- to -+right: 58.33333333%+- (the distance across a col-md-7 div).

These CSS rules don't replace anything in the stylesheets. They are just added to the stylesheet, or put in a custom.css file in themes/, or in the custom CSS of the Look & Feel admin page.

Summing up, to change a 2-8-2 layout to a 2-7-3 layout, these CSS rules can be added at the site:

{CODE()}
#col3.col-md-2 { width: 25%; } /* widen the right column */
#col1.col-md-8.col-md-push-2.col1 { width: 58.33333333%; } /* reduce the width of the center column */
#col2.col-md-2.col-md-pull-8 { right: 58.33333333%; } /* reduce the distance the left column is "pulled" to transverse the center column */
{CODE}

!!! Change column widths by copying and modifying a layout template file
About this method, it is a matter of finding and changing all instances of
-+id="col2" class="col2 col-md-2"+- to
-+id="col2" class="col2 col-md-3"+- and changing
-+id="col1" class="col-md-8 col-md-push-2"+- to
-+id="col1" class="col-md-7 col-md-push-2+-" and changing
 -+id="col2" class="col-md-2 col-md-pull-8"+- to
-+id="col2" class="col-md-2 col-md-pull-7"+-

In this method, no CSS changes are needed.

There is repetition in the layout template file because there is code for all cases - center column only, right + center, center + left, all 3 columns - and all need the class name adjustments.