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 [2023/09/06 04:30] – [How do I start?] kallisteroforum_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 > //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? ===== ===== 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:
  
-//#Shade-1// for rain effects. +//#shade// for rain effects. 
-//#Shade-2// for cloudy background. +//#shade-2// for cloudy background. 
-//#Shade-3// for sparkling stars. +//#shade-3// for sparkling stars. 
-//#Bunting// for glowing stars decoration.+//#bunting// for glowing stars decoration.
  
-A CSS example where we replace //#Shade-3// with our own image between our //style// tag:+A CSS example where we replace //#shade-3// with our own image between our //style// tag:
   <style>   <style>
     #shade-3{background-image: url(Insert_URL) !important;}     #shade-3{background-image: url(Insert_URL) !important;}
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;
- +   
-__TIP2:__ 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 148: Line 151:
     INSERT_NUMBER%;}     INSERT_NUMBER%;}
   </style>   </style>
 +
 +----
 +====== Full CSS Selector Reference ======
 +
 +Every CSS selector you could want for profile customization!
 +
 +//First compiled from the profile-page build that was live on September 6th, 2023, so if things are now out of date or incomplete, please update.//
 +
 +===== Theme Selectors. =====
 +
 +These are the basic themes for the forum.
 +
 +  * **#theme-melon** - The body id for the default theme
 +  * **#theme-dreamy** - The body id for the cinni dreamy theme
 +  * **#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 .catbg//" instead of using "//.catbg//"). Otherwise, setting any of the other selectors will affect all themes.
 +</WRAP>
 +----
 +==== Page-wide Elements. ====
 +
 +  * **.windowbg2** - The holster for the contents of both the comment-box input at the bottom and the middle row of the info pane at the top of the page
 +  * **.smiley** - The image selector for every smiley on the page! (for instance, things like :ozwomp: or :eyes: )
 +
 +----
 +==== Background & Image Link Elements. ====
 +
 +  * **#shade** - The div id that holds [[https://forum.melonland.net/Themes/pimp-my-classic/images/rain.gif|the rain background gif]]
 +  * **#shade-2** - The div id that holds [[https://forum.melonland.net/Themes/pimp-my-classic/images/dust-clipart-cloud-smoke-12.png|the dust-cloud background image]]
 +  * **#shade-3** - The div id that holds [[https://forum.melonland.net/Themes/pimp-my-classic/images/starsky.gif|the blinking-stars background gif]]
 +  * **#bunting** - The div id that holds [[https://forum.melonland.net/Themes/pimp-my-classic/images/glowstars.gif|the 5-pointed-stars header gif]]
 +  * **#moon-link** - The id for the link at the top left, the one that looks like a weird banana spinning around
 +  * **#radio** - The id for the link at the top right, the one that looks like a radio
 +  * **#melonland-surf-club** - The object id for the Melonland Surf Club link; contains an embedded document, so your results may vary!
 +
 +----
 +==== Main Profile Pane Elements. ====
 +
 +  * **#main_container** - All the contents for the main profile pane
 +  * **.catbg** - The holster for every category header on the profile pane
 +  * **.windowbg** - The holster for the contents of every category (also applies to the news section at the top and comments at the bottom, but does not apply to the admin menu at the left)
 +  * **.topslice** - Element within each section & comment, placed before the actual content of each section
 +  * **.content** - Content of each section & comment
 +  * **.botslice** - Element within each section & comment, placed after the actual content of each section
 +  * **.smalltext** - Text elements that include the links in the left menu, along with any "Online" and "Offline" text under user profile avatars
 +  * **.avatar** - Image selector for all user avatars on the page
 +
 +----
 +
 +  * **.div1** - Element within the main profile pane, placed above the actual content
 +  * **.div2** - A second element within the main profile pane, placed above the actual content
 +
 +----
 +
 +  * **#left_admsection** - The admin menu of links on the top left of the profile pane
 +  * **.adm_section** - Each section for the admin menu; each section contains the header and the links
 +  * **.cat_bar** - Each section's header for the admin menu
 +  * **.left_admmenu** - Each sections contents containing links for the admin menu
 +  * **.left_admmenu li** - Every individual link in the admin menu
 +
 +----
 +
 +  * **#main_admsection** - The main contents of the main profile pane
 +  * **.creator** - The holster for the contents of every category, ONLY within the main contents of the main profile pane, and does not include anything in the "Comments" section
 +  * **#up_summary** - The profile pane's "Summary" section at the top
 +  * **#up_about_me** - The profile pane's "About Me" section at the top right
 +  * **#up_user_info** - The profile pane's user info section, directly below the "Summary" section
 +  * **#up_other_info** - The profile pane's section containing the "Signature," directly below the "About Me" section
 +  * **.signature** - The "Signature" contents; includes ONLY the signature, not any other content in that section
 +  * **.hrcolor** - The horizontal rule separating the signature from the other contents in its section
 +  * **#up_contact** - The profile pane's contact info section, directly above the "My Buddies" section
 +  * **#up_buddies** - The profile pane's "My Buddies" section
 +
 +----
 +
 +  * **.div3** - Element within the main profile pane, placed between the "Comments" section and all other content above the "Comments" section
 +
 +----
 +
 +  * **#profile_comments** - The profile pane's "Comments" section
 +  * **.poster** - Holster for every commentator's name & profile information in the "Comments" section
 +  * **.postarea** - Holster for the date, time, and contents of every comment
 +  * **.keyinfo** - Holster for the date & time of every comment
 +  * **.post** - Outer holster for the contents of every comment
 +  * **.inner** - Inner holster for the contents of every comment
 +  * **.moderatorbar** - Holster for the "Delete Comment" & "Reply" links at the bottom of each comment
 +  * **.post_separator** - The separator element between comments
 +  * **.pagesection** - The holster for the page select at the bottom of the "Comments" section
 +  * **.pagelinks** - The content for the page select at the bottom of the "Comments" section
 +  * **#up_write_comment** - The comment input section
 +  * **#comment** - The holster for the contents of the comment input section
 +  * **.sceditor-container** - The holster for the comment input toolbar & text area
 +  * **.sceditor-toolbar** - The holster for the comment input toolbar & input text area
 +  * **.sceditor-group** - The holster for each individual sub-toolbar within the input toolbar
 +  * **.sceditor-container textarea** - The text input area for leaving comments
 +  * **.sceditor-grip** - The resize handle for the comment text input area
 +  * **.sceditor-resize-cover** - The element that covers the comment text input area whenever it's resized
 +  * **.input_button** - The "Post Comment!" button
 +
 +----
 +===== Forbidden Selectors. =====
 +
 +These selectors have their names reserved and often refer to invisible elements, so using them or making HTML elements that match their selectors might visually break your page!
 +  * **#melon-params**
 +  * **#top**
 +  * **#ajax_in_progress**
 +
 +----
 +===== Advanced CSS Selectors. =====
 +
 +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
 +  * **#moon-link img** - The image selector for that weird banana at the top left.
 +  * **#radio img** - The image selector for the radio at the top right
 +
 +----
 +==== Nav Bar Elements. ====
 +
 +  * **#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** - "Entrance" link
 +  * **#melonland-surf-club + p a:first-child img** - "Entrance" link image
 +  * **#melonland-surf-club + p a:nth-child(2)** - "Events" link
 +  * **#melonland-surf-club + p a:nth-child(2) img** - "Events" link image
 +  * **#melonland-surf-club + p a:nth-child(3)** - "Profile" link
 +  * **#melonland-surf-club + p a:nth-child(3) img** - "Profile" link image
 +  * **#melonland-surf-club + p a:nth-child(4)** - "Chat" link
 +  * **#melonland-surf-club + p a:nth-child(4) img** - "Chat" link image
 +  * **#melonland-surf-club + p a:nth-child(5)** - "Art" link
 +  * **#melonland-surf-club + p a:nth-child(5) img** - "Art" link image
 +  * **#melonland-surf-club + p a:nth-child(6)** - "Search" link
 +  * **#melonland-surf-club + p a:nth-child(6) img** - "Search" link image
 +etc etc for each link...
 +
 +----
 +==== Info Pane Elements. ====
 +
 +  * **#melonland-surf-club + p + table** - The holster for the top info bar (with the forum logo image, time/date, forum activity rating & nav links, news bar, etc.)
 +
 +----
 +  * **#melonland-surf-club + p + table tbody tr:first-child** - The first row for the top info bar (with the forum logo image, time && date, "messages" link, etc.)
 +  * **#melonland-surf-club + p + table tbody tr:first-child td:first-child** - The left half of the first row for the top info bar; holds the Melonland Forum logo
 +  * **#melonland-surf-club + p + table tbody tr:first-child td:first-child a img** - The Melonland Forum logo image
 +  * **#melonland-surf-club + p + table tbody tr:first-child td:nth-child(2)** - The right half of the first row for the top info bar; holds the time & date, "messages" link, etc.
 +  * **#melonland-surf-club + p + table tbody tr:first-child td:nth-child(2) a:first-of-type** - The "Messages" link
 +
 +----
 +<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.)
 +  * **#melonland-surf-club + p + table tbody tr:nth-child(2) td:first-child** - The left half of the second row for the top info bar; contains the forum activity rating
 +  * **#melonland-surf-club + p + table tbody tr:nth-child(2) td:first-child b** - The "Forum activity rating:" and "Posts" text
 +  * **#melonland-surf-club + p + table tbody tr:nth-child(2) td:first-child img** - The stars image for the forum activity rating
 +  * **#melonland-surf-club + p + table tbody tr:nth-child(2) td:nth-child(2)** - The right half of the second row for the top info bar; contains links for "Unread Topics," "Unread Replies," etc.
 +  * **#melonland-surf-club + p + table tbody tr:nth-child(2) td:nth-child(2) a:first-child** - The "Unread Topics" link
 +  * **#melonland-surf-club + p + table tbody tr:nth-child(2) td:nth-child(2) a:nth-child(2)** - The "Unread Replies" link
 +  * **#melonland-surf-club + p + table tbody tr:nth-child(2) td:nth-child(2) a:nth-child(3)** - The "Own Posts" link
 +  * **#melonland-surf-club + p + table tbody tr:nth-child(2) td:nth-child(2) a:nth-child(4)** - The "Own Topics" link
 +  * **#melonland-surf-club + p + table tbody tr:nth-child(2) td:nth-child(2) a:nth-child(5)** - The "Recent Posts" link
 +
 +----
 +<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)
 +  * **#melonland-surf-club + p + table tbody tr:nth-child(3) td** - The news bar
 +  * **#melonland-surf-club + p + table tbody tr:nth-child(3) td b** - The "News:" text on the news bar
 +
 +----
 +==== Main Profile Pane Elements. ====
 +
 +  * **#melonland-surf-club + p + table + br + table** - The main holster for the entire profile pane
 +  * **#melonland-surf-club + p + table + br + table tbody tr td** - The table cell containing the main profile content
 +
 +----
 +==== Footer Pane Elements. ====
 +
 +  * **#melonland-surf-club + p + table + br + table + br + br + table** - The holster for the bottom footer pane (with copyright info, etc.)
 +
 +----
 +==== Footer Stickers. ====
 +
 +  * **#melonland-surf-club + p + table + br + table + br + br + table + br + br + div** - The holster for the stickers at the bottom of the page
 +  * **#melonland-surf-club + p + table + br + table + br + br + table + br + br + div a** - All sticker links at the bottom of the page
 +  * **#melonland-surf-club + p + table + br + table + br + br + table + br + br + div a:first-child img** - The [[https://melonland.net/|melonland.net]] sticker at the bottom of the page
 +  * **#melonland-surf-club + p + table + br + table + br + br + table + br + br + div a:nth-child(2) img** - The [[https://forum.melonland.net/|melonland forum]] sticker at the bottom of the page
 +  * **#melonland-surf-club + p + table + br + table + br + br + table + br + br + div a:nth-child(3) img** - The [[https://ko-fi.com/B0B17133U|ko-fi donations]] sticker at the bottom of the page
 +  * **#melonland-surf-club + p + table + br + table + br + br + table + br + br + div a:nth-child(4) img** - The [[https://melonking.net/|melonking.net]] sticker at the bottom of the page
 +  * **#melonland-surf-club + p + table + br + table + br + br + table + br + br + div a:nth-child(5) img** - The [[https://momg.neocities.org/|MOMG]] sticker at the bottom of the page
 +  * **#melonland-surf-club + p + table + br + table + br + br + table + br + br + div a:nth-child(6) img** - The [[https://textures.neocities.org/|Texture Town]] sticker at the bottom of the page
 +  * **#melonland-surf-club + p + table + br + table + br + br + table + br + br + div a:nth-child(7) img** - The [[https://gifypet.neocities.org/|Gify Pet]] sticker at the bottom of the page