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;
}
Jump in the discussion.
No email address required.
Notes -
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-iconsomehow. Something likebox-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 (withdisplay:none;) within the li in the thecomment-actionsblock. 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.
More options
Context Copy link
More options
Context Copy link
More options
Context Copy link