Изменения в Discourse

css
discourse

(Герман) #1

Начнем пожалуй с внешнего вида. В админ интерфейсе найдите:
Настройки - Оформление

admin/customize/colors

Отдельно настраивается всё это дело и для моб. версии.


(Евгений) #2

Самый простой способ изменения, можно добавить в разделе Оформление
Пример изменение кнопки Задать вопрос.

//New Topic Fab
#create-topic.btn-default {
    border-radius: 40px;
    position: fixed;
    bottom: 30px;
    right: 50px;
    z-index: 999;
    padding: 24px 20px 22px 5px;
    background-color: $tertiary; 
    color: $tertiary; 
    white-space: nowrap;
    text-indent: 10px;
    -webkit-box-shadow: 0 0 4px rgba(0,0,0,0.14),0 4px 8px rgba(0,0,0,0.28);
    -moz-box-shadow: 0 0 4px rgba(0,0,0,0.14),0 4px 8px rgba(0,0,0,0.28);
    box-shadow: 0 0 4px rgba(0,0,0,0.14),0 4px 8px rgba(0,0,0,0.28);
    overflow: hidden;
    width: 63px;
    height: 63px;
    -webkit-transition: right .5s, bottom .5s, border-radius .5s, text-indent .2s, visibility 1s, width .2s ease, height .5s ease .4s, color .5s, background-color 2s, -webkit-transform .5s;
    transition: right .5s, bottom .5s, border-radius .5s, text-indent .2s, visibility 1s, width .2s ease, height .5s ease .4s, color .5s, background-color 2s, transform .5s;
}

#create-topic.btn-default .fa-plus {
    color: white;
}

#create-topic.btn-default:hover {
    text-indent: 8px;
    width: 190px;
    color: white;
}

(Евгений) #3

Как добавить в меню новые пункты?
Этот пример полезен, что бы понять, как можно с лёгкостью менять дизайн в Discourse.

В админ разделе:
Настройки - Оформление (добавляем).

CSS

div#top-navbar {
max-width: none;
width: auto;
z-index: 1040;
position: fixed;
top: 0;
left: 69%;
}
span#top-navbar-links {
display: block !important;
margin: 22px 0 0 0;
}
a.dow-menu{color:#f36322;font-size: 1.143em;}

Заголовок

<div id="top-navbar" class="container">
<span id="top-navbar-links" style="display:none;">
<a href="http://toxu.ru/faq" class="dow-menu" id="home">FAQ</a></span>
</div>

Результат получится такой:

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

<script>
  Discourse.ExternalNavItem = Discourse.NavItem.extend({
    href : function() {
      return this.get('href');
    }.property('href')
  });
  I18n.translations.en.js.filters.faq = { title: "Помощь", help: "FAQ" };
  Discourse.NavItem.reopenClass({
    buildList : function(category, args) {
      var list = this._super(category, args);
      if(!category) {
        list.push(Discourse.ExternalNavItem.create({href: '/faq', name: 'faq'}));
      }
      return list;
    }
  });
</script>

Результат: