Very new to CSS and whatnot, so apologies if the below is unbelievably basic and/or long winded.
My question is how would one identify and remove “ember” elements via CSS? I assume you would do it via the “display:none” suffix.
Just as a random example, let’s say I wanted to get rid of the bookmark button at the bottom of topics. when looking up the element in Chrome’s console, I can only see the CSS for all the topic footer buttons in general, but not that one specifically, so if I were to affix “display:none”, it would apply to all the buttons instead of just the one.
result of putting display:none on the CSS button tag.
I’m fairly sure removing just one would be possible and that this would extend to other ember elements, most of which are similarly grouped, as before I’ve managed to delete other ember elements (namely the justify button in the composition taskbar) albeit only with help from other users on this forum.
However, how would one go about identifying the specific CSS tag that you could affix the “display:none”?
Once again, apologies if this is overly basic or long-winded.
Apologies if I gave a bad example, as I didn’t know that one had an option outside CSS. I just picked a random ember element.
I suppose a btter example would be in the user page. The thing is, I’m looking for how one would identify what one could put into CSS (similar to the quoted post onward from the “MD Composer Extras” thread I referenced above), so you could hypothetically stop an ember element from displaying.
A better example would be the sidebar in the Activity section of a Profile. As far as I know, there is no specific option for this in Settings, but would require one to use CSS.
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”.
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:
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):
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).
I’ve run into a slight issue. In trying to delete the “bookmarks” example I posted above, I’m unable to do so because the ember number affixed keeps changing.
here’s the code I used when it was 52. have also tried it without the !important.
Yes, I mentioned that already @b481, that you should not choose a selector based on the ember assigned classes and ids.
You should use a selector which is not an ember assigned class. I described for you how to do this in my earlier reply.
SIDEBAR: FYI , you are not “deleting” these items from the DOM in this manner (as you mentioned above), you are only “hiding” them, but that is a topic for another day
Please use a selector which is not automatically assigned by Ember.
Hope this helps.
Note:
If you are trying to hide (in your example) the bookmark button at the bottom of a topic, did you try:
#topic-footer-button-bookmark
{
display:none;
}
Sorry, but from your posts, I really do not know, exactly, which element in the DOM (example or actual) you wish to hide.
Anyone aware of how one would delete just the “quote whole post” option without also deleting the one on the left? They both share the same CSS and the same parent div, so I haven’t found a way of getting rid of one without the other.
