Hi @b481
What you are looking for is called a “CSS Selector” (or just “selector” for short) . CSS selectors are used to “find” (or select, obviously) the DOM element you wish to style.
For example, from where I am typing now, I am going to look for the selector for your username in the composer (just an example).
What we do is put the mouse over the element (your b481 username in the composer) and right-click and a menu will pop-up with the menu item “Inspect”.
Click on “Inspect” and the dev console (now I am in Chrome, on macOS); and with any good luck, the element we want will be highlighted.
If you right click over the highlighted element in the console, you will see a Copy–>Copy selector menu item.
If you go for that, and copy the selector, in this example you will get:
#ember433 > span > a
This is not really a very good selector because the #ember433 is assigned by Ember, but you can move your mouse over the elements in the console and it will highlight the elements in both the page of interest and the console. The good news is we are in the ballpark, quickly and easily.
You can then find the element you want to hide and, in this example, you can right-click again on the element (this example) you can test by choosing “add attribute” from the menu under the mouse to test our selector.
I have just done this as an example in this capture:
and now that element with your id ‘b481’ is hidden in that part of the DOM…
So, we know, in this case, that if we use the CSS:
span.action-title{
display:none;
}
We can add that to our theme and we have hidden that element.
In this case, you should check to see if there are more than one elements in the page with the same selector and you should also check to make sure that the selector you have chosen will not be greedy and select elements on other pages you may not want to be hidden.
The more specific the selector the better.
For example, in this case, we can make it more specific by specifying our selector is a child of a parent element, in this case (not tested):
div.compose-action-title > span.action-title{
display:none;
}
You can see we are getting more specific; and at this point, you should have a pretty good idea how to hunt for elements you want to modify.
Happy Hunting!
One final note:
You can use Javascript and jQuery to select elements, but I have found that in SPA apps like Discourse/Ember, CSS selectors work well, at least for me. I tend to only use Javascript selectors when I need to traverse the DOM in some “tricky” way (which can also be a lot of fun).
Hope this helps.
See also: