Welcome to my guide on how to make a CSS for your den! With this guide, I hope to be able to enable all users to learn how to make their very own CSS. So, let's get started!

Learning how to code CSS can be intimidating and difficult in the beginning, so we'll start off with some helpful tips.

Tips

-Be patient and relax. Coding, and learning how to code takes time. In some cases, it will be like learning a whole new language. You might find it easier to listen to music, or have something else on in the background, while you work.
-Avoid using bright colors and hard to read fonts. While you may not stare at your den all day, these can strain your eyes. I personally will even make sure my screen brightness is at a reasonable setting to avoid eye strain.

-If you are on Windows, use notepad. If you use Mac, use textedit.
-You are going to need to sign up for a dropbox. This is free, do not worry. -For those wanting to change their background image, you are going to need to find a background. It's best to use one around 1920x1080, as anything smaller will not size up perfectly. I recommend using Pixabay to find good wallpaper sized images. You will need to upload the image to a hosting site such as imgur.
-For fonts, use Google Fonts. They have a very wide selection that if done right, are sure to work on LD for free.
-For anything color related, I recommend using Color Hex. There are lots of premade pallets that you can browse through, or you can just search for individual colors.

Without further ado, let's get started!

Open up your notepad (or textedit). I always put the import label (see images) from google fonts at the very top.




Now it's time for the main body.
*If using a background image:
body {background: url('IMAGE ADDRESS HERE') top center fixed;background-size: 100%;font-family: Raleway;color: black;}
-Please note that the url you post into this format must end in a .png, .jpg, etc otherwise it may not work.
*If using a plain color:
body {background: #87351a;font-family: Raleway;color: black;}

*Note*: "color" signifies font color.

After this point, I always save the file and upload it so I can make sure the background image is going to work. Make sure you save it as a .css otherwise it will not work.

Then upload it to dropbox. Once uploaded, click Share > Create Link > Copy Link. Once you have the link, you will need to copy and paste it into the following html code:
<*link rel="stylesheet" type="text/css" href="Dropbox Link Here" />
Change the www to dl, as well as the 0 to a 1, and put that html code into the Territory Description box in your den, (Den, scroll down > Edit your Details> Territory Description) and click save.

^ Should look similar to that.
If done right, you should see the changes done so far almost immediately.
You will want to save periodically, and each time you save, make sure to re-upload the file to dropbox before refreshing your den page. The changes won't happen automatically, you have to manually upload the file every time. The link will stay the same, so don't worry about that.

Now let's continue.
.topbar {background: rgba(126,100,86,0.8);border: 1px solid black;border-top: none;color: black;}
.navbar {background: rgba(126,100,86,0.8);border-bottom: 2px solid black;font-family: Julius Sans One;}
.navbar li a {color: black !important;}
.navbar li a:hover {background: rgba(144,90,93,0.8) !important;}

Let me explain a few things about what we've done so far .
-Background refers to the overall background, color, or image of the item you are coding. You can use either 3 or 6 digit hex codes, such as #000 or #000000, or you can go farther and use rgb values. Each color has 3 values that determine their color, the rgb standing for Red, Green, and Blue. For example, black has an rgb value of (0,0,0) and white has an rgb value of (255,255,255). If you want to add transparency to the background without affecting anything else, you must use a colors' rgb value and add an additional value for opacity like so: rgba(144,90,93,0.8)
The lower that last digit, the more transparent it will become.

- Sometimes you will notice a code doesn't work. In some cases, it is because Lioden's coding is overriding it. In these cases, just use !important like I have above, and it should cause your code to override or become more important. If that still doesn't work, there may be an underlying issue.

-.topbar, .navbar, .navbar li a, and .navbar li a:hover might be self explanatory but I'll still explain. .topbar controls the bar at the top of the page, .navbar is the navigation bar. .navbar li a controls the color and size of the font, and .navbar li a:hover affects what happens when you hover over the navigation bar.

.container.main {background: rgba(150,139,122,0.8);border: 1px solid black;box-shadow: none;}
.col-md-9 {background: none;}

.container.main controls the whole foreground table, whereas .col-md-9 only controls the larger left side. When you use "none" as a value, it just means it will be completely transparent.

.breadcrumb {background: rgba(223,215,205,0.8);}
.breadcrumb .active {color: black;}

.breadcrumb is the thin bar underneath the navigation bar that tells you what page you are on. (Home/Den is what you should see on your profile)
.breadcrumb .active just affects the text inside that bar.

.alert {background: rgba(150,139,122,0.8);border: 1px solid black;color: black;}
.alert-warning, .alert-danger {background: rgba(144,90,93,0.8);}

.alert affects the notifications that pop up on your den. There is technically 4 all together, but out of keeping it simple, this is how I have shortened it. .alert will affect all green notifications, and .alert-warning/.alert-danger will affect the red, though all you should have to change is the background as the rest of .alert's settings should carry over. Also you will have noticed that I grouped two of the alert codes together with a comma. You can do this, but just note that sometimes, it can start to affect things in weird ways.

.feature, div.left {background: rgba(137,117,100,0.8) !important;border: 1px solid black !important;}

-.feature changes both event feature boxes that will occasionally pop into our dens (ie pumpkin carving in october) and the ones that pop into your den if you have purchased the Feed All, Play All.
-div.left will change the 8 little boxes near the bottom of your den (King Dynasty, Pride dynasty, etc.)

Time to work on the sidebar components!

.panel {background: rgba(223,215,205,0.8) !important;border: none !important;box-shadow: none !important;}
.progress {background: rgba(50,50,50,0.4);}
.progress-div {color: black;}
.progress-bar {background: rgba(144,90,93,0.8);}
.chat_light {background: rgba(223,215,205,0.8);text-align: center;border: 1px solid black;border-bottom: none;}
.chat_dark {background: rgba(126,100,86,0.8);}

-.panel controls the boxes on the sidebar.
-.progress controls the empty space underneath the progress bars.
-.progress div controls the text in the progress bars.
.progress-bar changes all of the bars. There are 4 different ones, so if you want them all to be different colors, their codes will be entered in the initial comments below.
-chat_light and .chat_dark are just the text boxes in the chat.

We're about halfway there

h1 {color: black;font-size: 48px;}
h3 {color: black !important;font-size: 24px !important;}

-h1 controls the large headers, and h3 controls the smaller headers. These can be used in your html den coding, but until then, these will only affect the one that says this is [insert lion name here]'s Den, and the ones one the sidebar.

.table {background: rgba(223,215,205,0.8);border: 1px solid black;border-collapse: separate;}
.top, .bottom, th, .table .left {background: rgba(126,100,86,0.8) !important;color: black !important;}
.inner-table .left {background: rgba(137,117,100,0.8) !important;}
.inner-table .right {background: rgba(223,215,205,0.8)}
.right_odd {background: rgba(150,139,122,0.8) !important;}
.right_cub {background: rgba(144,90,93,0.8) !important;}

-.table controls the bottom layer of the tables. If you want to have a border around the whole table, you need to include the "border-collapse: separate". For some reason, the borders on any tables will get cut off on the right so this is the only way to fix that.
-.top controls the top of the table, .bottom controls the bottom, and th is like the secondary top of a table, or a sub header if you will.
-.table .left just takes care of whatever is left in certain areas of the tables.
-.inner-table .left, and .inner-table .right, control the small little boxes in the about and player tables.
-.right_odd controls the right side of the sparring table, and alternating lionesses in the pride tables. .right_cub affects any cubs that are still nursing.

.cave-grid, .mound-grid {background: rgba(126,100,86,0.8);border: 1px solid black;}

-.cave-grid controls the cave boxes, and .mound-grid controls the beetle mound boxes.

a:link, a:visited {color: black !important;}
a:hover {color: brown !important;}

-a:link and a:visited control any links on the page, and a:hover affects what happens when you hover over links.

input, select, textarea {background: rgba(223,215,205,0.8) !important;border: 1px solid black !important;box-shadow: none !important;color: black !important;text-shadow: none !important;}
input[type=button]:hover, input[type=submit]:hover {background: rgba(144,90,93,0.8) !important;}

This is where it can get a little bit tricky, which is why I have shortened it so much compared to other guides you may find. Input will affect buttons and any of the smaller text boxes. Select will affect dropdowns, and textarea will affect the big text box in territory description.

Using some of the more specific coding for these will allow you to target the one or two items you are really trying to change instead of all of them. Especially for input which is a very broad way to code it.

Unless you want to code boxes (Click Here), you are now done!

If there are still things you want to change that I didn't cover, small tweaks here and there, I will be including the required codes in the comments below as well. Click here to see