Accurately recreate the Netflix sidebar widget from The Dragon Prince's subreddit, so people can use it for subs about Netflix shows.

I made this for a subreddit I moderate, figured I'd share it. It's a great way to make your discord link really stand out!

To use the Discord sidebar widget in your subreddit (legacy reddit only), follow these instructions:

1. Paste sidebar text into your sidebar and add your own discord invite link.
2. Paste CSS into your stylesheet (/r/SUBREDDIT/about/stylesheet)
3. Upload image to your stylesheet - Make sure the file is called discordimg - You can also use this default image if you want.
4. Save, and you're done!

If your subreddit is using a custom theme, you might want to adjust the CSS to fit, but it shouldn't be too hard if you know CSS. This particular one is adjusted for subreddits without a theme - feel free to reach out for help

Changelog:

Version 2.1: Images no longer require to be 45px by 45px, they will automatically resize. Minor adjustments to be more reliable

Version 2: Changed markdown and css so you're less likely to run into issues with other blockquotes in your sidebar. CSS now targets h1 + h5 + blockquote instead of blockquote:first-of-type.

Sidebar Text:

#[](#See /r/DiscordWidget for info & help)
#####[](#by u/titleproblems)
> ######[](#discordimg)[Join our Discord!](https://discord.gg/INVITE_LINK_HERE)  
> 
> ^[download ^[discord](https://discordapp.com/download) ^or ^use [^the ^web ^app](https://discordapp.com/)^]

CSS:

/* Discord Widget made by /u/titleproblems | /r/DiscordWidget | Version 2.1 */
.side h1 + h5 + blockquote {
    background: #2F3136;
    border: 0;
    border-left: 57px solid #202225;
    margin-left: 0;
    width: 236px;
    padding: 15px 0 15px 7px;
    border-radius: 5px
}
.side h1 + h5 + blockquote h6 { text-decoration: none }
.side h1 + h5 + blockquote h6 a {
    font-size: 17px;
    font-weight: bold;
    color: #f6f6f7
}
.side h1 + h5 + blockquote h6:hover a {
    color: #7289DA
}
.side h1 + h5 + blockquote sup { color: #72767d }
.side h1 + h5 + blockquote a,
.side h1 + h5 + blockquote a sup,
.side h1 + h5 + blockquote sup a { color: #f6f6f7 !important }
.side h1 + h5 + blockquote a:hover,
.side h1 + h5 + blockquote a:hover sup,
.side h1 + h5 + blockquote sup a:hover { color: #7289DA !important }
/* Image */
.side h1 + h5 + blockquote a[href*="#discordimg"] {
    display: block;
    content: "";
    position: absolute;
    margin-left: -58px;
    margin-top: -2px;
    background: url(%%discordimg%%);
    background-size: 45px;
    height: 45px;
    width: 45px;
    border-radius: 100px
}
.side h1 + h5 + blockquote a[href*="#discordimg"]:hover { border-radius: 15px }
/* Transition */
.side h1 + h5 + blockquote h6 a,
.side h1 + h5 + blockquote a:hover,
.side h1 + h5 + blockquote a:hover sup,
.side h1 + h5 + blockquote sup a:hover,
.side h1 + h5 + blockquote a[href*="#discordimg"] {
    transition: all .25s ease;
    -moz-transition: all .25s ease;
    -webkit-transition: all .25s ease
}
/* END Discord Widget */

#THIS VERSION IS OUTDATED. Please see version 2 here

I made this for a subreddit I moderate, figured I'd share it. It's a great way to make your discord link really stand out!

To use the Discord sidebar widget in your subreddit (legacy reddit only), follow these instructions:

1. Paste sidebar text into your sidebar and add your own discord invite link. (Make sure there are no blockquotes ABOVE the widget as the CSS targets the first blockquote in your sidebar)
2. Paste CSS into your stylesheet (/r/SUBREDDIT/about/stylesheet)
3. Upload image to your stylesheet - I recommend resizing your discord server's icon into a 45px by 45px image for a more personalized widget, but you can also use this default image if you want. Make sure the file is called discordimg
4. Save, and you're done!

If your subreddit is using a custom theme, you might want to adjust the CSS to fit, but it shouldn't be too hard if you know CSS. This particular one is adjusted for subreddits without a theme. I might release some versions pre-adjusted for common themes, like Naut.

#THIS VERSION IS OUTDATED. Please see version 2 here

#THIS VERSION IS OUTDATED. Please see version 2 here

#THIS VERSION IS OUTDATED. Please see version 2 here

Sidebar Text:

> ######[](#discordimg)[Join our Discord!](https://discord.gg/INVITE_LINK_HERE)  
> 
> ^[download ^[discord](https://discordapp.com/download) ^or ^use [^the ^web ^app](https://discordapp.com/)^]

CSS:

/* Discord Widget - made by /u/titleproblems */
.side blockquote:first-of-type {
    background: #2F3136;
    border-left: 57px solid #202225;
    margin-left: 0px;
    width: 236px;
    padding: 15px 0 15px 7px;
    border-radius: 5px
}
.side blockquote:first-of-type h6 { text-decoration: none }
.side blockquote:first-of-type h6 a {
    font-size: 17px;
    font-weight: bold;
    color: #f6f6f7
}
.side blockquote:first-of-type h6:hover a {
    color: #7289DA
}
.side blockquote:first-of-type sup { color: #72767d }
.side blockquote:first-of-type a,
.side blockquote:first-of-type a sup,
.side blockquote:first-of-type sup a { color: #f6f6f7 !important }

.side blockquote:first-of-type a:hover,
.side blockquote:first-of-type a:hover sup,
.side blockquote:first-of-type sup a:hover { color: #7289DA !important }

/* Image */
.side blockquote:first-of-type a[href*="#discordimg"] {
    display: block;
    content: "";
    position: absolute;
    margin-left: -58px;
    margin-top: -2px;
    background: url(%%discordimg%%);
    height: 45px;
    width: 45px;
    border-radius: 100px
}
.side blockquote:first-of-type a[href*="#discordimg"]:hover { border-radius: 15px }
/* Transition */
.side blockquote:first-of-type h6 a,
.side blockquote:first-of-type a:hover,
.side blockquote:first-of-type a:hover sup,
.side blockquote:first-of-type sup a:hover,
.side blockquote:first-of-type a[href*="#discordimg"] {
    transition: all 0.25s ease;
    -moz-transition: all 0.25s ease;
    -webkit-transition: all 0.25s ease
}
/* END Discord Widget */