Customizing your Polyring embed

Preface#

This topic is very niche, but some of you fellow Polyring ↗ members might wonder how to customize your webring embed; you know the one that is (or is supposed to be) featured on every website that is part of Polyring?

Custom customizer#

Julian from xyquadrat.ch ↗ (creator of Polyring) already has a tutorial on how to customize your embed ↗; however, to make all our lives a little easier, I thought I’d whip up a little interactive tool (CSS vibe coded, of course) that changes the color and layout of the embed in real time.

Check it out: akuta.xyz/polyring ↗

As you can see in the screenshot, you’re able to change the Banner Background, the Outer/Inner Border Color, Text Color, and (Active) Link Color.

You also have the option to reset the theme to its light or dark version (standard is dark) based on the dark.json ↗ and default.json ↗ files provided by xyquadrat.ch, if you wanna reset the embed.

Finally, you can then press the button “Export Theme JSON,” which will give you a similarly formatted file as the aforementioned JSONs, which you can then just use in your `theme` attribute in your webring HTML block:

<webring-banner theme="/path/to/your/custom-theme.json">
    <p>Member of the <a href="https://polyring.ch">Polyring</a> webring</p>
</webring-banner><script async src="https://polyring.ch/embed.js" charset="utf-8"></script>

Afterword#

Since this is my first blog, it’s not very long or descriptive. Still, I hope it helped some of you. :) Feel free to leave a comment or changes on the GitHub repo for the website ↗.

Cover photo by Glenn Carstens-Peters ↗ on Unsplash ↗