New Topic Header Button

[jrgong]

I guess best behaviour would be to start the composer with empty category if the user does not have the permission to create new topic in the current one? Potentially with a modal and a notice about such.

[lollop]

@tophee

@codinghorror

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

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.

I wanted to have this functionality as well so I forked the repo and made it show the “New Topic” button to anonymous as well as logged in users. If an anonymous user clicks the button, they get redirected to the login/signup modal.

Repo: GitHub - Peterlollo/discourse-new-topic-button-for-all-users-theme-component: Adds new topic button to header and shows it to every user regardless of logged in status

[nolo (Manuel)]

There’s some outdated class names, so the styles don’t show as intended. Added a pr to update them: FIX: update declarations by nolosb · Pull Request #6 · discourse/discourse-new-topic-button-theme-component · GitHub

[kuaza]

Is it possible to update this plugin to the new version?

[awesomerobot (Kris)]

I’ve just merged a refactor of this component so it will work with these updates: Upcoming Header Changes - Preparing Themes and Plugins

The component should function as it did before, with some small enhancements (it will reflect draft state and react to the current category and tag permissions). If you notice any new issues please let us know.

[awesomerobot (Kris)]

@lollop

I wanted to have this functionality as well so I forked the repo and made it show the “New Topic” button to anonymous as well as logged in users. If an anonymous user clicks the button, they get redirected to the login/signup modal.

I’ve just added a new show_to_anon setting (disabled by default) that will do this.

[jrgong]

How “feasible” would it be to add a dropdown menu just like in nolo’s dropdown wizard component?

Since we are using the custom wizard to create new topics in specific categories, we would like to basically link those in the dropdown menus. In addition we would also like to add some staff-only links (such as “New category” and “New group”) to the button.

[patrickemin]

Hi, I have been unable to use the “pencil” fontawesome free icon in this component even after adding it to the “svg icon subset” settings. Any idea?

[Moin]

@patrickemin

“pencil” fontawesome free icon

I don’t think there is a free pencil icon in version 5

Custom user menu tab

We’re not on Font Awesome 6 yet, so you’ll need to search the version 5 set for available icons here: Find the Perfect Icon for Your Project in Font Awesome 5 | Font Awesome It looks like that icon was renamed shop in version 6, but it did exist in version 5 with a different name: store-alt. So if you update additional icons and custom tab icon to use store-alt it should work!

I think it’s the same for pencil in v5 it’s pencil-alt

[patrickemin]

@Moin

I think it’s the same for pencil in v5 it’s pencil-alt

Thanks ! It works !

[David_Ghost]

Hey,

Is it possible to update the TC with the new draft update?

Thank you

[alltiagocom]

Request: add an option to define the colors of the button (background, text + icon) for both a light and dark theme. Since new topics are part of growing a community, having a colored button has more impact.

Thanks

[Canapin (Coin-coin le Canapin)]

It’s quite easy to do with CSS:

New Topic Header Button

Use this code, changing the color obviously. #new-create-topic { background-color: red; }

(you can target dark and light themes with CSS)

---

edit: adding a proper example

#new-create-topic {
    background-color: light-dark(red,green);
}

Will set the button’s color to red on a light theme, and green on a dark theme.

[alltiagocom]

I’m still not familiar with CSS in Discourse. I’m familiar with CSS, but I just haven’t started exploring it inside Discourse.
How/where do I add that?

I still think that this could be a feature to avoid adding more complexity and for people who are not familiar with CSS at all, it just makes the component easier to customize.

[Canapin (Coin-coin le Canapin)]

@alltiagocom

How/where do I add that?

Either on your theme(s) or a new theme component – which then must be included in your theme(s):

I’ve added the CSS code in my post above.

[alltiagocom]

I was also testing :hover and it works for the button and text, but not the icon, unless I hover over the icon itself. Do you know how to target the icon on hover over the button, even if the mouse is not on top of the icon?

#new-create-topic:hover {
    background-color: light-dark(red,red);
    color: light-dark(red,white);
}

#new-create-topic .d-icon:hover {
    color: light-dark(red,white);
}

[Canapin (Coin-coin le Canapin)]

Your 2nd rule means that you’re targeting the icon when you hover the icon, not the button.

Using the SCSS syntax, which

#new-create-topic:hover {
    background-color: light-dark(red,red);
    color: light-dark(red,white);
}
#new-create-topic:hover .d-icon {
    color: light-dark(red,white);
}

(also there’s no need for light-dark(red,red); if you use the same color for light and dark)

I'd recommend SCSS since it’s easier to tidy up our nifty code, but that's something new to learn 😄

#new-create-topic:hover {
    background-color: light-dark(red,red);
    .d-icon, & {
        color: light-dark(red,white);
    }
}

[alltiagocom]

@Canapin

Your 2nd rule means that you’re targeting the icon when you hover the icon, not the button.

You’re right. My bad… Thanks!

@Canapin

also there’s no need for light-dark(red,red); if you use the same color for light and dark

These are just tests. I’m actually using the Default theme and I don’t know if that theme has both options?

Regarding SCSS, I learned it a few years ago, but it was something I never really used since I’m not a developer. I use HTML and CSS quite often, so I’m a bit more familiar with those 2.