site banner

Share your CSS

Share your CSS, discuss themes/styles/the site's default look/whatever.

I just picked random elements and edited them until it worked, because I couldn't take this GNOMEd infinite whitespace new reddit look even for 30 minutes. My CSS is garbage, relies on a 1080p desktop browser, is probably full of code that does nothing or doesn't need to be as specific, might actually break one or two site functions, etc. but at least it doesn't violate my eyes anymore.

There is a list of defined colors (like --primary-dark1) that comes from the theme, but I don't see how to change them manually except one by one using more CSS. I use the default ("TheMotte") one.

Keep in mind, de gustibus non est disputandum. I'm mostly posting this so others can iterate faster and make proper good-looking themes. If you want to have slim text without the cringe inconsistent layout/color changes and are in a hurry, reading the comments and deleting the sections you don't want should most likely work.


/*unbold buttons*/

.btn {

  font-weight: 400 !important;

}


/*hide "is a reply to comment by" link on every single subcomment*/

div > .ml-2 {

  display: none !important;

}


/*reorder upvote buttons / userinfo / contents*/

.comment-anchor {

  display: flex;

  flex-direction: row;

  flex-wrap: wrap;

  gap: 0px 8px;

  padding: 1px;

}


.comment-anchor div:nth-child(1) {

  order: 1;

}


.comment-anchor div:nth-child(2) {

  order: 3;

  flex: 1 100%;

}


.comment-anchor div:nth-child(3) {

  order: 2;

}


/*colors*/

body > .container {

  background-color: #C0C0C8 !important;

}


#thread, #userpage {

  background-color: #C0C0C8;

}


.comment-section {

  background-color: #F0F0F8;

}


/*add borders, make slim*/

.comment {

  margin-top: 0.1rem !important;

  border: 1px solid var(--primary-dark1);

  margin-bottom: 1px;

}


.comment .comment-collapse-desktop {

  padding-right: 8px !important;

  border-left: 1px solid var(--primary-dark1) !important;

}


/*small gap between comments for readability*/

.comment-section > .comment {

  margin-bottom: 5px;

}


/*smaller font, spacing, limit post width*/

p {

  font-size: 12px;

  margin-top: 0.4rem;

  margin-bottom: 0.4rem;

  max-width: 900px;

}


/*misc whitespace removal*/

body > .container {

  max-width: 1850px;

}


.comment-collapse-icon {

  margin-left: -2px;

}


.upvote-button, .downvote-button {

  padding-left: 1px !important;

  padding-right: 1px !important;

}


.user-info {

  margin-bottom: 0 !important;

}


.comment .comment-body .comment-text {

  margin-bottom: 0.1rem;

  padding-right: 1px !important;

  padding-top: 1px !important;

}


blockquote {

  padding-top: 0;

  padding-bottom: 0;

  padding-left: 0.3rem;

}


blockquote > p {

  padding-top: 0;

  padding-bottom: 0;

  margin-top: 0;

  margin-bottom: 0;

}


.comment-body > .comment-anchor {

  padding: 1px;

}


.comment-actions {

  padding: 1px;

  margin: -3px;

}

12
Jump in the discussion.

No email address required.

I think this is as good as I am able and willing to do.

I simplified the CSS that I previously had running via a third-party extension so that it could now also work on phones.

The biggest limitation I found, besides my complete lack of experience, was the 4000 character limit for your custom CSS. The code is ugly and I couldn't fit in comments.

There are obviously bugs and inconsistencies. When in mobile view, for example, the reply icon and ellipses under comments are not correctly sized. Etc.

Screenshots of the phone view, since desktop looks pretty much the same:

CSS: https://pastebin.com/uEpiS39e

Edit: Apparently you can compress code!!

What is the tool that lets you just drop in your own CSS?

There are addons

Or you can save it in your account settings:

Replacing comment collapse/uncollapse buttons with old-timey text based ones:

https://pastebin.com/SiDjwMdN

I use it in combination with other changes, don't know how it will look on its own.

(other changes: https://www.themotte.org/post/25/share-your-custom-css/1121?context=8#context)

I've been trying to recreate the look of reddit. As much as I hate that site, the old layout is very good.

But the amount of whitespace still left over from rdrama is horrible. The Motte is unusable without a custom theme. I had hoped that the devs would've made a better job of cleaning up the mess.

Frontpage: https://i.imgur.com/H7SWCgF_d.webp?maxwidth=9999&fidelity=high

Post: https://i.imgur.com/qe6yehV_d.webp?maxwidth=9999&fidelity=high

Comments: https://i.imgur.com/fcuAEvf_d.webp?maxwidth=9999&fidelity=high

Use this if you want to remove commenter names and reduce bias when replying or something.


.user-info > * {

  display: none;

}


.user-info > .comment-collapse-icon, .time-stamp, .time-edited {

  display: inline;

}

This hides upvotes and downvotes to remove undue social pressure (not tested too extensively):


.upvote-button, .upvote-button + *, .upvote-button + * + .downvote-button {

  display: none;

}

This is intended to make comment threads more readable, primarily by drawing borders around comments so the nesting structure is more obvious. Also adjusts comment thread whitespace. The last rule limits the bodies of posts and comments to a reasonable width, so lines of text aren't uncomfortably long on large screens. Only tested with the default theme, and better tested on desktop than mobile. Screenshot attached.

Edit: now with proper margins for the 'more comments' buttons that appear for deeply-nested posts.

.comment .comment-collapse-desktop, .comment .comment-collapse-desktop:hover {

  border-left: none !important;

  background-color: var(--gray-400);

  padding-right: 7px;

  border-radius: 7px 0 0 0;

}


.comment .comment-collapse-desktop:hover {

  background-color: var(--primary-light1);

}


.comment .comment-body {

  border: 1px solid var(--gray-400);

  border-left: none;

  padding: 0;

}


.comment, .comment-section > .comment {

  margin: 1rem -1px -1px 0;

  padding-left: 0;

  border-color: var(--gray-400) !important;

  border-width: 5px !important;

  border-radius: 5px 0 0 0;

}


.comment .comment {

  margin-left: 1rem;

}


.comment-anchor:target, .unread {

  background-color: rgba(0, 230, 245, 0.1) !important;

}


.comment-write {

  padding: 1rem !important;

}


.more-comments > button {

  margin: 1rem !important;

}


#post-text, .comment-text, .comment-write {

  max-width: 60rem !important;

}


You can also add this rule if you want to change the font weight and size for post/comment bodies:

#post-text, .comment-text, .comment-write, #post-text p, .comment-text p, .comment-write p {

  font-size: 16px;

  font-weight: 450;

}


I believe the defaults are 14px and 400.

/images/16623978378158753.webp

Thanks, makes it a ton more readable.

Thank you. The site is now actually usable.

I like that. Thanks.

This is mine. It improves readability a lot imho

https://files.catbox.moe/mt0h6o

Troll post. Loving the cycling logo up top, though.

I like it! On my iPhone 8, it very much resembles old.reddit, which I exclusively use when there. I’d just like the hide/show buttons a bit bigger.

Is there a way to move the reply and vote buttons to below the text of the post/reply? If so, where in your above text would I put it?

You should be able to enlarge .comment-collapse-icon somehow. Something like box-sizing: border-box; width: 130%; maybe?

Also the buttons are reordered in the order: 1; parts, the original order is username - text - buttons. You can just delete the whole block I think. I used flex to get username then buttons in a row, then text in another row, but it's done in a hacky way. If you want only the vote and reply buttons below and to remove the rest, you'd have to reorder those and/or hide them (with display:none;) within the li in the the comment-actions block. I'm not sure if it's easy to move only some buttons and keep the rest where they are using CSS only.

Thanks! I moved the comment-ending asterisk-slash to the end of that code block, and also unhid the permalink in the same manner, so I wouldn't have to come look up the code later if I want to switch it up.

hi :-)

You should post a screenshot also!