How To Make A Palette
When first starting out, I highly recommend you use the default coding as your base code. Play around with the coding, get yourself familiar with everything. Make sure you rename your palettes when making different ones, otherwise you will only ever be changing the same palette’s coding over and over again. And always make sure to save your changes! Also, always keep these at the end of each coding: ; (they are important!)
Picking/Inserting Color Codes
Before starting your coding and color changes, decide what color coding you will be using. There are several different types, the most common ones used on HEE palettes are HEX and RGB/RGBA. Starting out, I suggest sticking with the HEX codes since that’s the color codes already used in the default coding.
HEX color codes start with the hashtag symbol (#) which is then followed by numbers and colors that “represent” a specific color. For example, the color white in HEX coding is #FFFFFF and the color black is #000000.
To pick your color codes, you can do a few different things. The first is to use the color picker provided by HEE on the palette page. The second option is to use an offsite color picker (I prefer this method). Offsite color pickers can allow you to choose colors directly from your palette’s background image. I’ve personally found this site to work best:
Click Here
Once you have your color codes, you’ll need to insert them into the coding like this:
background-color: #FFFFFF;
The coding I have bolded and highlighted is where you would insert your color code. Repeat this throughout the coding to change the colors of the palette. Play around with the colors and have fun with it.
Changing Website/Header
Before we dive into this part, remember to follow all crediting guidelines for this site! I recommend using the site Unsplash for palette backgrounds.
In the default palette, you have this coding for the website’s header and background:
background-image:url("../images/hee_bg.jpg");
background:#963500 url(./images/HEE_head.jpg);
To change the background and header, all you have to do is replace the urls in the parentheses with your image url and you are all set! So it would look something like this:
background-image:url(https://i2.lensdump.com/i/IJFBza.png);
background-image: url(https://i1.lensdump.com/i/IqTP7q.png);
You can also do solid colors as well. To do that just replace the coding above with something like this:
background-color; #FFFFFF;
The Navigation Bar
This is probably the most annoying piece of coding and can cause a bit of problems if the coding is screwed up. Here is what I can tell you about our good old friend, navbar.
Section 1
.navbar {
background: #5b3914 url(images/menu/menugradient.png) repeat-x;
}
This coding changes the background color of the navbar. What I do is get rid of most of that coding right there so it looks like this:
.navbar {
background: #5b3914;
}
Now all you need to do is change the color code to your desired color.
Section 2
.navbar a {
color:#dfc79d;
}
This changes the font color of the navbar text (Stable, Services, Search, etc). Just change the color code.
Section 3
.dropdown .dropbtn {
color:#dfc79d;
}
This changes the color of the dropdown menu. To change the color, just change the color code.
Section 4
.dropdown-content a {
color: #000;
}
This is where you can change the color of the text in the navbar dropdowns (Capture A Horse, Home, etc) Just change the color code and you’re set.
Section 5
.navbar a:hover, .dropdown:hover .dropbtn {
background-color: #b67942;
}
This section is where you can change the hover color when you hover your mouse over the navbar. Fairly easy to understand, just change the color code.
There are some other cool things you can do with the navbar, but I suggest mastering this before going any further.
Overcast and Calm
