Изменение дизайна в Discourse (Часть 1)

discourse
дизайн
css

(Евгений) #1

Управление дизайном в платформе Discourse может быть очень простым делом, если мы пользуемся уже имеющими механизмами. Давайте посмотрим, что мы можем сделать (под правами администратора) с сайтом.

CSS

Переходим по адресу:

САЙТ/admin/customize/themes

И наживаем на один из вариантов дизайна (в данном случае - Светлый).
Далее кнопку: Редактировать CSS/HTML

В открывшимся окне мы видим следующую картину:

Тут уже более понятно. Давайте в общем случае попробуем изменить какое-либо стиль на сайте (для этого дизайна, светлого).

Допустим, нас интересует цвет иконки в персональном меню. Сейчас она зеленая.

Смотрим исходный код страницы, определяем соотв. css стиль для этого элемента.

Копируем данный код, в нашем случае это:

.werng i.fa, #banner-nul i.fa {
        font-size: 1.3em;
        color: #8bc735; // это то, что нас интересует. Остальное лишнее.
        float: left;
        margin: -1px 5px 5px 0;
}

Видоизменяем и вставляем в окно редактора:

themes-4

После сохранения, мы видим изменение в этой части:

themes-5

Продолжение следует…


Изменение дизайна в Discourse (Часть 2) - Темы
(Андрей Белов) #2

Как добавить html код, чтобы получить следующий элемент сайта?

Переходим по адресу:

САЙТ/admin/customize/themes

Выбираем нужный нам “дизайн” и:

  1. добавляем html код во вкладку - 1.
  2. добавляем css код во вкладку - 2.

Это самый быстрый способ, он обычно используется “для отладки”. Хотя, многие пользуются им и на постоянной основе. Существуют и другие способы, например, через плагины, создание которых мы рассмотрим позже.