Привет, @b481!
То, что вы ищете, называется «CSS-селектор» (или просто «селектор»). CSS-селекторы используются для «поиска» (или, очевидно, выбора) элемента DOM, который вы хотите стилизовать.
Например, прямо сейчас, пока я пишу это, я покажу, как найти селектор для вашего имени пользователя в композере (просто как пример).
Мы наводим курсор мыши на элемент (ваше имя пользователя b481 в композере), нажимаем правую кнопку мыши, и появляется меню с пунктом «Inspect» (Проверить).
Нажмите на «Inspect», и откроется консоль разработчика (сейчас я использую Chrome на macOS); и при удаче нужный нам элемент будет подсвечен.
Если вы нажмете правую кнопку мыши на подсвеченном элементе в консоли, вы увидите пункт меню «Copy → Copy selector» (Копировать → Копировать селектор).
Если вы выберете этот вариант и скопируете селектор, в данном примере вы получите:
#ember433 > span > a
Это не очень хороший селектор, так как #ember433 назначается фреймворком Ember, но вы можете перемещать мышь по элементам в консоли, и они будут подсвечиваться как на интересующей вас странице, так и в консоли. Хорошая новость в том, что мы уже близко к цели, быстро и легко.
Затем вы можете найти элемент, который хотите скрыть, и, в этом примере, снова нажать правую кнопку мыши на элементе (в данном примере) и выбрать из меню под курсором «add attribute» (добавить атрибут), чтобы протестировать наш селектор.
Я только что сделал это в качестве примера на этом скриншоте:
и теперь элемент с вашим id ‘b481’ скрыт в этой части DOM…
Итак, в данном случае мы знаем, что если использовать CSS:
span.action-title{
display:none;
}
мы можем добавить это в нашу тему, и элемент будет скрыт.
В этом случае вам следует проверить, есть ли на странице более одного элемента с таким же селектором, а также убедиться, что выбранный вами селектор не будет слишком «жадным» и не выберет элементы на других страницах, которые вы не хотите скрывать.
Чем конкретнее селектор, тем лучше.
Например, в данном случае мы можем сделать его более конкретным, указав, что наш селектор является дочерним элементом родительского элемента, в данном случае (не проверено):
div.compose-action-title > span.action-title{
display:none;
}
Как видите, мы становимся более конкретными; и на этом этапе у вас уже должно быть довольно четкое представление о том, как искать элементы, которые вы хотите изменить.
Удачной охоты!
Одно последнее замечание:
Вы можете использовать JavaScript и jQuery для выбора элементов, но я обнаружил, что в SPA-приложениях, таких как Discourse/Ember, CSS-селекторы работают хорошо, по крайней мере, для меня. Я обычно использую JavaScript-селекторы только тогда, когда нужно каким-то «хитрым» образом обходить DOM (что тоже может быть очень увлекательно).
Надеюсь, это поможет.
См. также: