In a support discussion titled ‘Making custom user status more prominent’, jayarr asks if it’s possible to display a user’s custom status beneath their name in posts permanently, rather than only on hover. NateDhaliwal notes there’s no direct plugin outlet for this but suggests accessing the status via this.user.status. jenmck shares a working solution using a theme component that displays custom user fields under the poster’s name, with JS and CSS code examples — and suggests adapting it to show user.status instead. The solution uses renderAfterWrapperOutlet to inject content and includes styling for inline or block display. NateDhaliwal adds a caveat: if implemented, the status would also need to be updated in other areas like profile pages, user cards, and chat messages to maintain consistency. The thread offers a practical, code-based workaround for enhancing user status visibility.
Our forum heavily uses the custom user status feature, and the notion has come up of finding a way to make that info even more prominent and visible – by having it always appear beneath a user’s name in a post rather than only showing up when you hover over the associated icon.
I’ve been digging and digging to see if there’s any reasonably easy way to make this happen, and so far, I haven’t found any answers.
Does anyone know if this is at all possible?
Thanks in advance, and happy New Year to everyone!
I did a variant of this, but to display custom user fields under the poster’s name. I created a theme component and used this for the JS:
import Component from "@glimmer/component";
import { withPluginApi } from "discourse/lib/plugin-api";
import { get } from "@ember/object"; // We still need this
// here, add the id of the custom field, prefixed with "user_field_"
// to get the user field id:
// 1. go to admin/config/user-fields
// 2. click on the user field's name
// 3. the user field id is shown in the url after admin/config/user-fields/
const FIELDS_TO_SHOW = [
{ fieldKey: "user_field_2", display: "inline" },
{ fieldKey: "user_field_1", display: "block" }
];
// ----------------------------------------
function addCustomFields(api) {
FIELDS_TO_SHOW.forEach(config => {
api.renderAfterWrapperOutlet(
"post-meta-data-poster-name",
class extends Component {
// getter to pass the key to the template
get currentFieldKey() {
return config.fieldKey;
}
// getter to pass the display type to the template
get currentDisplayType() {
return config.display;
}
static shouldRender(args) {
// use config.fieldKey to find the data
const value = get(args.post.user.custom_fields, config.fieldKey);
return !!value;
}
<template>
<div class="
poster-custom-field
poster-custom-field-{{this.currentDisplayType}}
field-{{this.currentFieldKey}}
">
{{get @post.user.custom_fields this.currentFieldKey}}
</div>
</template>
}
);
});
}
export default {
name: "show-poster-custom-fields",
initialize() {
withPluginApi("1.0.0", (api) => {
addCustomFields(api);
});
}
};
and then used this for the css:
.topic-meta-data .names {
flex-wrap: wrap;
align-items: baseline;
}
// base styles for all custom field display
.poster-custom-field {
font-size: 0.9em;
color: var(--primary-high-or-secondary-low);
flex-shrink: 0;
}
// style for inline display
.poster-custom-field-inline {
display: inline-block;
margin-left: 8px;
order: 5;
}
.topic-meta-data .names .user-title {
order: 10;
flex-basis: 100%;
width: 100%;
display: block;
margin-left: 0;
margin-top: 2px;
font-size: 0.9em;
color: var(--primary-high-or-secondary-low);
}
// style for below the name display
.poster-custom-field-block {
flex-basis: 100%;
margin-top: 4px;
order: 20;
}
This is what it looks like in practice - “more stuff” and “some information” is the content in the two custom fields.
