Изменить кнопку «+ New Topic», чтобы она соответствовала стилю кнопки «Reply»

Поддержка
1

Мне нравится стиль кнопки «Ответить», которая использует цвет «Третичный», как определено в разделе /admin/customize/colors (Палитры цветов/выбор).

image
image694×920 133 KB

Я бы хотел, чтобы наша кнопка «Новая тема» соответствовала стилю кнопки «Ответить», как показано в этом видео:

2

Вы можете попробовать взять CSS-стили кнопки ответа и перенести эти свойства на кнопку «Добавить пост»:

css
css1465×827 114 KB

background: #00a3cc;
color: #fff;

Попробуйте добавить следующее:

 .header-buttons .btn.btn-default {
      background: #00a3cc;
      color: #fff;
  }

  .header-buttons .btn.btn-default svg {
      color: #fff !important;
  }

Далее вам нужно добавить CSS-стили для состояния :hover (наведение курсора):

  .header-buttons .btn.btn-default:hover {
      background: #***;
  }

Подберите нужные цвета более точно. Замените *** на желаемый цвет.

Как добавить CSS в Discourse:

Вы можете сделать это для любой части CSS.

3

Отличный ответ!!! Большое спасибо!

Можно ещё один совет по CSS… как лучше минифицировать эти два фрагмента кода?:

Изменение цвета кнопки [+ Создать тему] в заголовке

Эта кнопка в заголовке появилась благодаря теме (+ Создать тему) на всех страницах

.header-buttons .btn.btn-default {
      background: #00ccff;
      color: #fff;
      font-weight: 600;
  }
.header-buttons .btn.btn-default svg {
      color: #fff !important;
  }
.header-buttons .btn.btn-default:hover {
      background: #00a3cc;
  }

Изменение цвета кнопки [+ Создать тему] на страницах категорий и тегов

button#create-topic {
      background: #00ccff;
      color: #fff;
      font-weight: 600;
  }
button#create-topic svg {
      color: #fff !important;
  }
button#create-topic:hover {
      background: #00a3cc;
  }
4

Свернуть? Я не уверен насчет перевода, приношу извинения. Попробуйте объединить это:

.header-buttons .btn.btn-default, .header-buttons .btn.btn-default svg {
      background: #00ccff;
      color: #fff !important;
      font-weight: 600;
  }
.header-buttons .btn.btn-default:hover {
      background: #00a3cc;
}

Или

#new-create-topic, #new-create-topic svg {
    background: #00ccff;
    color: #fff !important;
    font-weight: 600;
}

#new-create-topic:hover {
    background: #00a3cc;
}

Я вижу, что там есть id (new-create-topic), не знаю, насколько он уникален. Попробуйте использовать это (я не проверял).

На самом деле вариантов много.

Используйте:

  • .header-buttons
  • button
  • #new-create-topic

css
css868×120 14.7 KB

Любую их комбинацию…

5

Спасибо за попытку помочь сократить код. Когда я попробовал несколько комбинаций, подобных тем, что вы предложили, получалось вот что… (обратите внимание на знак плюс)

hoverstate

На данный момент я просто решил оставить два фрагмента кода, и всё отлично!! Ещё раз спасибо, @Stranik

6

Мы не установили CSS для иконки при наведении:

#new-create-topic:hover, #new-create-topic:hover > svg {
    background: #00a3cc;
}

Возможно, стоит попробовать так. Иногда проще сделать это локально и посмотреть результат. :slightly_smiling_face:

Вы можете смело пробовать разные варианты, комбинировать их. Есть большое поле для творчества. Удачи!