Unit I CSS Guide:For Korras

Let's suppose you have a special guest coming to your wiki chat who wants the chat to be dark themed as opposed to light and give it a fancy font. You want to make it for them, but you don't know how. This guide will teach you how to turn a light theme dark.

## Choosing your color scheme

The first step before you even begin to think about changing CSS is to find a good color scheme. You don't want each color to be a dead black and white as this will give the chat no variety. Google is a good place to find good hex codes. For our purposes, we will be using the following colors:

Background: #171717

Text: #f7f7f7

Text box/PM header: #262626

Links: #27a7ba

Your message background: #383838

## Changing your background

Like building a house, there is a certain order of designing a chat theme you should take before doing so. First, you should change the color of your background so it blends in.

In order to change the color of the background area, we need to edit the chat header, the main chat, the side rail, and the area surrounding the text box. Now, we could do something along the lines of:

```
.Chat, .Rail, .Write, .ChatHeader {
    ...
}
```

However, this is tedious and becomes a lot to type. Instead, you can use `#WikiaPage`, which modifies the main chat, the side rail, and the area around the text box.

This creates the code:

```
#WikiaPage, .ChatHeader {
   .....
}
```

This is much simpler and easier to type. Now, we need to modify the actual color of chat.

**background-color** controls the color of the backdrop of the element, which is generally the area around borders and is behind text. We can use this code to adjust the background color of chat to our needs:

```
#WikiaPage, .ChatHeader {
    background-color: #171717;
}
```

This should change chat to your desired color.
This looks very ugly right now, but don't fret because we're about to change the text color.

## Changing the color of text

Changing the color of the text is quite easy and is similar to changing the background color. **color** changes the color of elements in front of the backdrop, like text. Refer back to your previous code with the background color. Since we are changing the same two areas, we can use the same classes and build onto it.

```
#WikiaPage, .ChatHeader {
    background-color: #171717;
    color: #f7f7f7;
}
```

Things are looking better, but we're still not done.

## Text box

The text box is where things begin to become a bit tricky. In most cases, you shouldn't need to edit it, but for our purposes, you need to know how to edit the text box in order to make a dark theme.

For this, you can not edit the existing #WikiaPage and .ChatHeader we have above. To edit the text box, you're going to need to use `#Write textarea`.
Use the following code to edit the text box:

```
#Write textarea {
    background-color: #262626;
    color: #f7f7f7;
}
```

Ignore the white border around the text box for now. You will learn how to remove this in later guides, but as a novice, it is fine for our purposes.

## Editing link colors

Editing the colors of links is just like text and is extremely easy. `a` is used for link editing. Use this code to edit it.

```
a {
   color: #27a7ba;
}
```

## Editing your message background

Currently, the background color of messages you send are too light. **.Chat .you** is used to change this color.

```
.Chat .you {
   background-color: #383838;
}
```

## Editing the PM header

If you open a PM, you can notice that the header does not blend in with the color of the text or the rest of the theme. We can change this with `.Rail .private`.

```
.Rail .private {
    background-color:#262626;
    background-image: none;
}
```

The color looks flat for now due to there being no gradient. However, don't mind this for now. You will learn more about gradients later.

## Finished?

Now, your theme is done! Or so you hoped.. The person joined chat and said that they'd like chat to have a custom background instead! Fuck! Well, how do you do that?

## How to add a background

For simplicity, we will use this image: https://media.istockphoto.com/videos/gray-dark-blade-abstract-background-seamless-loop-version-from-10-to-video-id810524820?s=640x640
In this case, only .Chat needs to be edited. We can change this without having to edit #WikiaPage.

```
.Chat {
   background:url("https://media.istockphoto.com/videos/gray-dark-blade-abstract-background-seamless-loop-version-from-10-to-video-id810524820?s=640x640") !important;
   background-size: 100% !important;
}
```

Notice the use of important. This is used to override the other CSS. However, you would not need to use this if you haven't already used #WikiaPage.

## How to make your messages transparent

The background color behind your messages are a bit obstructive to the background, so you should make it transparent. Refer back to your .Chat .you script and then change it to:

```
.Chat .you {
   background-color: transparent;
}
```

Now, you are finally done!

Hopefully, the user enjoys the chat theme.

## Quiz

This week's quiz is scheduled to be for July 16, 2019 and will be on creating an accurate chat theme. Here is the scoring rubric:

 The CSS is formatted in a way that it is easy to read and scan over, and easy to check for errors. This is worth 2 points.

Possible 12 points.