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).
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.
@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.
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.
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).
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!)
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.
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:
(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:
.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!
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
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
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.
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?
