Thanks for your interest in joining the bulltown.sidecar webring. This page is a brief guide to implementing the webring code on your site.
Please note that until your site is approved and added to the list of member sites, a message about the webring will appear in place of the ring navigation links.
Please add the following line in the <head> section of any page being used to display the webring code:
<link rel="stylesheet" href="https://sidecar.neocities.org/css/onionring.css">
This stylesheet defines how the ring navigation widget looks. Further down below, customizing the style to fit your site’s design is discussed.
The following webring code shoud center automatically where you place it in the <body> of your page:
<div id='sidecar'>
<script src="https://sidecar.neocities.org/js/onionring-variables.js"></script>
<script src="https://sidecar.neocities.org/js/onionring-widget.js"></script>
</div>
The stylesheet you added to your page contains the following:
#sidecar {
margin: 0 auto;
color:#7f676c;
font-weight:500;
padding: 15px;
}
#sidecar a {
text-decoration:none;
color:#7f676c;
}
#sidecar a:hover {
background-color: #ffe5de;
}
#sidecar .webring-links {
font-size:small;
color:#7f676c;
}
You can override any of properties to better fit your design using a separate .css file that loads after the other spreadsheet or by simply adding some inline style to your page (wrapped in <style> tags). It works well placing the inline styles just before the closing <head> tag.
Thanks!