Я очень новичок в CSS и подобных вещах, поэтому извините, если нижеизложенное покажется невероятно банальным и/или слишком пространным.
Мой вопрос: как можно идентифицировать и скрыть элементы «ember» с помощью CSS? Я предполагаю, что для этого используется свойство «display: none».
В качестве случайного примера: допустим, я хочу убрать кнопку закладки в нижней части тем. При просмотре элемента в консоли Chrome я вижу только CSS-стили для всех кнопок в подвале темы в целом, но не для конкретной кнопки. Поэтому, если я добавлю «display: none», это применится ко всем кнопкам, а не только к одной.
Результат применения «display: none» к тегу кнопки в CSS:
Я почти уверен, что скрыть только одну кнопку возможно, и этот метод применим и к другим элементам ember, большинство из которых сгруппированы аналогичным образом. Ранее мне удавалось удалять другие элементы ember (а именно кнопку выравнивания в панели инструментов редактора), но только с помощью других пользователей этого форума.
Однако, как найти конкретный CSS-тег, к которому можно применить «display: none»?
Ещё раз извините, если вопрос слишком прост или затянут.
Приношу извинения, если привёл неудачный пример, так как не знал, что у него есть опция вне CSS. Я просто выбрал случайный элемент Ember.
Думаю, лучшим примером будет страница пользователя. Дело в том, что я ищу способ определить, что можно поместить в CSS (аналогично цитируемому сообщению из ветки «MD Composer Extras», на которую я ссылался выше), чтобы гипотетически скрыть элемент Ember от отображения.
Более подходящий пример — боковая панель в разделе «Активность» профиля. Насколько мне известно, для этого нет специальной опции в настройках, и потребуется использование CSS.
То, что вы ищете, называется «CSS-селектор» (или просто «селектор»). CSS-селекторы используются для «поиска» (или, очевидно, выбора) элемента DOM, который вы хотите стилизовать.
Например, прямо сейчас, пока я пишу это, я покажу, как найти селектор для вашего имени пользователя в композере (просто как пример).
Мы наводим курсор мыши на элемент (ваше имя пользователя b481 в композере), нажимаем правую кнопку мыши, и появляется меню с пунктом «Inspect» (Проверить).
Если вы нажмете правую кнопку мыши на подсвеченном элементе в консоли, вы увидите пункт меню «Copy → Copy selector» (Копировать → Копировать селектор).
Если вы выберете этот вариант и скопируете селектор, в данном примере вы получите:
#ember433 > span > a
Это не очень хороший селектор, так как #ember433 назначается фреймворком Ember, но вы можете перемещать мышь по элементам в консоли, и они будут подсвечиваться как на интересующей вас странице, так и в консоли. Хорошая новость в том, что мы уже близко к цели, быстро и легко.
Затем вы можете найти элемент, который хотите скрыть, и, в этом примере, снова нажать правую кнопку мыши на элементе (в данном примере) и выбрать из меню под курсором «add attribute» (добавить атрибут), чтобы протестировать наш селектор.
Я только что сделал это в качестве примера на этом скриншоте:
Итак, в данном случае мы знаем, что если использовать CSS:
span.action-title{
display:none;
}
мы можем добавить это в нашу тему, и элемент будет скрыт.
В этом случае вам следует проверить, есть ли на странице более одного элемента с таким же селектором, а также убедиться, что выбранный вами селектор не будет слишком «жадным» и не выберет элементы на других страницах, которые вы не хотите скрывать.
Чем конкретнее селектор, тем лучше.
Например, в данном случае мы можем сделать его более конкретным, указав, что наш селектор является дочерним элементом родительского элемента, в данном случае (не проверено):
Как видите, мы становимся более конкретными; и на этом этапе у вас уже должно быть довольно четкое представление о том, как искать элементы, которые вы хотите изменить.
Удачной охоты!
Одно последнее замечание:
Вы можете использовать JavaScript и jQuery для выбора элементов, но я обнаружил, что в SPA-приложениях, таких как Discourse/Ember, CSS-селекторы работают хорошо, по крайней мере, для меня. Я обычно использую JavaScript-селекторы только тогда, когда нужно каким-то «хитрым» образом обходить DOM (что тоже может быть очень увлекательно).
Я столкнулся с небольшой проблемой. При попытке удалить пример «bookmarks», который я привёл выше, у меня не получается сделать это, потому что номер ember, который к нему прикреплён, постоянно меняется.
Вот код, который я использовал, когда он был 52. Также пробовал без !important.
Да, я уже упоминал об этом @b481: не следует выбирать селектор на основе классов и идентификаторов, назначаемых Ember.
Вам нужно использовать селектор, который не является классом, назначенным Ember. Я описал, как это сделать, в моём предыдущем ответе.
БОКОВАЯ КОЛОНКА: На всякий случай: вы не «удаляете» эти элементы из DOM таким способом (как вы упоминали выше), вы лишь «скрываете» их, но это тема для другого раза
Пожалуйста, используйте селектор, который автоматически не назначается Ember.
Надеюсь, это поможет.
Примечание:
Если вы пытаетесь скрыть (в вашем примере) кнопку «Закладка» в нижней части темы, пробовали ли вы:
#topic-footer-button-bookmark
{
display:none;
}
Извините, но по вашим сообщениям я действительно не могу точно понять, какой именно элемент в DOM (пример или фактический) вы хотите скрыть.
Кто-нибудь знает, как удалить только опцию «Цитировать весь пост», не удаляя при этом ту, что слева? У них одинаковый CSS и один родительский div, поэтому я не нашёл способа избавиться от одной, не удалив другую.
