__WIP - A list of tips and snippets for customizing MelonLand forum profile CSS.__

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

[[https://i.imgur.com/99JAnek.png|Image Example]]

===== How do I start? =====

In your Customization text field, we will start by writing the following tags:

  <style> 
  </style>

----

**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!

You can style each of them separately using these root ids:
  * **#theme-melon** - This will only apply to the default MelonLand theme
  * **#theme-dreamy** - This will only apply to the cinni dreamy theme
  * **#theme-news** - This will only apply to the newspaper theme (please be extra mindful that this theme was made with readability in mind!)

----

==== Making custom colored in-profile categories and text. ====

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

Between your //style// tags, insert the following lines:

  #theme-melon .catbg tr, 
  #theme-melon .catbg, 
  #theme-melon .catbg3, 
  #theme-melon .catbg a:link, 
  #theme-melon .catbg a:visited
  {
    background-image: none;
    background-color: Insert_Color1 !important;
    color: Insert_Color2 !important;
  }
  #theme-melon .content
  {
    color: Insert_Color3 !important;
  }

* Where "Insert_Color", use predefined color names (black, yellow, blue, etc) or HEX for specifics (#ff0000, #ffa500, etc.)

//Insert_Color1// = In-profile category background color.

//Insert_Color2// = Category titles color.

//Insert_Color3// = The rest of the text content in your profile.

----

==== Replacing the default background image in your profile page. ====

Make your profile visitors feel as if they just landed in another world!

[[https://i.imgur.com/kwSvdVm.png|Image Example]]   

The MelonLand forum background is made up of different layers. Specifically:

//#shade// for rain effects.
//#shade-2// for cloudy background.
//#shade-3// for sparkling stars.
//#bunting// for glowing stars decoration.

A CSS example where we replace //#shade-3// with our own image between our //style// tag:
  <style>
    #shade-3{background-image: url(Insert_URL) !important;}
  </style>

* Where "Insert_URL", add a web address that ends with an image format name. Such as .JPG, .PNG, .GIF, etc.

__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 

----

==== Adding new background image elements. ====

The cherry on top!

[[https://i.imgur.com/RMy2Ojl.png|Image Example]]

We will start by defining our own custom element, using the //div// tags to contain our new image.

  <div id="myElement"> </div>
  <style>
  </style>

Refer to your newly created element with #myElement between your //style// tags, using the following syntax:

  <style>
    #myElement
    {
      
    }
  </style>
  
Helpful attributes, fill the //MISSING//, experiment and customize as you wish:

  #myElement
  {
    float: left; width: 100%; height: 140px; position: absolute; top: -5px; left: 0px;
    background-image: url(INSERT_URL); background-size: 299px;
    opacity: 0.9; z-index: -2; background-repeat: no-repeat; background-position: INSERT_NUMBER% INSERT_NUMBER%;
  }
  
Finished example:

  <div id="customWings"></div>
  <style>
    #customWings
    {
      float: left; width: 100%; height: 140px; position: absolute; top: -5px;
      left: 0px; background-image: url("https://i.imgur.com/bpA24Yr.png");
      background-size: 299px; opacity: 0.9; z-index: -2; background-repeat: no-repeat;
      background-position: 88% 1%;
    }
  </style>
  

----

==== Adding a new in-profile image. ====

Because empty space should not go to waste!

[[https://i.imgur.com/QHWwEBd.jpg|Image Example]]

Between your //style// tags, insert the following lines and fill the //MISSING//:

  <style>
    #profile_left{background-image:url("INSERT_URL");
    background-repeat: no-repeat; background-position: center bottom; background-size: INSERT_NUMBER% 
    INSERT_NUMBER%;}
  </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)

**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.

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

**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]]!

  * **#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** - "Home" link
  * **#melonland-surf-club + p a:first-child img** - "Home" link image
  * **#melonland-surf-club + p a:nth-child(2)** - "Entrance" link
  * **#melonland-surf-club + p a:nth-child(2) img** - "Entrance" link image
  * **#melonland-surf-club + p a:nth-child(3)** - "Wiki" link
  * **#melonland-surf-club + p a:nth-child(3) img** - "Wiki" link image
  * **#melonland-surf-club + p a:nth-child(4)** - "Search" link
  * **#melonland-surf-club + p a:nth-child(4) img** - "Search" link image
  * **#melonland-surf-club + p a:nth-child(5)** - "Profile" link
  * **#melonland-surf-club + p a:nth-child(5) img** - "Profile" link image
  * **#melonland-surf-club + p a:nth-child(6)** - "Logout" link
  * **#melonland-surf-club + p a:nth-child(6) img** - "Logout" link image

----
==== 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:**
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.

  * **#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:**
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.

  * **#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