Discourse Button Styles

theme-component

(Kris) #1

This theme component includes basic settings for changing button colors without writing CSS.

Github repo: https://github.com/awesomerobot/discourse-button-styles

Installation: How do I install a Theme or Theme Component?

Preview: Example of what you can style with the settings in this theme

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).


Customizing colors
Header Search Theme
#2

this is great. I hope it becomes a part of the core color schemes eventually.


(Watercolor Games) #3

Definitely putting this on my install. I want my Discourse to mimic the UI color scheme of the game it’s for.


(Bhanu Sharma) #4

Hey @awesomerobot Is there a way to either hide or make these borders round as well?
Capture


(Heather Dudley) #5

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.


(Heather Dudley) #6

@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.


(Kris) #7

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).


(Heather Dudley) #8

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!)


(Kris) #9

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.


(Kris) #10

If you update your theme you should see nav pill text active and nav pill bg active options available now.


(Heather Dudley) #11

Awesome, got it! Thank you!


(Chris Malone) #12

Would there ever be a way to target certain buttons? Like the Add Topic button. Or the Reply button.


(Chris Malone) #13

I really like this component, by the way.


(Brendan Schlagel) #14

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/

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:

55%20PM

(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:

00%20PM

We got the first button in the group here using:

.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:

.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!


#15

@bts the buttons look really really nice. When you finish all the customization, do you think you could make a theme out of this?


(Brendan Schlagel) #16

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 :slight_smile:


#17

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 :blush:


(Brendan Schlagel) #18

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). 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.