MelonLand Wiki

Trace: • forum_css

Differences

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

Link to this comparison view

Both sides previous revisionPrevious revision
Next revision		Previous revision
forum_css [2025/02/02 02:54] – [Nav Bar Elements.] melonforum_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? ====== ====== How to access MelonLand's forum profile customization? ======
  
-From your main profile view, go to //Modify Profile// category > //About Me / 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? ===== ===== How do I start? =====
Line 16: Line 16:
 ---- ----
  
 +<WRAP center round tip 60%>
 **Important Note:** **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! 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: 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! 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: 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! 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: 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. * 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. __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;   background-repeat: no-repeat;
 +  
 __TIP 2:__ To simply hide a background element, replace "background-image:url()" with: __TIP 2:__ To simply hide a background element, replace "background-image:url()" with:
  
   display:none    display:none 
 +</WRAP>
 ---- ----
  
Line 93: Line 96:
 The cherry on top! 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. 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! 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//: 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)   * **#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:** **Important Note:**
 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. 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. ==== ==== 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. 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:** **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]]! 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   * **#wrapper** - The div id that holds ALL visible elements on the page
Line 300: Line 307:
  
 ---- ----
 +<note>
 **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. 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.)   * **#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 315: Line 324:
  
 ---- ----
 +<note>
 **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. 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)   * **#melonland-surf-club + p + table tbody tr:nth-child(3)** - The third row for the top info bar (with the news bar)