/r/reddithax

Photograph via snooOG

N/A

Reddithax is to be a place for CSS tinkerers to share their tips, tricks, and cool themes. It is meant as a resource.

Reddithax is meant specifically for Reddit-applicable CSS. /r/CSS is the more general subreddit.


Rules

  1. This is not /r/csshelp. For basic or debugging ("What's wrong with this?") questions, go there.
  2. Posts must be directly related to CSS or a theme
  • meta posts are exempt
  • Tips and tricks must be
  • No reposts of the last 50 posts (2 pages).
  • Full rules


    Related Subreddits

    /r/csshelp for CSS help
    /r/CSS for everything CSS
    /r/ProjectCSS for someone to do your CSS (looks like it's dead, try r/needamod instead) /r/SelectorLegend for reddit selectors
    /r/CSSNews for reddit's changelog
    /r/RedditFacelift for showcases and feedback /r/needamod for hiring new moderators /r/ReddiTricks for learning all about Reddit

    /r/reddithax

    4,953 Subscribers

    3

    Python/Selenium Script To Remove All Reddit Comments

    0 Comments
    2023/07/22
    13:25 UTC

    4

    Can someone show me how to add an image to you reddit sidebar with a GIF?

    Can someone show me how to add an image to you reddit sidebar with a GIF? Hard time reading other posts and getting it.

    0 Comments
    2022/05/15
    14:02 UTC

    12

    is this subreddit alive?

    wake wake, get 2 da snake

    8 Comments
    2021/06/08
    08:17 UTC

    8

    Finished up and added new css to r/teenagers just about a week ago

    I completely forgot to post it here at the time, but I spent some time taking some things from the subreddit's old CSS, plus some stuff from scratch to create a modern, but playful kind of look for the sub. Some snippets were also borrowed from other subreddits with permission and credited. Please enjoy (side note all text is temporarily right aligned for april fool's).

    3 Comments
    2020/04/02
    05:44 UTC

    5

    How to change background image of the subreddits on the top

    .dropdown.srdrop .selected {

    background: none repeat scroll center right;
    
    
    background-image: url(%%insertimagehere%%);
    
    
    display: inline-block;
    
    
    vertical-align: bottom;
    
    
    padding-right: 21px;
    
    
    padding-left: 5px;
    
    
    color: black;
    
    
    font-weight: normal;
    
    
    margin-left: -5px;
    
    
    margin-right: 10px;

    }

    #sr-header-area .sr-list {

    background: none repeat scroll center right;
    
    
    background-image: url(%%insertimagehere%%);
    
    
    display: inline-block;
    
    
    vertical-align: bottom;
    
    
    padding-right: 21px;
    
    
    padding-left: 5px;
    
    
    color: black;
    
    
    font-weight: normal;
    
    
    margin-left: -5px;
    
    
    margin-right: 10px;

    }

    0 Comments
    2020/03/30
    23:55 UTC

    1

    This CSS changes markdown bullets into "*"

    .md ul {list-style-type: none}
    .md ul>li:before {content: "* "}

    I was gonna try it with emoji but reddit's css wouldn't allow me to.

    You can swap out the asterix with something else I guess, but I can confirm you can't make unordered lists with pointer fingers.

    πŸ‘‰ Not gonna happen.

    * works perfectly fine

    5 Comments
    2019/09/07
    17:26 UTC

    8

    Have multiple custom themed >!spoiler!< tags

    Before reddit had proper markdown-based spoilers (>!like this!<), communities used CSS hacks for implementing spoiler tags, [like this](#spoiler).

    Using this technique, some communities would even have multiple spoiler tags for different seasons (like the Game of Thrones subreddit used to have) that would allow you to see a "Season 1 Spoiler" text before the spoiler to help differentiate between different season's spoilers. Like: [some spoiler](#s1-spoiler)

    There's a way, if you'd like, to have custom themed spoiler tags using the new markdown-based spoiler tags if you'd like, with a syntax like this: [](#s1-spoiler) >!Some Spoiler!<

    a[href="#s1-spoiler"] + .md-spoiler-text:not(.revealed) {
        background: red;
    }
    
    a[href="#s1-spoiler"] + .md-spoiler-text::before {
        content: "Season 1 Spoiler";
        color: black !important;
        font-size: 10px;
    }
    0 Comments
    2019/06/22
    21:45 UTC

    12

    Trick I see used not often enough: Add "pointer-events: none" to custom emoji/stickers that you make by styling "a" elements. That way people can't click on the links which go nowhere.

    2 Comments
    2019/02/17
    07:50 UTC

    7

    Coloring the little arrow/nub/triangle on hover-bubble

    The little arrow/nub/triangle of the pop-up that you get when hovering over a username can be colored with the following rules:

    /* Border color for nub on bottom */
    .author-tooltip.hover-bubble.anchor-bottom-left::before,.author-tooltip.hover-bubble.anchor-bottom-right::before { border-top-color: #BF1E2D }
    /* Border color for nub on top */
    .author-tooltip.hover-bubble.anchor-top-left::before,.author-tooltip.hover-bubble.anchor-top-right::before { border-bottom-color: #BF1E2D }
    /* Nub color for nub on bottom */
    .author-tooltip.hover-bubble.anchor-bottom-left.author-tooltip_common::after,.author-tooltip.hover-bubble.anchor-bottom-right.author-tooltip_common::after { border-top-color: #000 }
    /* Nub color for nub at top */
    .author-tooltip.hover-bubble.anchor-top-left.author-tooltip_common::after,.author-tooltip.hover-bubble.anchor-top-right.author-tooltip_common::after { border-bottom-color: #282828 }

    As someone who was unfamiliar with the CSS triangle trick this was incredibly hard to find, since the element is hidden via JavaScript before you can inspect it. The default rules can be found in author-tooltip.css .

    0 Comments
    2019/02/10
    09:23 UTC

    5

    Sidebar Discord Widget for legacy/old Reddit - Instructions & CSS

    4 Comments
    2019/02/02
    17:30 UTC

    6

    (/r/32kHz) I've done plenty of things for a sub that I mod, but the most recent (and most proud) achievement I've done is creating a custom minimal userbar with my own icons and fixed scrolling!

    I made it using CSS grid, which I learned just recently, but due to the scarcity of reddit's documentation, I can't find the classes of the active modmail and new modmail. Also, I can't see what it looks like without the two modmail buttons in the first place. Either way, at the moment I like how it looks, but any tips are welcome!

    (the subreddit: 32kHz )

    4 Comments
    2019/01/10
    05:56 UTC

    3

    How can I raise a sidebar until it covers part of a banner?

    Been messing around on a private sub, made a banner for it, realized it wasn't wide enough. I could make it wider by massively stretching it, but then it would be too tall and too low res. My current thinking is that if I can raise the sidebar until it's at the top, the banner space will effectively be shorter, and I can just put the banner on the left, resize it a bit, and call it a day.

    Like this.

    How would I go about doing this? Thanks in advance.

    3 Comments
    2018/06/14
    20:39 UTC

    4

    How to make comments change color depending on whether you upvoted or downvoted.

    .comment .usertext-body {
        border: 1px solid #------;
        background-color: #------;
    }
    
    .comment.stickied .usertext-body {
        border: 1px solid #------;
        background-color: #------ !important;
    }
    
    .comment .likes .usertext-body {
        border: 1px solid #------;
        background-color: #------;
    }
    
    .comment .dislikes .usertext-body {
        border: 1px solid #000;
        background-color: #------;
    }
    1 Comment
    2018/06/08
    19:03 UTC

    4

    How to hide the "recently viewed links" sidebar box

    First to target and hide it you will have to target the moderator box as well under :not(.collapsible) > * id.

    .sidecontentbox:not(.collapsible) > * { display: none; }

    Then if you want the moderator box to appear again:

    .sidecontentbox:not(.collapsible) .helplink, .sidecontentbox:not(.collapsible) .helplink ~ * {
        display: block;
    }
    0 Comments
    2018/05/19
    17:00 UTC

    2

    Removing the "Try the Redesign" button off your subreddit.

    Just put this in your stylesheet.

    #sr-header-area .redesign-beta-optin {
        display: none;
    }
    1 Comment
    2018/04/28
    20:50 UTC

    13

    How to hide the #chat

    for the #header-bottom-right

    #chat,
    #chat-count,
    #chat+.separator
    #chat-count+.separator {
        display: none !important;
    }

    and the pinned-to-bottom chat box.

     #chat-app.active {
        display: none;
    }
    1 Comment
    2018/01/29
    03:44 UTC

    25

    I made a free tool to easily generate CSS for a palette of author colors on a subreddit. Check it out!

    An idea I had while bored this evening (screenshot); I think it would be a great addition to any subreddit theme. Please check out the tool and let me know your feedback!

    http://reddit-author-color.mcad.am

    The idea is that it creates CSS for a "random" (at the time of generation) palette for author colours in a comment thread. The colours it generates are "sticky" in that it will ensure any user gets the same color in the subreddit. The aim is to help reddit users using the theme to be better able to follow a discussion.

    Would love to hear any feedback, suggestions, feature requests, etc.

    4 Comments
    2018/01/01
    20:54 UTC

    5

    i made the letters move scarily quickly

    5 Comments
    2017/12/10
    02:03 UTC

    3

    [Addon] Moving submission URLs to the right

    This addon contains code from u/zmodem with tweaks made by myself. This addon will move the submission URL to the right side and make it more visible.

    /*MOVING SUBMISSION URL TO THE RIGHT*/
    /*Addon by u/IfaqYurmama*/
    
    .flairselector {position: fixed!important}
    
    .thing .top-matter { position: relative; }
    .thing .domain {
       align-items: center;
       display: flex;
       font-size: 0;
       height: 70%;
       position: absolute;
       right: 0;
       top: 0;
    } 
     .thing .domain a { font-size: 16px }
    
     @media screen and (max-width: 989px) {.thing .domain a {font-size: 9px;}}
     @media screen and (max-width: 875px) {.thing .domain a {opacity: 0;visibility: hidden;}} //optimizations for low-res or small screens
    
    .thing.self .domain { display: none; } //excluding self posts
    0 Comments
    2017/11/28
    07:52 UTC

    9

    Quickly converting Hex to RGB and vice-versa, without using a lousy converter or huge table

    A lot of people, apparently, think that a rgb value is more precise than a hex value. In reality, a hex number can directly translate to a rgb value.

    To start with, you'll need to divide the number into three sections. Each of these sections will correspond to a red, green and blue value.

    #FFFFFFrgb(255, 255, 255)
    FF (First two)255
    FF (Middle two)255
    FF (Last two)255

    To convert a hex pair to a number, take your first value and multiply it by 16. Then add it to your second value.

    #FFFFFFCharacter OneCharacter TwoTotal
    FF(F) 15 * 16 = 240(F) 15240+15=255
    FF(F) 15 * 16 = 240(F) 15240+15=255
    FF(F) 15 * 16 = 240(F) 15240+15=255
    #BADCFECharacter OneCharacter TwoTotal
    BA(B) 11 * 16 = 176(A) 10176+10 = 186
    DC(D) 13 * 15 = 208(C) 12208+12 = 220
    FE(F) 15 * 16 = 240(E) 14240 + 14 = 254

    Note that a = 10, b=11, c=12, d=13, e=14, and f=15

    Once you do this enough, you should get the hang of it, and no longer require looking at this post.

    9 Comments
    2017/10/08
    21:29 UTC

    13

    Animated images without lengthy CSS? Introducing APNG

    So we all know Reddit doesn't allow uploading gif files, so putting in animated images would require you to do a make them via CSS which can take quite a bit to space. Well, there is an alternative way which allows you to import gifs in a format Reddit allows, animated PNGs. This is still a new "tech" so not all browsers support it.

    How to:

    • get or make a gif
    • go to https://ezgif.com/gif-to-apng or find your own convertor
    • make sure it is within the file size limitations (hardest part)
    • upload
    • use like it would be any other picture

    This is also a way to have an animated Reddit profile pic if you wanted one, guide and the source of the trick

    3 Comments
    2017/09/18
    18:56 UTC

    3

    "Hexagonal thumbnails" customization

    My realization of "Hexagonal thumbnails" from r/NMSCoordinateExchange/ (inc. fixes only for Naut theme)

    /* Addon: Hexagonal Thumbnails */
    .thumbnail.default, .thumbnail.self, .thumbnail.nsfw, .thumbnail.image,     .thumbnail.spoiler, .thumbnail[data-href-url*="reddit.com"] {
    	position: relative;
    	width: 56px;
    	height: 32.33px;
    	max-height: 32.33px;
    	/* background-clip: content-box; */
    	/* background-position: center; */
    }
    
    	.thumbnail.default::before, .thumbnail.self::before,     .thumbnail.nsfw::before, .thumbnail.image::before,     .thumbnail.spoiler::before, .thumbnail[data-href-url*="reddit.com"]    ::before,
    	.thumbnail.default::after, .thumbnail.self::after, .thumbnail.nsfw::after,     .thumbnail.image::after, .thumbnail.spoiler::after, .thumbnail    [data-href-url*="reddit.com"]::after {
    		content: "";
    		position: absolute;
    		width: 0;
    		border-left: 28px solid transparent;
    		border-right: 28px solid transparent;
    	}
    
    	.thumbnail.default::before, .thumbnail.self::before,     .thumbnail.nsfw::before, .thumbnail.image::before,     .thumbnail.spoiler::before, .thumbnail[data-href-url*="reddit.com"]    ::before {
    		bottom: 100%;
    		border-bottom: 16.17px solid;
    	}
    
    	.thumbnail.default::after, .thumbnail.self::after, .thumbnail.nsfw::after,     .thumbnail.image::after, .thumbnail.spoiler::after, .thumbnail    [data-href-url*="reddit.com"]::after {
    		top: 100%;
    		width: 0;
    		border-top: 16.17px solid;
    	}
    
    	/* Misc. Fixes /Naut/ Thumbnails */
    	.thumbnail.default, .thumbnail.self, .thumbnail.nsfw, .thumbnail.image,     .thumbnail.spoiler, .thumbnail[data-href-url*="reddit.com"] {
    		border-radius:0px;
    		overflow:visible;
    		margin: 16.17px 28px 0 12px;
    	}
    
    	/* Color and position Fixes /Naut/ Thumbnails */
    	.thumbnail.default {background-color: #d2dbe0; background-position-y: calc    (-48px - 12px);}
    		.thumbnail.default::before {border-bottom-color: #d2dbe0}
    		.thumbnail.default::after {border-top-color: #d2dbe0}
    
    	.thumbnail.self {background-color: #d2dbe0; background-position-y: calc    (-48px - 12px);}
    		.thumbnail.self::before {border-bottom-color: #d2dbe0}
    		.thumbnail.self::after {border-top-color: #d2dbe0}
    
    	.thumbnail.image {background-color: #d2dbe0; background-position-y: calc    (-48px - 12px);}
    		.thumbnail.image::before {border-bottom-color: #d2dbe0}
    		.thumbnail.image::after {border-top-color: #d2dbe0}
    
    	.thumbnail.nsfw {background-color: #e85881; background-position-y: calc    (-104px - 12px);}
    		.thumbnail.nsfw::before {border-bottom-color: #e85881}
    		.thumbnail.nsfw::after {border-top-color: #e85881}
    
    	.thumbnail[data-href-url*="reddit.com"] {background-color: #24a0ed;     background-position-y: calc(-104px - 12px);}
    		.thumbnail[data-href-url*="reddit.com"]::before {border-bottom-color:     #24a0ed}
    		.thumbnail[data-href-url*="reddit.com"]::after {border-top-color:     #24a0ed}
    
    	.stickied .thumbnail {background-color: #2db747}
    		.stickied .thumbnail::before {border-bottom-color: #2db747}
    		.stickied .thumbnail::after {border-top-color: #2db747}
    
    	.thumbnail.spoiler {background-color: #F44336; background-position-y: calc    (-148px - 12px);}
    		.thumbnail.spoiler::before {border-bottom-color: #F44336}
    		.thumbnail.spoiler::after {border-top-color: #F44336}
    
    
    
    	/* RES Fixes /Naut/ Nightmode */
    	.res-nightmode .thumbnail.default {background-color: #d2dbe0;     background-position-y: calc(-48px - 12px);}
    		.res-nightmode .thumbnail.default::before {border-bottom-color:     #d2dbe0}
    		.res-nightmode .thumbnail.default::after {border-top-color: #d2dbe0}
    
    	.res-nightmode .thumbnail.self {background-color: #d2dbe0;     background-position-y: calc(-48px - 12px);}
    		.res-nightmode .thumbnail.self::before {border-bottom-color: #d2dbe0}
    		.res-nightmode .thumbnail.self::after {border-top-color: #d2dbe0}
    
    	.res-nightmode .stickied .thumbnail {background-color: #2db747}
    		.res-nightmode .stickied .thumbnail::before {border-bottom-color:     #2db747}
    		.res-nightmode .stickied .thumbnail::after {border-top-color: #2db747}
    
    
    	/* Misc. Fixes /Naut/ Link Flairs */
    	.linkflair-mod .thumbnail.default, .linkflair-mod .thumbnail.self     {background-color: #27b062; background-position-y: calc(-104px - 12px);}
    		.linkflair-mod .thumbnail.default::before, .linkflair-mod     .thumbnail.self::before {border-bottom-color: #27b062}
    		.linkflair-mod .thumbnail.default::after, .linkflair-mod     .thumbnail.self::after {border-top-color: #27b062}
    
    /* End Addon: Hexagonal Thumbnails */
    7 Comments
    2017/08/31
    08:37 UTC

    10

    Random banner on every page load (see r/manga for example)

    Taken from /r/manga's stylesheet. I have not tested this, I just saw it and thought it should be here, so I quickly copy pasted the code.

    It's a clever hax using the logout button.

    /*---------------------------|
    |                                    |
    |  Random Headers       |
    |  Thanks /u/DEADB33F |
    |---------------------------*/
    /* Random image container */
    input[name=uh] ~ a:after {
        position: absolute;
        top: -109px !important;
        right: 0px !important;
        z-index: -2;
        width: 1920px !important;
        height: 169px !important;
    }
    
    /* Overlay container to stop the random text/image being clickable */
    .user span:before {
        position: absolute;
        top: -109px !important;
        right: 0px !important;
        width: 1920px !important;
        height: 169px !important;
        z-index: -1;
        content: " ";
        }
    .user .userkarma {
        cursor:default!important;
    }
    
    /* Up to 36 random images */
    /* "value" matched to last digit in .logout "uh" number */
    /* Max 36 images 0,1,2,...,7,8,9,a,b,c,...x,y,z */
    
    input[name=uh][value$="a"] ~ a:after,
    input[name=uh][value$="b"] ~ a:after {
        content: url(%%kamijyo%%)
    }
    
    input[name=uh][value$="c"] ~ a:after,
    input[name=uh][value$="v"] ~ a:after,
    input[name=uh][value$="2"] ~ a:after {
        content: url(%%cirno9baka%%)
    }
    input[name=uh][value$="d"] ~ a:after,
    input[name=uh][value$="e"] ~ a:after,
    input[name=uh][value$="f"] ~ a:after {
        content: url(%%omoide-emanon%%)
    }
    input[name=uh][value$="w"] ~ a:after,
    input[name=uh][value$="3"] ~ a:after {
        content: url(%%awkward%%)
    }
    
    input[name=uh][value$="g"] ~ a:after,
    input[name=uh][value$="h"] ~ a:after {
        content: url(%%shoujo-banner%%)
    }
    input[name=uh][value$="i"] ~ a:after,
    input[name=uh][value$="x"] ~ a:after,
    input[name=uh][value$="4"] ~ a:after {
        content: url(%%planetes%%)
    }
    
    input[name=uh][value$="j"] ~ a:after,
    input[name=uh][value$="k"] ~ a:after {
        content: url(%%mari%%);
    }
    
    input[name=uh][value$="l"] ~ a:after,
    input[name=uh][value$="y"] ~ a:after,
    input[name=uh][value$="5"] ~ a:after {
        content: url(%%alice%%)
    }
    
    input[name=uh][value$="m"] ~ a:after,
    input[name=uh][value$="n"] ~ a:after,
    input[name=uh][value$="o"] ~ a:after {
        content: url(%%otoyomegatari-1%%)
    }
    input[name=uh][value$="z"] ~ a:after,
    input[name=uh][value$="6"] ~ a:after {
        content: url(%%cat-banner%%)
    }
    
    input[name=uh][value$="p"] ~ a:after,
    input[name=uh][value$="q"] ~ a:after {
        content: url(%%kotonoba-drive%%)
    }
    
    input[name=uh][value$="r"] ~ a:after,
    input[name=uh][value$="0"] ~ a:after,
    input[name=uh][value$="7"] ~ a:after {
        content: url(%%smiles%%)
    }
    input[name=uh][value$="s"] ~ a:after,
    input[name=uh][value$="t"] ~ a:after,
    input[name=uh][value$="u"] ~ a:after {
        content: url(%%inio-asano%%)
    }
    
    input[name=uh][value$="1"] ~ a:after,
    input[name=uh][value$="8"] ~ a:after,
    input[name=uh][value$="9"] ~ a:after {
        content: url(%%doubleline%%)
    }
    
    
    #header-bottom-right {
        position: absolute!important;
        right: 0px!important;
        bottom: 130px!important;
    }
    0 Comments
    2017/08/22
    01:59 UTC

    2

    Hide Sub Content From Blocked Users

    This has probably been done before, but I couldn't seem to find it. Banning a user prevents them from participating on a sub, but they can still read the content. Here is a simple way to hide your sub from a user or list of users. This is pretty easy to circumvent using the browser inspector, but the average user is probably not keen enough to know that:

    span.user a[href*="/majestic84"]::after {

    content: "";

    background: #fff;

    position: fixed;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    z-index: 9999;

    }

    2 Comments
    2017/08/13
    14:42 UTC

    13

    [Guide] 'Popup' Rules for Logged-in, Unsubscribed Users.

    Enforce rules, by showing a 'popup' with Accept Rules and Back to Reddit buttons.

    See It In Action

    Screenshot

    Sidebar

    >#Welcome to 'SubName'. Please read the Rules:
    >1. Rule #1! 
    >2. Rule #2!
    >3. Rule #3! 
    >4. Rule #4!
    > 
    >##[Accept Rules](http://ac.reddit.com/r/SubName) [Back to Reddit](http://www.reddit.com)

    CSS

    body.subscriber .side blockquote h2,body:not(.loggedin) .side blockquote h2,html[lang=ac] .side blockquote h2{display:inline}html:not([lang=ac]) body.loggedin:not(.subscriber) .side blockquote{visibility:visible!important;position:absolute;top:100px;left:50px;max-width:60%;border-radius:25px;padding:25px;background-color:rgba(0,0,0,.8);color:#FFF}html:not([lang=ac]) body.loggedin:not(.subscriber) .side blockquote h1{font-size:20px}html:not([lang=ac]) body.loggedin:not(.subscriber) .side blockquote ol{font-size:15px}html:not([lang=ac]) body.loggedin:not(.subscriber) .side blockquote a[href^="http://ac"]{font-size:20px;color:#20E334;border:2px solid #20E334;border-radius:10px;padding:3px;margin:auto}html:not([lang=ac]) body.loggedin:not(.subscriber) .side blockquote a[href^="http://www"]{font-size:20px;color:#FE0D76;border:2px solid #FE0D76;border-radius:10px;padding:3px;margin:auto}
    0 Comments
    2017/07/03
    18:02 UTC

    Back To Top