Style your webring banner with pure HTML, CSS, and JavaScript
Copy the basic HTML embed code, then add one of our CSS themes to customize the appearance. No React or build tools required - just HTML, CSS, and JavaScript!
<webring-banner>
<p>Member of <a href="https://meshring.netlify.app/">MuizenMesh Webring</a></p>
<a href="https://meshring.netlify.app/prev">Previous</a>
<a href="https://meshring.netlify.app/random">Random</a>
<a href="https://meshring.netlify.app/next">Next</a>
</webring-banner>
<script async src="https://meshring.netlify.app/embed.js"></script>Include one of the CSS files below to style your webring banner:
<link rel="stylesheet" href="webring-theme-ocean.css">Clean design with the standard webring styling
/* No additional CSS needed - uses default styling */Blue ocean-inspired colors perfect for coastal communities
.theme-ocean {
--webring-bg: #e3f2fd;
--webring-border: #90caf9;
--webring-text: #0d47a1;
--webring-accent: #1976d2;
}Warm orange and yellow colors like a beach sunset
.theme-sunset {
--webring-bg: #fff3e0;
--webring-border: #ffcc02;
--webring-text: #e65100;
--webring-accent: #ff9800;
}Dark background with cyan accents for modern sites
.theme-dark {
--webring-bg: #212529;
--webring-border: #495057;
--webring-text: #f8f9fa;
--webring-accent: #0dcaf0;
}Clean gray styling for minimal designs
.theme-minimal {
--webring-bg: #ffffff;
--webring-border: #e9ecef;
--webring-text: #6c757d;
--webring-accent: #343a40;
}Japanese-inspired pink and purple colors
.theme-tokyo {
--webring-bg: #fef7f0;
--webring-border: #ff6b9d;
--webring-text: #2d1b69;
--webring-accent: #ff006e;
}Dark purple theme inspired by Dracula colors
.theme-dracula {
--webring-bg: #282a36;
--webring-border: #6272a4;
--webring-text: #f8f8f2;
--webring-accent: #bd93f9;
}Retro neon colors with cyan and magenta
.theme-disco {
--webring-bg: #1a0033;
--webring-border: #ff00ff;
--webring-text: #ffffff;
--webring-accent: #00ffff;
}Create your own theme with CSS custom properties
.theme-custom {
--webring-bg: #f0f8ff;
--webring-border: #9370db;
--webring-text: #4b0082;
--webring-accent: #8a2be2;
border-radius: 1rem;
box-shadow: 0 4px 20px rgba(138, 43, 226, 0.3);
}Download individual CSS files for each theme: