New Topic Header Button

:discourse2: Summary New Topic Header Button adds a convenient ‘New Topic’ button to the header of all pages
:eyeglasses: Preview Preview on Discourse Theme Creator
:hammer_and_wrench: Repository https://github.com/discourse/discourse-new-topic-button-theme-component
:question: Install Guide How to install a theme or theme component
:open_book: New to Discourse Themes? Beginner’s guide to using Discourse Themes

Install this theme component

Features

A simple theme component to add the + New Topic button to the header. The button will show on every page - even inside topics.

Screenshots:

Desktop:

Mobile:

Settings:

Name Description
new topic button icon Choose an icon for the button. You can use any free FontAwesome 6 icon name like music or star .
new topic button text Enter the text you want the button to use. You can also leave this empty if you want to only use an icon.
new topic button title Enter the title you want the button to use. If this is left empy, the title will be the same as the button text
hide default button Hide the default “New topic” button in topic lists
show to anon Show the button to logged-out visitors, and have it redirect to login on click

:discourse2: Hosted by us? Theme components are available to use on our Standard, Business, and Enterprise plans.

Last edited by @ondrej 2025-03-11T23:18:53Z

Check documentPerform check on document:
57 лайков

Pretty awesome. Now we’re talking!

FYI, we pushed the button yesterday and it was our 2nd biggest day in registrations for the past 30 days. Not sure if it was coincidence or not, but I have a feeling it’s a good way to onboard new users. Will keep an eye on the metrics

(Realizing now it must have been a coincidence, because the button only appears for users who have already logged in. Nonetheless, activity does seem to be higher)

5 лайков

Hi,

Is it possible to change the color of the button, but not change the color of all buttons in the site?

If so, which is the css code for the button only?

thanks!

1 лайк

Use this code, changing the color obviously.

#new-create-topic {
    background-color: red;
}
3 лайка

Hm, how about showing the new topic button for everyone and make it act like the default Reply-to-topic button, i.e. as the user to login/sign up if they’re not logged in?

In fact, this might be something to consider for the default new topic button too, but I guess this feature would be most effective in this theme component…

4 лайка

Inviting every random visitor to create a new topic… will end in tears :sob:

Nothing kills a site quicker than a page full of low-value or gibberish topics.

7 лайков

Well, they can’t create that topic unless they sign up. And encouraging people to sign up is obviously a good thing (and is being done by default via the sign-up button and the reply-to-topic button). So I don’t really see why the new topic button should cause any problems.

6 лайков

Is it possible to hide the button on mobile but show the floating button?

To hide the button on mobile add

.header-buttons #new-create-topic {
    display:none;
}

in your mobile > CSS tab

The floating button you are referring is the one used on the Material Design Theme component? If so you need to copy and paste the part of CSS relative to the floating button (New Topic Fab) from material-design-stock-theme/desktop/desktop.scss at main · discourse/material-design-stock-theme · GitHub to your mobile > CSS tab (deleting the lines that start with @include [...]).

However your requests are going off topic, it’s better if you open another topic.

4 лайка

Thanks, sorry for the offtopicing :slight_smile:

1 лайк

Это хорошо, но с моей точки зрения есть два недостатка.
Во-первых, расположение кнопки в верхней панели. У нас там уже есть другие элементы, и это делает панель немного перегруженной.
Во-вторых, тот факт, что она отображается на каждой странице, даже там, где это выглядит не совсем логично (например, на странице моего профиля или в списке групп).
Основной сценарий использования с моей точки зрения — немного упростить пользователям задачу не писать офф-топические ответы при просмотре темы. Место, где я считаю её действительно необходимой и полезной, — это при просмотре темы/обсуждения, и в идеале я хотел бы, чтобы она отображалась как вверху (на одной линии с заголовком темы), так и внизу рядом с основной синей кнопкой «Ответить».
Компромиссным вариантом было бы показывать её в текущем положении, но только на страницах /t/xxx.
Возможно ли это?

Я не хочу отображать это на мобильных устройствах, как это сделать?

Также я хочу показывать это незарегистрированным пользователям; при нажатии на кнопку будет предложено войти в систему

Ох, облом. Не совсем понимаю, что имеется в виду под «неправильным положением» (на моём тестовом сайте всё выглядит нормально), но я думал, что кнопка будет работать, а теперь вижу, что это не так. Похоже, дело не так просто, как я предполагал. :frowning_face:

1 лайк

Создайте новый компонент темы и добавьте это во вкладку Mobile > CSS:

.mobile-view #new-create-topic {
    display:none
}
4 лайка

Отличная идея — ты это сделал?

Кто-нибудь может подсказать, какой CSS нужно использовать, чтобы кнопка «+ Новая тема» выглядела и работала точно так же, как цветная кнопка «Ответить» на моём сайте? (То есть в обычном состоянии, а также при наведении и при нажатии — активное состояние?)

Вот визуальное объяснение того, что я хочу сделать…

8 апреля 2020 года — запись Loom|видео

изменить его класс на btn-primary?
(не уверен, можно ли иметь два элемента btn-primary на странице)
Если вы хотите решение на чистом CSS, то изучите стилизацию синей основной кнопки (во всех её состояниях) и повторите их.

Спасибо за этот компонент, @Joe.
Он работает отлично, за одним небольшим исключением :slight_smile:
На мобильных устройствах у меня по-прежнему отображаются две кнопки: новая и стандартная + New Topic.

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


Теперь всё работает корректно как на настольных компьютерах, так и на мобильных устройствах, но было бы здорово, если бы ваш компонент сам решал эту проблему. Особенно учитывая, что если по какой-то причине администратор отключит ваш компонент, кнопка + New Topic вообще не будет отображаться.

4 лайка

@Johani Я сделал pull request с упомянутым выше изменением.

Не могли бы вы его посмотреть?

2 лайка

Спасибо за компонент! Я считаю, что всегда иметь возможность создать новую тему в заголовке — это хорошая идея. Но я столкнулся с одной деталью при реализации и хочу узнать, как другие решают эту проблему:

Сейчас компонент отражает категорию, в которой находится пользователь, и открывает редактор с этой категорией, уже заполненной. Однако он не учитывает, есть ли у пользователя права на запись в эту конкретную категорию. В результате редактор открывается с этой категорией (хотя пользователь не мог бы выбрать её вручную), и при попытке сохранить тему возникает ошибка.

Кнопка «Новая тема» по умолчанию решает эту проблему, отключаясь в таких категориях. Но, на мой взгляд, копировать такое поведение было бы не очень интуитивно, ведь идея кнопки в заголовке — предоставить глобальный доступ к созданию новых тем. Тогда было бы странно, если бы она иногда не работала.

Какой может быть хороший общий подход к этому? Или как другие, использующие этот компонент, решают эту задачу? Может, просто отказаться от автоматического заполнения?

3 лайка