In a support thread titled “How to make forum buttons rounded across all themes,” Aaron_Walsh seeks to round buttons using CSS (border-radius: 5px;), but finds it only works in preview mode. Heliosurge suggests using theme components like Discourse Button Styles or Rounded Borders for Images, Oneboxes, Blockquotes. Aaron_Walsh humorously admits to not searching thoroughly enough. awesomerobot offers a CSS variable solution: --d-button-border-radius: 5px or --d-border-radius: 5px, but Aaron_Walsh reports it still only works in preview. Heliosurge clarifies that components must be added to themes and the page refreshed. Moin asks if other components (like Rounded Image Borders) might conflict. Aaron_Walsh confirms he has such a component and suspects it’s interfering. Moin points to a setting: button settings enabled. Finally, Aaron_Walsh resolves the issue by adjusting “Button corner intensity” and “Category style box corner intensity” settings from 0px — thanking the community for collaborative troubleshooting. MarcP appreciates the shared solution, noting it expands his component’s scope.
Good evening,
I’m trying to make all the buttons on my forum more rounded square. I’ve used the CSS within CSS/HTML:
.btn { border-radius: 5px; }
This works in the preview tab, but it doesn’t work in the live forum after including the component on these themes.
Currently on the forum:
After using CSS:
Here on Meta, using the Fully theme, the buttons are rounded. However, using this theme on my forum, they are not.
Try this Customization > Theme component
This one will add options to round other things like quotes, images and more
My God! I’m always telling my users to use the search function before creating a topic!
Now I’m guilty of the same thing! I was searching for “rounded buttons.” I was more complex than it needed to be. I should have just searched for “buttons.”
Well I used this search term.
"#customization:theme-component Round"
You can also do
:root {
--d-button-border-radius: 5px
}
or
:root {
--d-border-radius: 5px;
}
if you really want rounded corners everywhere
Hmm… again, both only seem to work in preview mode, even after refreshing the forum and logging in and out.
After you install a component & To apply it you need to add to your themes, then need to refresh the page.
After that is should be visible logged in or not
Preview is just for testing without any themes active
Did you add any other components that also customize the buttons?
Sorry, I was responding to @awesomerobot’s post with the CSS.
Same with creating a custom component. After you save it you need to add it to your themes.
Done this also.
Just looking at @Moin’s response and can’t see anything that will conflict with the custom component. I’ll take a deep dive into “Discourse Button Style.” I did have this before, and to be honest, there were a lot of empty boxes, and my ADHD brain couldn’t cope with it, haha! Just a simple CSS would work for me (if it did).
I do have this, yes. So this is conflicting with the custom component?
So I’ll have to manually create CSS for the buttons, avatar, and images that I’m wanting/looking at.
There is a setting button settings enabled, so probably
This is nice. I think my component currently covers most buttons but I didn’t know about this approach, thanks.
