(+ New topic) button on all pages

theme-component

(Joe) #1

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

Github repository link
https://github.com/hnb-ku/discourse-new-topic-button-theme-component

See it live on Theme Creator:

Screenshots:

Desktop:

Mobile:

Installation:

Follow the official guide for theme installation:

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.


Adding "+ New Topic" button on every page
Move create topic to the top
Tiles Image Gallery
How to create a new topic button with category and topic template
(Hakan) #3

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.


(Joe) #4

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


(Sam Saffron) #5

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


(Hakan) #6

İts okey problem solved bro.


(Southpaw) #7

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.


(Joe) #8

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.


(Southpaw) #9

:zap: Wow, that was fast!

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


(Charles Walter) #14

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


(Joe) #15

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.


(Charles Walter) #16

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)


(El Foro Viajero) #17

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!


(Daniela) #18

Use this code, changing the color obviously.

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

(Christoph) #19

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…


(Jeff Atwood) #20

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.


(Christoph) #21

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.


(El Foro Viajero) #22

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


(Daniela) #23

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 material-design-stock-theme/desktop.scss at master · 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.


(El Foro Viajero) #24

Thanks, sorry for the offtopicing :slight_smile:


(James) #25

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.