Move central text to the left increase sidebar width

  • solidgoldcreativity · Member ·

    Hello,

    I’ve just purchased React. I want to move the central body text column slightly to the left + increase the sidebar width.

    Can you advise?

    Thank you
    SGC http://www.solidgoldcreativity.com

    The blog I need help with is: (visible only to logged in users)

  • andyadamscp · Member ·

    Hey there,

    Before you make changes, I have to warn you that React’s widths are designed semi-particularly, so you might have to make a lot of tweaks to get it just right.

    If you’re OK with that and you have the Custom CSS upgrade, you can begin by adding the following styles:

    #sidebar {
  width: 19.583333%;
}
#content.blog {
  width: 73.125%;
}

    That’s a start – let me know how it looks, and we can tweak from there!

  • solidgoldcreativity · Member ·

    Hi Andy,

    Yep, I got it about maybe needing tweaks. The changes look OK, but now I would like to slightly decrease the padding between column 1 and column 2 so I have a little more width for the post title.

    Can it be done?

    Thanks,
    SGC

  • andyadamscp · Member ·

    Hey SGC,

    I think so! Try this:

    /* Increase width of content area */
#content.blog {
  width: 77.125%;
}

/* Decrease left margin on main content */
#content.blog .entry.entry-post {
  width: 63.333333%;
  margin-left: 36.666667%;
}

/* Increase the width of the post title */
#content.blog .post-header {
  width: 28.333333%;
}

    Try taking those values and tweaking a bit – the difference is subtle, but you’re the best judge of a good-looking site! Let me know how it goes!

  • solidgoldcreativity · Member ·

    Hi Andy,

    That’s much better. Thank you.

    One other question, just for reference … the changes I’m making to the CSS are showing up in Firefox and not in IE8 (in IE8 the page templates don’t apply either). Is this what you’d expect?

    Thanks.
    SGC

  • scottrrollo · Member ·

    Hi there!

    I’m sorry to hear you are seeing problems in IE8. The React theme, and the changes you made should be compatible with IE8. Would it be possible to post a link and/or screenshot of the issue you are seeing?

    Thanks!

  • solidgoldcreativity · Member ·

    Hi Scott,

    OK, here’s a Word file which shows two screen shots:

    (1) the home page: the CSS changes I made (eg, increasing sidebar width) do not show up

    (2) a secondary page: the sidebar is not visible, even though it is set to appear and does in fact appear in Firefox.

    Hope you can access this file. Cheers and thanks, SGC

    http://solidgoldcreativity.files.wordpress.com/2011/11/screendumps.doc

  • andyadamscp · Member ·

    Hey there,

    You may have uncovered a bug with the theme – thank you for pointing this out!

    In the meantime, you can try adding this to your stylesheet:

    #with-sidebar { width: 80%; }

    Try that to start, and we’ll go from there.

  • The topic ‘Move central text to the left increase sidebar width’ is closed to new replies.