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

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

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

CSS

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

САЙТ/admin/customize/themes

themes
themes.gif1183×442 14.8 KB

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

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

themes-2
themes-2.gif1218×403 18.8 KB

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

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

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

themes-3
themes-3.gif1006×361 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.gif1145×88 5.69 KB

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

САЙТ/admin/customize/themes

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

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

footer-2
footer-2.gif1169×386 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.gif764×140 5.66 KB

(Виталий) #4

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

toxu-regulations
toxu-regulations.gif1193×358 17.6 KB

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

body.category-toxu-regulations

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

html
html.gif846×275 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;}
}

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

(Евгений) #5

Изменение раздела с категориями…

1
1.jpg1174×664 43.6 KB

Это не должно представлять проблему, если вы знаете css.

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

Я размещаю код для изменения тут, но необходимо учитывать, что прошло уже достаточно много времени с тех пор. И страница с разделами была значительно переделана. Например, были добавлены боксы.

body {
    font-family: 'Source Sans Pro', Helvetica, Arial, sans-serif;
}

.navigation-categories {
    

.categories-and-latest div.column.categories {
    min-width: 300px;
}
.categories-and-latest div.column:not(.categories) {
    flex: 4;
    min-width: 320px;
}

.category-description, .category-list tr .topics {
    display: none;
}
.category-list tr {
    border: none !important;
    margin: 6px;
    border-radius: 8px;
}
.category-text-title .category-name {
    margin-left: 0;
    font-size: 1.15rem;
    color: #333;
}
.category-text-title {
    margin-left: 12px;
}
.category-list tr .category {
    display: flex;
    text-align: left;
    align-items: center;
}
.category-list .category-logo {
    width: 44px;
    height: 44px;
    float: none;
    margin: 0;
}
.category-list tbody .category h3 {
    font-size: 1.3195em;
    line-height: 1.2;
}
.category-list tbody .category-title-link {
    display: flex;
    align-items: center;
    flex-direction: row-reverse;
}
.category-list td {
    padding: 12px 0 0;
        padding-left: 0px;
}
.category {
    border: none !important;
}

}


.category-heading {
    display: flex;
    align-items: center;
    margin-bottom: 2rem;
}
.category-heading p {
    font-size: 1em;
    margin: 0;
    max-width: 36em;
}
.category-heading img {
    width: 50px;
    height: 50px;
    margin-bottom: 0;
    margin-right: 1.1rem;
}

Тем не менее, данный код может быть полезен, если кто-то хочет начать менять дизайн раздела, “не с пустого места”.

Нет нужды хранить наработки, если они где-то пылятся и не работают. Иногда люди нуждаются в (очень простых для одних) таких вещах.