I’m struggling to learn more about how discourse works and I’m still confused after reading this. I’m trying to add a dynamic title to the admin’s username on the post page using jQuery but is not working. But if I’ll target let’s say the body tag, and add a class, it works. So can somebody please explain why is not working? The code is inserted in the header tab btw. $(".names span.admin a").attr('title', 'Community Admin'); Do I need to inject this in a plugin outlet or something?

[image] cosdesign: So can somebody please explain why is not working? Probably because in this case jQuery is not playing nicely with the Ember & Widget rendering pipeline. You see in this script, you have no control over when this fires and in relation to where the javascript app has got to whilst drawing the screen. There’s an javascript api method for this though, see more here: decorateWidget() And this specific widget: app/assets/javascripts/discourse/app/widgets/poster-name.js 015ea2877 className: attrs.extraClasses, attributes: { href, "data-group-card": attrs.primaryGroupName }, }, attrs.title ); } return titleContents; }, }); export default createWidget("poster-name", { tagName: "div.names.trigger-user-card", settings: { showNameAndGroup: true, showGlyph: true, }, // TODO: Allow extensibility posterGlyph(attrs) { if (attrs.moderator || attrs.groupModerator) { However, before you go down that rabbit hole, let’s back up a bit, do you just want a Title to be shown? e.g. on Jeff’s posts: [image] He has title: “co-founder” Just create a new Group, add the Admins, go to Manage => Membership and edit the Default Title. Now they can select this Title in their account settings in Preferences (or you can do that for them). [image] You can also use this to show a special Avatar flair (also demostrated by the above screen clip). Obviously if you don’t want this so “fixed” you will have to look at the coding route, but this, I’m sure you’d agree, is a lot less effort

Thanks for your help. Not the actual forum title I’m looking for but to display a title on hover on this little crown icon I made ( visible only for admins ): [image] Btw the CSS code for this is: .names span.admin a::after { content: ""; width: 17px; height: 14px; margin-left: 5px; background-image: url(https://www.dropbox.com/s/0oi0y3ex3rtfvk5/cd-crown.svg?raw=1); background-repeat: none; display: inline-block; position: relative;

Nice. Sounds like you might want to consider the widget route. Also consider this api method: api.reopenWidget("poster-name", { html() { > } } I would recommend you look at: A tour of how the Widget (Virtual DOM) code in Discourse works It’s significantly more effort to do this kind of thing in Discourse because it is an auto-magical-web-app, but once you do it right, the solution can be very robust.

Awesome, thanks a lot. I’ll take a look and post the solution if I’ll succeed. At first sight, Discourse looks so scary when it comes to customizing, and I thought WordPress is difficult :smile: .But, for sure once I’ll get familiar with all this plugins-templates thing, I guess it will become easier.

Actually, boom, there might be an even easier solution: Consider this api method to swap out the normal moderator shield: api.replaceIcon('shield-alt', 'crown'); and then change the text of the tooltip here: [image] At which point, your original CSS is potentially redundant (though you can re-color the icon)

But this will remove the shield icon for moderators, right? Cause I don’t want that. I need to add that crown icon and the hovering text only for admins since they don’t have any at all on the posts page.

Ah, yeah, I’m too used to my sites where I’m both a mod and an admin. If you split these roles that won’t work (ie Admin’s are never mods). You’d need to give Admins mod rights. So explore the other options.

Try this: api.reopenWidget("poster-name", { posterGlyph(attrs) { if (attrs.moderator || attrs.groupModerator) { return iconNode("shield-alt", { title: I18n.t("user.moderator_tooltip"), }); }; if (attrs.admin) { return iconNode("crown", { title: I18n.t("user.admin_tooltip"), }); } } }) and [image] works for me: [image] In this case the first user is both admin and mod, second is just admin. You can embellish that logic; make the crown take precedence by switching the order of the if statements.

Sounds like a solution but as I said I’m new to customizing Discourse..can you please explain where exactly do I need to paste your code cause I didn’t try any API method so far.

… give me a second, I’ll build this properly for you

Can't add new class to topic page elements using jQuery?

Development

merefield (Robert) May 7, 2022, 7:13am 17

Pleasure. Feel free to fork, extend and PR!

Topic		Replies	Views
Following on from Adding Unique Class Names Feature	19	4949	January 15, 2016
Why admin tag is not visible on posts Product Support	3	723	December 9, 2018
Differentiate Admin and Moderator Shield Icons UX	44	5238	January 18, 2025
Allocate comments Development	2	736	August 11, 2017
Cannot get the js in my component to compile SyntaxError: Private field must be used in an enclosing class Development	14	538	September 21, 2024

Can't add new class to topic page elements using jQuery?

Related topics