Differences

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

--- forum_css [2023/09/06 09:09] – [Full CSS Selector Reference] kallistero
+++ forum_css [2025/10/11 18:22] (current) – GlitchyZorua
@@ Line 1: / Line 1: @@
-__WIP - A list of tips and snippets for customizing MelonLand forum profile CSS.__
+For Guild CSS Edits, see [[guild_css|this page]]!
 ====== How to access MelonLand's forum profile customization? ======
-From your main profile view, go to //Modify Profile// category > //Ultimate Profile// > Scroll down to //Customization// text field.
+From your main profile view, go to //Modify Profile// category > //[[https://forum.melonland.net/index.php?action=profile;area=customized|About Me / Profile]]// > Scroll down to //Customization// text field.
-[[https://i.imgur.com/99JAnek.png|Image Example]]
+{{ https://i.imgur.com/99JAnek.png?725 |Profile customization area}}
 ===== How do I start? =====
@@ Line 16: / Line 16: @@
 ----
+<WRAP center round tip 60%>
 **Important Note:**
 Remember that the forum has multiple themes (Selectable on Profile/Look & Layout) - its fine to just focus on one theme, but be sure to check your final profile design on other themes to make sure its still readable!
+</WRAP>
 You can style each of them separately using these root ids:
@@ Line 30: / Line 33: @@
 The easiest way to give your MelonLand profile some unique, fun individuality, is by adding custom category and text colors!
-[[https://i.imgur.com/VsNMhAR.png|Image Example]]
+{{https://i.imgur.com/VsNMhAR.png|Color example}}
 Between your //style// tags, insert the following lines:
@@ Line 63: / Line 66: @@
 Make your profile visitors feel as if they just landed in another world!
-[[https://i.imgur.com/kwSvdVm.png|Image Example]]
+{{https://i.imgur.com/kwSvdVm.png|Background example}}
 The MelonLand forum background is made up of different layers. Specifically:
@@ Line 78: / Line 81: @@
 * Where "Insert_URL", add a web address that ends with an image format name. Such as .JPG, .PNG, .GIF, etc.
+<WRAP center round tip 60%>
 __TIP:__ Add no-repeat after the (Insert_URL) if you wish for your background image to not spread over the profile page.
   background-repeat: no-repeat;
 __TIP 2:__ To simply hide a background element, replace "background-image:url()" with:
   display:none
+</WRAP>
 ----
@@ Line 93: / Line 96: @@
 The cherry on top!
-[[https://i.imgur.com/RMy2Ojl.png|Image Example]]
+{{https://i.imgur.com/RMy2Ojl.png|Extra image example}}
 We will start by defining our own custom element, using the //div// tags to contain our new image.
@@ Line 139: / Line 142: @@
 Because empty space should not go to waste!
-[[https://i.imgur.com/QHWwEBd.jpg|Image Example]]
+{{https://i.imgur.com/QHWwEBd.jpg|Extra image example 2}}
 Between your //style// tags, insert the following lines and fill the //MISSING//:
@@ Line 164: / Line 167: @@
   * **#theme-news** - The body id for the newspaper theme (theme made for readability; please stay extra mindful of this)
+<WRAP center round tip 60%>
 **Important Note:**
-It's highly recommended that you always use a theme selector for any of your other styles (for instance, using "//#theme-melon #wrapper//" instead of using "//#wrapper//"). Otherwise, setting any of the other selectors will affect all themes.
+It's highly recommended that you always use a theme selector for any of your other styles (for instance, using "//#theme-melon .catbg//" instead of using "//.catbg//"). Otherwise, setting any of the other selectors will affect all themes.
+</WRAP>
 ----
 ==== Page-wide Elements. ====
@@ Line 261: / Line 265: @@
 You probably shouldn't have to mess with these ones! Many of them are super-specific or don't respond to a lot of the usual styles. If you do mess with them, it's recommended that you know what you're doing beforehand.
+<WRAP center round important 60%>
 **Important Note:**
 If you get locked out of your profile customization link because you went a little too wild with your CSS, then [[https://forum.melonland.net/index.php?action=profile;area=customized;|use this link to return to your profile-customization page]]!
+</WRAP>
   * **#wrapper** - The div id that holds ALL visible elements on the page
@@ Line 273: / Line 280: @@
   * **#melonland-surf-club + p** - The holster for the forum links at the top (Home, Entrance, Wiki, etc.)
   * **#melonland-surf-club + p a** - All individual forum links at the top
-  * **#melonland-surf-club + p a:first-child** - "Home" link
+  * **#melonland-surf-club + p a:first-child** - "Entrance" link
-  * **#melonland-surf-club + p a:first-child img** - "Home" link image
+  * **#melonland-surf-club + p a:first-child img** - "Entrance" link image
-  * **#melonland-surf-club + p a:nth-child(2)** - "Entrance" link
+  * **#melonland-surf-club + p a:nth-child(2)** - "Events" link
-  * **#melonland-surf-club + p a:nth-child(2) img** - "Entrance" link image
+  * **#melonland-surf-club + p a:nth-child(2) img** - "Events" link image
-  * **#melonland-surf-club + p a:nth-child(3)** - "Wiki" link
+  * **#melonland-surf-club + p a:nth-child(3)** - "Profile" link
-  * **#melonland-surf-club + p a:nth-child(3) img** - "Wiki" link image
+  * **#melonland-surf-club + p a:nth-child(3) img** - "Profile" link image
-  * **#melonland-surf-club + p a:nth-child(4)** - "Search" link
+  * **#melonland-surf-club + p a:nth-child(4)** - "Chat" link
-  * **#melonland-surf-club + p a:nth-child(4) img** - "Search" link image
+  * **#melonland-surf-club + p a:nth-child(4) img** - "Chat" link image
-  * **#melonland-surf-club + p a:nth-child(5)** - "Profile" link
+  * **#melonland-surf-club + p a:nth-child(5)** - "Art" link
-  * **#melonland-surf-club + p a:nth-child(5) img** - "Profile" link image
+  * **#melonland-surf-club + p a:nth-child(5) img** - "Art" link image
-  * **#melonland-surf-club + p a:nth-child(6)** - "Logout" link
+  * **#melonland-surf-club + p a:nth-child(6)** - "Search" link
-  * **#melonland-surf-club + p a:nth-child(6) img** - "Logout" link image
+  * **#melonland-surf-club + p a:nth-child(6) img** - "Search" link image
+etc etc for each link...
 ----
@@ Line 299: / Line 307: @@
 ----
+<note>
 **Note:**
 The second row here also has the class selector **.windowbg2**, so you may also alter its styles, at a class level, using that class selector.
+</note>
   * **#melonland-surf-club + p + table tbody tr:nth-child(2)** - The second row for the top info bar (with the forum activity rating, links for "Unread Topics," "Unread Replies," etc.)
@@ Line 314: / Line 324: @@
 ----
+<note>
 **Note:**
 The third row here also has the class selector **.windowbg**, so you may also alter its styles, at a class level, using that class selector.
+</note>
   * **#melonland-surf-club + p + table tbody tr:nth-child(3)** - The third row for the top info bar (with the news bar)