What is a Webring? #
A webring is a set of sites linked in a circle. Each site links to the previous and next, helping visitors discover related content and foster community connections.
This ring highlights Django-related blogs, projects, and resources.
Member Sites #
Add the Webring to Your Site #
Paste the snippet below where you want the widget to appear:
<webring-css site="https://your-website-url.com"></webring-css>
<script src="https://djangowebring.com/static/webring.js"></script>Replace https://your-website-url.com with your website URL as listed in the webring.
Color schemes #
Set the optional color-scheme attribute to match your site: light (the default), dark, or auto, which follows the visitor's light or dark system setting. Missing or unknown values use light, so the snippet above keeps working unchanged.
Light #
A light banner for sites with a light background (the default).
<webring-css site="https://your-website-url.com" color-scheme="light"></webring-css>Dark #
A dark banner for sites with a dark background.
<webring-css site="https://your-website-url.com" color-scheme="dark"></webring-css>Auto #
Follows the visitor's light or dark system setting.
<webring-css site="https://your-website-url.com" color-scheme="auto"></webring-css>Themes #
Set the optional theme attribute to change the banner's look. It combines with color-scheme: every theme has a light and a dark version.
Default #
theme="default"
Today's banner. It's used when theme is missing or unknown, and it may evolve.
<webring-css site="https://your-website-url.com" theme="default" color-scheme="auto"></webring-css>Og #
theme="og"
The original banner, frozen, for sites that want to keep it exactly as it is.
<webring-css site="https://your-website-url.com" theme="og" color-scheme="auto"></webring-css>Django #
theme="django"
Flat and green, in the spirit of djangoproject.com.
<webring-css site="https://your-website-url.com" theme="django" color-scheme="auto"></webring-css>Dracula #
theme="dracula"
The Dracula palette, with Alucard as its light variant.
<webring-css site="https://your-website-url.com" theme="dracula" color-scheme="auto"></webring-css>Pony #
theme="pony"
Pink and magenta, inspired by djangopony.com.
<webring-css site="https://your-website-url.com" theme="pony" color-scheme="auto"></webring-css>Djangonaut #
theme="djangonaut"
Deep purple, in the spirit of djangonaut.space.
<webring-css site="https://your-website-url.com" theme="djangonaut" color-scheme="auto"></webring-css>Custom #
theme="custom"
A neutral starter. Copy it to build your own theme.
<webring-css site="https://your-website-url.com" theme="custom" color-scheme="auto"></webring-css>Make your own #
Every color, border and font is a --webring-* CSS custom property, and your page's CSS can override any of them. Start from the custom theme and change what you like:
<style>
webring-css {
--webring-bg: #FFFBEA;
--webring-border: #8A4B08;
--webring-border-accent: #F0B429;
--webring-accent: #8A4B08;
--webring-button-bg: #F0B429;
--webring-button-border: #F0B429;
--webring-button-text: #3E2003;
}
</style>
<webring-css site="https://your-website-url.com" theme="custom"></webring-css>The custom theme in webring.js lists every property and what it controls. To share your theme with everyone, copy it, give it a name and open a pull request.
Layouts #
The optional layout attribute changes the banner's shape. It combines with theme and color-scheme, and it is ignored by theme="none". Missing or unknown values use auto.
Auto #
layout="auto"
The default. Three columns with unicorns, switching to a single column when the banner is narrower than 480px. You don't need to set it.
<webring-css site="https://your-website-url.com" layout="auto"></webring-css>Wide #
layout="wide"
Always three columns with unicorns.
<webring-css site="https://your-website-url.com" layout="wide"></webring-css>Compact #
layout="compact"
Always one column with no unicorns and tighter spacing. Good for sidebars and footers.
<webring-css site="https://your-website-url.com" layout="compact"></webring-css>Responsive #
layout="responsive"
Like auto, but sized with a CSS container query. It fills its container and adapts to it, so use it where the wrapper has a definite width. In a shrink-to-fit wrapper it can't size itself from its content, so it never gets narrower than 280px.
<webring-css site="https://your-website-url.com" layout="responsive"></webring-css>Unstyled #
Want the banner to look like the rest of your site? Set theme="none" and the widget renders plain semantic HTML into your page, with no shadow DOM and no styles, so your own CSS applies. color-scheme is ignored. Keep both the element and the script tag so the daily check still finds them.
<webring-css site="https://your-website-url.com" theme="none"></webring-css>
<script src="https://djangowebring.com/static/webring.js"></script>It renders a <nav> with a sentence and a list of Prev, Random and Next links, which you can style with selectors like webring-css nav a:
<nav aria-label="Django Webring">
<p><a href="https://your-website-url.com">Your Site</a> is part of The Great Django Webring</p>
<ul>
<li><a href="..." title="Previous site">Prev</a></li>
<li><a href="..." title="Random site">Random</a></li>
<li><a href="..." title="Next site">Next</a></li>
</ul>
</nav>Live Demo #
Join the Webring #
Have a Django-related site to share? We’d love to add it.