I’m looking at the groups/single/forum/topic.php file and trying to figure out how to get the first post to have a unique css.

Idea

Surround area with div tag and unique id then create the id in my child theme’s css.

Challenge

In placing the div tag above the li tag, all the posts are changed to the new css tag. This makes sense because of the while ( bp_forum_topic_posts() ) : bp_the_forum_topic_post(); happening in that loop.

So, how do I get just the first post to be unique? After all, this site has an alternating style … how is that achieved? How can that be replicated in a child theme?

[@nuprn1 Participant 14 years, 6 months ago]

quick function to check first post – reference that within the topic loop

function my_forum_is_first_post() {
global $topic_template;

if ( $topic_template->post->post_position == 1 )
return true;

return false;
}

[@lph2005 Participant 14 years, 6 months ago]

@rich! @ etiviti, thank you. I’ll try to play around with the idea. Let’s hope it works

[@lph2005 Participant 14 years, 6 months ago]

Using

if ( $topic_template->post->post_position == 1 ) :
blah blah
else
a different blah blah
endif

with php tag wrapped around it … almost works. When there is only 1 post then I get one type of css and if there are more than 1 posts then I get a different one.

Almost there.

Which brings me to a different question that I asked earlier … what if I wanted css different for admin and moderators .. looks like I just need to know a listing of the functions and how to use them here.

For example

if (post by admin) <— however that looks
blah blah
else
a different look
endif

Something like that .. and just need to know the post by admin function

[@lph2005 Participant 14 years, 6 months ago]

Sorry. I’m not having any luck here. I can get the css to change based on who is logged in (admin or member) but want it to always show admin background in one color OR at least get the initial idea which is to have the first post show with a unique css.

Any other suggestions? Sorry, my skills are too limited to figure this one out.

[@lph2005 Participant 14 years, 6 months ago]

I guess no one has an answer. This is sad.

it is simple in bbpress
#position-1 .threadpost { add the css here }

Why not buddypress?

[@nuprn1 Participant 14 years, 6 months ago]

works for me… in fact i style the first li on my sites:
<li id=”post-<?php bp_the_topic_post_id() ?>” <?php if (my_forum_is_first_post() ) echo ‘class=”first”‘; ?>>

buddypress does not use the same bbpress functions and overrides the majority of the features

*i really hate we can’t post code here – @apeatling please add the functionality (or syntax highlighter – very easy with a few filter tweaks)

[@lph2005 Participant 14 years, 6 months ago]

Thanks for hanging in there .. but that just doesn’t work for me. I copied your function and placed it in the functions.php file for the child theme. Next, I added the line above (fixing the quotes) – and the posts do not load. I get the header ..and that’s it.

Dang – I hate not being able to post code here!

Update
OK. I got it!!!

Thank you! OK. I had to rearrange this a bit by using a div around the post content instead of the li … but it works

[@rogercoathup Participant 14 years, 6 months ago]

Can’t you just do this in css without changing any code? Have you tried just using the first-child selector, something like this:

ul#my-topic-list li:first-child {
my-css: nnn;
}

[@lph2005 Participant 14 years, 6 months ago]

Roger – that doesn’t seem to work for me – have you tried it and does it work for you? Maybe I’m doing something wrong.

[@rogercoathup Participant 14 years, 6 months ago]

What CSS did you write?

You’ll need something like:

ul#topic-post-list li:first-child {
…
}

If that doesn’t work, which browser are you using? If you are on an old browser, the first-child selector might not work.

Check here for more info on first-child: http://reference.sitepoint.com/css/pseudoclass-firstchild

Note for development: Firefox (with firebug extension) or Safari with the developer menu is a good choice… you can view (and experiment) with css direct in the browser. Once you’re happy, you can then test in IE.

[@rogercoathup Participant 14 years, 6 months ago]

follow up: it should work in IE7+ , as well as all the usual standards browsers (Safari, Firefox, Chrome, etc.)

Apparently, you need to make sure you have <!DOCTYPE defined for it to work in IE7+

[@lph2005 Participant 14 years, 6 months ago]

Roger, I placed this in the styles.css file.

ul#topic-post-list li:first-child {
padding: 4px;
background: #FCEC8F;
border: 1px solid #ddd;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
-moz-box-shadow: 2px 2px 2px #dddddd;
-webkit-box-shadow: 2px 2px 2px #dddddd;
}

I then removed my div tags that were working in the topic.php (restoring original) … and the first post failed to load with a different css.

Update
OK! I found my mistake Roger. This works – except the whole post with the avatar is surrounded and I just wanted the post content.