--------------------------------------------------
Overall Site Colors
--------------------------------------------------*/
.primary {
background-color:#b67942; Background color for chatbox and quests
}
.secondary {
background-color:#ffffff; Background color for stable info, our stable, profile, etc.
}
.tertiary {
background-color:#ceb17d; Background color for stable info buttons, about this stable button, etc.
}
.quatro {
background-color:#f4e5c5; Background color for achievements text and pop up updates.
.quatro also changes the main forum color. Basically the forums color that isn't the alternate one as well as when you are on an individual topic, it's the section that the stable avis/names appear on. -Brook Mill Dressage
}
/*--------------------------------------------------
Set the quote colors for the forum
--------------------------------------------------*/
blockquote {
background-color:#f4e5c5; Background color for forum quotes
border-left: 3px solid #b67942; Color of border on side
}
/*--------------------------------------------------
Set the forum alternate color
--------------------------------------------------*/
.forumalt {
background-color:#f7f3eb;
}
/*--------------------------------------------------
Set the page background color
--------------------------------------------------*/
.pgbg {
background-color:#dbc091; Background color of page
}
/*--------------------------------------------------
Set the table background color
--------------------------------------------------*/
.tablebg {
background-color:#f6ecd7; Background color of main stable page areas and inner quest box.
}
/*--------------------------------------------------
Page Name text
--------------------------------------------------*/
.headline {
color:#963500; Color of page name text.
}
/*--------------------------------------------------
Set the chatbox color
--------------------------------------------------*/
.sales {
background-color:#e9d9bc; Background color of sales chat
}
.main {
background-color:#dbc091; Background color of main chat
}
/*--------------------------------------------------
Set the form field color
--------------------------------------------------*/
.iclass {background-color:#ceb07c; color:#000000;} Background color of mail thingy and chat text typing box. Color of text in those areas.
/*--------------------------------------------------
Tabs on Stable Page
--------------------------------------------------*/
.tab button:hover {
background-color: #f4e5c5; Color of the buttons when you hover over them.
}
/*--------------------------------------------------
Tabs on Mail Page, Blogs
--------------------------------------------------*/
ul.tabbernav li a {
background: #b97c46;
}
.tabberlive .tabbertab {
background-color: #f4e5c5;
}
ul.tabbernav li a:hover {
color: #963500;
background: #e1ab7b;
}
ul.tabbernav li.tabberactive a {
background: #f4e5c5;
}
ul.tabbernav li.tabberactive a:hover {
color: #963500;
background: #e1ab7b;
}
/*--------------------------------------------------
Set the color and font of the button text, currently in Art Editor
--------------------------------------------------*/
.heebutton { font-family:arial,sans-serif; font-size:15px; color:#dfd48a; background-color: #b67942; padding:3px; border:0px; border-radius:5px; border: 2px solid #000000; }
.heebutton a:visited { font-family:arial,sans-serif; font-size:15px; color:#dfd48a; background-color: #b67942; padding:3px; }
.heebutton a:link { font-family:arial,sans-serif; font-size:15px; color:#dfd48a; background-color: #b67942; padding:3px; }
.heebutton a:hover { font-family:arial,sans-serif; font-size:15px; color:#000000; background-color: #b67942; padding:3px; }
Color of font:
Background color:
Border color:
/*--------------------------------------------------
Set the color of the side bar Header text (Chatbox/Quests)
--------------------------------------------------*/
.sidebar {
color:#dfc79d;
}
/*--------------------------------------------------
Set the color and font of the side bar header
--------------------------------------------------*/
.sidebarheader {
background: #5b3914 url(images/menu/menugradient.png) repeat-x;
}
/*--------------------------------------------------
Set the color and font of the status bar text
--------------------------------------------------*/
.statusbar {
background-color: #c0a16a;
}
/*--------------------------------------------------
Set the color of the text on the site
--------------------------------------------------*/
These are just the colors of the text on the site. I normally make these all one color.
.mainlineblack{ font-family:arial,sans-serif; font-size:15px; color:#000; }
.mainlineblack a:visited { font-family:arial,sans-serif; font-size:15px; color:#000;}
.mainlineblack a:link { font-family:arial,sans-serif; font-size:15px; color:#000;}
.mainlineblack a:hover { font-family:arial,sans-serif; font-size:15px; color:#4f2907;}
.mainlineblacksmall { font-family:arial,sans-serif; font-size:13px; color:#000000; }
.mainlineblacksmall a:visited { font-family:arial,sans-serif; font-size:13px; color:#000000;}
.mainlineblacksmall a:link { font-family:arial,sans-serif; font-size:13px; color:#000000;}
.mainlineblacksmall a:hover { font-family:arial,sans-serif; font-size:13px; color:#24683e;}
/*--------------------------------------------------
Set the alternate color of the text on the site
--------------------------------------------------*/
I also make these all one color most of the time.
.mainline { font-family:arial,sans-serif; font-size:15px; color:#983500; }
.mainline a:visited { font-family:arial,sans-serif; font-size:15px; color:#983500;}
.mainline a:link { font-family:arial,sans-serif; font-size:15px; color:#983500;}
.mainline a:hover { font-family:arial,sans-serif; font-size:15px; color:#24683e;}
/*--------------------------------------------------
Set the easy show enter
--------------------------------------------------*/
.easy {
color:#24683e;
}I change it to the same text color as above.
/*--------------------------------------------------
Set the small text color in chat (time)
--------------------------------------------------*/
I Just make it all one color.
.bsmalltext { font-family:arial,sans-serif; font-size:12px; color:#983500;}
.bsmalltext a:visited { font-family:arial,sans-serif; font-size:12px; color:#983500;}
.bsmalltext a:link { font-family:arial,sans-serif; font-size:12px; color:#983500;}
.bsmalltext a:hover { font-family:arial,sans-serif; font-size:12px; color:#24683e;}
/*--------------------------------------------------
Set the small text color in chat (posts)
--------------------------------------------------*/
I make this one color too.
.smalltext { font-family:arial,sans-serif; font-size:12px; color:#000000;}
.smalltext a:visited { font-family:arial,sans-serif; font-size:12px; color:#000000;}
.smalltext a:link { font-family:arial,sans-serif; font-size:12px; color:#000000;}
.smalltext a:hover { font-family:arial,sans-serif; font-size:12px; color:#24683e;}
/*--------------------------------------------------
Set the color and font of the menu bar text
--------------------------------------------------*/
.navbar {
background: #5b3914 url(images/menu/menugradient.png) repeat-x;
}
.navbar a {
color:#dfc79d;
}
.dropdown .dropbtn {
color:#dfc79d;
}
.dropdown-content a {
color:#000;
}
.navbar a:hover, .dropdown:hover .dropbtn {
background-color: #b67942;
}
/*--------------------------------------------------
Set the website background
--------------------------------------------------*/
body {
background-image:url(../images/hee_bg.jpg);
}
/*--------------------------------------------------
Set the game header image, dimensions: 858x150
--------------------------------------------------*/
.gameheader {
background:#963500 url(./images/HEE_head.jpg);
}
TIPS AND TRICKS:
1: For a transparent background use this line of code “background-color:rgba(255,255,255,0.2);”
2: For borders change the “solid” part to dotted or dashed to change the line texture.
3: To insert a new background image, make sure you get a direct link to the image. I recommend this website. Postimages — free image hosting / image upload
4: To insert a new header, make sure the image is 850 x 250 pixels. Also make sure the image has a direct link as well. The new header should be a png.
5: A great website to make avatars, banners, the website background, and the stable header is this one Login to your Canva account
6: Here is the link to a well working image resizer website Resize images online and free! - ResizePixel
If your website background image only goes down halfway, enter in this piece of code as well to make it “follow” your screen: background-attachment: fixed;
There are many more palettes to read and learn from! Once you get the hang of it, it’s really fun! One palette guide I also recommend reading is this one Horse Eden : Palette Guide. I learned from this one! :)There are so many more tricks and cool twists you can add to your palettes. I hope this helped! Enjoy! 😊 <3