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

css
discourse
дизайн
(Евгений) #1

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

CSS

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

САЙТ/admin/customize/themes

themes
themes.gif1183x442 14.8 KB

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

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

themes-2
themes-2.gif1218x403 18.8 KB

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

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

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

themes-3
themes-3.gif1006x361 21.7 KB

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

.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 код, чтобы получить следующий элемент сайта?

footer
footer.gif1145x88 5.69 KB

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

САЙТ/admin/customize/themes

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

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

footer-2
footer-2.gif1169x386 33.3 KB

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

(Евгений) #3

С помощью CSS мы можем менять многое. Простой, тестовый пример (по нашим тегам):

@mixin fAwesome ($fa, $col) {
    &:link, &:visited, &.bullet::before {
        color: $col;
    }
    &.bullet::before { display: inline-block;
        content: $fa;
    }
}

.tag-функции-test { @include fAwesome("\f135", #000); }
.tag-телефон-test { @include fAwesome("\f17b", #2B6CC4); } 
 ... и т.д. ...

Получаем:

tags
tags.gif764x140 5.66 KB

(Виталий) #4

Баннеры из разделов (в разделы)

toxu-regulations
toxu-regulations.gif1193x358 17.6 KB

Этот класс используется только тут, обратите на это внимание:

body.category-toxu-regulations

В админ- интерфейс добавляем…

html
html.gif846x275 14 KB

html код:

<div class="custom-cat-header custom-cat-header-toxu-regulations">
    <a href="https://toxu.ru/c/toxu/regulations"><h1>Toxu правила</h1></a>
    <p>Официальная политика сайта. Правила, пояснения, нормы поведения, статьи и др.</p>
</div>

и соответствующую вкладку CSS код:

.custom-cat-header-toxu-regulations {display: none;}
body.category-toxu-regulations { overflow-x: hidden;
.custom-cat-header {background: #e7672e; display: block;	margin-left: -9999px!important;	padding-left: 9999px!important;
	margin-right: -9999px!important;padding-right: 9999px!important;text-align: center;margin-top: -18px;}
.custom-cat-header p {color: #fff; font-size:17px;padding-bottom: 10px;}
.custom-cat-header h1 {display: inline-block;margin-top: 20px;color: #fff;border-radius: 5px;width: inherit;}	
.category-heading {display: none;}
}

Готово. Наслаждаемся баннером в разделе…