Discourse Featured User

Install this theme component

Overview

This component allows admins to feature a user along with their stats as a banner at the top of the site for a specific timeframe. Admins can choose what stats to show, along with a reason of featuring the user (e.g. exemplary conduct, TL4/Moderator promotion, etc). You can even put an icon next to the user’s username in the user card and posts.

Screenshots

Banner will all stats (if you want all  the data)

Banner with some stats (if you want a balance)

Banner with no stats (if you want to put more focus on the description)

Full description

This component is probably one of my most complicated ones yet. It shows, or features, a user at the top of the page. Admins can configure how long the banner shows (dates as the duration), what user stats to show, and what descriptions to accompany the banner (there are 2 spots, HTML-allowed).

There is also an option to show a special icon (icon name, color and hover text can all be configured) next to the username in posts and on the user card, like so:

Post (with tooltip[1][2]):

User card (tooltip also works here):

The banner is defaulted to only display on the homepage, but admins can change it to show it on all pages.

This component can be used for things like announcing new TL4s, Moderators, etc.

:light_bulb: TIP: You can use <a class="mention">username_here</a> in the banner text to create @mention bubbles, without notifying the target user, while still showing the user card on click.

:warning: Be sure that you input the correct username and not name. Not doing so will cause infinite loading and a lot of errors, possibly even rate limiting.

:warning: This component has no mobile-equivalent, only a desktop version. Apologies for the inconvenience.

Settings (get ready - there’s a lot)

Setting name Setting description Default value
featured_user The username of the user you want to feature NA
featured_user_banner_text_above The text above the banner to describe what the user has done (HTML is supported) NA
featured_user_banner_text_below The text below the banner to describe what the user has done (HTML is supported) NA
featured_user_banner_text_align How the banner text should be aligned (left, right or center) center
auto_resize_banner Automatically adjust the width of the banner to fit the number of items false
featured_user_banner_display_start_date The date when the banner would start showing; format is YYYY-MM-DD 1900-01-01
featured_user_banner_display_end_date The date when the banner would stop showing; Format is YYYY-MM-DD 2100-01-01
featured_user_banner_display_on_homepage Display the banner only on the homepage. Unchecking this would display the banner on all pages true
featured_user_banner_border_color The color of the banner border (CSS variables and hex codes are allowed) var(--primary)
featured_user_banner_border_roundness The roundness of the banner border, in px 3
featured_user_banner_border_thickness The thickness of the banner border, in px 10
featured_user_show_featured_icon_in_user_card Display an icon on the user card next to the username while the user is featured true
featured_user_featured_icon_in_user_card The icon to show for the setting above award
featured_user_featured_icon_color_on_user_card The color of the icon for the icon above var(--gold)
display_total_likes_given Display the total likes given from the user true
display_total_likes_received Display the total likes received by the user true
display_total_post_count Display the total posts made by the user false
display_total_topic_count Display the total topics made by the user false
display_total_read_time Display the total read time by the user false
display_total_days_visited Display the total number of days visited by the user false
display_gamification_score Display the gamification score of the user false

Theme translations

Translation name Description Default
user.featured_user_icon Tooltip icon text on hover “This user has been featured!”

I may enhance this to support featuring of multiple users rather than just one.

Please post any bugs or problems you may encounter. I’m open to any feedback you may have.

Hope this helps someone!


  1. That’s - you guessed it - DTooltip! ↩︎

  2. Also yes, that’s a little lack of space… I’ll try and find a solution. ↩︎

4 Likes

nifty component - nice work! :clap:

3 Likes