Opened 7 years ago
Last modified 6 years ago
#2692 new defect
Add CSS class for user roles in topics and replies
Reported by: |
|
Owned by: | |
---|---|---|---|
Milestone: | 2.7 | Priority: | normal |
Severity: | normal | Version: | |
Component: | General | Keywords: | good-first-bug needs-patch |
Cc: | doug@… |
Description
We should add a CSS class for user roles styling in topic and reply templates in bbp_get_reply_author_role()
and bbp_get_topic_author_role()
e.g. <div class="bbp-author-role bbp-role-keymaster">Keymaster</div>
-
src/includes/replies/template.php
1430 1430 */ 1431 1431 function bbp_get_reply_author_role( $args = array() ) { 1432 1432 1433 $css_role = strtolower( bbp_get_user_display_role( bbp_get_reply_author_id( $reply_id ) ) ); 1434 1433 1435 // Parse arguments against default values 1434 1436 $r = bbp_parse_args( $args, array( 1435 1437 'reply_id' => 0, 1436 1438 'class' => false, 1437 'before' => '<div class="bbp-author-role ">',1439 'before' => '<div class="bbp-author-role bbp-role-' . $css_role . '">', 1438 1440 'after' => '</div>' 1439 1441 ), 'get_reply_author_role' ); 1440 1442
Attachments (1)
Change History (10)
#4
follow-up:
↓ 5
@
6 years ago
- Cc doug@… added
Wouldn't we want this role class applied up in the div for the whole post rather than on the role label? That way it could be used to target any aspect of the post that we might want to style differently based on role.
A use case for me would be to add a badge to the avatars based on role or to color the posts of admins differently.
#5
in reply to:
↑ 4
@
6 years ago
Replying to douglsmith:
Wouldn't we want this role class applied up in the div for the whole post rather than on the role label? That way it could be used to target any aspect of the post that we might want to style differently based on role.
A use case for me would be to add a badge to the avatars based on role or to color the posts of admins differently.
I'd say yes and no, I think there is probably a use case for both and even more scenarios:
This is the full source of an entire reply:
<li> <div id="post-178" class="bbp-reply-header"> <div class="bbp-meta"> <span class="bbp-reply-post-date">March 20, 2015 at 11:58 am</span> <a href="http://src.wordpress-develop.dev/forums/topic/threaded-replies/#post-178" class="bbp-reply-permalink">#178</a> <span class="bbp-admin-links"><a href="http://src.wordpress-develop.dev/forums/reply/178/edit/" class="bbp-reply-edit-link">Edit</a> | <a href="http://src.wordpress-develop.dev/forums/reply/178/edit/?action=move&reply_id=178" title="Move this reply" class="bbp-reply-move-link">Move</a> | <a href="http://src.wordpress-develop.dev/forums/topic/threaded-replies/edit/?action=split&reply_id=178" title="Split the topic from this reply" class="bbp-topic-split-link">Split</a> | <a title="Move this item to the Trash" href="/forums/topic/threaded-replies/?action=bbp_toggle_reply_trash&sub_action=trash&reply_id=178&_wpnonce=cf6f4aa4a8" class="bbp-reply-trash-link">Trash</a> | <a href="/forums/topic/threaded-replies/?action=bbp_toggle_reply_spam&reply_id=178&_wpnonce=e05d5baed8" class="bbp-reply-spam-link">Spam</a> | <a href="/forums/topic/threaded-replies/?action=bbp_toggle_reply_approve&reply_id=178&_wpnonce=ca48da155b" class="bbp-reply-approve-link">Unapprove</a> | <a href="/forums/topic/threaded-replies/?bbp_reply_to=178&_wpnonce=4fada0db94#new-post" class="bbp-reply-to-link" onclick="return addReply.moveForm('post-178','178','new-reply-177','177');">Reply</a></span> </div> <!-- .bbp-meta --> </div> <!-- #post-178 --> <div class="even bbp-parent-forum-4 bbp-parent-topic-177 bbp-reply-position-2 user-id-1 topic-author post-178 reply type-reply status-publish hentry"> <div class="bbp-reply-author"> <a href="http://src.wordpress-develop.dev/forums/users/admin/" title="View admin's profile" class="bbp-author-avatar" rel="nofollow"><img alt="" src="http://0.gravatar.com/avatar/06e92fdf4a9a63441dff65945114b47f?s=80&d=mm&r=g" srcset="http://0.gravatar.com/avatar/06e92fdf4a9a63441dff65945114b47f?s=160&d=mm&r=g 2x" class="avatar avatar-80 photo" height="80" width="80"></a> <br><a href="http://src.wordpress-develop.dev/forums/users/admin/" title="View admin's profile" class="bbp-author-name" rel="nofollow">admin</a> <br> <div class="bbp-author-role">Keymaster</div> <div class="bbp-reply-ip"><span class="bbp-author-ip">(192.168.50.1)</span></div> </div> <!-- .bbp-reply-author --> <div class="bbp-reply-content"> <p>:relieved: :relieved: </p> </div> <!-- .bbp-reply-content --> </div> <!-- .reply --> </li>
The current proposed patch in this ticket add's a role class to the following:
<div class="bbp-author-role">Keymaster</div>
To become for example:
<div class="bbp-author-role bbp-role-keymaster">Keymaster</div>
We can already style on the immediate <div>
above with per the example above using user-id-1
or topic-author
, but not based on user roles, I also see a use case where being able to style the reply header based on author or role would also be convenient:
<div id="post-178" class="bbp-reply-header">
#6
@
6 years ago
I'm currently using the user-id-*
styles to put a badge on keymaster's avatars.That works but it requires a css rule for each each person and it requires updating the css if any of those people change. Having a role class at a higher level would make that much cleaner.
I also see a use case where being able to style the reply header based on author or role would also be convenient
That makes me wonder if the user-id-*
and bbl-role-*
styles should be up in the <li>
tag since they describe everything below. (I suppose that's true of the id="post-*"
too.)
#7
@
6 years ago
The CSS can be filtered using bbp_get_forum_class()
, bbp_get_topic_class()
and bbp_get_reply_class()
and are intended to replicate WP Core https://codex.wordpress.org/Function_Reference/post_class
In this case of replies, this is the applicable line:
<div class="even bbp-parent-forum-4 bbp-parent-topic-177 bbp-reply-position-2 user-id-1 topic-author post-178 reply type-reply status-publish hentry">
So....
function my_reply_class($classes) { $classes[] = 'test-class'; return $classes; } add_filter( 'bbp_get_reply_class','my_reply_class' );
Using bbp_get_user_role()
and bbp_get_reply_author_id()
you should be able to achieve what your currently doing with user-id-*
styles without having to have as much manual maintenance of people come and go.
#2737 was marked as a duplicate.