Rounded Borders for images, oneboxes, blockquotes & more

Theme component
1

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

image
image725×560 70.2 KB

Dark mode with 10px rounding and 2px border

image
image723×563 69.5 KB

Including onebox support

image
image723×213 53.9 KB

Blockquote rounding (15px)

image
image719×179 6.05 KB

Or remove left border from blockquotes:

image
image704×137 10.6 KB

Rounded staff color

image
image1034×206 11.3 KB

Support for Topic Thumbnails

List view

image

Grid view

image
: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
24 Likes
2

Thank you this is quite nice.

1 Like
3

Thank you! Been using it for a while now.

2 Likes
4

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

1 Like
5

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

6

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
7

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.

8

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.

9

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.

image
image1176×380 26.2 KB

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

3 Likes
10

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

The image shows a user interface for adding "Rounded Borders" as a component to theme settings in a platform, where each theme setting is off by default and must be enabled by clicking a specific button. (Captioned by AI)
The image shows a user interface for adding "Rounded Borders" as a component to theme settings in a platform, where each theme setting is off by default and must be enabled by clicking a specific button. (Captioned by AI)1140×830 78.6 KB

11

Pretty sure that’s in core translations.

1 Like