How to change post width and add space between posts on Homepage?

  • Hi,
    The theme was journalcrunch and i made some changes.
    On Homepage, the posts were boxes. I changed it to “traditional” looking by editing home.php, style.css, and index.php.
    But I cannot find the way to change the post width and add space between posts on Homepage?
    I added div class=”post” in index.php, added .post{width:640; background:url(images/theme/xxx.png)}, but no use. I think these files are related. Changing one of them was no use.
    I figured out that changing the width of the wrapper can change the width of the whole homepage, but how can i just change the width of post but not the slider at the same time?
    Thank you guys.
    My page: https://chinhiunvun.com

Viewing 7 replies - 1 through 7 (of 7 total)

  • Remember that the only recommended way of making changes to themes is by using a Child Theme.

    Having said that, you can change the content width by adding a property to the #content rule. Like this, say:

    #content {
  width: 80%; /* or whatever you want */
}

    To create the space you want, it looks as though you need to add a rule for the class .postBox, or perhaps .lastBox, or maybe both. Something like:

    .postBox, .lastBox {
  margin: 20px 0; /* or whatever suits you */
}

    If you just want these styles to apply on the home page, you might want to look at using body_class() to get the class .home into the <body> tag so that you could do, for example:

    body.home #content {
  ...
}

    HTH

    PAE

    Thread Starter chinhiunvun

    (@chinhiunvun)

    Hi, Peredur,Thank you. It has some improvements!
    I added:

    #content {
  width: 70%;
}

    but the slider was cut.
    I added:

    .postBox, .lastBox {
  margin: 50px 0;
  width:650px;
}

    It works fine on homepage. Slider ok, post width 650px, space between posts ok.
    But the page has a problem that the comment text was on the upper right. You can see here.

    And now I can’t find a way to fix it. Maybe this is because of previous editing? not the attempt of this time?

    Thread Starter chinhiunvun

    (@chinhiunvun)

    If I add:

    body.home #content {
  ...
}

    The background color of the single posts will become black.
    It is so weird to me. You can see here.

    The background color of single posts should look like the pages.

    Thank you.

    Thread Starter chinhiunvun

    (@chinhiunvun)

    I found that the comment text on the upper right can be fixed by activating Facebook Comment plugin. The “Like” button of Facebook will push the comment text to the right place. But it supposed to be at the right place anyway.

    The black background is because of this rule:

    #mainWrapper {
  background: url("images/bk_main_wrapper.png") repeat-x scroll 0 0 transparent;
}

    A rule for body.home will not do anything unless you assign the home class to the body element on the home page, by using the body_class() function I referred you to. Looking at your site just now, the body element was not assigned the home class.

    Cheers

    PAE

    Thread Starter chinhiunvun

    (@chinhiunvun)

    Thank you for you reply.
    What I have is:

    #mainWrapper {
  background: url("images/bk_main_wrapper.png") repeat-x;
}

    I deleted the “images/bk_main_wrapper.png”, the upper black bar disappeared, but not the black background. But once I deleted body.home before #content{...}, the black background disappeared.

    How can I assign the home class to the body element on the home page by using the body_class() function? I may need the details a bit more coz I am an amateur. I googled it some info here. But that was in vain.
    Thank you.

    Did you follow the link I included for you?

    Under “Usage”, on that page, the documentation gives the following example:

    <body <?php body_class($class); ?>>

    Also, the “Default Values” section starts like this:

    Default Values

    The body_class CSS classes appear based upon the pageview Conditional Tags as follows.

    Front Page
    If using Reading Settings for typical chronological blog post displays, the class selectors are blog home [ paged paged-n ].

    If using Reading Settings for static front page displays, the class selectors are home page page-id-ID [*].

    If using a post as the static front page, the class selectors are blog [ paged paged-n ]

    …

    So perhaps replace your <body> tag with:

    <body <?php body_class(); ?>>

    I notice there’s also some JavaScript in the <body> tag, which may be generated dynamically. You’ll probably also want to keep that.

    HTH

    PAE

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘How to change post width and add space between posts on Homepage?’ is closed to new replies.