WordPress.org

Ready to get started?Download WordPress

Forums

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

  1. martcol
    Member
    Posted 3 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.

    category-blog.php
    category-poem.php

    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()
    			;$c++;
    		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
    Without

    Many thanks

    Martin

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

  2. alchymyth
    Forum Moderator
    Posted 3 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
    Member
    Posted 3 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.

    Martin

  4. alchymyth
    Forum Moderator
    Posted 3 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
    Member
    Posted 3 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.

    Martin

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags

No tags yet.