WIP this page is for collecting CSS and HTML snippets for editing guild pages, many profile CSS tips also apply here.

Basic background and color editing:

.melon_super_background {
  background: silver;
  background-image: url("https://loom.cafe/images/metal.png");
  background-size: cover;
}

.melon_super_background,
.content {
  color: black !important;
}

When you add your guild's webring widget to a page, the following HTML and CSS will be added via javascript. The code that appears in the curly brackets depends on which guild you're in (which will set the guild id #) and the position of your site within the ring (which will set the prev and next links).

HTML structure:

<div id="melonGuild-{#}" class="melonGuild">
<a class="melonGuild-prev" href="{PREV LINK}">{PREV NAME}</a>
<div class="melonGuild-info">
    <span>This site is part of the guild webring:</span>
    <b>Nature Camp</b>
    <div class="melonGuild-links">
        <a href="https://forum.melonland.net/index.php?action=mguild;sa=view;gid={#}">guild home</a>
        <img src="{GUILD CREST URL}">
        <a href="https://wiki.melonland.net/webring">excuse me?</a>
    </div>
</div>
<a class="melonGuild-next" href="{PREV LINK}">{NEXT NAME}</a>
</div>

Default CSS:

<style>
    #melonGuild-{#},
    #melonGuild-{#} .melonGuild-info,
    #melonGuild-{#} .melonGuild-links {
        display: flex;
        align-items: center;
        flex-flow: row;
    }
    #melonGuild-{#} {
        column-gap: 5px;
    }
    #melonGuild-{#} .melonGuild-prev:before {
        content: '\21E0';
        margin-right: 3px;
    }
    #melonGuild-{#} .melonGuild-next:after {
        content: '\21E2';
        margin-left: 3px;
    }
    #melonGuild-{#} .melonGuild-info {
        flex-flow: column;
    }
    #melonGuild-{#} .melonGuild-info span {
        display: block;
    }
    #melonGuild-{#} .melonGuild-links {
        justify-content: space-evenly;
        gap: 10px;
    }
    #melonGuild-{#} .melonGuild-links img {
        height: 32px;
    }
</style>

The last line of the webring widget is an optional stylesheet, which can be viewed and edited by guild members at forum.melonland.net/pad.php?p=webring.css&g={your guild id #}

Like the default CSS in the last section, it's recommended to start all your CSS declarations with the ID selector `#melonGuild-{your guild id #}` so they don't also apply to other elements on guild member's pages. For example, if you were to style just the class `melonGuild-info`, it would apply to all of the MelonLand Guild webring widgets on someone's page, not just the widget for your guild. In the code snippets provided below, you will have to replace the placeholder {#} with your guild's ID number.

This will move the previous and next links underneath the info section when the webring is placed in a small container or disaplayed on a small screen.

#melonGuild-{#) {
    max-width: 420px; /* you may want to adjust this! */
    margin: 0 auto;
    flex-flow: row wrap;
    justify-content: center;
    container-type: inline-size;
    container-name: responsiveguild;
}
#melonGuild-{#} .melonGuild-prev,
#melonGuild-{#} .melonGuild-next {
    width: 18%;
}
@container responsiveguild (width < 420px) {
    #melonGuild-{#} .melonGuild-info {
    width: 100%;
    }
    #melonGuild-{#} .melonGuild-prev {
    order: 2;
    width: 40%;
    }
    #melonGuild-{#} .melonGuild-next {
    order: 3;
    width: 40%;
    }
}

If your widget has backgrounds and borders, you may need to adjust the widget's max-width, and the widths of the previous and next links.

This will remove the gap in the underline between the ring member names and the arrows.

#melonGuild-{#} .melonGuild-prev::before {
    content: '\21E0  ';
    margin-right: 0;
}
#melonGuild-{#} .melonGuild-next::after {
  content: '  \21E2';
  margin-left: 0;
}

The `\21E0` and `\21E2` are Unicode for the arrow symbols included in the default webring style. You could change them to another kind of unicode arrow, an emoji, text, or even an image url (in which case you would write it as `content: url(“example.png”);