WordPress.org

Forums

Coraline sidebar width change - how to? (6 posts)

  1. jukooz
    Member
    Posted 4 years ago #

    Hello,

    I customizing Coraline theme (making custom child theme). Can someone tell which parameters in style.css should I change to decrease sidebar width (and increase main content width) when using Sidebar-Content layout (one sidebar on the left)?

    I'm little bit afraid to do this blindly.

    Thanks in advice.
    Love wordpress and this forum.

  2. Tara
    Volunteer Moderator
    Posted 4 years ago #

    Site URL if available?

  3. jukooz
    Member
    Posted 4 years ago #

    I can't give URL of my site, sorry. But You can check it here. It's reversed - content left, sidebar right, but if You can tell how it could be done there, which values should be changed, I'll easily figure out how to do the same with my theme.

    You can download theme from here.

    Thanks in advice,
    jukooz

  4. esmi
    Forum Moderator
    Posted 4 years ago #

    In order to help, we really need to see the theme in use on your site with your content.

  5. jukooz
    Member
    Posted 4 years ago #

    I can't give You that, really. But if You could tell me how to decrease sidebar width (and increase content width proportionally) on this site it would really tell me everything I need. It's the same theme with default settings (same settings as if it was just installed from here).

    You are very helpful to me esmi. Thank You.

    jukooz

  6. jukooz
    Member
    Posted 4 years ago #

    Messing blindly with CSS I found that these parts of code are responsible for content and sidebar widths:

    /* 2-column layouts */
    .two-column #container {
    	max-width: 770px;
    }
    .two-column #content {
    	width: 64.99%;
    }
    .two-column #primary,
    .two-column #secondary {
    	float: right;
    	width: 30.4%;
    }
    /* Sidebar-Content layouts */
    .sidebar-content #content-container {
    	float: right;
    	margin: 0 0 0 -30.4%;
    }
    .sidebar-content #content {
    	margin: 0 0 0 35.1%;
    }
    .sidebar-content #primary,
    .sidebar-content #secondary {
    	float: left;
    }
    .sidebar-content #secondary {
    	clear: left;
    }

    I was messing with it and writing what I thought certain values were responsible for in the same time. And I finally got where I wanted to. I changed 3 values.

    .two-column #content {
    	width: 74.99%;
    .two-column #secondary {
    	float: right;
    	width: 20.4%;
    .sidebar-content #content {
    	margin: 0 0 0 25.1%;

    Is it enough. It looks good ok for me, but what for people with different screen resolution?

    This CSS thing seems to be quite illogical to me. Have to learn it.

Topic Closed

This topic has been closed to new replies.

About this Topic