Skip to:
Content
Pages
Categories
Search
Top
Bottom

How to add different style to the first post?


  • lemonade-joe
    Member

    @lemonade-joe

    Hi. I am trying to build a site, where user can ask question and other users can give answers to them, sort of a counselling site. That means, that the first post of every topic is a question and the other posts are the answers. I would like to give the first post, the question a different style, so that it can “stand out in the crowd of answers”, e.g. different background color, bold fonts, etc.

    I figured out that I propably need to edit this part of the layout, I just do not know how, as I do not really know php:

    <?php foreach ($posts as $bb_post) : $del_class = post_del_class(); ?>

    <p id=”post-<?php post_id(); ?>”>

    <?php bb_post_template(); ?>

    </p>

    <?php endforeach; ?>

Viewing 9 replies - 1 through 9 (of 9 total)
  • That is the right thing to edit! One way to do it is to add a counter

    <?php
    $postorder = 0;
    foreach ($posts as $bb_post) : $del_class = post_del_class(); ?>
    <?php $postorder++;
    <li id="post-<?php post_id(); ?>" class="entry-<?php echo $postorder; ?>"<?php alt_class('post', $del_class); ?>>
    <?php bb_post_template(); ?>
    </li>
    <?php endforeach; ?>

    Then you can just use CSS and format li.entry-1 however you like!


    lemonade-joe
    Member

    @lemonade-joe

    Thanks for the answer. Maybe I am doing something wrong, but after I insert the code into the topic.php, I only get a blank screen. No error messages, only blank screen.


    michael3185
    Member

    @michael3185

    I think there’s a missing check for the count..? I put a counter in my frontpage.php to limit the number of recent posts which are displayed;

    <?php $recent_count = 0; ?>
    <?php if ( $topics || $super_stickies ) : ?>
    <h4><?php _e('Recent Posts'); ?></h4>
    <table id="latest">
    <?php if ( $stickies ) : foreach ( $stickies as $topic ) : ?>
    <?php if ($recent_count >= 10) { break; } ?>
    <?php $recent_count++; ?>
    <tr<?php topic_class(); ?>>
    <td><a href="<?php topic_link(); ?>"><?php topic_title(); ?></a><br /><div class="hints"><?php topic_posts(); ?> posts. <?php topic_last_poster(); ?> posted <a href="<?php topic_last_post_link(); ?>"><?php topic_time(); ?></a> ago.</div></td>
    </tr>
    <?php endforeach; endif; ?>

    the $recent_count variable is incremented for each post link, and the loop is jumped out of if it hits 10. No doubt there’s a neater way of doing it, but it works fine. Checking for 1 instead of 10 would do it for you.


    lemonade-joe
    Member

    @lemonade-joe

    Is there a simple way to insert the first post of the topic with an individual command? And then start the loop with the other posts, starting with the second one (as the first post is the question and the following posts are the answers)?

    Just to be clear about what I want to achieve. Here is the site I am trying to make work:

    http://www.test.rimava.sk/bbpress/topic.php?id=2

    I want the first post to have e.g. green background, different question mark icon, while all the other posts remain as they are now.

    If you are willing to look at the source after the first post is added, you could add styles to suit that post to your css.

    something like:

    #thread #post-3 .threadpost { background: #7CFC00; }
    #thread #post-3 .threadauthor img { display:none }
    #thread #post-3 .threadauthor { background: url(images/question.jpg) no-repeat 0 0; width: 80px;
    height: 80px; }

    should work ok for that page.

    other than that, i’m sure you could find a jQuery solution to find the first post in a thread & style it.


    Sam Bauers
    Participant

    @sambauers

    In bbPress 1.0 you can use post_position() inside the loop of posts.

    Thanks Sam, just tried adding this to the css

    #position-1 .threadpost {
    background: #FF9;
    }

    on the 1.0 release & it works perfectly…


    lemonade-joe
    Member

    @lemonade-joe

    Could you guys please give me a complete example of how to use the post_position() inside the loop of posts. Thanks

    Nothing special to be done if you are using bbPress 1.0 as position-1 will be added as a div id to the first post in each thread.

    So you only need to add something like

    #position-1 .threadpost { background: #FF9; }

    to your theme css file to style the first post.

Viewing 9 replies - 1 through 9 (of 9 total)
  • You must be logged in to reply to this topic.
Skip to toolbar