To get to the palettes page, first go to the Stable < Stable Activities page. The Manage Palettes button is on the fifth row all by itself. Click on that. When you get to that page, there is an option to set a free palette or set a custom palette. There are 5 free palettes, which anyone in the game may use. For now, we are going to skip that part and go right to the editor. There is a dropdown, next to which says 'Edit Palette Code'. The dropdown is defaulted to blank. Then you can set the name and edit the CSS. How I do it is go to the default and then just change the name before I save it. This is important because you can not save the default palette without changing its name. Then, in the 'Select Custom Palette' dropdown, the palette you just created should appear. Select that palette and hit submit, so each time you update the code you can see what appears. Then you can start editing.

Underneath the edit box, there is a Delete Palette option and a Sell Palette option. For our purposes, we'll skip that part. Underneath are 2 settings you can toggle on and off. They're pretty self explainatory, but I'll explain them here anyway. The first one say 'Display Your Palette To The Public?', then yes, no, and submit. This controls whether or not others can see your palette. Then we have 'View Other People's Palettes'?, and the same yes, no, and submit buttons. This controls whether or not you see other people's palettes.

Diagram 1 and Diagram 2

Diagram 1 is of the stable page and I will explain that one first.

The first code you see is primary, secondary, tertiary, and quatro.

Primary is referring to the area around the quests and chatbox. Secondary is the thing on top of the table.

Tertiary is the thing inside the secondary that says 'Stable Info', 'About This Stable', etc.

Quatro is one of the forum colors, you can see it in the second diagram.

Then you see the quotes, which we'll ignore for this blog, and then the forum alternate color. That is also in the second one, and is the forum color other than the quatro.

After that, we have the page background color, which is the color of the page, and that is shown in the first one.

Then we have the table background color which is the background of the tables off the about me, bio, and other stuff. This is shown in the first one.

After the table background color we have the page name text, which is basically the name of the page you are on, Forums, Stable Page, etc. This is in the second diagram.

Then we have the chatbox color, which is the color of the chatbox. There is .sales and .main. The dot is the CSS selector for a class, so whatever CSS you put in those brackets will affext everything that has that code in the HTML. .sales affects sales chat and .main affects main chat. Only main is shown in the diagram, but sales is there, too. I would recommend having them different colors so you can easily tell which you are in. The chatbox is on the second diagram.

Then we have the form field color, which is the color of the stuff you type into. For diagram 2, I used the area below the chatbox as our example.

Then we have the tabs on mail page and blogs, and I don't have an example yet so I will update this blog later to have another diagram that includes those.

Then we have the side bar header text and the side bar header, the text is what says 'Quests' and 'Chatbox'. The header is just the area around it. This is shown in diagram 2.

After the side bar header we have the status bar. This is where your money, the year, the season, the weather, and more are displayed. You can see this on diagram 2.

Then we have the text stuff, easy show enter, and more text stuff. I skip the easy show enter and I'm going to make a seperate blog explaining text and stuff you can do with it.

Finally, we have the website background, which is the image on the background of the website. It will be labeled on the diagram that has the tabs on the mail page and blogs. Then the header is where it says horse eden eventing

Gradients are going to take more explaining so I will do them first. There are 2 types of gradients you can use; linear and radial. I personally perfer radial, I find it easier, but I will attempt to explain radial as well. There are also times when linear doesn't work.

So, what is a gradient? For our purposes, a gradient is when 2 or more colors fade into each other. That's not the technical definition, but it is the context in which I will use it for this. You usually don't want to have 2 different colors fading into each other, just 2 shades of the same color, but I have done 2 different colors and have it turn out fine, so it all depends on what colors you use. In the next part, I'll be explaining what linear and radial gradients are and how to use them.

Linear Gradients -

This is what most people think of when they think of gradients. It is 2 or more colors fading into each other in a line. Line. Linear. Linear gradient. It's all in the name. Now for how to code them. Here is the base code :

background-image:linear-gradient(rgb(56, 77, 89), rgb(45, 37, 219));

There are 3 parts of that code that I used to mess up the most. First, the background-image is very important. If you don't do that, and do background-color or just background, it won't work. Make sure you have background-image.

Next, the final 2 parenthesis. You have no idea how many times I've only put one lol. There's 2, one to close the last rgb and one to close the linear gradient.

Finally, on everything you just want to make sure you have a semi-colon. Not having a semi-colon messes the whole thing up.

Okay, so now for the code inside the parenthesis. It is defaulted to go down the page, so you can have it go over or diagonal by putting to right, to left, to bottom right, or whatever as the first thing inside the parenthesis. Example :

background-image:linear-gradient(to right, rgb(56, 77, 89), rgb(45, 37, 219));

Then there are the rgb codes. You can have as many as you want but for efficiency I only put 2 as the example.

Also, this will not work as the primary code, only radial-gradient will.

Radial -

WIP

So, the navbar dropdown code. In the default palette, it looks like this :

Now I'm going to be explaining what each section does.

.navbar {
background: #5b3914 url(images/menu/menugradient.png) repeat-x;
}

This section changes the color of the bar behind the text that says "Stable", "Services", "Search", "Leaders", "Help", "Grow", and "Community." It has to be a solid color because there will always be the brown bar behind it and you don't want that showing. To make it not the gradient simply do

.navbar {
background: #5b3914 ;
}

That should be it for that piece of code but if you have any more questions PM me.

.navbar a {
color:#dfc79d;
}

This next section is how you style the boxes around the text under Stable, Services, etc. The Home, Barns, the stuff around that. I usually leave this part alone but it can change the background color, change the font, add shadows, etc. Basically any styling codes for the background and text can be used. Any other questions PM me.

.dropdown .dropbtn {
color:#dfc79d;
}

This changes the color of the Stable, Services, etc. text. I think you can also use it to change the font and the font size and otherwise style that text. That one is pretty straightforward lol.

.dropdown-content a {
color:#000;
}

This changes just the color of the "Home", "Barns", etc. text.You can also change the font and font size in this section.

You can also find this code in the guide made by LostCause, which you can find here. They probably explained it better than I will lol. Anyway, the code is :

animation: fadeInAnimation ease 1s;
animation-iteration-count: 1;
animation-fill-mode: forwards;
}
@keyframes fadeInAnimation {
0% {
opacity: 0;
}
100% {
opacity: 1;
}

}

You copy and paste that into the body section or whatever part you want to fade in. The 1s can be changed to make the fade-in time longer or shorter.

Link to where I found the code: click

I would just use the first one, the second one made it not appear at all.

There's a basic formula borders follow, it'll be below.

The second is the type of border. All the types will be below.

- Dotted borders are basically made up of circular dots.

- Dashed borders are comprised of dashes that are longer than the dotted borders dots are.

- Solid borders are, well, solid.

- Double borders are have 2 lines around the border, each a little ways apart.

- Groove and ridge are where either the inside is lighter and the outside is darker or vise versa.

Then we have mix which is where each side has a different border.

The first is the top, and then it goes clockwise so solid is the bottom.

Referance for borders is on w3schools.com.

Link : https://www.w3schools.com/css/css_border.asp.

This also describes inset and outset borders which I don't have experience with so won't be explaining.

To remove borders either do 0px or border:0!important;

The !important is necessary to override the original HTML.

border-radius:--px!important;

This defines how curved your border is. The lower the number, the less the curve. I use 10 to 15 normally.