CSSHelp Wiki

Common Snippets
Change "readers" and "users
online"
Hide down vote arrows
Background image
Change Subreddit Name (next to
logo)
Random image above sidebar
Highlight post titles containing a
specific word
snippets view history talk
CSSHelp Wiki
Common Snippets
Change "readers" and
"users online"
.titlebox .word { display: none; }
.subscribers .number:after { content: ' somet
hing'; }
.users-online .number:after { content: ' some
thing else'; }
Hide down vote arrows
To hide them globally
.down { display: none; }
To hide them on posts only
.link .down { display: none; }
To hide them on comments only
.comment .down { display: none; }
Examples in use:
/r/FreeKarma
Background image
remember me reset password
login
search reddit
username password
/r/csshelp
+subscribe
5,837 Persons | ~16 online
NEW TO REDDIT? CLICK HERE
Read the FAQ before posting a
question.
This subreddit is for help with CSS and
questions only. If you only want to
share your creations, please direct them
to reddithax.
Guides Guides
CSS Beginner Tutorial
YouTube Tutorial for inspecting
the page by /u/jaredcheeda
CSS Snippets
More snippets by
/u/DIAMOND_OR_NOT_DIAMO
CSS Toolkit by /u/laaabaseball
User Flair Tutorial by
/u/adremeaux
Link flair + Filters guide by
/u/IzzySawicki
FRONT - ALL - RANDOM | SHOWERTHOUGHTS - WORLDNEWS - AWW - MOVIES - ART - TIFU - FITNESS - PERSONALFINANCE - JOKES - TELEVISION
MY SUBREDDITS MORE

hot new wiki promoted want to join? login or register in seconds | English
Easily create high-quality PDFs from your web pages - get a business license!
body {
background: url(%%bg%%) no-repeat fixed center center;
}
Examples of this in use
/r/StencilTemplates
/r/ContentAwareScale
Change Subreddit Name (next to logo)
.pagename a {
font-size: 0;
content: '';
}
.pagename a:after {
content: "Subreddit Name";
font-size: medium;
}
Examples of this in use:
/r/AudreyHepburn
/r/FullLengthFilms
Random image above sidebar
/* 270 will need to be adjusted depending on the height of your rand image */
.side {
position: absolute;
top: 270px;
right: 0px; }
/* The height and width of all images must match. Change 228 and 300 to match
your image dimensions. */
input[name=uh] ~ a:after, .user .login-required:after {
position: absolute;
top: 23px;
right: 0px;
z-index: 0;
width: 300px;
height: 228px;
border: 0px; }
a community for 4 years
Youtube video guide by
/u/jdog90000
Newbie mod tips by
/u/Timoleonwash
If you know of a guide that you feel
should be listed here, message the
moderators with a link.
Related Subreddits Related Subreddits
/r/CSSNews - changes in reddit's
css
/r/CSStutorials - Collection of
reddit CSS tuts/hacks
/r/ProjectCSS - Have someone
else do your subreddit CSS
/r/RedditHax - sharing reddit css
tricks
/r/ModNews - changes in mod
features
/r/ModHelp - general reddit mod
help
/r/NeedAMod - a place to request
mods
/r/RedditFacelift - A subreddit to
show off your new or updated
subreddit design.
Links of Note Links of Note
ProCSSor - Cleans up pasted CSS
Codecademy HTML/CSS track
created by E_lucas
WIKI TOOLS
-
recent wiki revisions

Easily create high-quality PDFs from your web pages - get a business license!
/* Name all your images rand followed by 0-9 and a-z, you can have 36 possible
random images, feel free to reuse images if you have less than 36. For
example, you could have 12 images repeated 3 times. */
input[name=uh][value^="0"] ~ a:after { content: url('%%rand0%%'); }
input[name=uh][value^="1"] ~ a:after { content: url('%%rand1%%'); }
input[name=uh][value^="2"] ~ a:after { content: url('%%rand2%%'); }
input[name=uh][value^="3"] ~ a:after { content: url('%%rand3%%'); }
input[name=uh][value^="4"] ~ a:after { content: url('%%rand4%%'); }
input[name=uh][value^="5"] ~ a:after { content: url('%%rand5%%'); }
input[name=uh][value^="6"] ~ a:after { content: url('%%rand6%%'); }
input[name=uh][value^="7"] ~ a:after { content: url('%%rand7%%'); }
input[name=uh][value^="8"] ~ a:after { content: url('%%rand8%%'); }
input[name=uh][value^="9"] ~ a:after { content: url('%%rand9%%'); }
input[name=uh][value^="a"] ~ a:after { content: url('%%randa%%'); }
input[name=uh][value^="b"] ~ a:after { content: url('%%randb%%'); }
input[name=uh][value^="c"] ~ a:after { content: url('%%randc%%'); }
input[name=uh][value^="d"] ~ a:after { content: url('%%randd%%'); }
input[name=uh][value^="e"] ~ a:after { content: url('%%rande%%'); }
input[name=uh][value^="f"] ~ a:after { content: url('%%randf%%'); }
input[name=uh][value^="g"] ~ a:after { content: url('%%randg%%'); }
input[name=uh][value^="h"] ~ a:after { content: url('%%randh%%'); }
input[name=uh][value^="i"] ~ a:after { content: url('%%randi%%'); }
input[name=uh][value^="j"] ~ a:after { content: url('%%randj%%'); }
input[name=uh][value^="k"] ~ a:after { content: url('%%randk%%'); }
input[name=uh][value^="l"] ~ a:after { content: url('%%randl%%'); }
input[name=uh][value^="m"] ~ a:after { content: url('%%randm%%'); }
input[name=uh][value^="n"] ~ a:after { content: url('%%randn%%'); }
input[name=uh][value^="o"] ~ a:after { content: url('%%rando%%'); }
input[name=uh][value^="p"] ~ a:after { content: url('%%randp%%'); }
input[name=uh][value^="q"] ~ a:after { content: url('%%randq%%'); }
input[name=uh][value^="r"] ~ a:after { content: url('%%randr%%'); }
input[name=uh][value^="s"] ~ a:after { content: url('%%rands%%'); }
input[name=uh][value^="t"] ~ a:after { content: url('%%randt%%'); }
input[name=uh][value^="u"] ~ a:after { content: url('%%randu%%'); }
input[name=uh][value^="v"] ~ a:after { content: url('%%randv%%'); }
input[name=uh][value^="w"] ~ a:after { content: url('%%randw%%'); }
input[name=uh][value^="x"] ~ a:after { content: url('%%randx%%'); }
input[name=uh][value^="y"] ~ a:after { content: url('%%randy%%'); }
input[name=uh][value^="z"] ~ a:after { content: url('%%randz%%'); }
/* Moves the username and bar to the top, may need adjustment depending on
your other subreddit css. */
#header-bottom-right {
position: absolute;
message the moderators
wiki page list
discuss this ad on reddit
MODERATORS
E_lucas
Sephr
gavin19
AutomateAllTheThings
preggit
Easily create high-quality PDFs from your web pages - get a business license!
right: 0px;
top: 19px;
padding: 4px 4px 4px 7px;
-moz-border-radius-topleft: 0px;
-webkit-border-top-left-radius: 0px;
border-top-left-radius: 0px;
-moz-border-radius-bottomleft: 7px;
-webkit-border-bottom-left-radius: 7px;
border-bottom-left-radius: 7px;
line-height: 12px;
height: 15px; }
/* Adjust the -228 to match the height of your image. Along with the 300 and
228 to match the width and height of your image. At the end of your sidebar
description create an H5 link to your subreddit homepage.
Like this: #####[Subreddit Name](http://reddit.com/r/SubredditName) */
.side .usertext-body h5:last-of-type a {
position: absolute;
top: -228px;
right: -5px;
width: 300px;
height: 228px;
z-index: 100;
border: 0px;
font-size: 0px; }
/* HOW THIS ALL WORKS:
Everytime you load the page there is an invisible form (input) that relates
to the logout button which generates a long random letter-number combo. This
code takes the first digit of that code and then displays a specific image
dependent on the letter or number that was generated when the page loaded.
Since the number comes from the logout button there are a few things to take
in to consideration. Firstly, the random image that is created will log you
out if you click on it. So part of this code repositions a link from the
sidebar above the random image, so clicking on it will take you to the link
instead of logging you out. The other is that if a user isn't logged in the
link to logout won't exist, so neither will the random image. It only
displays to users who are logged in. So we target the Login link for those users
and put a static image there that is only visible to people not logged in. This
would prevent the page from having an empty chunk above the sidebar for
non-logged in viewers. The code for this is below.
*/
/* Pick your favorite of the random images to be the static one that loads for
non-logged in users.*/
Easily create high-quality PDFs from your web pages - get a business license!
view source
.user .login-required:after {
background-image: url('%%randz%%'); }
Examples of this in use:
/r/AudreyHepburn
Highlight post titles containing a specific word
a.title[href*=request] {
background-color: #CFC !important;
padding: 4px 10px;
font-weight: bold !important;
line-height: 28px;
border: 1px solid #9F9;
border-radius: 15px;
overflow: visible !important; }
revision by jaredcheeda 1 year ago
about
blog
about
team
source code
advertise
jobs
help
wiki
FAQ
reddiquette
rules
contact us
tools
mobile
firefox extension
chrome extension
buttons
widget
<3
reddit gold
store
redditgifts
reddit AMA app
reddit.tv
radio reddit
Use of this site constitutes acceptance of our User Agreement and Privacy Policy. 2014 reddit inc. All rights reserved.
REDDIT and the ALIEN Logo are registered trademarks of reddit inc.

Easily create high-quality PDFs from your web pages - get a business license!