From your main profile view, go to Modify Profile category > Ultimate Profile > Scroll down to Customization text field.

Image Example

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!

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:

.catbg tr, .catbg, .catbg3, .catbg a:link, .catbg a:visited
{
  background-image: none;
  background-color: Insert_Color1 !important;
  color: Insert_Color2 !important;
}
.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.

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-1 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;

TIP2: To simply hide a background element, replace “background-image:url()” with:

display:none 

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>