~ Feather's CSS Guide~

Hey everyone. I'm Fea, nice to meet you. I hope you've clicked this because you'd like to learn some coding! I'm going to be teaching you how to use CSS to make your den look nice. I'm a web developer in real life, so this is fun for me!

What you're going to need

◼︎ Some kind of text editor (notepad, notepad++, Atom etc.)
◼︎ Some patience. Coding is difficult to learn at first, but once you get the hang of it, you'll find that it starts to come more naturally.
◼︎ Basic knowledge of HTML. HTML and CSS are best friends, you need to know how to HTML first, there are plenty of guides around Lioden for that!
◼︎ Some kind of file hosting spot such as Dropbox, Google Drive.

What is CSS?

CSS are Cascading Style Sheets . If HTML is the walls and structure of a house, CSS is the guide to what colour you're painting your walls, and what kind of doors you want. The cascading part just means that the file is read from top to bottom by the browser. If you write some CSS further down the file that affects the same thing as another rule further up, the one closest to the bottom overrides. (This is important, and one of the things you need to watch out for to avoid using !important too much).

I'd like to point out at this point that CSS does not look the same in every browser. Although we're pretty close to getting them all similar now, there are some differences. Each browser (chrome, firefox) have their own engine which reads and interprets the code that it is given by a server.

Basic rules of CSS

To get your CSS in your page, you need to use this code, without asterisks:

<*link rel="stylesheet" type="text/css" href="YOURCSS.css"*>

It has to be a ".css" file that you save it as, and can be hosted somewhere such as Dropbox, or Google drive.

Awesome, let's cover the basics! CSS has a very particular format in which it is written. Here's an example:

body {
color: #3D4F47;
background: url('http://static.lioden.com/images/nightBG.jpg');
background-attachment: fixed;
}

This code is what you'd use to change the background and text colour of the entire page. If it looks complicated, don't worry! Allow me to explain.

CSS targets a particular element on the page, which relates to the HTML name of a tag, or a class. You can see here that this CSS rule is targeting the body tag in the page's HTML. This isn't a class name, it's a default, pre-defined HTML tag.

These bad boys --> {} are called curly brackets . They tell the browser, after declaring which element you're targeting, where your new CSS rules are going to start and end.

So this:

body {}

Is technically valid CSS! You're just not telling the browser to do anything with it yet.

Here's that same code, but with the first rule in it:

body {
color: #3D4F47;
}

So, CSS isn't perfect. There are some vague things and weird quirks. 'color' is actually about the text colour. You'll notice that it's in american spelling too! That's just part of CSS. As an English developer, it's just a rule you have to remember! The part after the colon is the colour you want the text in the WHOLE page to be. You can override this further down the file if you wish, for specific elements or boxes. The colour we have here is a hexadecimal number, which represents a colour. They always start with a '#', kinda like a hashtag! You can actually use words too, but there's a limited list of ones that work, such as ' color: red; '.

Here's a place you can grab colour schemes in hex codes from: Paletton

Here's the same code again, but this time we're going to add the background image we want to use!

body {
color: #3D4F47;
background: url('http://static.lioden.com/images/nightBG.jpg');
}

There's our previous text-changing code, and then below it, a new rule which is pointing the browser to change the 'background' property of the 'body' tag. After the colon, we've then told the browser to get ready to accept a url. That's just a full web address that leads to an image. You can grab that from any image as long as it's hosted somewhere by right-clicking and "copy image address" or similar, depending on your browser.

Remember to use your brackets and single quotes to tell the browser THIS IS THE URL! Then, paste the URL in between them!

This code will change the background of your page to be anything you put into the quotes, as long as the image is valid.

Here's the code again, except this time in it's final form! (ROOAAAR!)

body {
color: #3D4F47;
background: url('http://static.lioden.com/images/nightBG.jpg');
background-attachment: fixed;
}

You'll notice there's a final rule we've added. This one is actually optional, and gives the impression, when you scroll, that the background is 'fixed' (pinned) against the back of the web page, and the content infront moves up and down it. Neat. We've specified the property background-attachment , and told the browser to make it fixed .

You can see that there's now a closing curly bracket after the final 'rule'. This tells the browser that we're done editing the rules for the body tag ; get ready for the next item.

Basically, most simple CSS rules take this form, where you specify which element you want to change, and then 'key : value' 'rules'.

Guide-by-Element

Now you know the basics of how writing CSS works, I'm going to show how to target some specific elements of the Lioden Den layout, so you can change them as you like with your own CSS file! When targeting a class you'll find that you need a '.' at the beginning of the name. This means it's a class. If you (hopefully rarely) need to target an id, you'll use a '#' hash.

Page Background (Body)

Target with: body {}

☑︎ background: (hex code | colour name)
☑︎ background-attachment: (scroll|fixed)
☑︎ background: url(' URL HERE ')
☑︎ background-repeat:

Lioden generic layout elements

◼︎ a:link, (link in it's default state)
◼︎ a:visited, (link when it's been clicked on previously)
◼︎ a:active (link as it's being pressed down)
(These can be added after any of the elements below to target their specific links)

☑︎ .topbar (the bar right at the top with welcome message in it)
☑︎ .main (the container for the entire content, edits sidebar bg without touching anything in it)
☑︎ .navbar (navigation bar background/container)
☑︎ .navbar-default .navbar-nav > li > a (targets all the links in the navbar)
☑︎ .col-md-9 (main left content)
☑︎ .breadcrumb (the breadcrumb bar inside left content that shows you where you are)
☑︎ .panel (background colour of Bookmarks/Achievements/Stats boxes)

Tables on Den (where your lion info/pride is)

☑︎ .table .top (changes the table headers)
☑︎ tr.right (changes whole ABOUT table)
☑︎ td.right (changes just the right section of the ABOUT table)
☑︎ .inner-table (targets the info blocks inside ABOUT table)
☑︎ .inner-table .right (targets left of info block ie. stats, cubs, male slots)
☑︎ .inner-table .left (targets right (values) of info block items ie. 16/200)
☑︎ .table .bottom (changes bottom bar of tables)

The above targets will create rules for every table on the den page. If you'd like to specify which table, Abbey recently added the following IDs:

☑︎ #about
☑︎ #player
☑︎ #pride
☑︎ #sparring
---> (sparring block has an extra class called .right-odd which has the sparring dropdown in it)
☑︎ #allies
☑︎ #clans

You can use these in such a way:

☑︎ #about.table
☑︎ #pride.table .top

And so on.