my CSS shop: here!

hey it's koura! while i was free from work i decided to make a CSS guide. this'll include what you need to do for your CSS to work, a little bit of vocab, and other things that may help!

i would like to thank Tserin, Fea, and Keina bc they're amazing and they're the reason why i know so much about CSS <3

first of all, here's what you need:
- a dropbox account
- any notepad (the notepad application on your computer, i use this website to type my CSS
- any knowledge of coding


what you probably want to know before coding:
- BE PATIENT !!
- find a color scheme! you need to know the hex code or the rgb value of those colors, though!
- you need to know what you want to do with your den! if something doesn't look right, change it!
- if you want to find background images for your den and you're on google images, go to tools > size > large! that way, all of the images you see won't look pixelated in your background.


alright, let's get into it!

first of all, we're going to change the background.

.body {
background: url('IMAGE URL') no-repeat center center fixed;
background-size: cover;
color: #HEXCODE;
}


- .body is the background.
- url('IMAGE URL') tells us that what's inside of those quotation marks is what the image will be in the background.
- no-repeat center center fixed tells us that the background will not repeat, will be in the center of the page, and is fixed, meaning that it won't move.
- everything that goes inside of the curly brackets { } will tell your browser to change its original background to what you have chosen.
- color tells you what color to change all of the text to.

but what if you don't want a background with an image?
then, you change the code to this:

.body {
background: #HEXCODE;
color: #HEXCODE;
}

now i've told the browser that the background will be a color.

now, onto the foreground!

.main {
background: none !important;
border: #px solid #HEXCODE !important;
border-radius: #px;
}

- .main is the foreground
- none means that the background will be transparent.
- border tells us what to change the border to (duh). #px means how much thick it is in pixels. most people set it to 1 pixel.
- solid means that it's one solid line. you can also set it to double (two lines) or dotted. if you're going to do double, then set the px to 4px.
- border radius is how round the corners are.

onto the navigation bar!

.navbar {
background: transparent !important;
border: none !important;
border-bottom: 1px solid #HEXCODE !important;
border-top: none !important;
border-right: none !important;
color: #HEXCODE !important;
}

- .navbar means the navigation bar (den, crossroads, hoard, etc.)
- border-bottom means the bottom part of the border only.


those is basically the basics. here are more "classes" (things in your den that can be changed by CSS):

.panel {
}

this controls the background of the boxes on the side, where it shows you the progress bar, the event beetles, game stats, etc. you can change the border, background, color of text, and other things.

.topbar {
}

this controls the bar at the very top, where it says "welcome back".

.breadcrumb {
}

this controls the bar below the navigation bar, where it has the bookmark button.

.sidebar {
}

this controls the whole bar on the right, aka the slightly darker color behind the panels.

.progress {
}

.progress div {
}

.progress-bar, .progress-bar-success, .progress-bar-danger, .progress-bar-warning {
}

.progress controls the empty part of the progress bar, .progress div controls the text, and the rest controls the filled part of the progress bar.



we're a third of the way done! now we're doing the den tables.


.table {
}

controls the background of the den tables.

.bottom {
}

controls the mutation counter in your den.

.top, th {
}

controls the top of your den, where it says your lions name.

.left {
}

controls the little boxes saying "level", "sub males", your frozen slots


.cave-grid, .mound-grid {
}

controls the caves.

we're done the tables! whew! we just have to do a bit more.


a:link {
}

a:hover {
}

a:link controls the links, a:hover controls the link when it's hovered.

.attack-won, .attack-lost, .alert-success, .alert-danger {
}

this controls the alerts and the attack result.


input[type="button"], input[type="submit"], input[type="button"]:hover, input[type="submit"]:hover {
}

controls the buttons.


input[type="text"], input[type="password"], textarea, input[type="text"]:focus, textarea:focus, select:focus {
}

controls the text that you type in.

h1 {
}


h3{
}

h1 contols the big header ("____'s den") and h3 controls the small headers.

.chat_light {
}

.chat_dark {
}

chat_light controls the light part of the chat box, chat_dark controls the dark part.


aaaand we're done the den! soo much coding .

but we still have some things to go over! i haven't covered some of the things you can control inside of the curly brackets.

.any class! {
text-align: ____ !important;
}

text-align controls where your text goes. if you set it to center, the text goes to the center, setting it to left makes the text go left, and setting it right puts it right.

.any class! {
text-shadow: 1px 2px 3px #HEXCODE;
box-shadow: 1px 2px 3px #HEXCODE;
}

text-shadow adds a shadow to your text. box-shadow does the same thing but for a box. 1px controls how many pixels the shadow will move horizontally. 2px does the same thing but vertically. 3px is how blurry the shadow is.

. any class! {
font-size: 20px !important;
}

font-size controls how big your text will be.

now you might be thinking, "but how do you put the CSS into your den?"

follow these steps:
1. save your CSS as anything you want, but it has to end in .css.
2. go to dropbox, and upload the file.
3. press share and get the share link.
4. copy and paste it into this code and remove the *s:

<*link rel="stylesheet" type="text/css" href="LINK TO CSS"*>



okay, we're done... for now. i'll be adding more stuff as the time goes by! if you can understand this garbled mess of a CSS guide, then good for you!