Insert text below username?

Dev
1

Is there any way to insert a line of text below usernames? Ideally, I’d like this to appear under everyone’s username.

usernamebelow

The CSS I used to achieve this is:

.username::after {
    content: 'website.com';
    font-size: 14px;
}

But obviously I’d like for it to appear below. Thanks!

1 Like
2

Would this work for you?

image
image1536×266 36.8 KB

.topic-meta-data .names {
  flex-wrap: wrap;
}

.names::after {
  display: block;
  content: "hello world";
  font-size: 14px;
  width: 100%;
  flex: 1 0 100%;
  order: 4;
}

edit: added order property for mobile

3 Likes
3

Thank you! It works perfectly on Desktop, but for whatever reason it shows above the username on mobile.

4

Oh. Interesting. they have an additional order property on mobile.

You can add order: 4 to the after pseudo element and it should fix it.

1 Like
5

You could achieve this with Group Default Titles.

Groups can have Default titles which appear by the username.

That way you can have a different one for each Group.

You could style those with CSS to appear underneath if you so chose.

2 Likes
6

Works perfectly, thank you!

7

You could also use the API if you need to adjust the content programmatically (to check the user, the post, etc.).

For example:

api.decorateWidget("poster-name:after", (dec) => {
    // "dec.attrs" to access the attributes of the post
    return dec.h("div", "meta.discourse.org");
  });

.topic-meta-data .trigger-user-card {
    flex-direction: column;
    align-items: flex-start;
}

image

2 Likes
8

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.