(+ New topic) button on all pages

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:

This component has 3 settings where you can choose the button icon, the button text, and whether or not to hide the default “New topic” button:

Credit

This is based on @techAPJ’s tutorial here:

And on @dalerka’s patch to make things work with newer versions of Discourse here:

I only put it all together and added the theme settings to make things simple.

53 Likes

When I click on the new topic link, it looks like I was on the main page while in the category. He does not automatically select the category itself.

the category I want to cover “Wiki”
but but the editor defaults to auto default category.

2 Likes

I agree @nothing the button should follow the default behaviour and pre-populate the category field with the appropriate category.

This is fixed now. Please update the theme.

While on category pages, the composer will match the category you’re on.

I also added a demo for the theme on Theme-Creator, check the OP

7 Likes

Note if you have a topic draft, head to a topic, reload, click new topic, you will remove the old draft, no easy way of fixing this now

5 Likes

İts okey problem solved bro.

1 Like

Hi @Johani,

Thank you for this component and for the update that assigns the new topic to the currently-viewed category.

Would you consider adding an additional theme setting to set a title attribute for the button?

Use case: Many of our users are not familiar with the concept of a peer to peer support model, and have expressed frustration at not knowing how to ask a question in our Community. They say they do not understand what “New Topic” means when all they want to do is ask a question. I’ve renamed this global instance of the button “Ask a question” but also like to title it with a friendly explanation that you’re publicly asking other users.

I have added the title manually, but have to add it again after each update. I can continue to do so, but thought I’d ask just in case this would also be useful to others.

2 Likes

You’re most welcome @Southpaw.

That’s probably a very common use case. So, like you suggested, I added a new setting for the button title.


It works like this:

  • it’s empty by default.
  • You can add whatever text you need.
  • If you choose to leave it empty, it will inherit its value from the the button text field.

Go ahead and update the theme and the new setting should be there right away.

Let me know if there’s anything else you need.

16 Likes

:zap: Wow, that was fast!

Thank you @Johani! It’s perfect! (Of course :smiley_cat:)

8 Likes

Hi. We have a tremendous number of users who come in from search engines. Is there a way that the button could detect the category of the topic, even if the user hadn’t visited the category?

Example popular topic

2 Likes

Sure, no problem :+1:

I pushed a small update and the button will now set the composer to the same category as the topic you’re viewing if you’re on a topic page.

Please update the component and let me know if you have any problems.

9 Likes

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)

4 Likes

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 Like

Use this code, changing the color obviously.

#new-create-topic {
    background-color: red;
}
3 Likes

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 Likes

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 Likes

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.

5 Likes

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 Stock Theme component? If so you need to copy and paste the part of CSS relative to the floating button (New Topic Fab) from https://github.com/discourse/material-design-stock-theme/blob/master/desktop/desktop.scss 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 Likes

Thanks, sorry for the offtopicing :slight_smile:

1 Like

Hey, I noticed i believe a padding problem with the topic button on mobile (or when the window is shrinked). This is experienced on Android and iOS, on Chrome and Safari.


EDIT: I believe this is caused because that extra padding is space reserved for text to go alongside the plus icon. The problem is that reserved padding doesn’t go away when you choose to not have any text.

5 Likes