History: How to change the side column widths

View page

Source of version: 6 (current)

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

!!!! The files
Rather than editing an existing layout template file, an existing one should be duplicated and modified. Each layout template file has its own directory, so an existing directory should be duplicated. For example, in the ''templates/layouts'' directory are several sub-directories. One of these, for example, is the "basic" layout. It has this file structure:

* basic
** index.php
** layout_edit.php
** layout_view.php

Copy this directory and three files and rename the directory. This name will appear in the Look and Feel Layout Template selector. Now the layout_edit.php doesn't need any changes. The layout_view.php file is the one to be modified. 

!!!! The changes
Find and change all instances of
-+id="col2" class="col2 col-md-2"+- to
-+id="col2" class="col2 col-md-3"+- and change
-+id="col1" class="col-md-8 col-md-push-2"+- to
-+id="col1" class="col-md-7 col-md-push-2+-" and change
 -+id="col2" class="col-md-2 col-md-pull-8"+- to
-+id="col2" class="col-md-2 col-md-pull-7"+-

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 may need the class name adjustments.

In this method, no CSS changes are needed.

Switch Theme

Layout

Latest Changes

No records to display ...more

Subscribe to Tiki Newsletters!

Delivered fresh to your email inbox!

Don't miss major announcements and other big news!

Site Config

Site upgraded to Tiki 23.x
Sat 24 of Jul, 2021 00:30 GMT
Site upgraded to Tiki 20
Wed 29 of May, 2019 07:57 GMT
We are now on Tiki 19.x
Fri 05 of Oct, 2018 10:02 GMT
Shoutbox module removed
Thu 28 of Jun, 2018 07:01 GMT
We are now on Tiki 18.x
Wed 02 of May, 2018 08:46 GMT
Upgraded to Tiki 17.0
Wed 02 of Aug, 2017 08:19 GMT
Upgraded to Tiki 15.0alpha
Tue 08 of Mar, 2016 13:34 GMT
Site updated to Tiki 14 beta
Tue 21 of Apr, 2015 00:01 GMT
Testing Tiki10
Thu 15 of Nov, 2012 23:06 GMT
Configurable header buttons in XtratoVeil layout
Wed 17 of Oct, 2012 14:54 GMT

History: How to change the side column widths

Source of version: 6 (current)

Switch Theme

Layout

Latest Changes

Subscribe to Tiki Newsletters!

Site Config

About Tiki

Support

Community

Documentation

Development

Legal

Tiki Project Sites

Networks

Themes - Tiki Wiki CMS Groupware