site banner
bildramer  1yr ago (text post)   2121 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.

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

I like that. Thanks.

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