Rounded Borders for images, oneboxes, blockquotes & more

AI-generated summary

MarcP has created a theme component called Rounded Borders that allows users to customize the appearance of images, oneboxes, blockquotes, and staff notices in Discourse. The component offers various settings, including rounding intensity, border width, and color for images and oneboxes, as well as support for topic thumbnails in list and grid views. It also enables customization of blockquote borders and avatar rounding. The component is applied site-wide through CSS, requiring users to enable specific toggles in the theme settings. Users have praised its functionality, with some requesting additional features like padding adjustments. MarcP has responded with updates, including avatar rounding and improved button styling. The component is available on GitHub, with installation instructions provided. MarcP shared examples in both light and dark modes, and the component can be tested in a live preview. robbie.morrison sought clarification on its application, which MarcP clarified as site-wide and requiring toggles to be enabled. Heliosurge and WorldIsMine expressed appreciation, while nafets-lesierk suggested padding improvements. robbie.morrison also suggested interface tweaks, which MarcP attributed to core translations.

Created a very simple component to change the borders of images, oneboxes, blockquotes and staff notices shown in topics.

Allows change of the following settings

  • set image rounding intensity
  • set image border width
  • set image border color
  • set onebox rounding intensity
  • change onebox border width
  • change onebox border color
  • change onebox background color
  • set rounding blockquotes intensity
  • remove left border from blockquotes
  • set ‘staff color’ rounding intensity
  • topic thumbnail support for:
    • list rounded corners
    • grid rounded corners
    • placeholder bg
    • placeholder icon color
    • grid topic title bg

Light mode with 10px rounding and no border

Dark mode with 10px rounding and 2px border

Including onebox support

Blockquote rounding (15px)

Or remove left border from blockquotes:

Rounded staff color

Support for Topic Thumbnails

List view

Grid view

:sunglasses: Preview Screenshots above / Live Preview
:link: Github Repo Rounded Image Borders
:hammer_and_wrench: Install Guide How to install a theme or theme component
25 Likes

Thank you this is quite nice.

1 Like

Thank you! Been using it for a while now.

2 Likes

Really nice. One update wish. Would be cool if we could add padding between the border and the paste. Cheers!

1 Like

Please enlighten your suggestion with a screenshot, I don’t fully understand it.

I have pushed a few improvements:

  • You can adjust avatar rounding now (default, circle = 50%)
  • Some improvements for buttons. If button rounding is enabled category dots get fixed minimal rounding + modals are included now.
2 Likes

I installed the Rounded Borders to my Default theme and left the provided defaults. But I don’t understand how this applies.

Does this work on a per‑uploaded‑image basis, site‑wide going forward, or site‑wide for everything?

Do I just need to upload and JPG and let it do its thing? Do I get some choices at that juncture? I am on a production site so I don’t like to experiment too much. Puzzled. TIA.

I can’t say for sure. But I believe it would be once installed moving forward. A test Upload new image and see if it has applied border. If not try the wrench on a specific post not topic and choose rebuild hmtl.

If it is not applied in either case you may need to check TC settings. Also ensure you have added it to themes in use. Refresh page to ensure settings are in effect as you maybe viewing cached pages.

They are CSS customizations, so they apply site-wide.

It’s mostly a personal component I decided to make public, so you may have to experiment with various settings to see how it works. Some settings have a toggle that has to be enabled before the settings are applied.

This is all you need for images (default is off btw). Anything below allows rounding for other elements as you wish.

3 Likes

Can I suggest a small tweak to the interface (in red):

Pretty sure that’s in core translations.

2 Likes