Можно ли применить стиль с помощью CSS?

Поддержка
1

Всем привет,

Я вношу небольшие стандартные правки в несколько стилей в одном главном компоненте темы для нашего сайта. Это означает, что нам не нужно делать форк или редактировать удалённые стили, не беспокоясь о том, что наши изменения будут потеряны при следующем обновлении. До сих пор мои правки были универсальными, например, изменение кнопки «Нравится» и т.д.

Хотелось бы узнать, возможно ли таргетировать один конкретный стиль из компонента темы, не затрагивая остальные? Возможно, с помощью каких-либо переменных данных?

Не хочу создавать отдельный компонент темы для такой мелочи. Мне нравится идея иметь один компонент темы для моих универсальных правок.

2

Да, обычно можно полагаться на специфичность в CSS. Если вы не знакомы с CSS, суть сводится к следующему: если несколько стилей применяются к одному и тому же элементу, победит более специфичный стиль.

<div class="custom-container">
  <a class="custom-link">ссылка здесь</a>
</div>

Таким образом, вам нужно проверить, есть ли у элемента (или у его родительского элемента) в компоненте, который вы хотите изменить, уникальный класс где-либо… что-то вроде:

В приведённом выше примере это либо .custom-link, либо, если у самого элемента нет прямого класса, можно использовать родительский элемент, например .custom-container a. Если в компоненте стиль изначально определён как .custom-link, вы можете гарантировать его переопределение, более точно указав a.custom-link.

Если в компоненте нет уникального класса, вы также можете использовать контейнер плагина (plugin outlet). Когда в кастомизации используется плагин-аутлет, к контейнеру добавляется специальный класс. Используя пример со стилизацией ссылки, это может выглядеть примерно так: .above-site-header-outlet.brand-header a, где “brand-header” — это имя шаблона, добавленного из компонента.

В худшем случае вы также можете попросить автора компонента добавить класс, если не можете найти простой способ стилизовать то, что вам нужно.

Если это трудно понять, приведение конкретного примера из компонента, который вы пытаетесь стилизовать, было бы полезным.

3

Большое спасибо. Это, безусловно, помогает.

В качестве примера: у меня установлены темы Graceful. Graceful Theme — я теперь понимаю, что вы опубликовали их как продолжение предыдущего стиля.

В моём универсальном компоненте темы я делал такие вещи, как загрузка фоновых ассетов, изменение кнопки «Нравится» и ещё несколько других вещей. Однако я осознал, что хочу изменить цвет фона в версии с тёмной палитрой на любой другой, не затрагивая версию со светлой палитрой.

Если быть точным, вот это:

background-color: $primary-very-low;

Теперь я хочу сделать как можно больше в рамках одного компонента темы, поскольку технически это один и тот же стиль, пока не начали появляться такие мелочи, как эта, которые не являются универсальными изменениями. Я не хочу, если возможно, создавать отдельный компонент «Тёмный» и отдельный компонент «Светлый».

Цель здесь — оставить Graceful в покое, за исключением изменений палитры, и всё остальное делать в нашем собственном компоненте, чтобы при обновлении со стороны вас или кого-то ещё нам не приходилось постоянно заново применять наши правки.

Я заметил, что в Discourse активно используются переменные, что мне очень нравится; чтение руководств по темизации было настоящим удовольствием. Я увидел, что существуют конструкции вроде [data-topic-id=“117”], так что, возможно, стоит предложить что-то вроде [data-theme-id]?

4

@awesomerobot Также, чтобы избежать путаницы: я всё ещё привык называть полные темы стилями, поскольку мы всё ещё в процессе переноса нашего большого форума с другой платформы. Однако, когда я говорил о «стиле», я имел в виду «тему». Извините!