How to change the width of the left or right column before Warp

This tutorial shows you, how to change the width of the left or right column in a YOOtheme template before we implemented the Warp framework in all templates since July 2009.

Changing the width of the left or right column can be done in a few steps.

Left column

To change the width of the left column, open layout.css and modify the width of div#left and the margin of div#main. The difference of 10px is the space between the left column and the main column.

For example:

div#left {
	width: 200px;
}

.left div#main {
	margin: 0px 0px 0px 210px;
}

.right div#main {
	margin: 0px 210px 0px 0px;
}

Right column

For the right column, open layout.css and modify the width of div#right and the margin of div#content. The difference of 10px is the space between the right column and the main column.

For example:

div#right {
	width: 180px;
}

.showright div#content {
	margin: 0px 190px 0px 0px;
}

Documentation on Github

Help us out! If you are feeling that our documentation has errors or can be improved, fork it at Github and send us a pull request. Any contribution is much appreciated. Thank you!