Guide: CSS Template Thread

[Kitty]

Hi hello I finally decided to make this. This is your lovely template thread for when you feel absolutely lazy to create your own but want one anyway! Feel free to keep adding your own by posting in this thread (and explanations on how to use them, should you decide to make things a bit user friendly!) I also have no idea how to do introductions for these sorts of things but well.. I'm just gonna start this out with two beginner templates and will be adding more later on!

First: The gimmepie

Spoiler:

Title

​

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam eleifend aliquet dictum. Duis interdum maximus ullamcorper. Quisque id tellus tortor. Integer massa sapien, tincidunt et luctus luctus, consectetur at leo. Morbi ornare est diam, et rutrum odio finibus eu. Interdum et malesuada fames ac ante ipsum primis in faucibus.

Roles

Town

1. Lorem ipsum dolor sit amet,
2. consectetur adipiscing elit.

Mafia

1. Lorem ipsum dolor sit amet,
2. consectetur adipiscing elit.

Rules

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam eleifend aliquet dictum. Duis interdum maximus ullamcorper. Quisque id tellus tortor. Integer massa sapien, tincidunt et luctus luctus, consectetur at leo. Morbi ornare est diam, et rutrum odio finibus eu. Interdum et malesuada fames ac ante ipsum primis in faucibus.

Players

Kitty as the GM

Explanation

When GP doesn't have me to do the css for him (or he can't nab a template for himself for some unknown reason), this is his usual go-to style that works on any occasion. It's a really simple and basic css template that anyone can use. Extremely customizable and now mobile friendly! It's recommended for beginners that are interested in dipping into css for the first time, or just lazy ones like him. ;)

max-width is your basic width tag, but made so it'll automatically adjust for mobile users. You can basically set any width to it and it'll look that way to pc users, but to those with screens that your css will be stretching out, it will be converted into 100% (or the closest to it) to make their lives easier and the text readable. It really does make people not want to continue reading if the text is stretched out on their screens you know!
background, border, padding, color, and font-family are the ones used to style the code. Keep in mind that color here means the font color, and padding is the space between the div and the text! You can basically change these to anything you want it to be. Go wild.
margin-left and margin-right is the css way of centering your div without having to center everything else in your div. Basically

but better.
h1 and h2 are header tags. They're automatically styled like that for everyone's convenience.
cimg is used to resize images.

Code

[div="max-width: 700px; background: white; border-left: 5px solid red; border-right: 5px solid blue; border-radius: 5px; margin-left: auto; margin-right: auto; padding: .5em; color: black; font-family: Lato; box-shadow: 3px 3px 3px rgba(0,0,0,0.5);"][center][cimg="width: 50px;"]https://upload.wikimedia.org/wikipedia/commons/thumb/7/7f/Replacement_character.svg/220px-Replacement_character.svg.png[/cimg]

[h1]Title[/h1][/center]

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam eleifend aliquet dictum. Duis interdum maximus ullamcorper. Quisque id tellus tortor. Integer massa sapien, tincidunt et luctus luctus, consectetur at leo. Morbi ornare est diam, et rutrum odio finibus eu. Interdum et malesuada fames ac ante ipsum primis in faucibus.

[h2]Roles[/h2]
[h4]Town[/h4]
[LIST=1]
[*]Lorem ipsum dolor sit amet, 
[*]consectetur adipiscing elit.
[/LIST]
[h4]Mafia[/h4]
[LIST=1]
[*]Lorem ipsum dolor sit amet, 
[*]consectetur adipiscing elit.
[/LIST]
[h2]Rules[/h2]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam eleifend aliquet dictum. Duis interdum maximus ullamcorper. Quisque id tellus tortor. Integer massa sapien, tincidunt et luctus luctus, consectetur at leo. Morbi ornare est diam, et rutrum odio finibus eu. Interdum et malesuada fames ac ante ipsum primis in faucibus.

[h2]Players[/h2][mod]Kitty[/mod] as the GM[/div]

Second: Vanilla Mafia (featuring nostalgia)

Spoiler:

Players

Kitty as the GM​

aeternum
Fletch
Miah
L'Belle
gimmepie
Melody
Kiyotaka Ishimaru
Charlie Brown
Sparkin
Bardothren
TheUncreativeSawsbuckFan
purplecicada
Pecilia
Paranoia_
Newtsie
Archy

Explanation

Basically how this div works is that there's one major div that controls the sizes. You can see that with max-width, while the remaining divs get 100% as their width for consistency. Inside that div are then two divs, one for the header and one for the main body. This particular one is styled so that the right and bottom border create a 3d effect where they look like they're raised up. There are additional text altering bits too, namely font-size, font-weight, and text-shadow that are just used for text decoration.

You sort of use this template by copying and pasting the divs so that they create mini blocks of texts.

It's me again

Like so

Hello me!

Bit of some copy paste action

Last one I swear

But you get the idea

This sort of css is pretty common from what I see, as the hard work is only at the beginning and you can just copy paste your results afterwards. It looks great, and is very customizable! You can add the remove div blocks as necessary, change each block's color scheme, etc... I really like this simple css (which is kinda why I had it saved on my drive lmfao).

Code

[cd="max-width: 650px; margin-left: auto; margin-right: auto; color: #7A5C4A; text-align: justify; line-height: 18px; border-bottom: 3px solid #EAD8CC;"][cd="width:  100%; padding: 5px; padding-left: 10px; background: #D4BC9B; border-bottom: 2px solid #B59B77; border-right: 4px solid #B59B77; font-weight: bold; font-size: 15px;  text-shadow: -1px -1px #EAD8CC;"]Title[/cd][cd="width:  100%; padding: 5px; padding-left: 10px; padding-right: 10px; background: #FFF5EE; border-right: 4px solid #EAD8CC;"][size=1]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam eleifend aliquet dictum. Duis interdum maximus ullamcorper. Quisque id tellus tortor. Integer massa sapien, tincidunt et luctus luctus, consectetur at leo. Morbi ornare est diam, et rutrum odio finibus eu. Interdum et malesuada fames ac ante ipsum primis in faucibus. Aenean pretium suscipit vestibulum. Interdum et malesuada fames ac ante ipsum primis in faucibus. Quisque quis consectetur ligula.[/size][/cd][/cd]