THIS THREAD IS VERY LONG AND HAS A LOT OF CODE.

ALRIGHT KITTENS time to learn how to CSS code your den. It's not scary or even that difficult once you've gotten used to the whole process, I promise. In this thread I'm going to walk you through how I code CSS layouts. This means that there may be some "unnecessary" coding and that you could do it another way faster/more cleanly, but that's not how I do it. This is also going to be a fairly basic guide without anything particularly fancy or advanced.

FIRST OFF. Things you'll need.

• Something you can write in and save things as .css files with. Doesn't have to be anything fancy. I literally just use notepad.


• A Dropbox account with a public folder or a Google Drive account. That's what you're going to use to host your CSS file so you can link it to your den.


• At least a vague idea of what you want your den to look like. It doesn't matter if you're just gonna change it the next day or make several layouts to use. My side account has five different ones. What matters is you have some idea of what you want.
  
• A site you can get hexcodes from. Hexcodes are what we use to color things, so they're pretty important. I use ColorPicker, though Paletton is also quite nice.


• PATIENCE. This is probably self-explanatory.

SECOND. Things I recommend.

• A list of fonts. If you're going to change fonts, then obviously you'll need to know what options you have. Here's a list of fonts that don't need any extra work for most people to see, and here are fonts that will need an additional CSS code (it gets given to you, don't worry!) to work.


• Some basic coding knowledge. You don't need to know anything about coding, but it does help if you already know some CSS, or even know some HTML.


• Music to listen to. If that helps you, that is. It honestly helps me a lot. If you find you're having trouble concentrating, try listening to video game soundtracks. They're designed to keep you engaged in what you're doing, so it might help a bit.


• W3Schools' CSS section!! It has a lot of info and can definitely help you learn.

There are also some things I don't recommend.

• FONTS THAT ARE NOT EASILY READABLE BY MOST PEOPLE. This includes some cursive fonts and bold fonts. Lobster is a popular choice that can be difficult to read sometimes.


• Also fonts that I do not recommend that don't really fall into the above categories are Papyrus and Tangerine. Both have to be made rather large to be easily readable, which ends up making boxes bigger, which in my opinion looks quite bad. Tangerine is worse with this than Papyrus. Papyrus personally offends me, though.


• LOTS OF BRIGHT COLORS. A blinding den is NOT a good thing to have.


• Font colors that are very similar or almost the same to the background color. Dark grey text on a darker grey or even black background, for example. This also makes it difficult to read.


• Animated backgrounds. Really fucking distracting.

Now, shall we get started?

The first thing I'm going to do when I decide to make a layout is to open notepad (or another program that can be used for this purpose) so I can actually write the code. Then, I'm going to figure out what I want the background to be. I think I just want a solid color, so I'll grab a hex code from ColorPicker (a shade of blue sounds nice right now) and do this,

body {
background: #113145 !important;
}

That will give me a nice blue background. To quickly go over what exactly this is doing,
body tells the browser what part of the page we're changing,
background: tells the browser what about the body we're changing,
#113145 tells the browser what color to change the background of the body to.
{ and } show where the code for what we're changing about the body begins and where it ends. You need to include these, otherwise your code will not work.
The ; at the end shows where the code for what we're doing to the background of the body ends. Again, you need to include these for your code to work.
!important is a way to force your custom CSS to work. You need it for some areas, however I just add it to everything so I don't have to remember what needs to have an !important tag and what doesn't. Feel free to experiment.
All future codes will be made up in a very similar way, and should be mostly self-explanatory. If you don't understand what exactly something is doing, though, feel free to ask.

If I wanted to use an image instead of a solid color, I would do this instead,

@media (min-width:768px) {
body {
background: url('PASTE IMAGE DIRECT URL HERE') center center fixed !important;
background-repeat: no-repeat;
background-size: 100%;
}
}

@media (max-width: 768px) {
body {
background: url('PASTE IMAGE DIRECT URL HERE') center center fixed !important;
background-repeat: no-repeat;
background-size: 100%;
width: auto !important;
min-width: 600px !important;
}
}

This code is something I've been experimenting with and may not work as expected all the time. Basically, what it should do is automatically resize the image to perfectly fit the viewer's screen regardless of what their screen size is. If you'd rather use what everyone knows works fairly well (though the resizing isn't perfect), you can use this instead,

body {
background: url('PASTE IMAGE DIRECT URL HERE') no-repeat center center fixed;
background-size: cover;
}

Now that that's done, I'm going to save my code as a .css file. Make sure you're saving it as a .css file. Accidentally saving it as the default .txt is a very common mistake and saving it as anything other than .css will cause it to not work in your den. Then, I'm going to upload it to Dropbox and link it to my den. Here is a guide to doing that using Dropbox, and here is a guide to using Google Drive for it. Some images are broken, however if you're using Dropbox and need help, let me know. I've used it for Lioden CSS for years.

I'll be saving my code several times throughout the coding process so I can see what I'm doing and how everything looks.

Now that it's linked to my den, I can see that the background code I used earlier doesn't change the background of the entire page. That is because there are two more backgrounds (to make things easier, we'll call these the foreground)on top of the body background. That's easy to change, though! I'd like my foreground to be a little bit lighter in color than the body background, and I'd like a border around it, so I'll do this,

.col-md-9.col-xs-12 {
background: #143C54 !important;
border: 4px double #91AFC2 !important;
border-top: none !important;
border-right: none !important;
border-bottom :none !important;
}

div.container.main {
background: #143C54 !important;
border: 4px double #91AFC2 !important;
border-left: none !important;
}

As you can see, borders for the foreground can be "fun" if you want them to go all the way around without anything strange happening to them. Now I'm going to save my file again, and since I'm using Dropbox, it's going to automatically update my den so I can see what I've just done without having to get a new link. I don't think Google Drive does that, but I may be wrong. It's been a while. Now I can see that the text on the foreground isn't really readable with this background, so I'll just change it by adding this to the body background,

color: #C3DAE8 !important

so now the body code looks like this,

body {
background: #113145 !important;
color: #C3DAE8 !important;
}

Be careful with this, though, because it changes the color of all the text on your page. You can later "overwrite" it so specific bits have different colors by just specifying a different color for it when you get to it, but it's not always great if you're starting completely from scratch and updating as you go.

Now I'll change the navigation bar, since it's connected to the foreground. I'll also make the text on it a different font, because why not?

.navbar {
background: #143C54 !important;
border: 1px solid #91AFC2 !important;
border-bottom: none !important;
border-top: none !important;
border-right: none !important;
box-shadow: none !important;
font-family: 'Century Gothic';
}

.navbar li a {
color: #FFFFFF !important;
}

.navbar li a:hover {
background: #0F2F42 !important;
}

.navbar controls the actual bar, .navbar li a controls the text on it, and .navbar li a:hover is what happens when someone hovers over one of the links.

Now, I'll do the top bar (the one at the very top of the screen), the "breadcrumb" (the thing that says Home / Profile on it), the event box (an example of this is the snuhlion thing during the December event. it isn't visible every month) and the sidebar.

.breadcrumb {
background: #0F2F42 !important;
color: #C3DAE8!important;
border: 1px solid #91AFC2 !important;
}

.feature {
background: #0F2F42 !important;
color: #C3DAE8!important;
border: 1px solid #91AFC2 !important;
}

.topbar {
background: #143C54 !important;
color: #C3DAE8 !important;
border: 1px solid #91AFC2 !important;
border-top: none !important;
border-bottom: 4px solid #91AFC2 !important;
}

.sidebar {
background: #091B26 !important;
color: #C3DAE8 !important;
border: none !important;
}

.panel {
background: none !important;
border: none !important;
box-shadow: none !important;
}

.chat_light {
background: #0F2F42 !important;
color: #C3DAE8!important;
border: 1px solid #91AFC2 !important;
text-align: center !important;
}

.chat_dark {
background: #091B26 !important;
color: #C3DAE8 !important;
border: 1px solid #91AFC2 !important;
text-align: center !important;
}

.breadcrumb controls the breadcrumb, .feature controls the event box, .topbar controls the bar at the very top, .sidebar controls part of the sidebar, .panel controls the "panels" on the sidebar with things like the game stats (I just remove the background, border, and box shadow on them so it's like they don't exist, I respect anyone who makes them look nice without doing that), .chat_light and .chat_dark control the chatbox.

Real quick I'm also gonna do the headers (-lion's name-'s den, achievements, etc.)

h1 {
text-align: center !important;
color: #C3DAE8 !important;
font-family: 'Century Gothic' !important;
}

h3 {
text-align: center !important;
color: #C3DAE8 !important;
font-family: 'Century Gothic' !important;
}

h1 is the main header with -lion's name-'s Den, h3 controls the headers on the sidebar. Keep in mind that if you use <*h1>text<*/h1> or <*h3>text<*/h3> in your den without the asterisks, it will also affect those.

And now the pride tables. Yay.

.top {
background: #0F2F42 !important;
color: #C3DAE8 !important;
border: 1px solid #91AFC2 !important;
text-align: center !important;
font-family: 'Century Gothic' !important;
}

th {
background: #0F2F42 !important;
color: #C3DAE8 !important;
border: 1px solid #91AFC2 !important;
text-align: center !important;
font-family: 'Century Gothic' !important;
}

.bottom {
background: #0F2F42 !important;
color: #C3DAE8 !important;
border: 1px solid #91AFC2 !important;
text-align: center !important;
font-family: 'Century Gothic' !important;
}

.left {
background: #0F2F42 !important;
color: #C3DAE8 !important;
border: 1px solid #91AFC2 !important;
text-align: center !important;
font-family: 'Century Gothic' !important;
}

td {
background: #091B26 !important;
color: #C3DAE8 !important;
border: none !important;
}

.right_cub {
background: #0F2F42 !important;
}

.top and th control the headers, .bottom controls the bottoms of tables that have them (for example, the mutation counter), .left controls miscellaneous bits that the other codes didn't get, td controls the insides of the tables, .right_cub controls how cubs are listed in your pride list.

Now that all the major things are done, it's time for links. This is very easy.

a:link {
color: #FFFFFF !important;
}

a:visited {
color: #FFFFFF !important;
}

a:hover {
color: #E0E0E0 !important;
}

a:link controls normal links, a:visited controls links you've already clicked on, a:hover is what happens when someone hovers over a link. If you want to add a transition effect where the color slowly changes to the hover color when hovered over, just add transition: 0.5s; to a:link. 0.5s is the time it takes to transition to the hover color and can be changed to be shorter or longer. Just change the number.

If you want links in different areas to be different from other links, you can do that by putting the selector (the part before the {, for example .topbar, .breadcrumb, .sidebar, etc.) in front of a:link, a:visited, and a:hover. Make sure to keep the normal a:link, a:visited, and a:hover, though. For example, I could do this if I wanted the top bar links to transition, but don't want any of the others to transition,

a:link {
color: #FFFFFF !important;
}

a:visited {
color: #FFFFFF !important;
}

a:hover {
color: #E0E0E0 !important;
}

.topbar a:link {
color: #FFFFFF !important;
transition: 0.5s !important;
}

.topbar a:visited {
color: #FFFFFF !important;
}

.topbar a:hover {
color: #E0E0E0 !important;
}

Congratulations, by this point, you've coded the majority of your den! There are just a few pieces left.

The first of those few pieces we'll do are the alerts (for example the notification telling you you have a new message), and the attack won/lost messages. Because I'm lazy and don't look at these much, I'm going to make them all the same.

.alert-danger {
background: #0F2F42 !important;
color: #C3DAE8 !important;
border: 1px solid #91AFC2 !important;
text-align: center !important;
}

.alert-success {
background: #0F2F42 !important;
color: #C3DAE8 !important;
border: 1px solid #91AFC2 !important;
text-align: center !important;
}

.attack-won {
background: #0F2F42 !important;
color: #C3DAE8 !important;
border: 1px solid #91AFC2 !important;
text-align: center !important;
}

.attack-lost {
background: #0F2F42 !important;
color: #C3DAE8 !important;
border: 1px solid #91AFC2 !important;
text-align: center !important;
}

I think these are pretty self-explanatory, so I won't explain them. Feel free to ask about them anyway though.

Now let's do the buttons and text input areas. These are pretty easy as well, though a bit tedious.

input[type="button"] {
background: #0F2F42 !important;
color: #C3DAE8 !important;
border: 1px solid #91AFC2 !important;
text-align: center !important;
text-shadow: none !important;
box-shadow: none !important;
}

input[type="submit"] {
background: #0F2F42 !important;
color: #C3DAE8 !important;
border: 1px solid #91AFC2 !important;
text-align: center !important;
text-shadow: none !important;
box-shadow: none !important;
}

input[type="text"] {
background: #0F2F42 !important;
color: #C3DAE8 !important;
border: 1px solid #91AFC2 !important;
text-align: center !important;
text-shadow: none !important;
box-shadow: none !important;
}

input[type="password"] {
background: #0F2F42 !important;
color: #C3DAE8 !important;
border: 1px solid #91AFC2 !important;
text-align: center !important;
text-shadow: none !important;
box-shadow: none !important;
}

textarea {
background: #0F2F42 !important;
color: #C3DAE8 !important;
border: 1px solid #91AFC2 !important;
text-align: center !important;
text-shadow: none !important;
box-shadow: none !important;
}

select {
background: #0F2F42 !important;
color: #C3DAE8 !important;
border: 1px solid #91AFC2 !important;
text-align: center !important;
text-shadow: none !important;
box-shadow: none !important;
}

input[type="button"]:hover {
background: #091B26 !important;
color: #C3DAE8 !important;
border: 1px solid #91AFC2 !important;
text-align: center !important;
text-shadow: none !important;
box-shadow: none !important;
}

input[type="submit"]:hover {
background: #091B26 !important;
color: #C3DAE8 !important;
border: 1px solid #91AFC2 !important;
text-align: center !important;
text-shadow: none !important;
box-shadow: none !important;
}

input[type="text"]:focus {
background: #091B26 !important;
color: #C3DAE8 !important;
border: 1px solid #91AFC2 !important;
text-align: center !important;
text-shadow: none !important;
box-shadow: none !important;
}

input[type="password"]:focus {
background: #091B26 !important;
color: #C3DAE8 !important;
border: 1px solid #91AFC2 !important;
text-align: center !important;
text-shadow: none !important;
box-shadow: none !important;
}

textarea:focus {
background: #091B26 !important;
color: #C3DAE8 !important;
border: 1px solid #91AFC2 !important;
text-align: center !important;
text-shadow: none !important;
box-shadow: none !important;
}

select:focus {
background: #091B26 !important;
color: #C3DAE8 !important;
border: 1px solid #91AFC2 !important;
text-align: center !important;
text-shadow: none !important;
box-shadow: none !important;
}

button and submit control buttons, textarea, text, and password control text areas, select controls drop down boxes. hover controls what happens when the thing is hovered over, and focus controls what happens when a thing is clicked on so something can be selected or typed into.

We're almost done! We just have the progress bars, now.

.progress {
background: #000000 !important;
border: 1px solid #051B29 !important;
}

.progress div {
color: #C3DAE8 !important;
}

.progress-bar-warning {
background: #2C6282 !important;
}

.progress-bar-danger {
background: #2C6282 !important;
}

.progress-bar-success {
background: #2C6282 !important;
}

.progress-bar {
background: #2C6282 !important;
}

.progress controls the unfilled part of the bars, .progress div is the text color, and everything else controls the filled part of the bars.

AND THAT'S IT. It's all been coded. My side has yet another CSS code. Oh god. Hopefully, if you've been following along making your own, you've also succeeded, and if so, congratulations! I'm proud of you. You should show me what you've done. I like looking. If not, show me your code and tell me what you're trying to do and I'll see if I can help. If your code isn't showing up at all, also show me the code you are using to link it to your den.

Want to see the code I made in action? It's over here on my side account. Probably. If it isn't various shades of dark blue with no images and white links, I've changed it at some point. Let me know if you want to see what it looks like. You CAN use it if you really want, but it was made with the intention of showing you how to make your own. Still, message me for the code if you want it.