2010 category.php Screws Layout after specifying Category (5 posts)

  1. martcol
    Posted 5 years ago #

    The site is pictopoetry.co.uk.

    I have used the category.php template page to make my own category pages in a child theme of notesblog core. One to display blog posts and one to display poems i.e.


    When I edit this part of the code (the default 2010 page is based on category three):

    <?php $c = 0;
    		if (have_posts()) : while (have_posts()) : the_post()
    		if( $c == 1 ) $my_id = ' id="first"';
    			else $my_id = ''; ?>
     <!-- The following tests if the current post is in category 15. -->
     <!-- If it is, the div box is given the CSS class "post-cat-fifteen". -->
     <!-- Otherwise, the div box will be given the CSS class "post". -->
    <?php if ( in_category('15') ) { ?>
               <div class="post-cat-fifteen"<?php echo $my_id;?> >
     <?php } else { ?>
               <div class="post" <?php echo $my_id;?>>
     <?php } ?>

    My layout gets mucked up and I can't work it out. It's the cake poem half way down that suffers.

    Here are two pages one with the original code and one with the ammendment.

    With: Category 15

    Many thanks


    PS - the code differs a little from the 2010 page because of giving the first post its own id (thanks esmi)

  2. Michael
    Part-Time Forum Moderator
    Posted 5 years ago #

    reason is that the 'wine glass' post is just a long image - floated left:

    try to add to style.css:

    .post-cat-fifteen .postmetadata {clear:both;}

  3. martcol
    Posted 5 years ago #

    Hello Alchymyth

    Thanks for that. I'll have a go this evening.

    Can you help me understand why it happens? The page where I haven't specified category ID is fine but not where I do spceficy it. Apart from that, they must be the same page.


  4. Michael
    Part-Time Forum Moderator
    Posted 5 years ago #

    Apart from that, they must be the same page.

    the major difference is the css class for the post div - normally .post - in your case .post-cat-fifteen

    maybe there is an existing style which refers to .post which actually prevents the error dispay.

    found it in style.css:

    div.post div.entry, div.page div.entry { width:100%; float:left; }

    if you change this to:
    div.post div.entry, div.page div.entry, div.post-cat-fifteen div.entry { width:100%; float:left; }

    this should solve your issue, without applying my earlier suggestion.

    (.post is a very common css class, and is often used in styling the posts)

  5. martcol
    Posted 5 years ago #

    Thank you for helping me out with that.

    I'll get to scrutinising the CSS file as soon as I can. It makes me feel a little more optimistic knowing that nothing too serious is going on. It sounds like a pretty straightforward solution.

    Moving from building only static sites from the floor up, WPs CSS files are a little daunting. I guess it will get a little easier as it gets more familiar.

    Still, I'm grateful for your contribution.


Topic Closed

This topic has been closed to new replies.

About this Topic


No tags yet.