WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] Coraline - change column width and overall theme width (11 posts)

  1. sing2zing
    Member
    Posted 3 years ago #

    Which lines/values do I change in style.css to change the column width and the overall theme width in the Coralline theme?

    I found another topic which gave me a place to start but it did not completely work for me. I think I am missing something.

    http://www.stoopphilly.com

    Thanks

  2. Josh
    Member
    Posted 3 years ago #

    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.

  3. sing2zing
    Member
    Posted 3 years ago #

    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

  4. Josh
    Member
    Posted 3 years ago #

    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.

  5. sing2zing
    Member
    Posted 3 years ago #

    Thanks for the info.

  6. sing2zing
    Member
    Posted 3 years ago #

    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.

  7. Josh
    Member
    Posted 3 years ago #

    You're welcome.

  8. sing2zing
    Member
    Posted 3 years ago #

    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.

  9. sing2zing
    Member
    Posted 3 years ago #

    I take back my previous post. I think I made a mistake, I have made some progress. Still working.

  10. sing2zing
    Member
    Posted 3 years ago #

    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

  11. sing2zing
    Member
    Posted 3 years ago #

    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

Topic Closed

This topic has been closed to new replies.

About this Topic