Hey all! This is gonna be a B I G post but hopefully it gives you all a chance to have your very own CSS in your dens! This is extremely easy to follow as long as you know some fairly basic internet functions This CSS will be simple and will be for solid-color backgrounds. It's not much, but I'm hoping to be able to provide pretty dens to anyone who wants one! Disclaimer: I am not a code expert!!! I am an amateur at best and I know only a little beyond this guide. I made this to share my own knowledge and to hopefully provide a simple and neat CSS for people who may want one.

YOU WILL NEED:
-The Notepad application or something similar. This can be found on your PC and should already be preinstalled. It's shockingly simple looking; if you have something fancy, it might not be correct.
-Dropbox. If you don't have a gmail account, they're fairly easy to make. Additionally, dropbox accounts are easy to make and use as well.
-Google Docs. This is NOT a requirement but it simplifies things imho
-Coolors or another color palette function. Basically, just know the hex codes for the colors you want!
-Sticky Notes. Again, your PC should already have this preinstalled. If not, you can also use the Notepad for this portion.
-Paint. Usually Microsoft Paint, but if you're using a Mac I'm sure there's a Paint alternative. This is OPTIONAL and will be discussed in a moment.
-Patience. You might make mistakes, even though this is marked as easy. This guide is easier than any of the ones I've seen around, but that doesn't mean coding is easy work. I'm aiming to eliminate any mistake-making, though!

TERMINOLOGY
-Hex Code: A hex code is a six-digit code made up of numbers and letters which will equate to a color when put into code. For example, #FFFFFF is white and #000000 is black.
-Section: In the code in the link, there are several little 'paragraphs'. For the purpose of this guide, I'll refer to them as sections.
-Line: In the code in the link, each paragraph has several little 'sentences' or 'lines'. For the purpose of this guide, I'll refer to them as lines.

IMPORTANT
Don't touch anything in the code unless directed to! In the directions below, unless specifically stated otherwise, I'm ONLY referring to changing hex codes. Do N O T touch anything else in the code.
-----------------------------------------------

Okay. First things first, here's what you're going to go off of:

Link

This WILL look confusing. Take a deep breath- you don't need to worry about it right now! You won't need to know what all of the symbols, shapes, and words mean either. With this guide, I hope to be able to eliminate the confusion and error often found in CSS.

Pull up Coolors in a separate tab and come up with a general color scheme. Any colors will do, but keep in mind that not all colors are fun to stare at! 'Electric' colors are usually to be avoided. Unless you'd like a black background with white text or vice versa, try not to choose a black or white background. If you choose a black or very dark color for the background and want black text, you won't be able to see the words on the page! The same goes for light colors and white text. Not sure if what you're planning will look good? Pull up Paint (as mentioned earlier) and use the 'fill' option with whatever color you're planning. Then, use the 'text' option and start typing in whatever font color you'd prefer. If everything looks good, then you're golden!

Once you've selected your color palette and know where you want which colors, pull up Google Docs in yet another new tab. Copy and paste the exact code shown in the link (which I'll share again, here). For this guide, I will be referring to the colors (or hex codes) shown in the code. You should end up with about nine pages in the document. The code in the link is for a pink CSS. If I have not changed it, it's still in my den!

In your Coolors tab, take note of the hex code for the color you'd like as your background. For this example, the hex code for the background is #D64550. It's a medium pink shade. Let's say you want a black background. In place of the #D64550 at the top of the linked code, you'd substitute #000000. This sounds a bit confusing, but all you've gotta do is delete what I have and replace it with your own hex code!

Continue this process as you continue through the code sheet. Here's a nifty 'converter' to help you figure out where to put which colors. I'll go in order right down the page, so follow along and change the hex codes accordingly. For now, IGNORE anything that is not directly mentioned.

>Track: This will give you a fancy new scrollbar. Specifically, this is for the 'back color'. If you'll notice, the scroll bar to your right has a lighter color and a darker color. We're focusing on the lighter color- the part you can't click and drag. I typically make this white, or #FFFFFF.
>Handle: This is the click-and-drag part of the scrollbar. Make it whatever color you want! It's best to NOT have this match the above hex code (ie if your 'track' code is #FFFFFF, do NOT make your handle code #FFFFFF, or you won't see it!).
>Handle on Hover: Go to the scrollbar on this page. Notice the slight color change when you put your cursor over the bar? That's this color. Folks usually choose to make this slightly lighter or slightly darker than the handle color itself.
>.col-md-9: Background stuff. Make this code the same color as your background! If you're wanting to experiment, go ahead and change this to a different color.
>Div Container Main: More background business, essentially. Make this code the same color as your background! If you're wanting to experiment, go ahead and change this to a different color.
>Navbar: This is the bit on the top of your den that has 'Den', 'Crossroads', 'Hoard', etc. Assign whichever color you'd like to this hex code.
>Navbar li a: This is the font color for the 'Den'/'Crossroads' bar. Make sure you can see whatever font color you choose on the bar color!
>Navbar li a hover: This is the color that you see when you put your cursor over the 'Den'/'Crossroads' buttons. This is like the 'Handle on Hover' thing
>Breadcrumb: This is the breadcrumb, or the 'Home/Den' bar beneath the logo.
>Feature: This is the bit you see in December or during other events when applicable. Think February flirts, December poops/gifts, etc.
>Topbar: This is the very tippy top of your den, where it says 'Welcome back' and shows your beetle count and the modbox. Make this whatever color you'd like.
>Sidebar: This is the side of your den- but only part of it! Code is weird. I typically match this to my den's background color. Makes it easy. Feel free to play around with it, though!
>Panel: These are the little boxes that show your energy, achievement progress, bookmarks, etc. Notice how I have 'none' instead of a hexcode? That's because I don't want color there! It just matches my background instead. That's usually the best way to go about things, but again- you can always play around.
>Chat Light/Dark: Chat box stuffs. This is something that's best to play around with unless you have something specific in mind. Usually folks have it match the background of their den. As this is a simple guide, leave this code as-is and ONLY change the part that says 'color' to change the text color in the chat boxes. As always, you can mess around with it if you feel comfortable.
>H1: This is the part that says your lion's name's den- just the font color.
>H3: This is the headers on the sidebar, like 'Achievements' and 'Bookmarks'. Again, this is just font color.
>Top, Th, Bottom, Left, Right-Cub: This is a whole bunch of nonsense you're more than welcome to play around with color-wise.
>Td: This is the background of the box underneath your king's name and title. It contains your lioness count, lion level, etc.
>Cave Grid, Beetle Grid: These are the colors for your cave tabs. Notice in my den how I have a cave titled 'the Apex'? This is that color.
>Link, Visited: These are for links. Think of things like forum notifications, message notifications, etc. This controls the link's font color.
>Hover: This is the hex code referring to the color you'll get when you hover over a link.
>Alert Danger, Alert Success, Attack Won, Attack Lost: Have all of these match unless you're messing around and trying new things. These refer to what you'd think they do- attack successes, failures, and the like.
>Input Type Button, Input Type Submit, Input Type Text, Input Type Password, Text Area, Select, Input Type Button Hover, Input Type Submit Hover, Input Type Text Focus, Input Type Password Focus, TextArea Focus, Select Focus: Again, unless you're feeling experimental, leave all of these as 'none', just like I have them in my code. Don't replace anything but the font color. Make sure it shows up on your main background color, as that'll be what color you'll be typing on.
>Progress: This is the part of the progress bars (Energy, Exp, etc) that isn't filled yet. Make this whatever color you want.
>Progress Div: This is the font color for the progress bars, or the part that'll tell you what percent filled each bar is. Make sure you can see it over BOTH the filled and unfilled bar colors!
>Progress Bar Warning, Progress Bar Danger, Progress Bar Success, Progress Bar: These are the part of each bar you've already filled. You're welcome to play with this, but for this example I have all of them the same.

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

Now that you've customized all of the colors you can, here are a few things we skipped over but are still important:

>Font. In the code you copied and pasted, the font style is Lucida Sans Unicode. There are only very specific types of font that work!!! Either leave this alone or google 'CSS Font Families' and look around for something that you could put in place of Lucida Sans Unicode. If you'd prefer, you can simply choose either Times New Roman, Arial, Verdana, Comic Sans MS, Impact. The parts of the code where you would need to edit the font type, should you choose, can be found using CTRL + F.
>Width. This is the third 'section' down when starting from the top. This controls how thick the main scrollbar is. It's best to leave this alone.
>Div Container Main. This is the Lioden logo! This is difficult to change and can take a bit of trial-and-error. If you do NOT change this, the Lioden logo will appear a shade of pink in your code as it currently appears in my den. In order to change this, you can either DELETE this portion of the code to have the original logo coloration, OR you can right click and save the logo and change the color in an art application using the hue shifter. This is a bit more complicated, so only do this if you know how. If you do not, simply DELETE THIS PORTION OF CODE. Deleting this code portion will NOT remove the Lioden logo, it'll only remove the pink version of the code I've implemented.
>Border. Nearly each section of code contains a line mentioning border. This refers to the thin lines around boxes within your den. Again, this is something better left untouched. If you wish, however, you can change the color of these lines. You can also change the thickness of the lines. Do not go under 1px.

NOTE
>If you are brand-new to this, do NOT experiment unless you feel comfortable. No, you won't break your computer, but it can get frustrating quickly. If you aren't sure what to do, don't experiment.
>Don't use more than five or six colors. Using too many colors can make things messy, sloppy, and confusing. If you'll notice, I only use a total of six colors or so throughout all of my code, not including white and black for font and borders. It can be tricky choosing only a few colors, but it is important to keep it to a minimum so it looks good.
>If you're picky about how things look or want your den to look like mine, change things in accordance to how my code is already laid out. For example, if you want EXACTLY what I have but with different colors, take advantage of the 'Find and Replace' function in Google Docs. I do this every time I want to change the colors in my den! Let's say your background is currently #000000 but you want it to be #FFFFFF. In your Google Document, do the CTRL + F function and type in #000000. Then click the three dots slightly to the right and then a new window will appear. In the box below, type #FFFFFF and then select 'Replace'. You can also opt to 'replace all' to substitute all colors that were once black (#000000) to white (#FFFFFF).
>If you opt to change the Lioden logo's color and have successfully managed to do so using an art application (Photoshop, FireAlpaca, etc), upload it on an image hosting site like imgbb and then COPY THE IMAGE ADDRESS. If you do not, the logo will not upload correctly. Make sure the image address you copied resembles the one I have in my code should you use imgbb to upload.

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

Now that you've got all of the code in order and have inserted the hex codes for the colors of your choice, copy and paste the code into your computer's Notepad application. Do not delete any spaces or any portion of the code while you do this. Next, save the note to your computer. IN ORDER FOR THE CODE TO BE SAVED AS A CSS-ABLE CODE, BE SURE TO SAVE YOUR FILE AS '.CSS'. For example, if you wish to call your document 'Code', you'll want to save it to your computer as Code.css. It will save as a txt file- this is okay.


Next, head over to Dropbox. From there, create or login to your account and upload your file (perhaps Code.css) to dropbox. This will take a matter of seconds. Once the file has uploaded, choose the 'Share' option. You'll want to create a link and then copy it. For safe keeping, copy and paste this link onto a Sticky Note, one of the applications mentioned earlier. You'll get something that resembles the following:
https://www.dropbox.com/s/rj2ya7luum128li/code.css?dl=0

This next part is silly, so stick with me. Delete the first part of this URL. You'll only want your equivalent of /s/rj2ya7luum128li/code.css?dl=0 remaining.
Instead of https://dropbox.com/s/rj2ya7luum128li/code.css?dl=0, you'll want to have this:
https://dl.dropbox.com/s/rj2ya7luum128li/code.css?dl=0

Now, use the following and insert the new URL you have created into the slot shown. Don't worry about any of these fancy words, just add your newly crafted link in the spot shown:
<*link rel="stylesheet" type="text/css" href="PutYourNewURLHere"*/>

Your version of the code will look like this:
<*link rel="stylesheet" type="text/css" href="https://dl.dropbox.com/s/rj2ya7luum128li/code.css?dl=0"*/>

Of course, it will contain your own URL that you created in the earlier steps. Before you can use your new CSS, remove the asterisks. Do not leave a space where the asterisks were, just delete them. Take your asterisk-less code (yes, that's code!) and copy and paste it into your den description.

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

HOPEFULLY this was easy enough to follow! Let me know if I should make any edits, simplify anything, or if I can answer any questions. You're free to PM me at any time with questions, but you can also contact the modbox or refer to other guides for more complicated code or for things I didn't describe. If you PM me about something I cannot answer, I may redirect you! As mentioned earlier, I'm not an expert. I know how to read and write code, but not much beyond what is featured here.

If you cannot follow this guide, have tried many times to no avail, or would simply like a CSS made for you, feel free to comment or PM me and I will create one for you at no cost. Note that because this is free, it may take a little while to get to you.