vigils

One of my long-term frustrations with the Dreamwidth commenting system is that it nests forever, which works nicely for shorter comment threads but terribly for long roleplay exchanges that extend forever and break the page. Happily Dreamwidth introduced a fix for this a while ago, and this is a brief tutorial to show you how to enable the responsive comment feature.

Instructions

Go to the Presentation section of the Customize style page, and scroll down.
Choose "responsive" from the drop-down menu.
Adjust the other settings as you like. The numbers you put in determine when a thread will stop indenting, and you can see what it looks like in action here. (I have the numbers on that page set to 1.)

Note that this will only work if you have custom comments pages turned on in display settings. It won't work for the default site skin.

Adding style for comments

If you have one of the site-provided styles activated, that should be all you need to do. But if you have a custom layout you might need to add some CSS to your stylesheet to enable this feature.

If your layout has comment styling already, you should be able to add a couple basic lines to your stylesheet to enable this feature.

If your layout doesn't have comment styling at all, you might need to add some. Here's some basic CSS for comments I wrote up for my own layouts.

/* Comment Fonts */

h4.comment-title {font: italic 1.5em Garamond, serif; }

.comment-content { font: 14px/1.8 Veranda, sans-serif;}

.comment-interaction-links li{ font: 400 italic  1em Garamond, serif; }

/* Basic responsive comment thread indentation */

@media only screen and (max-width: 51em) {  /* Mobile indents */
 .comment-depth-indent-mobile {  margin-left: 30px;  }

.thread-depth.indent-mobile {  /* yes on screenreaders, no on display */
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  white-space: nowrap;
  width: 1px;  }  }

@media only screen and (min-width: 51em) { .comment-depth-indent-desktop {
 margin-left: 50px;               }

.thread-depth.indent-desktop {  /* yes on screenreaders, no on display */
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  white-space: nowrap;
  width: 1px; } 
}

.comment-thread { margin-top: 5px;  }

h4.comment-title { padding: .25em; margin-bottom:.5em;}

.comment-content { min-height: 120px; }

.comment-depth-1 { margin-left: 0; }

.contents .userpic img {  border: 10px solid #fff; width: 100px; height: 100px;}

.comment .datetime { font-size: .9em; display: block; padding: .5em; font-style: italic; letter-spacing: .05em; }

.comment-poster { display: block; margin-bottom: .5em; }

.userpic, .userpic:hover {    float: left; margin: 0 1em .5em 0; padding: 3px; background: #eee; line-height: 0;}

.no-userpic .userpic {display: none;}

.comment .header { background: transparent !important; }

.comment-wrapper { border: none; margin: 0 0 1em 0; padding: 1px; border-radius: 3px; background: #eee; }

.no-subject .comment-title, .partial .comment-title { display: none; }

.thread-depth { display: block; background: #eee; padding: .5em; margin-bottom: .5em; letter-spacing: .05em; font-style: italic; }

.comment { background: #fff; padding: 1em; margin: 0  !important;}

.comment .footer { padding: 1em 0; }

.comment .footer > .inner { display: flex; flex-wrap: wrap; justify-content: space-between; }

.bottomcomment {margin: 3em 0;}

.comment-from-text { display: none; }

.poster-ip { color: #ccc; }

.comment-interaction-links, .comment-management-links { padding: 0; margin: 0; }

.comment-management-links li { display: inline; list-style-type: none; padding: 0 .5em; }

.comment-management-links img { opacity: .6; vertical-align:middle;  }

.comment-interaction-links li{ color: #000; display: inline;  list-style: none; padding: 0 .25em; text-transform: lowercase; }

If you want to do some basic customization for these comments, it's easy. The colors used are #eee for the border and accents and #fff for the background. You can find and replace these if you have another color scheme in mind. There are also some basic font styles used that I put at the top so they'd be easy to change, with being the stuff you might want to tweak.


h4.comment-title {font: italic 1.5em Garamond, serif; }

.comment-content { font: 14px/1.8 Veranda, sans-serif;}

.comment-interaction-links li{ font: 400 italic  1em Garamond, serif; }

Here's a basic write-up about how the font property works in CSS, if you need some guidance. As always, feel free to modify this code as you like.