Table of Contents

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.

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:

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!

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!

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!

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!

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.

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.

Main Profile Pane Elements.

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!

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 use this link to return to your profile-customization page!

Info Pane Elements.

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

Main Profile Pane Elements.