WordPress.org

Ready to get started?Download WordPress

Forums

Loss of formatting when displaying blog post on static home page (8 posts)

  1. albert3858
    Member
    Posted 1 year ago #

    I've used this code snippet - http://thelibzter.com/displaying-your-latest-wordpress-blog-post-on-a-static-home-page - in a front page template which is part of a child theme based on 2012. The idea is to display just the first blog post at the bottom of the static home page.

    Unfortunately, while the text formatting of the latest blog post is fine on the blog page - http://www.villainaria.com/blog-2/ - it gets lost on the home page - http://www.villainaria.com/.

    I've tried putting the code snippet both inside and outside of the loop in a whole host of places in the front page template file, but either get lost formatting or just teh headline of the post. Any suggestions gratefully welcomed as to how to fix this.

  2. albert3858
    Member
    Posted 1 year ago #

    Any suggestions very gratefully welcomed. Pls let me know I haven't outlined the problem clearly enough. Thx

  3. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    Your new page doesn't have many of the same CSS classes so the regular CSS is not applied to that page. Some of those are because the custom page doesn't have the same HTML structure - so for example, this is the CSS for the good page for p tags:

    .entry-content p, .entry-summary p, .comment-content p, .mu_register p {
        line-height: 1.71429;
        margin: 0 0 1.71429rem;
    }

    For your new page, p tags have no CSS - hence the lack of spacing.

    One way to sort this is to use a browser tool like Firebug to look at the CSS for one page vs. the other side by side - then you'll need to modify the CSS or the HTML so that the CSS applies to the new page.

  4. albert3858
    Member
    Posted 1 year ago #

    Many thanks - will give it a go.

  5. albert3858
    Member
    Posted 1 year ago #

    Apologies, but I suspect I am missing something basic. Tried comparing in Firebug as suggested but the CSS for the pages came up as identical, including the p tags?

  6. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    Well, Firebug shows it quite clearly - it's not identical at all for that section of the page - look at the CSS for the <p> tags - there is none of twentytwelve styling being applied.

    I tried a few things - see if adding this to your child theme style.css file works -

    .home p {
        line-height: 1.71429;
        margin: 0 0 1.71429rem;
    }
    
    .home h2 {
        margin-bottom: 1.71429rem;
    }
  7. albert3858
    Member
    Posted 1 year ago #

    Many thanks - that fixed it! Much appreciated.

    I still think I must have been looking at the wrong thing re the CSS in Firebug. I opened Firebug, clicked the CSS tab and copied and pasted the code for each page in turn from the window into Word. I eyeballed it and it looked identical so to be sure I did a "Compare Docs" and got a "no difference" back. If I'm doing something basic wrong, pls let me know, so I don't waste your (or anyone else's ) time in future. Thanks again.

    The code for the (properly formatted) blog page was:

    [ 897 lines of code moderated, that's just way too much. For that many lines of code please use pastebin.com instead. Or just post a link to your CSS style sheet. ]

  8. albert3858
    Member
    Posted 1 year ago #

    Sorry - I was obviously doing something VERY wrong - there were no <p> tags at all in either of those code chunks I just posted!

Topic Closed

This topic has been closed to new replies.

About this Topic