# Discourse Button Styles
**URL:** https://meta.discourse.org/t/discourse-button-styles/88154
**Category:** Theme component
**Created:** [May 22, 2018, 3:38pm UTC](https://meta.discourse.org/t/discourse-button-styles/88154 "2018-05-22T15:38:29Z")
**Posts on this page:** 20
**Page:** 1
### Author:  [@awesomerobot](https://meta.discourse.org/u/awesomerobot)
#### Post date: [May 22, 2018, 3:38pm UTC](https://meta.discourse.org/t/discourse-button-styles/88154/1 "2018-05-22T15:38:29Z")
This theme component includes basic settings for changing button colors without writing CSS.
[Github repo](https://github.com/awesomerobot/discourse-button-styles): `https://github.com/awesomerobot/discourse-button-styles`
Installation: [Installing a theme or theme component](https://meta.discourse.org/t/how-do-i-install-a-theme-or-theme-component/63682)
Preview: [Example of what you can style with the settings in this theme](https://theme-creator.discourse.org/theme/awesomerobot/button-styles)
What the settings look like:
There are 6 button sets that can be styled in this component, along with a global style for adding rounded corners to all buttons (border-radius):
- basic buttons
- primary buttons
- header buttons
- nav pills
- post controls
- editor buttons
For advanced button styling you may also consider looking at the `common.scss` file as a starting point for your custom CSS. In the future I’ll be using what I learned here to reduce the number of CSS styles required to style buttons in Discourse (and I’ll maintain/simplify this theme as I go).
---
### Author:  [@BlackKnob](https://meta.discourse.org/u/BlackKnob)
#### Post date: [May 22, 2018, 5:18pm UTC](https://meta.discourse.org/t/discourse-button-styles/88154/2 "2018-05-22T17:18:15Z")
this is great. I hope it becomes a part of the core color schemes eventually.
---
### Author:  [@Watercolor\_Games](https://meta.discourse.org/u/Watercolor_Games)
#### Post date: [May 22, 2018, 6:14pm UTC](https://meta.discourse.org/t/discourse-button-styles/88154/3 "2018-05-22T18:14:05Z")
Definitely putting this on my install. I want my Discourse to mimic the UI color scheme of the game it’s for.
---
### Author:  [@itsbhanusharma](https://meta.discourse.org/u/itsbhanusharma)
#### Post date: [May 23, 2018, 5:48am UTC](https://meta.discourse.org/t/discourse-button-styles/88154/4 "2018-05-23T05:48:00Z")
Hey @awesomerobot Is there a way to either hide or make these borders round as well?
---
### Author:  [@Heather\_Dudley](https://meta.discourse.org/u/Heather_Dudley)
#### Post date: [May 23, 2018, 7:03pm UTC](https://meta.discourse.org/t/discourse-button-styles/88154/5 "2018-05-23T19:03:39Z")
This is fantastic! This has been my primary complaint with the CSS editing through the interface; my CSS knowledge is ancient and has decayed into unusability, and as such I can’t do anything outside of the admin interface. I’m building a custom theme for my site, but it’s literally got to be through the interface or I can’t. This is tremendously helpful, and I’m installing it now.
---
### Author:  [@Heather\_Dudley](https://meta.discourse.org/u/Heather_Dudley)
#### Post date: [May 23, 2018, 8:30pm UTC](https://meta.discourse.org/t/discourse-button-styles/88154/6 "2018-05-23T20:30:43Z")
@awesomerobot So after playing around with this, and dealing with a few issues (what do you mean, hex codes need a hash?) I’m really, really loving how easy it is.
The Pill Nav section is confusing though.
It’s changing the hover for the “Latest” and “Top” in my screen, but not for the “Categories” button. Is this because in this screen, Categories is considered already hovered? Just trying to understand.
---
### Author:  [@awesomerobot](https://meta.discourse.org/u/awesomerobot)
#### Post date: [May 23, 2018, 9:09pm UTC](https://meta.discourse.org/t/discourse-button-styles/88154/7 "2018-05-23T21:09:59Z")
> [@Heather\_Dudley](#):
>
> Is this because in this screen, Categories is considered already hovered? Just trying to understand.
Yes, by default I made the “hover” state and the “current page” state use the same colors, I figured it would be two fewer options to configure. I could add a “current page” styling option for the nav pills if you want (I was on the fence about it when I created the theme anyway).
---
### Author:  [@Heather\_Dudley](https://meta.discourse.org/u/Heather_Dudley)
#### Post date: [May 23, 2018, 9:18pm UTC](https://meta.discourse.org/t/discourse-button-styles/88154/8 "2018-05-23T21:18:07Z")
That would be awesome, yes.
I want to reiterate how incredibly helpful this addition is. You’re a lifesaver for sure.
Now, if I can figure out how to configure text for categories and visited links so that I can actually SEE them (that light grey on a blue background is hard to see!)
---
### Author:  [@awesomerobot](https://meta.discourse.org/u/awesomerobot)
#### Post date: [May 23, 2018, 9:23pm UTC](https://meta.discourse.org/t/discourse-button-styles/88154/9 "2018-05-23T21:23:45Z")
> [@itsbhanusharma](#):
>
> Hey @awesomerobot Is there a way to either hide or make these borders round as well?
Is that the outline your browser adds when a button is focused (usually by navigating with tab)? If so, unfortunately that uses the `outline` property, which can’t be rounded.
It’s possible to hide `outline` and use `box-shadow` or `border` instead for the active state… but there’s a potential it would clash with existing `box-shadow`/`border ` settings someone may have on buttons, and even impact the layout a little… so I don’t plan on trying that here in the near future.
---
### Author:  [@awesomerobot](https://meta.discourse.org/u/awesomerobot)
#### Post date: [May 23, 2018, 10:54pm UTC](https://meta.discourse.org/t/discourse-button-styles/88154/10 "2018-05-23T22:54:16Z")
If you update your theme you should see `nav pill text active` and `nav pill bg active` options available now.
---
### Author:  [@Heather\_Dudley](https://meta.discourse.org/u/Heather_Dudley)
#### Post date: [May 24, 2018, 12:18am UTC](https://meta.discourse.org/t/discourse-button-styles/88154/11 "2018-05-24T00:18:46Z")
Awesome, got it! Thank you!
---
### Author:  [@chrismalone](https://meta.discourse.org/u/chrismalone)
#### Post date: [June 3, 2018, 10:43am UTC](https://meta.discourse.org/t/discourse-button-styles/88154/12 "2018-06-03T10:43:41Z")
Would there ever be a way to target certain buttons? Like the Add Topic button. Or the Reply button.
---
### Author:  [@chrismalone](https://meta.discourse.org/u/chrismalone)
#### Post date: [June 3, 2018, 10:44am UTC](https://meta.discourse.org/t/discourse-button-styles/88154/13 "2018-06-03T10:44:19Z")
I really like this component, by the way.
---
### Author:  [@bts](https://meta.discourse.org/u/bts)
#### Post date: [June 21, 2018, 9:59pm UTC](https://meta.discourse.org/t/discourse-button-styles/88154/14 "2018-06-21T21:59:34Z")
Hey @awesomerobot looks cool! Related to this I have some quick feedback based on my experience adding custom button styles to our theme at [https://forum.troygrady.com/](https://forum.troygrady.com/)
We added rounded corners on all our buttons. And along with this, we changed some spacing / grouping of the buttons. For example our main homepage buttons look like this:
(NB: we think categories makes sense separate since it’s more a different view vs. a way of filtering the topics list.)
This looks good for the most part. Except when there are no “new” or “unread”, it looks like this:
We got the first button in the group here using:
```plaintext
.nav-pills>li:first-child
```
But tricky getting the last one in that group since the # of buttons changes. If there were a way to have the `/new` and `/unread` buttons removed from the DOM rather than hidden in such cases, then I could target these more consistently e.g. target `/top` using:
```plaintext
.nav-pills>li:nth-last-child(2)
```
Pretty minor but figured this was as good a spot as any to chime in w/ some CSS button detail!
---
### Author:  [@TheBestPessimist](https://meta.discourse.org/u/TheBestPessimist)
#### Post date: [June 22, 2018, 2:49pm UTC](https://meta.discourse.org/t/discourse-button-styles/88154/15 "2018-06-22T14:49:22Z")
@bts the buttons look really really nice. When you finish all the customization, do you think you could make a theme out of this?
---
### Author:  [@bts](https://meta.discourse.org/u/bts)
#### Post date: [June 22, 2018, 3:51pm UTC](https://meta.discourse.org/t/discourse-button-styles/88154/16 "2018-06-22T15:51:31Z")
Thanks! Can definitely consider it at some point if we find the time. In the meantime feel free to send me a note, happy to answer questions about how we achieved specific elements 🙂
---
### Author:  [@TheBestPessimist](https://meta.discourse.org/u/TheBestPessimist)
#### Post date: [June 22, 2018, 4:53pm UTC](https://meta.discourse.org/t/discourse-button-styles/88154/17 "2018-06-22T16:53:32Z")
Thanks for the offer but I’m not going to delve into “hand-made” css customization. That’s definitely not something i’m comfortable with.
This is the reason i asked for a theme whenever it will be finished 😊
---
### Author:  [@bts](https://meta.discourse.org/u/bts)
#### Post date: [June 22, 2018, 5:34pm UTC](https://meta.discourse.org/t/discourse-button-styles/88154/18 "2018-06-22T17:34:41Z")
Gotcha. I could think about modularizing stuff into mini theme components, probably more manageable since there’s stuff in our theme currently that’s pretty site-specific ([like this](https://meta.discourse.org/t/how-difficult-would-it-be-to-make-the-discourse-ui-more-like-flarum/83430/9)). In any case I’d say some familiarity with HTML / CSS will be useful and worth learning gradually since even with themes you’ll likely want to make some tweaks / customizations in certain places.
---
### Author:  [@dlukefinch](https://meta.discourse.org/u/dlukefinch)
#### Post date: [February 19, 2019, 6:38pm UTC](https://meta.discourse.org/t/discourse-button-styles/88154/19 "2019-02-19T18:38:53Z")
Hey @awesomerobot,
I have installed your plugin but when making changes I cannot see it on the site, only if I preview it. I have followed the instructions to the letter. Any ideas?
 
---
### Author:  [@dax](https://meta.discourse.org/u/dax)
#### Post date: [February 19, 2019, 6:50pm UTC](https://meta.discourse.org/t/discourse-button-styles/88154/20 "2019-02-19T18:50:26Z")
Mmm how did you import the theme component?
In the last screenshot seems that the component is empty, no CSS or Html edited and no theme settings.
It should appears in this way :
Try to reinstall it.
[Next page](https://meta.discourse.org/t/discourse-button-styles/88154.md?page=2)