Differences

This shows you the differences between two versions of the page.

--- guild_css [2025/07/17 15:38] – added section about guild webrings ribose
+++ guild_css [2025/08/01 18:26] (current) – [Default Style + Structure] added note about CSS cascade rules ribose
@@ Line 19: / Line 19: @@
 </code>
-====== Guild Webring CSS Tips ======
+====== Guild Webring CSS ======
-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)
+===== Default Style + Structure =====
-Webring widget HTML 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>
@@ Line 32: / Line 34: @@
     <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>
+        <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>
+<a class="melonGuild-next" href="{NEXT LINK}">{NEXT NAME}</a>
 </div>
 </code>
-Default CSS applied by the script:
+==== 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>
@@ Line 78: / Line 82: @@
 </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>