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

Each guild has an ID number, which you can find at the end of the URL on the guild's hub page (gid=#) and at the end of the URL in each guild's webring widget (g=#). (WIP)

Webring widget 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=7">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 applied by the script:

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