The quick, easy and right way to do this would be to override the max-width value for the #container id selector, in a child theme. Otherwise, when automattic updates coraline, you’ll lose your changes.
That said, Coraline has 5 different layouts. I’m going to assume you’re going to stick with the layout you’ve got. In that case, you’ll want to write this line in your child theme’s new style.css:
.two-column #container {
max-width: 960px;
}
The above would make the overall width to 960px. You’ll want to use whatever value you’re shooting for.
After that, changing the individual column widths are much less straightforward. The column widths are sized on percentages of the parent container. About 60%/30% with a 10% gutter. If you need different proportions, I can only recommended:
Learning the box model.
get out a calculator.
make your changes in your new child theme.
Test it out in firebug.
You’ll need to adjust not only the columns, but also the margins and/or padding to make it work.
Josh, this is great info, thanks. I added your code using firebug and got the result I was looking for. I am now learning about child themes and am ready to begin creating one. I’ll work on the column widths once I get the child theme created.
Questions: I understand firebug does not let you save a new file with the changes you have created, right? In this case, when creating a child theme, I will want to use an editor to make changes to the file, is there one you recommend? Thanks
Correct, Firebug is for testing and experimenting.
I use Textmate on the Mac. Notepad++ is popular on Windows. You’ll also need an FTP program to upload your new files, I like Transmit for the Mac and Filezilla for Windows.
I’ve got it working successfully. I’ll begin playing with the column width percentages now. Thanks for your help. Being new to this, I really appreciate it.
I worked with the code changing percentages and have only been successful in changing the width of the main content column, not the sidebar column. I feel now I am just randomly changing this without making any progress. I’ve changed this line which was successful:
.two-column #content {
width: 64.99%;
}
I’ve also change many others including the two below without any result:
.two-column #primary,
.two-column #secondary {
float: right;
width: 30.4%;
}
.content-sidebar #content {
margin: 0 35.1% 0 0;
}
My goal is pretty simple, increase the width of the right sidebar while decreasing the size of the main content column. I’ve successfully changed the main content column size but am unable to do the same of the right sidebar. Any additional suggestions are appreciated.
I take back my previous post. I think I made a mistake, I have made some progress. Still working.
No Luck. I was able to change the right column width but only make it smaller than 30% using:
.two-column #secondary {
float: right;
width: 30.4%;
}
Any percentage higher than 30% casing the right column to to drop down and not start until after the the end of the left column, even if I make the left column very small. This happens despite changing every margin or padding percentage in the style.css. Any suggestions are appreciated. Thanks
I switched to the 3 column option in Coraline and was successful in playing with the percentages to change the width of the columns. Not sure why I could not do it in 2 column but 3 column is a better format for my blog and I now have the result I want. I changed these values:
.three-column #container {
max-width: 990px;
}
#main-sidebars {
max-width: 450px;
width: 75.5%;
}
.three-column #content {
width: 49.5%;
}
.three-column #primary {
width: 58.15%;
}
.three-column #secondary {
width: 31.89%;
}
Thanks
