Настройка дизайна Discourse

discourse
css

(Евгений) #1

12 апреля добавлена очень важная функция. Возможность выбора участниками дизайна и цветовой гаммы сайта.

Что касаемо пользователей, то настройка дизайна есть в Профиле (в самом низу). На данный момент доступно 2 темы: светлая (по умолчанию) и темная.

13 апреля добавлена Стандартная (форумная) тема:

А вот что касаемо администрации, то установка дизайна под пользователей, группы и т.д. достаточно просто. Для этого надо перейдите в соотв. раздел и настройте выбранные Темы:

Обсуждение новых вариантов дизайна в этой ветке:
http://toxu.ru/t/izmeneniya-vneshnego-vida-toxu/81?u=evg


(Виталий) #2

Выбор дизайна дневной-ночной режим, удивительная вещь!

Но я думаю, будет проще с позиции UI, что бы выбор дизайна, а особенно дневной-ночной можно было бы вывести куда нибудь в более доступное место.


(Евгений) #3

Тут вообще все просто. Скажем я сейчас, для примера, выделил вопросы в категории Toxu.
Не долго думая, просто CSS

.category-toxu a.title:after {
  display: inline-block;
  font-family: FontAwesome;
  font-style: normal;
  font-weight: normal;
  line-height: 1;
  -moz-osx-font-smoothing: grayscale;
  content: "\f02e";
  margin-right: 3px
}

Меняю иконку (f02e) и добавляя color.


(Виталий) #4

Если кто хочет добавить иконку рядом с поиском в шапке сайта

<script type="text/discourse-plugin" version="0.4">
api.decorateWidget('header-icons:before', helper => {
    return [
        helper.h('li', [
            helper.h('a#google-button.icon', {
                href: 'https://www.google.com/',
                title: 'Google'
            }, helper.h('i.fa.fa-google.google-button-icon')),
        ]),
        helper.h('li', [
            helper.h('a#fancy-button.icon', {
                href: 'https://www.fancy.com/',
                title: 'Fancy'
            }, helper.h('i.fa.fa-hand-spock-o.fancy-button-icon')),
        ])
    ];
});
</script>

(Евгений) #5

Настройка отображений подкатегорий.
Необходимо включить отображение в админ- панели. В css сайта внести:

.category-internet .category-boxes {
  .category-box, .category-box-inner {
    border: none;
  }
  .category-box-heading {
    padding: 0;
    border-radius: 3px;
    img.logo { display: none; }
    h3 { padding: 1em 0; }
  }
  .category-box-discourse {
    .category-box-heading      { background-color: #BF1E2E; }
    .category-box-heading > h3 { color: white; }
  }
  .category-box-sites {
    .category-box-heading      { background-color: #0E76BD; }
    .category-box-heading > h3 { color: white; }
  }
  .category-box-programming {
    .category-box-heading      { background-color: #D7BB2F; }
    .category-box-heading > h3 { color: white; }
  } }

Не забывая о изменение данных на свои значения. Получаем:


(Евгений) #6

Приватные сообщения, почта другими словами выглядит как и обычные сообщения в вопросе. В пользовательские css настройки темы/стиля можно добавить ниже приведенный код.

.archetype-private_message .d-header {
  background-color: #d6f0d6 
}
.archetype-private_message #topic-title h1 a, 
.archetype-private_message .extra-info-wrapper h1 a,
.archetype-private_message .private-message-map h3,
.user-menu .notifications .fa-envelope-o,
.private-message-glyph {
  color: #306f30 
}
.private-message-glyph {
  font-size: 30px; margin-right: 10px; margin-left: 10px;
}
.archetype-private_message #topic-footer-buttons button.create,
.archetype-private_message #reply-control .btn-primary {
color: white; background-color: #306f30
}
#main-outlet > .private_message #topic { 
  background-color: #f0fff0;
}
.archetype-private_message .private-message-map h3:after {
  content: " (Private)";
} 
.archetype-private_message .topic-post button.create:after,
.archetype-private_message #topic-footer-buttons button.create:after,
.archetype-private_message #reply-control .btn-primary:after {
  content: " Privately";
}
.archetype-private_message #suggested-topics,
.archetype-private_message .topic-map ul:first-child,
.archetype-private_message .topic-map nav.buttons { 
    display: none; 
}

Результат:


(Евгений) #7

Добавление кнопок (соц. сетей) для публикации вопроса в социальные сети.

<script type="text/discourse-plugin" version="0.4">

 api.decorateWidget('topic-map:before', dec => {
     
 const link = window.location.href;
 const urlfb = "http://www.facebook.com/sharer.php?u=" + encodeURIComponent(link);
 const urltw = "http://twitter.com/share?url=" + encodeURIComponent(link);
 const urlok = "http://www.ok.ru/dk?st.cmd=addShare&st.s=1&st._surl=" + encodeURIComponent(link);
 const urlvk = "https://vk.com/share.php?url=" + encodeURIComponent(link);

 return dec.rawHtml(`

<div class="shar"><a class="fb" href="${urlfb}" target="_blank"><i class="fa fa-facebook-square fa-lg" aria-hidden="true"></i></a>
<a class="tw" href="${urltw}" target="_blank"><i class="fa fa-twitter-square fa-lg" aria-hidden="true"></i></a>
<a class="ok" href="${urlok}" target="_blank"><i class="fa fa-odnoklassniki-square fa-lg" aria-hidden="true"></i></a>
<a class="vk" href="${urlvk}" target="_blank"><i class="fa fa-vk fa-lg" aria-hidden="true"></i></a>

</div>`);

});
</script>

Стили могут быть любыми, например:

.shar {
  display:block;
  width:30px;
  height:150px;
  position:fixed;
  left:0;
  top:200px;
  z-index: 99999;
    
}
.shar a{color: #999; padding: 5px; display: block; opacity: 0.4;}
.shar a:hover{color: #666;opacity: 1;}

Как будет выглядеть:

Код можно расположить в плагине, или как сделал сейчас (удобно для отладки) в админ. интерфейсе.