WordPress.org

Ready to get started?Download WordPress

Forums

Spun
[resolved] Change/align content area (first page & posts) (14 posts)

  1. Carla Maio
    Member
    Posted 1 year ago #

    Hello!

    I´m using the spun theme on my site and I'm trying to do some small changes like using only 3 circles per row ,etc. For that I have read the topics that already have being posted here but now I have a problem with which I have struggled for some time now :( Can anyone help me?

    1. I have changed my width page for 700px but now is not centered :(

    2. I want my posts to assumed the same width, but the text inside does not fit that.

    This is my site http://www.cmdesign.com.pt and this is the code that I tried to use:

    #page {
    background: #fff;
    margin: 0 auto;
    padding: 0 50px;
    width: 700px;
    }

    .single #primary,
    .page #primary,
    .search-no-results #primary,
    .error404 #primary {
    clear: both;
    margin: 0 auto;
    width: 700px;
    }

    #masthead {
    opacity: 1;
    width: 700px;
    }

    #primary .content-area {
    width: 700px;
    }

    Thanks*

  2. Caroline Moore
    Member
    Theme Author

    Posted 1 year ago #

    That's because the circles are floated to the left, into rows. To center them, you'd either need to resize the content column to match their collective width (plus margins and padding), or resize the circles to expand to the new width.

    And this selector:

    .single .hentry,
    .error404 .hentry,
    .page .hentry,
    .search-no-results .no-results

    ... has extra padding applied to it, so you'd need to account for that when setting the width for the post content. Subtract the padding from your desired width to get the content to fit into the space.

  3. Carla Maio
    Member
    Posted 1 year ago #

    Thanks for responding Caroline and congratulations for the great theme.

    I'm sorry but I don't understand.. (I'm kinda beginner on it)

    I've already deleted the selector that you mentioned from my CSS child theme ...(nothing happens).. but you said that I also need to change the padding and margins, in order to resize the content column, right? But how I do that..? How can I find the code in the style.css? And should I let the codes that I already put, like: #main ; #page; #masthead; #primary .content-area ?

    Thanks!

  4. Caroline Moore
    Member
    Theme Author

    Posted 1 year ago #

    You can use a browser addon like Firebug to right-click or Ctrl+click and "Inspect" your site to find the content column and view its properties. Then find the same selector(s) in style.css, copy it to your child theme, and change whatever you want to change.

    You would want to add the selector I posted above to your child theme, then set a new width on it, accounting for the padding around the content, which appears to be 50px on the left and right sides. So whatever new width you want, minus 100px.

    I don't offer CSS customization support, but you can find a number of helpful resources to get you started here. Good luck!

  5. Carla Maio
    Member
    Posted 1 year ago #

    After many attempts I think I could solve this :) Thank You! *

  6. Caroline Moore
    Member
    Theme Author

    Posted 1 year ago #

    Yay! Glad you've figured it out. If you have a code solution to share, others may be interested in doing the same or similar -- feel free to post it here.

  7. Carla Maio
    Member
    Posted 1 year ago #

    Hi! The code that I used (sorry not to have placed before) was that:

    #page {
    margin: 0 auto;
    padding: 0 50px;
    width: 700px;
    }

    #primary.content-area {
    margin: 0 auto;
    padding: 100px 50px;
    width: 700px;
    }

    .single .hentry,
    .error404 .hentry,
    .page .hentry,
    .search-no-results .no-results {
    margin: 0 auto;
    padding: 90px 10px;
    padding-top: -130px;
    margin-top: -130px;
    width: 600px;
    height: auto;
    }

    Actually it was a question of trying to change the padding and see if it works. Worked with me, despite now being with some huge top margins and not be able to change it ... :( ... by the way, suggestions are accepted!

  8. Caroline Moore
    Member
    Theme Author

    Posted 1 year ago #

    Thanks!

    I'll note, padding cannot be negative, only margins. You can remove the padding-top: -130px; value without it affecting the display of the layout.

  9. Carla Maio
    Member
    Posted 1 year ago #

    Ups... :) I didn't know that! Thanks a lot!

    Sorry bordering with that but can you just tell how can i move my circles just up a little? I have tried everything already with no succeed....

  10. Caroline Moore
    Member
    Theme Author

    Posted 1 year ago #

    It looks like you've already figured it out, but you could set a negative top margin on #main, #primary, or any of the content wrappers around the circles.

  11. Carla Maio
    Member
    Posted 1 year ago #

    No I didn't.. I just gave up!.. (because I nedd to move on) And try to had more post so it look different than before.

    But I'll try what you advised me. Thank you once again!

  12. reddbonetv
    Member
    Posted 7 months ago #

    hello sorry to bump this old thread but i tried the code above but it doesn't center and also it makes 2 circles in a row when i want 3, im i doing something wrong or is this code out dated?

  13. WPyogi
    Volunteer Moderator
    Posted 7 months ago #

    @reddbonetv - please instead start your own thread and include a link to your site.

  14. reddbonetv
    Member
    Posted 7 months ago #

    will do sorry bout that.

Topic Closed

This topic has been closed to new replies.

About this Theme

About this Topic

Tags

No tags yet.