Discourse Button Styles

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

Looks like some cases are missing, for border-radius. I submitted a PR for this and decided to post here as well, in case.

I’m not that practiced with CSS, so feel free to let me know if there are better ways to target those buttons, and I can make changes to my PR.

Before:


After:

8 Likes

I made another PR for an edge case with the like button (feel free to make edits to PR)

On other people’s posts, the like button is made of two buttons. The border radius would be added for both buttons, whereas we just want it on the outer sides of the two buttons.

Before:

image

After:

image

4 Likes

@awesomerobot just wondering if you could take a look at the above PR, and let me know if there’s anything I need to change before it could be merged^^ It’s for fixing a border-radius edge case with the like and flag buttons.

I have discourse-button-styles installed on different forums, and it would be nice to have the fix automatically included.

2 Likes

looks good to me, thanks! I’ve just merged it

2 Likes