I'm a total N00B with CSS, so I ask these questions: (/r/lowqualityfnaf)

How to change a subreddit's theme to dark grey (#212121)

You have to decide what you want to change to that color first. For example, if it's the header you want to change, you'd write

#header { background: #212121 }

How to change a link flair to look like on /r/fivenightsatfreddys?

The following is their CSS for their link flairs. They use individual letters for the css classes for their flairs. So for example, if you wanted a gray flair, for the css class, write "a".

p.title span.linkflairlabel {
  background-color:rgba(0,0,0,0);
  border: 0px solid #ddd; 
  border-radius: 0;
  color: #fff;
  display: block;
  font-size: 13pt;
  font-weight: bold;
  float: right;
  margin-left: 10px;
  margin-right: 0;
  padding: 6px 15px 8px;
  text-transform: uppercase;
  text-shadow: 0px 1px 1px rgba(0, 0, 0, 0.5);
}

.thing.link.linkflair-a {border-right: 10px solid #BCBCBC !important;} /* Misc. */
.thing.link.linkflair-b {border-right: 10px solid #B284BE !important;} /* Artwork */
.thing.link.linkflair-c {border-right: 10px solid #E32636 !important;} /* Spoilers */
.thing.link.linkflair-d {border-right: 10px solid #FFBF00 !important;} /* Album */
.thing.link.linkflair-e {border-right: 10px solid #9966CC !important;} /* Mod Post */
.thing.link.linkflair-f {border-right: 10px solid #A4C639 !important;} /* Gif */
.thing.link.linkflair-g {border-right: 10px solid #CD9575 !important;} /* Video */
.thing.link.linkflair-h {border-right: 10px solid #03cfeb !important;} /* Image */
.thing.link.linkflair-i {border-right: 10px solid #FDEE00 !important;} /* Comic */
.thing.link.linkflair-j {border-right: 10px solid #CE9C31 !important;} /* Interactive */
.thing.link.linkflair-k {border-right: 10px solid #007FFF !important;} /* Glitch */
.thing.link.linkflair-l {border-right: 10px solid #bf3c48 !important;} /* Discussion */
.thing.link.linkflair-m {border-right: 10px solid #E0218A !important;} /* Music */
.thing.link.linkflair-n {border-right: 10px solid #A52A2A !important;} /* Interview */
.thing.link.linkflair-o {border-right: 10px solid #7FFF00 !important;} /* Question */
.thing.link.linkflair-p {border-right: 10px solid #03C03C !important;} /* News */
.thing.link.linkflair-q {border-right: 10px solid #eb1e23 !important;} /* Speculation */
.thing.link.linkflair-r {border-right: 10px solid #C41E3A !important;} /* Meta */
.thing.link.linkflair-s {border-right: 10px solid #DE6FA1 !important;} /* Easter Egg */
.thing.link.linkflair-t {border-right: 10px solid #8B008B !important;} /* Gif Sound. */
.thing.link.linkflair-u {border-right: 10px solid #50C878 !important;} /* Text */
.thing.link.linkflair-v {border-right: 10px solid #0d4f6a !important;} /* Contest Entry */
.thing.link.linkflair-w {border-right: 10px solid #f90094 !important;} /* Announcement  */

.thing.stickied .entry p.title span.linkflairlabel {background: #f61948;}
.thing.link.linkflair-a .entry p.title span.linkflairlabel {background: #BCBCBC;}
.thing.link.linkflair-b .entry p.title span.linkflairlabel {background: #B284BE;}
.thing.link.linkflair-c .entry p.title span.linkflairlabel {background: #E32636;}
.thing.link.linkflair-d .entry p.title span.linkflairlabel {background: #FFBF00;}
.thing.link.linkflair-e .entry p.title span.linkflairlabel {background: #9966CC;}
.thing.link.linkflair-f .entry p.title span.linkflairlabel {background: #A4C639;}
.thing.link.linkflair-g .entry p.title span.linkflairlabel {background: #CD9575;}
.thing.link.linkflair-h .entry p.title span.linkflairlabel {background: #03cfeb;}
.thing.link.linkflair-i .entry p.title span.linkflairlabel {background: #FDEE00;}
.thing.link.linkflair-j .entry p.title span.linkflairlabel {background: #CE9C31;}
.thing.link.linkflair-k .entry p.title span.linkflairlabel {background: #007FFF;}
.thing.link.linkflair-l .entry p.title span.linkflairlabel {background: #bf3c48;}
.thing.link.linkflair-m .entry p.title span.linkflairlabel {background: #E0218A;}
.thing.link.linkflair-n .entry p.title span.linkflairlabel {background: #A52A2A;}
.thing.link.linkflair-o .entry p.title span.linkflairlabel {background: #7FFF00;}
.thing.link.linkflair-p .entry p.title span.linkflairlabel {background: #03C03C;}
.thing.link.linkflair-q .entry p.title span.linkflairlabel {background: #eb1e23;}
.thing.link.linkflair-r .entry p.title span.linkflairlabel {background: #C41E3A;}
.thing.link.linkflair-s .entry p.title span.linkflairlabel {background: #DE6FA1;}
.thing.link.linkflair-t .entry p.title span.linkflairlabel {background: #8B008B;}
.thing.link.linkflair-u .entry p.title span.linkflairlabel {background: #50C878;}
.thing.link.linkflair-v .entry p.title span.linkflairlabel {background: #0d4f6a;}
.thing.link.linkflair-w .entry p.title span.linkflairlabel {background: #f90094;}

How to make user css flairs and which size should the pictures for the flairs be?

https://www.reddit.com/r/csshelp/wiki/userflair

How to add a watermark on the text submission page like on /r/fivenightsatfreddys?

This is how they do it:

.usertext-edit textarea {
  background-image:url(%%textarea%%);
  background-position: left bottom;
  background-repeat: no-repeat;
}

You'll want to upload an image and name it textarea. Also ideally it should be 492px x 100px.

How to add "rules" like on /r/fffffffuuuuuuuuuuuu?

This is how they do it:

.side table {
  display: block;
  margin-left: 0;
}
.side table thead {
  display: none;
}
.side table tbody {
  display: block;
  list-style-type: decimal;
  list-style-position: inside;
  color: white;
}
.side table tbody tr {
  display: list-item;
}
.side table tbody tr:first-child td:first-child {
  border-top: 1px solid #660000;
  -moz-border-radius-topleft: 3px;
  -webkit-border-top-left-radius: 3px;
  border-top-left-radius: 3px;
  -moz-border-radius-topright: 3px;
  -webkit-border-top-right-radius: 3px;
  border-top-right-radius: 3px;
}
.side table tbody tr:last-child td:first-child, .side table tbody tr:last-child td:last-child {
  border-bottom: 1px solid #660000;
  -moz-border-radius-bottomleft: 3px;
  -webkit-border-bottom-left-radius: 3px;
  border-bottom-left-radius: 3px;
  -moz-border-radius-bottomright: 3px;
  -webkit-border-bottom-right-radius: 3px;
  border-bottom-right-radius: 3px;
}
.side table tbody tr:last-child:hover td:first-child {
  border-bottom: 0;
  -webkit-border-radius: 0;
  -moz-border-radius: 0;
  -ms-border-radius: 0;
  -o-border-radius: 0;
  border-radius: 0;
}
.side table tbody tr td {
  display: block;
  border: none;
}
.side table tbody tr td:first-child {
  background: #ff4444;
  color: white;
  padding: 5px;
  cursor: pointer;
  border: 1px solid #660000;
  border-top: 0;
  border-bottom: 0;
}
.side table tbody tr td:last-child {
  display: none;
  color: black;
  border: 1px solid #660000;
  border-top: 0;
  padding: 5px 5px 10px;
}
.side table tbody tr:hover td:last-child {
  display: block;
}

In the sidebar, make a two columned table, like this one, and it'll be like the rules in /r/fffffffuuuuuuuuuuuu.

. .
No non-ragecomics allowed If you aren't telling a story, there are no characters, action, or similar, then its not a rage comic. This includes comics ending in AdviceAnimals
No comparison comics These are comics that compare one thing to another. If you're making any comparison in your comic, chances are you're doing it wrong

This is what I typed to make the table above:

. | .

---|---

No non-ragecomics allowed | If you aren't telling a story, there are no characters, action, or similar, then its not a rage comic. This includes comics ending in AdviceAnimals

No comparison comics | These are comics that compare one thing to another. If you're making any comparison in your comic, chances are you're doing it wrong

/r/csshelp Thread