Homespun – A css theme

Homespun is a colourful blocky theme which represents the culmination of a year or so of working with CSS for me. I'm overjoyed to be able to share this with you guys and hope I can make somebody's subreddit nicer!

Unique features

It has quite a few features, such as:

• Stylish dropdown menu

• Full RES compatibility

• Header/sidebar image option

• Custom user/linkflairs

Demo: https://www.reddit.com/r/homespun/

CSS: https://pastebin.com/kaM6jAs4

GENERAL

YTReddit is a theme perfect for any online video based subreddit

The subreddit is semi-compatible with RES

If you have any areas of optimization or styling ideas in mind, please message me with them

Front page: http://imgur.com/a/74VRh

STYLESHEET

Icons: http://imgur.com/a/Ui7mo

CSS:

/*==========================================================================================*/
                                          /*HEADER*/
/*==========================================================================================*/

.dropdown.srdrop .selected {
    font-size: 0px;
    background-image: url(%%icon-dropdown%%);
    background-size: contain;
    height: 10px;
    width: 13px;
    position: absolute;
    top: 19px;
    left: 12px;
}

.dropdown.srdrop .selected:hover { background-image: url(%%icon-dropdown-hover%%); }

#sr-header-area .drop-choices.srdrop {
    margin: 46px 0px 0px 10px;
    border: 1px solid #cccccc;
}

.drop-choices a.choice {
    padding: 3px 4px 3px 4px;
    color: #666666;
}

.drop-choices a.choice:hover {
    background-color: #444444;
    color: #ffffff;
}

#sr-header-area {
    background: none;
    border: none;
}

#header {
    background: white;
    border-bottom: 1px solid #e8e8e8;
    height: 50px;
    z-index: 4;
}

#sr-header-area .sr-list, #sr-more-link { display: none; }

#header-img.default-header { display: none; }

#header-bottom-left { margin: -8px 0px 0px 60px; }

.pagename { font-size: 0px; }

.pagename a {
    background: url(%%icon-logo%%) no-repeat;
    display: block;
    height: 30px;
    width: 71px;
    margin: -14px 0px 0px 4px;
    text-indent: -9999px;
}

.tabmenu {
    position: absolute;
    top: 46px;
    left: 333px;
    width: calc(100% - 333px);
    text-align: center;
    background-color: white;
}

.tabmenu li a, .tabmenu li.selected a, .tabmenu.formtab .selected a, .tabmenu.formtab a {
    display: inline-block;
    background-color: white;
    font-weight: normal;
    color: #666666;
    border: none;
    border-bottom: 3px solid white;
    padding: 14px 2px 12px 2px;
    margin: 0px 9px 0px 9px;
    font-size: 12px;
    text-transform: capitalize;
}

.tabmenu li.selected a, .tabmenu.formtab .selected a {
    color: #333333;
    border-bottom: 3px solid #cc181e;
}

.tabmenu li a:hover, .tabmenu.formtab a:hover { border-bottom: 3px solid #cc181e; }

#search input[type=text] {
    position: absolute;
    top: 11px;
    left: 230px;
    height: 28px;
    width: 586px;
    z-index: 6;
    border: 1px solid #cccccc;
    text-transform: capitalize;
}

#search input[type=submit] {
    position: absolute;
    background-image: url(%%icon-search%%);
    background-position: 23px, 0px;
    background-color: #f8f8f8;
    top: 11px;
    left: 836px;
    width: 65px;
    height: 28px;
    border: 1px solid #cccccc;
    z-index: 6;
}

#search input[type=submit]:hover {
    background-image: url(%%icon-search%%);
    background-position: 23px, 0px;
    background-color: #f0f0f0;
}

#header-bottom-right { background: none; }

#header .user>a {
    display: inline-block;
    position: relative;
    background-image: url(%%icon-profile-gray%%);
    background-size: contain;
    height: 25px;
    width: 25px;
    font-size: 0px;
    margin: 0px 24px 8px 0px;
}

.user { font-size: 0px; }

#mail {
    position: absolute;
    top: 10px;
    left: calc(100% - 96px);
}

#mail.nohavemail {
    background-image: url(%%icon-notification%%);
    background-position: 0px 0px;
    height: 20px;
    width: 17px;
    opacity: 0.5;
}

#mail.nohavemail:hover { opacity: 0.6; }

#mail.havemail { background-image: none; }

.message-count {
    position: absolute;
    top: 10px;
    left: calc(100% - 98px);
    background-color: #e62117;
    height: 20px;
    width: 20px;
    padding: 0px;
    text-align: center;
    border-radius: 50%;
    font-size: 10px;
    line-height: 20px;
    overflow: hidden;
}

#header-bottom-right .separator, #modmail, #new_modmail, #header-bottom-right .flat-list, #openRESPrefs, .logout { display: none; }

.submit .morelink, .res-floater-visibleAfterScroll { display: none; }

.submit-text .morelink {
    display: block;
    position: absolute;
    background-image: url(%%icon-upload%%);
    background-size: contain;
    background-position: 0px, 0px;
    top: 16px;
    left: calc(100% - 156px);
    z-index: 5;
    height: 17px;
    width: 14px;
    font-size: 0px;
    border: none;
    opacity: 0.5;
}

.submit-text .morelink:hover { opacity: 0.6 }

.nub { display: none; }

/*==========================================================================================*/
                                           /*SIDE*/
/*==========================================================================================*/

body { background-color: #f1f1f1; }

.content {
    float: right;
    width: calc(100% - 500px);
    margin: 52px 85px 0px 0px;
}

.side {
    float: left;
    margin: 0px;
    padding: 16px;
}

.side a { color: #e62117; }

.login-form-side {
    border: none;
    padding: 11px 0px 11px 0px;
    margin-bottom: 16px;
    border-top: 1px solid #cccccc;
    border-bottom: 1px solid #cccccc;
}

.infobar, #moresearchinfo, #searchexpando, .linkinfo, .gold-accent.comment-visits-box, .link .usertext-body .md {
    border: 1px solid #cccccc;
    border-radius: 0px;
    background-color: #f8f8f8;
    color: #666666;
}

.infobar, #moresearchinfo, #searchexpando {
    padding: 16px 16px 6px 16px;
    margin-bottom: 16px;
}

.linkinfo {
    padding: 16px;
    margin-bottom: 16px;
}

.infobar a { color: #cc181e }

.titlebox {
    text-align: center;
    padding: 16px;
    border-top: 1px solid #cccccc;
    border-bottom: 1px solid #cccccc;
}

.titlebox h1 {
    display: none;
    padding: 0px;
    margin: 0px;
}

.titlebox form.toggle, .leavemoderator { padding: 0px 0px 8px 0px; }

.titlebox form.flairtoggle { text-align: left; }

.toggle .option.active { display: inline-block; }

.titlebox .fancy-toggle-button { margin-right: 0px; }

.fancy-toggle-button .active {
    padding: 4px 8px 4px 24px;
    border: 1px solid #cccccc;
    border-radius: 0px;
    font-weight: normal;
    text-transform: capitalize;
}

.titlebox .subscribe-button .active {
    text-transform: capitalize;
    padding-top: 0px;
    padding-bottom: 0px;
}

.fancy-toggle-button .add {
    background-image: url(%%icon-subscribe%%);
    background-repeat: no-repeat;
    background-position: 6px, 0px;
    background-color: #e62117;
    padding-left: 24px;
}

.fancy-toggle-button .add:hover { background-color: #cc181e; }

.fancy-toggle-button .remove {
    background-image: url(%%icon-unsubscribe%%);
    background-repeat: no-repeat;
    background-position: 6px, 0px;
    background-color: #f8f8f8;
    padding-left: 22px;
    color: #666666;
}

.titlebox .word { display: none }

.titlebox .subscribers {
    border: 1px solid #cccccc;
    border-left: none;
    padding: 2px 4px 3px 4px;
    background-color: #f8f8f8;
    color: #666666;
}

.users-online { color: #666666; }

.users-online:before { display: none; }

.titlebox .users-online span.number:after { content: " Online"; }

.titlebox .bottom { 
    border: none;
    text-align: left;
}

.sidebox.create {
    margin-top: 16px;
    border-top: 1px solid #cccccc;
}

.sidebox.create .spacer { display: none; }

.sidebox.create .morelink, .btn, .usertext button {
    background-image: none;
    border: 1px solid #cccccc;
    background-color: #f8f8f8;
    height: 28px;
    width: 160px;
    margin: 0 auto;
    margin-top: 16px;
    margin-bottom: 16px;
}

.sidebox.create .morelink a, .btn, .usertext button {
    color: #666666;  
    font-weight: normal;
    font-size: 13px;
}

.sidebox.create .morelink:hover, .sidebox.create .morelink a:hover, .btn:hover, .btn a:hover, .usertext button:hover, .usertext button a:hover {
    background-color: #e62117;
    color: white;
}

.btn, .usertext button {
    width: auto;
    margin: 0px;
    text-transform: capitalize;
    padding: 3px 6px 3px 6px;
    margin-right: 4px;
}

.side .spacer { margin: -1px; }

.ad300x250, .sponsor-300-250 { margin-bottom: 16px; }

#ad-frame, #ad_main { margin-top: 16px; }

.sidecontentbox {
    display: inline-block;
    padding: 16px 0px 16px 0px;
    border-top: 1px solid #cccccc;
    border-bottom: 1px solid #cccccc; 
}

.sidecontentbox .content {
    border: 1px solid #cccccc;
    background-color: #f8f8f8;
    color: #666666;
}

.sidecontentbox .title h1, .sidecontentbox .collapse-button {
    margin-bottom: 4px;
    display: inline-block;
    font-size: 12px;
    color: #cc181e;
}

.gadget .reddit-entry { margin: 4px 0px 0px 24px; }

.gadget .click-gadget { margin-left: 4px; }

.icon-menu a { background-color: transparent; }

.sidecontentbox a { color: #666666; }


/*==========================================================================================*/
                                           /*CONTENT*/
/*==========================================================================================*/

.link, .commentarea {
    position: relative;
    background-color: white;
    padding: 16px;
    margin-bottom: 2px;
    min-height: 110px;
}

.link .entry {
    margin-left: 220px;
    max-width: calc(100% - 340px);
}

.link .thumbnail {
    position: absolute;
    left: 16px;
    width: 196px;
}

.link .thumbnail.default {
    background-image: url(%%icon-post-link%%);
    background-position: 0px 0px;
    height: 110px;
    width: 196px;
}

.link .thumbnail.self {
    background-image: url(%%icon-post-text%%);
    background-position: 0px 0px;
    height: 110px;
    width: 196px;
}

.link .thumbnail img {
    background-size: 100% 100%;
    height: 110px;
    width: 196px;
}

.arrow {
    height: 16px;
    width: 16px;
}

.arrow.up {
    background-image: url(%%icon-like%%);
    background-position: 0px 0px;
    opacity: 0.5;
}

.arrow.up:hover { opacity: 0.7; }

.arrow.upmod {
    background-image: url(%%icon-like-pressed%%);
    background-position: 0px 0px;
    opacity: 0.7;
}

.arrow.upmod:hover { opacity: 0.9; }

.arrow.down {
    background-image: url(%%icon-dislike%%);
    background-position: 0px 0px;
    opacity: 0.4;
}

.arrow.down:hover { opacity: 0.6; }

.arrow.downmod {
    background-image: url(%%icon-dislike%%);
    background-position: 0px 0px;
    opacity: 0.7;
}

.arrow.downmod:hover { opacity: 0.9; }

.link .arrow.up, .link .arrow.upmod {
    position: absolute;
    top: 20px;
    left: calc(100% - 108px);
}

.link .score {
    position: absolute;
    top: 22px;
    left: calc(100% - 71px);
}

.link .arrow.down, .link .arrow.downmod {
    position: absolute;
    top: 20px;
    left: calc(100% - 40px);
}

.link .score.likes { color: #5aa6dc; }

.link .score { color: #999999; }

.link .score.dislikes { color: #4d4d4d; }

.link .title {
    color: #167ac6;
    font-size: 14px;
}

.link .title:visited { color: #4b91c6; }

.thing.stickied.link a.title {
    font-weight: normal;
    color: #cc181e;
}

.link .tagline {
    display: flex;
    font-size: 0px;
}

.commentarea a { color: #cc181e; }

.link a.author, .comment .author {
    order: -1;
    font-size: 12px;
    font-weight: normal;
    color: #888888;
}

.link .tagline time { font-size: 12px; }

.link .tagline time::before { content: "• "; }

.edited-timestamp::before { display:none; }

h1 { display: none; }

.content .submit {
    float: left;
    margin-top: 6px;
}

.roundfield { background-color: transparent }

.roundfield .title {
    font-size: 12px;
    color: #cc181e;
    text-transform: uppercase;
}

.roundfield a {
    font-size: 12px;
    color: #888888;
}

.roundfield textarea.title, .roundfield input[type=text], .roundfield input[type=url], .roundfield input[type=password], .roundfield input[type=number], #compose-message .roundfield select {
    text-transform: none;
    color: black;
    font-size: 14px;
}

.formtabs-content {
    border: none;
    background-color: white;
    padding: 16px;
}

.formtabs-content .infobar {
    border: 1px solid #cccccc;
    background-color: #f8f8f8;
    color: #666666;
    padding: 16px;
}

.c-btn-primary {
    background-color: #e62117;
    border-color: #cc181e;
    border-radius: 0px;
}

.c-btn-primary:hover { background-color: #cc181e; }

.content.submit .info-notice { display: none; }

/*==========================================================================================*/
                                           /*EXTRA*/
/*==========================================================================================*/

.sheets .col textarea { width: 130%; }

.organic-listing { display: none; }

.sidecontentbox .content {
    float: left;
    margin: 0px;    
    width: 287px;
}

Screenshots

The front page - minimal and visibly inspired by Apple design.

Refined Search Page - inspired by OS X Yosemite's spotlight search, supports the new Search page update

Comments Page

Submit Page

Features

Dark Mode - For the lovers of dark, this mode was created as an alternative to RES' night mode. It also works even if the user doesn't have RES installed.

Built in User flairs - Only takes seconds to set up, can be customized to be expandable.

Enhanced Typography - Minimaluminiumalism has adapted EnTypo, making content more elegant and easier to read.

A wide array of customization tools - Minimaluminiumalism is a theme designed for customization and tweaking. The wiki contains carefully written guides and easy to implement code.

Notifications - Ensuring more visibility to your inbox.

Noticeable Distinguish - Shows more clearly when a moderator is speaking officially.

OP Tags - OP is distinguished and more visible in the comments section, even if the user doesn't have RES installed.

Three distinct Header Styles:

Minimaluminiumalism comes with three different versions of header styles.

Header Style A

Header Style B

Header Style C

See Minimaluminiumalism in action

/r/LongDistance

/r/Rift

/r/RantGrumps

/r/OSXElCapitan

/r/marilyn_manson - Featuring Permanent Dark Mode

/r/MagicRush - Featuring Permanent Dark Mode

/r/Duelyst - Featuring Header Style B

/r/Honolulu - Featuring Header Style C

This theme is no longer receiving updates for the new RES changes. Some RES elements may look different from intended. Please see /r/CSSHelp to fix this or use another theme.

Installation instructions - includes download links and CSS snippets

Now a Reddit theme!

Now that the reddit admins have announced they are pro CSS, I would like to share a theme I finished before the stylesheet removal announcement from almost a month ago

GENERAL

Legere is a clean, easy to navigate theme for reddit created by /u/BurnedR. Some inspiration was taken from /r/Cogent. Legere is also partially RES compatible.

SCREENSHOT

If you don't have the ability to view the subreddit right now, here is a screenshot of the front page

CSS

To view and implement the CSS, visit the subreddit stylesheet page where you can copy and paste the code, as well as download the appropriate icons

HELP

If you are having trouble implementing the theme to your subreddit or you have noticed a glitch, please comment your issue down below and I will respond eventually

CHANGES

• June 22, 2017 - Fixed issue with user flair edit button not appearing

• June 26, 2017 - Changing the sidebar width has become a lot easier

• June 29, 2017 - Default submission button text has been changed by the theme, because the default text is too long. Modifying the text will no longer be possible using the subreddit settings

• July 12, 2017 - Added flair templates

I could just repost the entire changelog here, but head on over to /r/Naut to see what's new! Would love to hear your thoughts.

Slique is a theme that I created with the goal of changing the entire feel of Reddit and to remove a lot of the clutter.

View the demo here: /r/slique

Installation instructions at Github

Features

• Basic sidebar customization

• Collapsed top-right bar (preferences, mail, logout).

• Post buttons (save, hide, share) hidden as icons and shown on hover

• (New) Click on comment to expand/collapse (minus/plus not needed). Comment actions moved into menu.

Screenshots

• Front page: http://i.imgur.com/gbSgBzS.png

• Comments Page: http://i.imgur.com/62LoJNm.png

• Sidebar Customization: http://i.imgur.com/tjtmqdU.png

Notes

• If you want to add your own background, make it fade down to transparency for best results.

• If you see anything that is broken, or any features / customization options that you want to see, please please please message me and I will do my best to add them.

Thank you for checking out my theme!

eddited v1.0.0 - Make it your own.

The official release is here! I would call it the most customizeable theme currently available on reddit. The customizer makes it incredibly easy to make this theme unique to just your subreddit! Most features can be turned on or off, and there are a lot of them!

Check out some demos!

(All the demos come preloaded in the customizer!)
 

See it live at r/eddited

Features

• Fully Customizeable Color Scheme

• Header Area with Image/Text

• Scrolling Header Image

• Sidebar Image

• Dropdown Tabmenu

• Announcement box

• RES compatible

• Online Customizer
  The customizer allows you to change settings and build your own copy of the theme!

Screenshots

• Front Page

• Post Page

• Comments

It's available for subreddit themes and for personal use as a gold and RES theme. If you're interested, check out the How To thread for more detail!

 
^{eddited is open source and available on github. Feel free to fork and contribute!}

metrotheme

• Demo: https://old.reddit.com/r/metrotheme

• In use: /r/sharepoint

• CSS: https://gist.github.com/alirobe/1f59ae25b2cd6ef4d566

• Assets: /r/metrotheme/about/stylesheet

Features

• Looks as close as possible to Office 365/OWA/SharePoint/Work :)

• Doesn't take up much vertical space

• Metro-style typography

• Fixed Header

• dropdown for story sort

• RES compatible

• RES night mode compatible

• Simple

Install Notes

• Assets can be saved from the bottom of the page here: /r/metrotheme/about/stylesheet

• You'll need to upload the grid.png file as your 'site logo'.

Bla

Started off as a little one-off for /r/sharepoint that got a bit out of hand. It's #myFirstTheme, and it's got a few !importants and other bad habits from doing SharePoint branding... Oh well.

In the wild 6 months and it seems fine. So releasing it for any use, no attribution. Should be fairly straight-forward to customise as code is reasonably clean.

Apologies to the community for not packaging this up a bit more. I appreciate it's not as complete as some of the other themes on here... But Microsoft style themes are a bit hard to come by, so I thought it might be worth putting this one out there. :)

Comments, feedback, or questions welcome.

Note: if you're interested in this Office-style theme, you might also be interested in clearshift, the Windows-style theme :)

/r/Zireael by /u/Timbo_KZ

I thought this theme was pretty cool because it seems to be one of the few themes that makes any sort of change to the layout of the subreddit.

/r/STCKY

Finally finished my 2nd theme! Nothing fancy, just want to give /u/Cryptonaut a run for his karma :p

/r/images uses a slightly premature version of it, you can check it out.

Installation

I hope at least one person likes it!

Few screenshots:

Subreddit Home

RES Subreddits

Stylesheet

Submit Link

Nightmode Home

Nightmode RES

The idea behind Don't Drink The Koolaid is a super simple, clean lined, small footprint theme with zero images. So you can just copy and paste the code into your edit stylesheet and that's it. You're immediately all set. But it also provides a jumping off point to customize to your heart's content and easily add anything you want.

I'd love to see it at work so feel free to leave a note if you end up using it.

Screenshot: http://imgur.com/a/dRGWb

Demo: https://www.reddit.com/r/DontDrinkTheKoolAid/

/* --------- ---------  
Code created by u/MizMalice
Please don't claim this as your own.
You're welcome to use it
I only ask that you leave my credit here.
--------- ---------   */


/* --------- ---------  BODY --------- -----------------   */

body {
    background-color: #f4f4f4;
    font-family: Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif;
}

/* --------- ---------  HIDDEN ITEMS  --------- ---------  */

.sidebox.create .morelink,
.sidebox .subtitle,
.sidebox.submit .spacer a,
.sidebox.create .spacer a,
.titlebox .bottom,
.srSep,
.nub,
.leavecontributor-button,
.more,
.users-online:before,
#header .tabmenu [href$="/ads/"],
#header .tabmenu [href$="/gilded/"] {
    display: none;
}

/* --------- ---------  HEADER  --------- ---------------  */

#header {
    border-bottom: none;
    background: #03a9f4;
    height: 100px;
    -webkit-box-shadow: 0px 3px 5px 0px rgba(50, 50, 50, 0.25);
    -moz-box-shadow:    0px 3px 5px 0px rgba(50, 50, 50, 0.25);
    box-shadow:         0px 3px 5px 0px rgba(50, 50, 50, 0.25);
}
#header-bottom-left {
    background-color: transparent;
    border: 0;
    height: 100px;
    padding: 0;
    position: absolute;
    bottom: 0;
    height: auto;
}
#header-bottom-right {
    background-color: #0375a9;
    color: #fff;
    display: block;
    border: none;
    font-size: 14px;
    text-decoration: none;
    text-transform: capitalize;
    margin-top: 7px;
    line-height: 26px;
    height: 26px;
    border-radius: 0;
    padding: 0 10px;
}
.user {
    color: #fff;
    font-size: 14px;
    text-decoration: none;
    text-transform: capitalize;
    line-height: 26px;
    height: 26px;
}
#header-bottom-right a {
    color: #fff;
    font-weight: 300;
}
#userbarToggle {
    color: #fff;
    background-color: #0375a9;
    border-right: none;
    border-radius: 0;
    font-size: 14px;
    line-height: 26px;
    height: 26px;
}
#userbarToggle.userbarShow {
    font-size: 14px;
    line-height: 26px;
    height: 26px;
    border-radius: 0;
}
#header-img {
    width: 120px;
    border-bottom: 3px solid transparent;
}
.res-navTop {
    top: 25px;
}
#RESShortcutsEditContainer {
    background-color: transparent;
    margin-right: 5px;
}
#RESShortcutsSort,
#RESShortcutsRight,
#RESShortcutsLeft,
#RESShortcutsAdd,
#RESShortcutsTrash {
    background-color: transparent;
    color: #fff;
}
.redditname,
.redditname a {
    background-color: transparent;
    color: #fff;
    text-decoration: none;
    text-transform: capitalize;
    line-height: 26px;
    height: 26px;
    font-size: 22px;
    font-weight: 300;
    margin-left: 15px;
    margin-right: 20px;
}
.redditname,
.redditname a:hover {
    text-decoration: none;
    color: #374046;
}
#sr-header-area {
    background-color: #0375a9;
    display: block;
    border: none;
    color: #fff;
    font-size: 14px;
    text-decoration: none;
    text-transform: capitalize;
    line-height: 24px;
    height: 26px;
    padding: 0;
}
#sr-more-link,
#sr-more-link a {
    background-color: #0375a9;
    color: #fff;
    font-size: 14px;
    text-decoration: none;
    text-transform: capitalize;
    line-height: 24px;
    height: 26px;
    font-weight: 300;
}
#RESShortcuts,
.separator {
    color: transparent;
}
.sr-bar .separator {
    color: #fff;
}
.tabmenu {
    margin-left: 20px;
    margin-top: 79px;
    border: none;
    line-height: 20px;
    height: 20px;
    font-size: 14px;
    background-color: transparent;
    text-transform: capitalize;
    margin: 2px;
}
.tabmenu li a {
    background-color: #0375a9;
    color: #f4f4f4;
    text-decoration: none;
    text-transform: capitalize;
    line-height: 20px;
    height: 20px;
    font-size: 14px;
    font-weight: 300;
}
.tabmenu a {
    background-color: #0375a9;
    color: #f4f4f4;
    border: none;
    text-decoration: none;
    text-transform: capitalize;
    line-height: 20px;
    height: 20px;
    font-size: 14px;
    display: inline-block;
    vertical-align: bottom;
}
.tabmenu li.selected a,
.tabmenu a:hover {
    background-color: #f4f4f4;
    color: #212121;
    border: none;
    text-decoration: none;
    text-transform: capitalize;
    line-height: 20px;
    height: 20px;
    font-size: 14px;
}

/* --------- ---------  SIDEBAR  --------- ---------  */

.side {
    background-color: #fff;
    margin-right: 20px;
    margin-top: 20px;
    padding: 10px;
}
.sidebox.create .spacer {
    display: none;
}
.side a {
    font-family: Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 12px;
}
.morelink {
    border: 0;
    -webkit-box-shadow: 0px 3px 5px 0px rgba(50, 50, 50, 0.25);
    -moz-box-shadow:    0px 3px 5px 0px rgba(50, 50, 50, 0.25);
    box-shadow:         0px 3px 5px 0px rgba(50, 50, 50, 0.25);
}
.morelink a {
    color: #fff;
    background-color: #0375a9;
    font-size: 14px;
    text-decoration: none;
    text-transform: capitalize;
    font-family: Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-weight: 300;
}
.morelink a:hover {
    color: #fff;
    background-color: #6c6c6c;
    font-size: 14px;
    text-decoration: none;
    text-transform: capitalize;
    font-family: Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-weight: 300;
}
.titlebox h1.redditname {
    color: #212121;
    font-size: 14px;
    text-decoration: none;
    text-transform: capitalize;
    font-weight: 300;
    text-align: center;
}
body > div.side > div:nth-child(5) > div > form.toggle.res-sr-style-toggle {
    color: #212121;
    font-size: 14px;
    text-decoration: none;
    text-transform: capitalize;
    font-weight: 300;
    text-align: center;
}
.titlebox .tagline {
    border: 0;
    background: transparent;
    font-size: 12px;
    border-width: 0;
    margin: 0 2px 10px 0;
    padding: 0 5px 5px 35px;
}
.titlebox .subButtons {
    display: block!important;
}
.titlebox .fancy-toggle-button {
    display: block;
    margin: 10px 0 0;
}
.entry .flat-list,
.subButtons .fancy-toggle-button {
    display: inline-block;
}
.RESDashboardToggle,
.RESFilterToggle,
.RESshortcutside,
.fancy-toggle-button .active,
a.blueButton,
div.blueButton {
    display: inline-block!important;
    min-width: 85px;
    height: auto!important;
    outline: 0;
    border-radius: 0!important;
    text-align: center;
    font-weight: 300;
    font-size: 11px!important;
    line-height: 14px!important;
    border-color: #6c6c6c!important;
    margin: 5px -3px 0 0 !important;
    text-align: center;
    padding: 3px 7px!important;
}
.fancy-toggle-button .add {
    background: none #6c6c6c!important;
    color: #f4f4f4;
    border-color: #6c6c6c!important;
    font-weight: 300;
    text-align: center;
}
.fancy-toggle-button .remove {
    background: none #6c6c6c;
    color: #f4f4f4;
    font-weight: 300;
    text-align: center;
}
.RESDashboardToggle,
.RESFilterToggle,
.RESshortcutside,
a.blueButton,
div.blueButton {
    background: none #6c6c6c!important;
    color: #f4f4f4!important;
    text-align: center;
}
.subscribers,
.users-online {
    position: relative;
    display: inline-block;
    width: 108px;
    vertical-align: top;
    white-space: nowrap;
    margin: 0px;
    padding: 10px 20px 5px;
    text-align: center;
    background-color: #fff;
    text-transform: capitalize;
}
.users-online {
    margin-bottom: .25em;
    width: 127px;
    border: 1px solid #fff;
    background: #fff;
    padding: 10px 0 5px 20px;
    text-align: center;
    text-transform: capitalize;
}
.subscribers .number,
.users-online .number {
    display: block;
    font-size: 14px;
    line-height: 1;
    text-align: center;
    background-color: #fff;
    text-transform: capitalize;
}
.users-online:after {
    position: absolute;
    top: -1px;
    right: 0px;
    width: 295px;
    height: 100%;
    border: 1px solid #fff;
    content: '';
    text-align: center;
}
.users-online+form.flairtoggle {
    margin-top: -4px;
}
.sidecontentbox .title h1 {
    color: #fff;
    background-color: #6c6c6c;
    font-size: 14px;
    text-decoration: none;
    text-transform: capitalize;
    font-family: Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif !important;
    font-weight: 300;
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 5px;
    padding-bottom: 5px;
    display: inline-block;
    text-align: center;
    width: 280px;
}
.sidecontentbox .content {
    border: 0;
}
.content {
    margin-right: 365px;
    margin-left: 20px;
    margin-top: 20px;
    background-color: #fff;
}
.thing {
    background-color: #fff;
    border: none;
    border-bottom: 2px #f4f4f4 solid;
}
.title a {
    color: #0375a9!important;
}
.title a:hover {
    color: #6c6c6c!important;
    text-decoration: underline;
}
.link {
    padding: 10px;
}
.thumbnail.self {
    background-image: none;
    background-color: #0375a9;
    height: 60px;
    width: 60px;
    text-align: center;
    line-height: 60px;
    border-radius: 50%;
}
.thumbnail.self:after {
    content: "T";
    color: #fff;
    font-size: 14px;
    height: 60px;
    width: 60px;
    text-align: center;
    line-height: 60px;
    border-radius: 50%;
}
.thumbnail.default {
    background-image: none;
    background-color: #6c6c6c;
    height: 60px;
    width: 60px;
    text-align: center;
    line-height: 60px;
    border-radius: 50%;
}
.thumbnail.default:after {
    content: "L";
    color: #fff;
    font-size: 14px;
    height: 60px;
    width: 60px;
    text-align: center;
    line-height: 60px;
    border-radius: 50%;
}
.thumbnail {
    height: 60px;
    width: 60px;
    margin-right: 10px;
    border-radius: 50%;
}
.arrow {
    width: 16px;
    height: 16px;
}
.dropdown.srdrop .selected,
.sr-bar a {
    color: #fff;
}
#noresults {
    padding: 10px;
}
.icon-menu a,
.sidebox .spacer,
.titlebox form.toggle,
.leavemoderator {
    background-color: transparent;
    margin: 5px;
    color: #212121;
    font-size: 12px;
    text-transform: capitalize;
}
.linkinfo {
    background: transparent;
    border: 0;
    text-transform: capitalize;
}
.footer {
    border: 0!important;
    color: gray;
    text-transform: capitalize;
}
.footer-parent {
    border: 0!important;
    color: gray;
    text-transform: capitalize;
}
.footer .col {
    border: 0!important;
    color: gray;
    text-transform: capitalize;
}
.footer a {
    border: 0!important;
    color: gray;
    text-transform: capitalize;
}

    /* Any additional code snippets you wish to add should go below this line or stuff can break. */

Check it out on /r/SimplePlus!

Over the past few months, I'd been noticing that reddit has started to slowly move towards a cleaner and more flat look when dealing with subreddit landing pages and other UI elements.

In response, I've created SimplePlus, to hopefully expand on reddit's new flat(ish) concept, and to go further.

SimplePlus is a simple theme with a simple objective: give reddit a modern facelift while still maintaining the core nostalgic style. It's easily customizable, from the header to finer details, and is meant for people who want a quick and easy way to install a stylish theme to any subreddit, regardless of CSS experience.

It was inspired by /r/Minimaluminiumalism, Google's Material UI guidelines, and the users at /r/CSShelp, and aims to keep true to the basic reddit UI with some cleaner and modern twists, but created to be assessable and easy to configure, along with working cleanly with popular reddit extensions like RES and reddit Toolbox.

Preview SimplePlus.

Download and install notes for SimplePlus.

This will be my first publicly released theme, so if you find anything you think should be added, have questions, comments, praise, bugs, or the theme has turned into a fiery ball visible from space, PM me here or comment below and I'll be happy to answer. :)

So I made my first (almost) complete subreddit theme, you can check it out at /r/dscvry.

I've applied it to /r/buildapchelp, but I'm still working on fine tuning things. I'm aiming to create something more than just a flat and minimalistic theme by using subtle borders and hover feedback. I only started 4 days ago so there's still quite a bit to be done, but I'm hoping the end result will be aesthetically pleasing.

Here's a screenshot: http://i.imgur.com/QFd1Vdw.png NEW VERSION: http://i.imgur.com/145s3ty.png

Edit: I haven't updated it recently since I've been working on an /r/videos theme. There's still a lot I need to change and fix, I'll probably get to it soon.

Edit 2: Huge update coming soon.

Edit 3: New version! Works with RES and has night mode.

Introducing Lament - A clean, organised theme. Inspired exclusively by Graphic Designer /u/CSABABERNATH's untitled Reddit redesign concept, and coded by /u/tomthefnkid.

Features

• Customisable announcement bar.

• Original Icons - Original up/downvote & thumbnail icons designed by /u/CSABABERNATH, specifically fit for the theme itself.

• Notification pop-up (Credit to /r/Apple).

• OP Tags - Ensures OP is distinguished in comments section.

• Built in Link Flairs - Customisable and easy to set-up.

See Lament in action on it's dedicated subreddit - /r/Lament

Edit: For the people that keep reporting this... can't you read stickies in the same sub? This thread is staying for archival reasons it is however no longer true as far as css going away goes. It will still change though, any theme in this subreddit will not be usable in the future without the author basically redoing it.

Announcement can be found here. They still need to start development and then there is a transition period, but eventually subreddit stylesheet will be going away.

We will await developments and in time act accordingly. Until then this subreddit will continue to operate as usual.

It should be noted that from several technical and operational points of views the removal of custom css makes sense for reddit. Which sucks tremendously for people like us who liked to work with it, however that should not stop us from looking at it objectively.

To put it rather bluntly:

• Custom CSS locks reddit into unsustainable development processes, so they are phasing it out.

Why they didn't state that more clearly in the announcement is unclear to me, but fact of the matter is that all the different css styles mean that every change they make to the html structure of the website potentially will break the styling of a subreddit. As a matter of fact, every time they make even relatively small changes this happens.

Considering that one reason they are redoing the entire frontend is to be able to iterate faster (the current codebase really is not easily maintainable) it would be an simply not feasible to keep supporting custom css.

I also know that one of the technical choices they made in their foundation is to use a method that generates the classes and ids automatically instead of devs doing that manually. This makes a lot of sense since it frees up precious development time since devs don't have to worry about that aspect as much anymore. This also means that if they still would allow custom css the earlier explained problem would be even bigger. Every time they update the website things can and will break and you have to a) figure out what in the structure they changed b) manually have to match all the classes etc to your css again.

As an example, look how long it took for people to fix the css issues with the beta icon or with the new modmail icon (I still see it being weirdly placed in tons of subreddits) and basically any structural change they made to the website.

They want to be able to make bigger changes faster and they can't do that when subreddits rely on css for their styling.

So again, from a technical point of view from reddits side it makes absolute sense to do away with subreddit css.

Which I also agree with does absolutely suck because we have gotten used to having this freedom and it is extensively used.

A more constructive method would be to keep an close critical eye on what they promised as a replacement in the form of a widget system and a more robust theming method. Even more so since a lot of people on reddit have css disabled and never see what we put in place anyway.

Specifically the widget system has potential to do a much better job of what we have been trying to do with css for years now. Imagine real menus for example for networks, heck maybe a specific network widget that works regardless of people having css enabled, a calendar widget for subreddits having regular events is also one thing that comes to mind. And so there are a ton of things I can think of that subreddits now hack into place with css to be never seen by people that haven't css enabled. If done properly those widgets would also be callable from the api through json output so third party apps can even show them when applicable.

View demo subreddit here: /r/Redmat

From the maker of /r/Slique brings you /r/Redmat, Material Design for Reddit. I know this looks a bit like /r/Naut, but that's just because Naut is based off of Material Design also.

Installation on github: https://github.com/leb2/redmat

Screenshots:

http://imgur.com/QAw5PVX.png

http://imgur.com/d4cG1XX.png

http://imgur.com/uWsRQ05.png

Notes:

• This theme was built off of /r/Slique, so it might still have some of the old theme that I forgot to switch out.

• Feel free to message me for any reason. I will try to fix problems as soon as possible

• To change the color, find and replace this: #3F51B5 for the primary color, and #303F9F for the dark primary color. A module for this should be released soon.

Enjoy!

Hello all!

Been working on my first theme for a couple of months and thought now that's it's finished, it would be a good time to show it off!

GENERAL

/r/frosttheme is a theme inspired by the frosted glass effect of iOS and other operating systems/apps. It features a full page background image which is blurred behind the translucent elements of the webpage.

It does not dramatically change the Reddit structure, allowing users of the subreddit to customise it to fit their needs, or leave it as is to serve as a standalone Reddit facelift.

It has partial support for RES including night mode, although it is very buggy and complete support has not been implemented yet.

CSS

The theme's CSS and sprites are available in a post on the subreddit which details how to install the theme and get the blurring effect working with your own backgrounds.

HELP

If you have any questions, suggestions, ideas or issues, please let me know by commenting on this thread, commenting on the "Thoughts and Suggestions" thread on the subreddit or sending me a PM. I'd appreciate any and all feedback and would love to hear what you think!

Please also leave a post in /r/frosttheme and link to your subreddit if you decide to use the theme.

Thanks everyone!

• Romejanic

Preview screenshot

Based on Material Design guidelines for desktop, /r/Click features a prominent banner for showing off graphics and can be customized with addons.

Features

• RES compatible (update: nightmode included)

• Add pop-out menus to the sidebar

• Color addon

• Larger thumbnails

• Thumbnails zoom in and pan on hover

Try it @ /r/click.

As the name suggests, it gives maximum focus to large background images.

Minisite

Install instructions

Demo subs:

• Dark variant: r/HectorBigPicture

• Light variant: r/HectorBPLight

Leeward is a simplifying theme, to help focus on content.

You can find the code on GitLab.

Hey,

So roughly one month ago i've released third iteration of my theme and that was the biggest update this theme ever had, loads of inconsistencies and plethora of bugs were fixed, also RES and NM tag nightmodes got introduced.

You can see default ClearShift without any customizations here

• /r/androidafterlife

• /r/ClearShift

And customized versions of ClearShift here

• /r/Windows10

• /r/MicrosoftBand

A lot more information about the theme and its features can be found on my website http://clearshift.me/ , if you have any questions, feedback or need some kind of help related to CSS feel free to drop a comment here or contact me directly.

Cheers, Jaska.

Hello, everyone.

I made a Reddit theme to update and improve the homepage, and thought I should share it in case someone else might enjoy it.

It's designed to only replace the frontpage, while leaving subreddit themes intact.

It's based off of Naut, with some changes specifically geared toward the frontpage. Besides the visual theme, I've increased the thumbnail sizes and hid the side bar when the aspect-ratio is below 1/1 (window docked to the side) in order to expand the link text to something actually readable.

I'll probably add a night-mode in the future, but for now it works like I want it to. There are probably a few theme bugs I haven't come across yet, but if you find any please let me know and how you think it should be changed.

Here is the Stylish userstyle: https://userstyles.org/styles/124743/reddit-homepage-paper-mint-ii

And here is a small Imgur album with some pictures of the theme: http://imgur.com/a/PAmzN

Let me know what you think, and what could use some improvement. Thanks!

"Juliette" is a brash subreddit theme, with large buttons and highlighted text to grab your community's attention. Click here for a demo of it!

Click here for the installation guide.

Give me some feedback, I'd love to hear it! Also, tell me if you're using it for one of your subreddits, I'd be overjoyed to have a look! Thank you!

I hope you enjoy this subreddit theme, it's my first theme, so I do hope that I've done a good job. The subreddit has been named after my beautiful girlfriend, Juliette.

Subreddits using /r/Juliette

• /r/Glom