YOOtheme Pro is here! The best WordPress and Joomla theme. Learn more

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!