# Auteur Badge voor Topic Posts **URL:** https://meta.discourse.org/t/author-badge-for-topic-posts/277579 **Category:** Theme component **Created:** [2 september 2023 om 16:57 UTC](https://meta.discourse.org/t/author-badge-for-topic-posts/277579 "2023-09-02T16:57:54Z") **Posts on this page:** 1 **Showing post:** 1
### Author: ![Don](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/don/32/228726_2.png) [@Don](https://meta.discourse.org/u/Don) #### Post date: [2 september 2023 om 16:57 UTC](https://meta.discourse.org/t/author-badge-for-topic-posts/277579/1 "2023-09-02T16:57:54Z")
| | | | | --- | --- | --- | | ℹ | **Summary** | Add badge to topic owner’s posts. | | 🛠 | **Repository** | [https://github.com/VaperinaDEV/author-badge-for-topic-posts](https://github.com/VaperinaDEV/author-badge-for-topic-posts) | | ❓ | **Install Guide** | [How to install a theme or theme component](https://meta.discourse.org/t/how-do-i-install-a-theme-or-theme-component/63682) | | 📖 | **New to Discourse Themes?** | [Beginner’s guide to using Discourse Themes](https://meta.discourse.org/t/beginners-guide-to-using-discourse-themes/91966) | Install this theme component Hello 👋 With this theme component you can add badge label to the topic owner’s posts. It is really useful on larger topics because you can see clearly who is the Original Poster. * * * ## Filter The structure of the component, it is possible to target the mobile and desktop views separately. In addition, it is possible to target each category separately and thereby customize which author badges appear in which categories and views. It can be possible with a theme setting: ![Screenshot 2023-09-02 at 16.56.37](https://global.discourse-cdn.com/meta/original/4X/8/a/9/8a9a4a92b9d243a9e38c9d7aec206d241670e29f.png) You have to add 3 parameters to make workable the component. 1. view-type 2. category-name 3. author-label Example: Since there is usually less space in these places on mobile sometimes it’s great to add shorter version on mobile. Now I set up an author badge to the discourse category which on desktop will shows the “Author” text and on mobile the “OP” text. ![Screenshot 2023-09-02 at 17.01.55](https://global.discourse-cdn.com/meta/original/4X/a/9/9/a9966899c79d63e65f5c337baf47a596211e98c7.png) * * * Ok, but what if I want to use different text in the other categories? Do they have to be set separately for each? Of course not. If you leave empty it `view-type` or `category-name` or both…it will apply globally without override the existing ones. Example: I’ve added 2 more badges which uses the “Original Poster” text to the other categories on desktop and use “Director” text in videos category on both desktop and mobile view. For this, just simply leave empty these sections with **typing semicolon without space** ![Screenshot 2023-09-02 at 17.18.43](https://global.discourse-cdn.com/meta/original/4X/2/9/e/29e2ecd43d0d9bd82d58076c3e19208bb32d2463.png) An other example if you want to use only the e.g. “Author” for all categories and and all view types. Use the following: Two semicolon (without spaces) and Author `;;Author` * * * ## Places Let’s see which places you can add badges… You can select from 3-3 places in theme settings separately for desktop and mobile view. ![Screenshot 2023-09-02 at 17.29.13](https://global.discourse-cdn.com/meta/original/4X/2/e/2/2e292e448d106d6969f7cf7de7d1a4296d1d0ec3.png) These two settings 🔽 ### Desktop `author badge location desktop` 1. below-user-avatar 2. after-user-names 3. below-user-names **below-user-avatar (limited space: it uses the topic avatar width) (sticky)** _better to chose a shorter label_ ![Screenshot 2023-09-02 at 17.33.30](https://global.discourse-cdn.com/meta/original/4X/0/d/1/0d14880c21998e7898d57680b7c0c1bf23e3996b.png) * * * **after-user-names** ![Screenshot 2023-09-02 at 17.35.42](https://global.discourse-cdn.com/meta/original/4X/9/2/c/92c64027cf1862b304b4edcce75f8a8826e0f295.png) * * * **below-user-names** ![Screenshot 2023-09-02 at 17.36.32](https://global.discourse-cdn.com/meta/original/4X/d/7/7/d776135eebeb194a2c787e46019ae5f53d40f489.png) * * * ### Mobile **author badge location mobile** 1. below-user-avatar 2. after-user-names 3. above-user **below-user-avatar (limited space: it uses the topic avatar width)** _better to chose a shorter label_ ![Screenshot 2023-09-02 at 17.40.42](https://global.discourse-cdn.com/meta/original/4X/d/2/0/d2030a77a4818ca24c46c10d72c4cec8a177153c.png) * * * **after-user-names (limited space)** _better to chose a shorter label_ ![Screenshot 2023-09-02 at 17.43.25](https://global.discourse-cdn.com/meta/original/4X/e/7/8/e78b8de4c70ebc44b7876f6f54cdf8de58262150.png) * * * **above-user** ![Screenshot 2023-09-02 at 17.44.16](https://global.discourse-cdn.com/meta/original/4X/d/7/5/d75f5cb40f8f3337e85a927f7bcab594161a4083.png) * * * ## Customization **Finally let’s see some customization options.** ![Screenshot 2023-09-02 at 17.46.05](https://global.discourse-cdn.com/meta/original/4X/2/2/a/22adf178d8fccead50cb5a64b7610bde3ce15266.png) Here you can customize the author badge like colors, font styles, corners… For example: ![Screenshot 2023-09-02 at 17.52.42](https://global.discourse-cdn.com/meta/original/4X/7/2/b/72bbba5ad0c6cdf2d89ed802a6338be0037e145d.png) This one uses the following values. These color variables may not use the same colors on your site, it depends the color scheme you have. ![Screenshot 2023-09-02 at 17.53.27](https://global.discourse-cdn.com/meta/original/4X/c/5/6/c56d84ab239c44e44f4421291532f3e92b3531e8.png) It’s up to you what kind of cool author badge you make. 🙂 --- _[View the full topic](https://meta.discourse.org/t/author-badge-for-topic-posts/277579)._