site banner
bildramer  2yr ago (text post)   2378 thread views

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
Top Bottom Old Controversial Comments
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!

What is this place?

This website is a place for people who want to move past shady thinking and test their ideas in a court of people who don't all share the same biases. Our goal is to optimize for light, not heat; this is a group effort, and all commentators are asked to do their part.

The weekly Culture War threads host the most controversial topics and are the most visible aspect of The Motte. However, many other topics are appropriate here. We encourage people to post anything related to science, politics, or philosophy; if in doubt, post!

Check out The Vault for an archive of old quality posts. You are encouraged to crosspost these elsewhere.


Why are you called The Motte?

A motte is a stone keep on a raised earthwork common in early medieval fortifications. More pertinently, it's an element in a rhetorical move called a "Motte-and-Bailey", originally identified by philosopher Nicholas Shackel. It describes the tendency in discourse for people to move from a controversial but high value claim to a defensible but less exciting one upon any resistance to the former. He likens this to the medieval fortification, where a desirable land (the bailey) is abandoned when in danger for the more easily defended motte. In Shackel's words, "The Motte represents the defensible but undesired propositions to which one retreats when hard pressed."

On The Motte, always attempt to remain inside your defensible territory, even if you are not being pressed.


New post guidelines

If you're posting something that isn't related to the culture war, we encourage you to post a thread for it. A submission statement is highly appreciated, but isn't necessary for text posts or links to largely-text posts such as blogs or news articles; if we're unsure of the value of your post, we might remove it until you add a submission statement. A submission statement is required for non-text sources (videos, podcasts, images).

Culture war posts go in the culture war thread; all links must either include a submission statement or significant commentary. Bare links without those will be removed.

If in doubt, please post it!


Rules


Recommended Posts And Communities

Recommended Realtime Chats