The discussion centers around adding custom class attributes to HTML elements in Discourse, particularly for tables and UI components. W.M initially asks how to add a class to a markdown-generated table, but codinghorror clarifies that arbitrary HTML is disallowed for security reasons. david offers a workaround using whitelisted data-theme-* attributes, which can be targeted via CSS — a solution W.M appreciates. Later, sarahann seeks to add classes to the body or admin UI to distinguish between moderators and admins, referencing codinghorror again. cpradio explains that plugins can add classes, either via controllers or by overriding .hbs templates — though the latter requires maintenance. sarahann struggles with .js.es6 and DOM targeting, prompting cpradio to suggest using JavaScript on page load to detect user roles via Discourse.User.current() and dynamically add classes. sarahann finds this helpful but notes JS struggles with persistent admin-page detection. Ultimately, she decides to override the admin wrapper template directly sarahann. The thread highlights the limitations of markdown and themes, and the flexibility (with trade-offs) of plugins and JS for advanced customization.
I understand that it is possible to create a table like this:
| Col A | Col B | Col C |
|---|---|---|
My question, how to add a custom class attribute to the table? I mean, rendering it in HTML as, for example:
<table class='shortcuts'>...</table>
This is not possible at the current time. Allowing arbitrary html is a security risk.
Alternatively, is it possible to wrap it in a <div> tag with a class attribute, is there any plugin to allow this?
[data-theme-*] attributes are whitelisted inside post content, so you can do
<div data-theme-shortcuts="true">
</div>
and then target it in CSS using something like
div[data-theme-shortcuts="true"] {
}
Originally discussed here:
@david Thank you very much!
Hey Jeff,
I noticed in the /admin portal that moderators and admins have the same CSS classes (on the body and in the content).
I was hoping to add a class to the HTML body tag stating if a user is a moderator or an admin so that I could hide some functionality for moderators. I was following eviltrout’s comment Profile - eviltrout - Discourse Meta) Developing Discourse Plugins - Part 2 - Connect to a plugin outlet - #22 by sarahann
Does this mean that I cannot add additional classes to Discourse’s UI?
If you are doing it via plugin you definitely can. Themes are a bit more limited.
Really!?
I know how to add_to_class() in the plugin.rb file.
But how would I add a class to a .hbs file ?
Generally you either reopen it’s controller which can define a class or if it truly is in the hbs, you can overwrite the hbs file by placing it is the same folder structure in your plugin. Just realize doing that means you have to maintain and copy changes that occur in that file in core.
Hmm maybe its the .js.es6 file extension? To be honest, I have no idea how to go about this.
I’m hoping of a way to distinguishing between mods and admins in the admin portal by adding a class somewhere in the DOM (preferably on the admin-wrapper or body). So that I can trigger a “display: none” on some of the buttons in the admin panel.
you might be able to do this in a theme using JS on load. You could detect of the user is a mod/admin and add the class
Let me see if I can find code that is close.
This has the code for reading the logged in user
Relevant JS (admin property is a guess it might be isAdmin or something along those lines)
var currentUser = Discourse.User.current();
if(currentUser != null && currentUser.staff && !currentUser.admin) {
You just have to figure out what event to put that code in (I think there is a page load event but I don’t recall it’s name)
That will work 
Thank you!!
Actually, I remember now why I was trying to do this in a plugin and not in javascript. |
In JS its hard to tell when the user is in the admin page. And in the past I have tried to add classes before and I couldn’t find a persistent event so that my JS code would run on every page. api.onpagechange only works when the url changes (not the view).
Thank you for the help!
I guess I’ll overwrite the admin wrapper with my class name in it and see how that goes