N/A

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

wake wake, get 2 da snake

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).

.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;

}

.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

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;
}

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 .

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 )

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.

.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: #------;
}

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;
}

Just put this in your stylesheet.

#sr-header-area .redesign-beta-optin {
    display: none;
}

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;
}

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.

https://www.reddit.com/r/TRIGGEREDDD/

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

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.

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

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.

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

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 */

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;
}

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;

}

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}