# Customize the New Topic button
**URL:** https://meta.discourse.org/t/customize-the-new-topic-button/197848
**Category:** Developers
**Tags:** how-to
**Created:** [July 22, 2021, 11:34am UTC](https://meta.discourse.org/t/customize-the-new-topic-button/197848 "2021-07-22T11:34:47Z")
**Posts on this page:** 12
**Page:** 1
### Author:  [@Don](https://meta.discourse.org/u/Don)
#### Post date: [July 22, 2021, 11:34am UTC](https://meta.discourse.org/t/customize-the-new-topic-button/197848/1 "2021-07-22T11:34:47Z")
Hello,
I just want to share with you how I make our new topic button. Little CSS 🙂
I use for this color variables. (`tertiary`, `secondary` and `primary-medium`)
**New Topic button**
**Open Draft button**
* * *
```scss
#create-topic {
color: var(--secondary);
border: 2px solid var(--tertiary);
background: var(--tertiary);
transition: background .25s ease-out;
.d-icon {
color: var(--secondary);
}
&:hover,
&:focus {
background: var(--secondary);
color: var(--tertiary);
.d-icon {
color: var(--tertiary);
}
}
&.open-draft {
background: var(--primary-medium);
border: 2px solid var(--primary-medium);
transition: background .25s ease-out;
&:focus,
&:hover {
background: var(--secondary);
color: var(--primary-medium);
border: 2px solid var(--primary-medium);
.d-icon {
color: var(--primary-medium);
}
}
}
}
```
* * *
Have a nice day! 🙂
---
### Author:  [@valsha](https://meta.discourse.org/u/valsha)
#### Post date: [September 9, 2021, 7:35am UTC](https://meta.discourse.org/t/customize-the-new-topic-button/197848/2 "2021-09-09T07:35:12Z")
before
after
nothing changed 🙅♂️
---
### Author:  [@Jagster](https://meta.discourse.org/u/Jagster)
#### Post date: [September 9, 2021, 7:52am UTC](https://meta.discourse.org/t/customize-the-new-topic-button/197848/3 "2021-09-09T07:52:29Z")
@valsha I’m just guessing but perhaps because that CSS-trick is changing hoover and you aren’t hoovering?
In general and the most of you know this, but changing hoover (and many other things) shows up only in systems that are using mouse. Not in mobiles - because there a user just poke a button 😉
---
### Author:  [@Jagster](https://meta.discourse.org/u/Jagster)
#### Post date: [September 9, 2021, 7:54am UTC](https://meta.discourse.org/t/customize-the-new-topic-button/197848/4 "2021-09-09T07:54:39Z")
I like the look of that button. How did you that?
And this is off topic big time… what tool are you using when recording/converting those gifs?
(Damn… did I push wrong reply button? So: @Don )
---
### Author:  [@Don](https://meta.discourse.org/u/Don)
#### Post date: [September 9, 2021, 8:38am UTC](https://meta.discourse.org/t/customize-the-new-topic-button/197848/5 "2021-09-09T08:38:34Z")
Hello,
It seems to this is the [Dracula Theme](https://meta.discourse.org/t/dracula-a-dark-theme-for-discourse/146350). I checked the source.
You have to add `button` before `#create-topic` to override it.
So it should start ⬇
`button#create-topic {`
If you want to keep the green `success` color then you should change the `var(--tertiary)` to `var(--success)`. Like this ⬇
```plaintext
button#create-topic {
color: var(--secondary);
border: 2px solid var(--success);
background: var(--success);
transition: background .25s ease-out;
.d-icon {
color: var(--secondary);
}
&:hover,
&:focus {
background: var(--secondary);
color: var(--success);
.d-icon {
color: var(--success);
}
}
}
```
---
### Author:  [@valsha](https://meta.discourse.org/u/valsha)
#### Post date: [September 9, 2021, 8:46am UTC](https://meta.discourse.org/t/customize-the-new-topic-button/197848/6 "2021-09-09T08:46:45Z")
> [@Jagster](#):
>
> I like the look of that button. How did you that?
Yes, this button from [Dracula Theme](https://meta.discourse.org/t/dracula-a-dark-theme-for-discourse/146350).
@Don as always, you are the savior 👍
---
### Author:  [@Jagster](https://meta.discourse.org/u/Jagster)
#### Post date: [September 9, 2021, 9:01am UTC](https://meta.discourse.org/t/customize-the-new-topic-button/197848/7 "2021-09-09T09:01:31Z")
And ladies & gents, that was a demonstration what happends when someone doesn’t think a bit what he (it is always he…) is doing. This time tagging a person wrongly and questioning at wrong place can be confusing. Thank god this is only topic of CSS/theme - not world peace, 42 or something else important 🤣
Actually I was wondering @Don’s button. But sure, that neon green is nice too 👍
---
### Author:  [@Usman\_Shahid](https://meta.discourse.org/u/Usman_Shahid)
#### Post date: [September 15, 2021, 6:59am UTC](https://meta.discourse.org/t/customize-the-new-topic-button/197848/8 "2021-09-15T06:59:42Z")
How are you changing the text from New Topic to Create a new Topic? @Don
---
### Author:  [@Don](https://meta.discourse.org/u/Don)
#### Post date: [September 15, 2021, 7:08am UTC](https://meta.discourse.org/t/customize-the-new-topic-button/197848/9 "2021-09-15T07:08:42Z")
Hello,
Visit `/admin/customize/site_texts` search for the text and change. 🙂
---
### Author:  [@Usman\_Shahid](https://meta.discourse.org/u/Usman_Shahid)
#### Post date: [September 15, 2021, 7:10am UTC](https://meta.discourse.org/t/customize-the-new-topic-button/197848/10 "2021-09-15T07:10:18Z")
Is this possible to do from within the theme itself?
---
### Author:  [@Usman\_Shahid](https://meta.discourse.org/u/Usman_Shahid)
#### Post date: [September 21, 2021, 7:05am UTC](https://meta.discourse.org/t/customize-the-new-topic-button/197848/11 "2021-09-21T07:05:17Z")
The way to do this via theme is to add a script which changes `I18n.translations` object.
---
### Author:  [@nathank](https://meta.discourse.org/u/nathank)
#### Post date: [June 10, 2025, 10:58pm UTC](https://meta.discourse.org/t/customize-the-new-topic-button/197848/13 "2025-06-10T22:58:15Z")
There is a Theme Component which allows you to customise the text, icon, and other related button behaviours easily now:
> [@Customize new topic button text](https://meta.discourse.org/t/customize-new-topic-button-text/269086):
>
> discourse2Summary Customize the new topic button per category or tageyeglassesPreview [Preview on Discourse Theme Creator](https://discourse.theme-creator.io/theme/Discourse/customize-new-topic-button)hammer_and_wrenchRepository [https://github.com/discourse/discourse-customize-new-topic-button-text](https://github.com/discourse/discourse-customize-new-topic-button-text)questionInstall Guide [How to install a theme or theme component](https://meta.discourse.org/t/how-do-i-install-a-theme-or-theme-component/63682)open_bookNew to Discourse Themes? [Beginner’s guide to using Discourse Themes](https://meta.discourse.org/t/beginners-guide-to-using-discourse-themes/91966) Install this theme component Features This theme component allows you to customize the New Topic…
It doesn’t allow you to change the button styling, but that could potentially be added I think.