Bold News Theme – column/sidebar width

  • barbadosunderground2 · Member ·

    I am using two columns to display content. I want to reduce the sidebar by about 20% and split it between the two columns 10%:10%.

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

  • siobhyb · Member ·

    Hi David!

    I can see that you’ve added a bit of custom CSS to your site before and it seems like you have a fairly good knowledge of how things work. :)

    The CSS that targets your sidebar’s width is currently as follows:

    #sidebar {
  width: 300px;
}

    The CSS that targets the two columns on your page is currently here: 

    #main.magazine .post {
  width: 43%;
}

    You can experiment and change the values for the widths given to create the look you want on your site.

    Let me know how that goes or if you have any extra questions.

  • barbadosunderground2 · Member ·

    Thanks!
    To confirm. the content column cannot be sized individually?

  • siobhyb · Member ·

    Hi David.

    The two columns on your page can be sized individually too, if you want them both to be different in width.

    You can change the width of the left-hand column with the following snippet:

    #main.magazine .post.category-politics {
width: 48%;
}

    The following will target the column on the right-hand:

    #main.magazine .post.category-tourism {
width: 48%;
}

    Please note that the above snippets are dependant on the categories associated with the posts in each column. If these change then you’ll need to adjust the CSS.

    There may also be some things that need resizing within the columns while you’re experimenting with the widths. Let me know if anything comes up. :)

  • barbadosunderground2 · Member ·

    Thanks a lot; so far so good. If I reduce the width of the sidebar and compensate with increasing the width of the content space (magazine) – how do I increase main magazine width currently consist of two columns.

  • siobhyb · Member ·

    Ah, so the main width of your page can be changed with the following snippet:

    #main {
  width: 610px;
}

    Hope that helps! :) By the way, you might be interested in a new CSS resource that we recently setup:

    https://cssworkshop.wordpress.com

    It offers some good guidance in the basics of CSS and teaches you how you can use your browser’s built-in tools to find your theme’s CSS.

  • barbadosunderground2 · Member ·

    thanks!
    I am good now!

  • siobhyb · Member ·

    You’re more than welcome, David! :)

  • The topic ‘Bold News Theme – column/sidebar width’ is closed to new replies.