Need help? Check out our Support site, then


WordPress.com Forums » CSS Customization

Reddle how to change content width

  1. katerinastav
    Member

    Hi everyone, I'm very new to this so bear with me please if I'm asking anything stupid.

    I'm using the Reddle template and the way it came I thought the main content was too small and the widget/sidebar area on the right was too wide, so I need to change the proportions a little bit. So far I was able to decrease the widget area by adding this in CSS:

    #main .widget-area {
    width: 15%!important;
    }

    But I also need to increase the main content width so that my pictures come up bigger and all that free space between them and the widgets is filled. Does anyone know how to do that?

    Thank you!

    The blog I need help with is stopblendingin.wordpress.com.

  2. siobhyb
    Member

    Hi,

    I've just looked at your site and noticed that you are now using the Bueno theme. Have you decided against using Reddle now? Let me know if you still need help.

  3. katerinastav
    Member

    apologies, I changed my blog name. I clearly did not think of this. the new link is:

    http://fashionninjaturtles.wordpress.com/

  4. katerinastav
    Member

    yes, I still need help, thanks for taking a look!

  5. designsimply
    Happiness Engineer

    Here is an example showing how to make the main content area bigger and the widget area smaller in the Bueno theme. I opted to widen the main container plus the content area both by 200 pixels in this example, and then I also made the main content area 100 pixels wider and the widget area 100 pixels smaller.

    .col-full {
	width: 1140px;
}
#main {
	width: 920px;
}
#sidebar {
	width: 200px;
}
#pagenav {
	min-width: auto;
}

    You can experiment with those numbers until you find the widths that work best for you.

    If you adjust the main content area width, you should also update the limit width setting on the Appearance → Custom Design → CSS page to match the final content width. For example, if you set #main to 920px, then you should set the content width to be 800 (because of the padding around post content).

    Note that this example doesn't take header images into account. If you add a header image, you will need to adjust that using CSS as well.

  6. designsimply
    Happiness Engineer

    Oh, heh, I mixed up the blogs and posted about Bueno. One sec…

  7. designsimply
    Happiness Engineer

    To change the width of the main content area in the Reddle theme, adjust the margins for the "#content" element. Here is an example you can add this to your Appearance → Custom Design → CSS editor to illustrate:

    .secondary #content {
	margin: 0 31% 0 7%;
}
footer .permalink,
.image-attachment #content footer .permalink {
	margin-left: 58px;
}

    You should also adjust the content width setting in your Appearance → Custom Design → CSS page to a value that matches the new width of the content area (it is 692 for the example above).

  8. siobhyb
    Member

    Hi. Sorry, it took me a while to find a solution to this - a lot of the elements on the page have been positioned using margins in the CSS, the widths of the columns also seem to be dependent on the margins.

    To change the width of the main content area, you can add the following to your CSS:

    #primary #content {
margin: 0 24.25% 0 14.464286%;
}

    The second % value controls the space between the main content area and the sidebar widget, and the fourth % value controls the space between the main content area and the left hand side of the page.

    You'll notice the circular date will move about as you change the above values. To readjust it so it is in the right position you can add the following code and adjust the value:

    #primary .permalink {
left: -14%;
}

    Sorry this fix is a bit fiddly, it seems like the only solution with the way the theme is coded. Hope it made sense! Let me know if it needs clarification.

  9. siobhyb
    Member

    Oh. Sorry DesignSimply! Never saw your posts! Your solutions seem much better and clearer. Please feel free to ignore mine Projectrunwayy! :)

  10. katerinastav
    Member

    Thank you both!! I will try it tonight and let you know how it works. :)

  11. designsimply
    Happiness Engineer

    @siobhyb, no apology necessary! Thanks so much for helping!!

  12. katerinastav
    Member

    Hi designsimply, I tried your fix and it does increase content space but the pictures remain the same size. Changing the content width setting does not seem to have any effect. Am I doing something wrong?

    thanks for all your help!!

  13. katerinastav
    Member

    Nevermind, I realized I wasn't uploading the pictures in original size. Thanks for your help!!

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags