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