Cali's Palette Guide

Table of Contents

Post 1: Introduction

Post 2: How To Make A Palette

Post 3: Cali's Palette Tidbits

What Is A Palette?

A palette changes the appearance/layout of HEE for your account. HEE provides you with 5 free palettes (Default, Dream, Bark, Modern, Serengeti). These can be accessed by anyone on HEE.

Premium stables are able to create and sell custom palettes. Free stables do not have access to this feature.

Getting To Know The Palette Page

To get to the palette page, you will need to click on the Stable dropdown at the top of the page. Once the dropdown is visible, go to Stable Activities. Towards the bottom of the Stable Activities page will be the Manage Palettes option. The icon will look like this:

Once you click on that icon, you will be taken to the palette page. There are several different features on this page. At the very top, there will be options where you can choose a palette. The first dropdown allows you to choose one of the free palettes. If you are a free stable, this is the only dropdown that will appear on your palette page. If you are a premium stable, you will also see the option to choose a custom palette that you have either made or bought from another player:

If you are a premium stable, below this you will see the section where you can create a palette and a color picker (this can give you hex codes that you can put into the coding). It is recommended that when making a palette, you use the default palette code as a base code.

To choose a code, you click on the dropdown, which will show you all of your palettes, and choose a palette. The code will then appear in the Edit CSS box.

Below this, there will be several more features. The first dropdown allows you to delete a custom palette. Under this you will have the option to sell a palette. You select the palette you are selling, enter the price and stable number that is receiving it, click submit, and tada! You sold a palette!

The last 2 features allow you to display your palette for everyone to see and to see other players' palettes. You can toggle these on and off as needed.

How To Make A Palette

To make a palette, you will need to go back to the CSS code box. As said above, it is suggested that you use the default code as a base for your palette. Select the default palette from the dropdown. Make sure you rename the palette or else a new palette isn't created (you will just edit the default palette). To change the colors, you will need to change the hex codes. Any hex code will have a # in front of them. You can use the color picker provided or search codes up Google or other search engines. These are the main thing you will be changing.

Overall Site Colors

The first section will change the main chatbox color, the solid colored bars on the stable page, tabs on the forum page, the little headings like "Stable Info" on the stable page, and the section in forums where you can view someone's basic info (their avatar, name, number of forum posts, etc.) as well as the main forum color.

Primary will change the main chatbox color.

Secondary will change the solid color bars, stable and forum page tabs, etc.

Tertiary will change the color of those small little headings.

Quatro will change the player info section in the forums as well as the "main forum color".

Forum and Page Colors

This changes the color and style of the quotes in forums. You can change the background color and the border color/style. For more CSS border styles, you can search them up on Google or another search engine. These will be styles like solid, dashed, etc. The 3px part allows you to change the thickness of the border. The higher the number, the thicker the border. To make a complete border, you can add the following under border-left (change the info as needed):

Below this, you will be able to change the forum alternate color. If you have noticed on the forum page, it alternates colors for each section. The first color you had changed in the overall site colors section. You will be able to choose the second color here.

Under this is the background color. This is the main page color. As you can see in the images, my page background is blue. Change this color to whatever you want, although its best if its not too dark.

The last part of this section is the table background color. This changes the color of the inner Quests color, stable info section, about us, etc.

Page Name and Chatbox

Next up is the page name. These are located at the very top of each page. They say what page you are on. You can change this if you like. Some people do, some people don't.

Under this you will be able to change the colors of the main chat and sales chat. I highly recommend making them 2 different colors that you can distinguish apart. You don't want to accidentally post an ad in the main chat, after all.

Below this you can change the form field color and text color. BE CAREFUL! Never change the second hex code color to white if the first hex code is white! This will result in forum text and form field text to not be visible unless you highlight the text. The first hex code allows you to change the color of where you type into the chatbox or reply to someone's PM. The second changes the text color (Don't change it to white!)

The last part under this allows you to change the hover color over the stable page tabs (Our Stable, Profile, Events And Games).

Mail Page and Blogs

This next section allows you to change the tabs on the mail page and blog pages. The first hex code changes the overall color. The second changes the tab color and the third changes the hover color. The last one also changes the hover color. The fourth one changes the color of an active tab.

Chatbox, Quests, and Status Bar

This section changes your chatbox and quest headers, as well as the status bar (this is the bar at the top with the time, weather, etc.). The first hex code changes the text of the chatbox and quest headers. The second changes the background of it. You can remove the gradient or change the gradient/pattern if you'd like by removing or changing the URL. The third hex code changes the status bar color.

Site Fonts and Font Colors

This part changes the color of the font and the type of font. To find fonts that can be used with CSS coding, search them up on Google or another search engine. You can change the size (px part of the coding) and the color (anything with the #). You can also change link colors and hover colors. Anything with coding like the picture below changes the site fonts and colors. Each will have a heading that describes what they change.

Header and Background

You can change the header and background of the site using the following bits of coding! All you have to do is take the URL of an image (must comply with HEE's art/image rules!) and paste them in the appropriate section. Make sure you put credits on the banner and credits for the background in your about us!

The first section changes the background. Replace the URL in parenthesis with the new image URL. If it doesn't fit length wise, you can change the hex code below the URL to the color of the image or what you think looks best.

The last part changes the header. Headers must be 858x150 in dimensions. Just copy and paste the URL where the HEE URL is in parenthesis.

Make sure you hit that save button! Otherwise all your work doesn't save!

Cali's Little Tidbits

---------------------------------------------------------

Enlarged Headers

This is something that I feel everyone should know how to do because at some point down the road, you may be asked to use a piece of art as the header or maybe they just want an enlarged header (like myself).

The coding for this is very simple:

.gameheader div[style]:first-child {
height: 380px !important;
}

Insert the coding below the line for the header url itself. The underlined and bolded section can be changed. This is what changes your header size after all.

---------------------------------------------------------

Removing Borders and Sharpening Corners

Removing a border and sharpening corners of certain coding gives the palette a sharper look and makes it more appealing to the eye. This coding can be inserted anywhere in the palette that you want it to be.

.gameheader {
box-shadow: none !important;
border: 0 !important;
border-radius: 1px !important;
}

Once again, the underlined and bolded numbers/words can be changed! However, the coding is already set so that there is no border and the corners are sharp. You can fool around with the box-shadow as well to make some pretty cool effects.

---------------------------------------------------------

Transparency/Translucent Qualities

This coding is fairly simple and placed wherever a color code is. This works when RGB color coding is used, so I suggest switching to that if you want to do this.

rgba(37, 63, 174, 0.7);

You can change the first 3 bolded and underlined numbers to change the color. I recommend using this website to do this: Click Here

The last part, the decimal, is what you change to change the opacity. The lower the number (ie: 0.1, 0.2, etc), the lower the opacity and more transparent the area. The higher the number, the more opaque the area is.

Oak valley said:

You are a life saver Cali

Westwood said:

Ok, I beilve I have to add coding to match the color after the background image. What is that coding? (I may not have frased that right)

Wanderlusts Dream said:

...did you make this guide because I made the text white? LOL. *dies*