guild_css [MelonLand Wiki]

This page is read only. You can view the source, but not change it. Ask your administrator if you think this is wrong.
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:
<code>
.melon_super_background {
  background: silver;
  background-image: url("https://loom.cafe/images/metal.png");
  background-size: cover;
}

.melon_super_background,
.content {
  color: black !important;
}
</code>

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

<code>
<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="{NEXT LINK}">{NEXT NAME}</a>
</div>
</code>

==== CSS Defaults ====

**NOTE:** The webring script adds the following ''<style>'' tag to your page on the same line that you've placed the script. Because of the [[https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_cascade/Cascade|CSS cascade]], these style declarations will override the ones that are found in the ''<head>'' of your webpage, unless you add ''[[https://developer.mozilla.org/en-US/docs/Web/CSS/important|!important]]'' to them. if you link a stylesheet on a line that comes **after** the script, the style declarations will override the defaults without the use of ''!important''.

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

===== 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 `<ff monospace>#melonGuild-{your guild id #}</ff>` so they don't also apply to other elements on guild member's pages. For example, if you were to style just the class `<ff monospace>melonGuild-info</ff>`, 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.

<code>
#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%;
    }
}
</code>

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.

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

The `<ff monospace>\21E0</ff>` and `<ff monospace>\21E2</ff>` 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 `<ff monospace>content: url("example.png");</ff>