For Profile CSS snippets check [[forum_css|here]]! ====== Guild Page CSS Tips ====== 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;
}

====== Guild Webring CSS ====== ===== Default Style + Structure ===== 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 ====



{PREV NAME}

    This site is part of the guild webring:
    Nature Camp
    
        guild home
        
        excuse me?
    

{NEXT NAME}

==== CSS Defaults ==== **NOTE:** The webring script adds the following '' ===== Style Tips + Tricks ===== 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. ==== Sizing + Responsiveness ==== 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. ==== Previous + Next Arrows ==== 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 [[https://en.wikipedia.org/wiki/Unicode|Unicode]] for the arrow symbols included in the default webring style. You could change them to [[https://en.wikipedia.org/wiki/Arrows_(Unicode_block)|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");