Внесение пользовательских изменений CSS на вашем сайте

[Discourse]

Это руководство объясняет, как вносить изменения CSS на вашем сайте Discourse, включая введение в CSS, место для добавления CSS в Discourse и способы поиска правильных селекторов с помощью инструментов инспекции браузера.

Требуемый уровень пользователя: Администратор

Краткое содержание

Это руководство охватывает:

1. Краткое введение в CSS и ключевые концепции
2. Как добавить CSS на ваш сайт Discourse с помощью компонентов тем
3. Использование инструментов инспекции браузера для поиска правильных CSS-селекторов

Основы CSS

CSS означает каскадные таблицы стилей (Cascading Style Sheets). Вот три ключевых концепции, которые нужно понять:

1. Структура: Правило CSS состоит из селектора, свойства и значения.

p {
  color: red;
}

• Селектор: p (нацеливается на все HTML-теги <p>)

• Свойство: color

• Значение: red

  

2. Каскад: Последнее примененное правило имеет приоритет. Например:

p {
  color: red;
}
p {
  color: green;
}

Параграфы будут зелеными, так как это последнее примененное правило.

3. Специфичность: Более специфичные правила переопределяют менее специфичные. Например:

div p {
  color: green;
}
p {
  color: red;
}

Параграфы внутри div останутся зелеными, потому что div p более специфичен, чем p.

Добавление CSS на ваш сайт Discourse

Чтобы добавить CSS на ваш сайт Discourse:

1. Перейдите в Внешний вид > Темы и компоненты из боковой панели навигации администратора и откройте вкладку Компоненты. (Или перейдите по этой ссылке для вашего сайта: https://yoursite.com/admin/config/customize/components)

   

2. Нажмите Установить, затем Создать новый

   

3. Дайте имя вашему компоненту темы и нажмите Создать

   

4. Выберите тему (темы), к которой будет применяться компонент, и нажмите зеленую галочку, чтобы сохранить выбор

   

Если у вас несколько тем, выбираемых пользователями, убедитесь, что вы добавили компоненты темы ко всем соответствующим темам.

5. Нажмите Редактировать код

   

6. Добавьте ваш CSS на вкладку CSS

   

7. Нажмите “Сохранить”, чтобы применить изменения.

   

Поиск правильных CSS-селекторов

Используйте инструменты инспекции браузера для поиска правильных CSS-селекторов:

1. Щелкните правой кнопкой мыши по элементу, который хотите изменить.

2. Выберите “Просмотреть код” (Inspect) в контекстном меню.

   

3. В панели инструментов разработчика найдите селекторы элемента.

   

4. Щелкните соответствующие селекторы и добавьте ваше правило CSS.

   

5. Скопируйте правило, вставьте его в раздел CSS вашего компонента темы и удалите конфликтующие правила.
   

   

Для более специфичных селекторов может потребоваться скопировать селектор, используемый в существующих стилях Discourse, и изменить его в вашем компоненте темы.

Вот видео, демонстрирующее описанные выше шаги:

Устранение неполадок

Если ваши изменения не применяются, убедитесь, что:

• Компонент темы включен во всех соответствующих темах
• Ваше правило CSS достаточно специфично, чтобы переопределить существующие стили

Дополнительные ресурсы

• Документация MDN по CSS
• Документация Chrome DevTools
• Freecodecamp
• Руководство для начинающих по использованию тем Discourse

[bloomexperiment (Tracey)]

Можно ли сделать это вики? Информация под заголовком «Где мне добавить мой CSS?» требует обновления, поскольку кнопки Изменить CSS/HTML больше нет, если вы установили существующую тему — что сейчас вероятно, если кто-то выбрал тему через новый Мастер настройки. Теперь мы просто используем компоненты темы, которые будут добавляться к существующим темам.

https://meta.discourse.org/t/make-css-changes-on-your-site/168101#where-do-i-add-my-css-5

Я могу обновить её, как только она станет вики.

[bloomexperiment (Tracey)]

Готово

[dontdieych (YCH)]

Спасибо. Благодаря этой части я наконец получил желаемый ответ.

Мне требовался экземпляр Discourse для различных личных нужд, поэтому несколько дней назад я установил его на VPS.

Цвет текста в прочитанных темах был слишком бледным, поэтому я искал решение. Я не знал, что в разделе «Компонент» есть настройка пользовательского CSS.

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

.topic-list-item.visited a.title:not(.badge-notification),
.latest-topic-list-item.visited a.title:not(.badge-notification),
.category-topic-link.visited a.title:not(.badge-notification),
{
  color: #000000;
}