Customize your Polyring embed

Preface#

This topic is very niche, but some of you fellow Polyring ↗ members might wonder how to customize your embed that is featured on each and every website that is part of the 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 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 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.

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 ↗}}