Discourse Button Styles

I really like this component, by the way.

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!

2 Likes

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

2 Likes

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:

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:

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.

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?

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.

4 Likes

Yes, I’m getting that after reinstalling it however I’m not getting the option to add it as a theme component to my active / user-selectable theme.

Wait a minute, there was a typo and the about file give an error. @awesomerobot there is a fix ready on Github

2 Likes

Merged now, should be all set. Thanks again @dax!

3 Likes

Try to update the component now @dlukefinch , just click on the Check for Updates button

4 Likes

Boom. Sorted! Thanks guys :partying_face:

2 Likes

Hello guys,

A quick question. I have installed the modification and it appears to be set up correctly. However, I see that all the configuration fields are empty by default. I’m not really familiar with CSS, so anyone can provide me some default values for the configuration fields? I am using the default light theme of the discourse, but I’d only need the rounded pill buttons with the default theme colors. What fields do I need to change in order to make them with rounded corners?

Thank you so much

Only the first, global button border radius.

No need, the component is already set to use the default theme color. Leave all the other fields blank.

5 Likes

Exactly what I needed. Thank you so much

A couple questions:

  1. Applying any sort of rounded corner leads to a funky curved underline … is that because I’m using the Material Design theme? Is there a way to still get the rounded button rather than the funky underline? (I presume I’d have to change some CSS?)

  1. Is there a way to use this component to round off the subcategory boxes? (or is that also something I’d have to change through CSS?)

It seems as though something changed in core and buttons now require !important, I don’t have time to figure out how to submit a PR, but wanted to throw it out there.

3 Likes

I like this component but I have a minor issue/bug. Borders of the categories button does not look curved like as in other buttons.

IMG_20190825_195351

Seen a similar problem:
IMG_20190827_020942

4 Likes

First of all, I love this and it made my forum look 10 times better. But I have one problem tho and I can’t seem to find out how to fix it either

So I changed

primary button bg  to #ff6a00

primary button bg hover to #ffa954

And that works great but when I click the button then it gets blue for some reason how can I fix this?

1 Like