History: How to change the side column widths

Source of version: 5

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 [http://www.followthesteps.net/sky-contact-phone-number/|website]: {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.

History

Enable pagination rows per page

HTML diff Side-by-side diff Side-by-side diff by characters Inline diff Inline diff by characters Full side-by-side diff Full side-by-side diff by characters Full inline diff Full inline diff by characters Unified diff Side-by-side view HTML diff Side-by-side diff Advanced

Information	Version
Thu 09 of Jun, 2016 06:50 GMT mariakatosvich	6
Thu 09 of Jun, 2016 06:50 GMT mariakatosvich	5
Thu 14 of Apr, 2016 05:48 GMT chibaguy Minor edits.	4
Thu 14 of Apr, 2016 05:45 GMT chibaguy Typo fixed.	3
Thu 14 of Apr, 2016 05:44 GMT chibaguy More info added.	2
Thu 14 of Apr, 2016 05:32 GMT chibaguy Page created.	1

Select action to perform with checked... Remove OK