That's the plan? That plan sucks!
It's like LJ gave us all the early Christmas gift of fugliness. I don't even celebrate Christmas.
Anyways. Like the way fail_fandomanon looks right now? Want it for your own comm/journal? Here's how!
1. Set your layout to Minimalism "Georgia", with the sidebar on the left. (This code gets rid of the sidebar-- but it has to be on the left in the settings for it to work. CSS voodoo~)
2. Set "Disable custom comment pages" to NO. (LJ reset everyone's journal to the new comment page a couple hours ago, in what I assume was a childish fit of pique that we didn't like their present, so doublecheck your settings!)
3. In the custom CSS area, make sure "Use layout stylesheets" and "Use layout theme stylesheets" are both set to YES.
4. Copy and paste the mess in the box below into the custom CSS box:
body {
background-color: #fff;
color: #000; }
.comment-wrap.screened .comment-head,
.comment-wrap.screened .comment-head.odd,
.comment-wrap.screened .comment-head.even
{ background-color: #ccc; }
.sidebar-inner {
display:none;width:auto }
.content .entry .entry-text .author dt {
text-align: right !important;
width: 120 px!important;}
.content .entry .entry-text .author .username {
text-align: right !important;
width: 150px !important; }
.content {
float:left;
width:100%;
margin-right:-100%; }
.content-inner {
position:relative;
margin-right:50px !important;
margin-left:30px;
overflow:visible !important; }
.column-right .content-inner {
margin-right:50px;
margin-left:30px; }
.column-left .content-inner {
margin-right:15px;
margin-left:50px; }
.content .entry {
position:relative;
width:100%;
margin:3.5em 0 0; }
.entry {
margin-top: 0 !important; }
.entry-title, .entry-linkbar {
margin: 1em 0 0 !important; }
.column-right .hr-afterhead {
margin-right: 0px; }
.header .hr {
margin-right: 0px
margin-left: 0px !important; }
.column-left .hr-afterhead {
margin-left: 0px; }
.header h2 {
font-family: georgia, times new roman, serif !important;
font-size:28px !important;
font-weight: bold !important;
font-style: italic !important;
margin-left: 50px; !important}
.header-sec {
float: left;
padding: 4px 0 19px;
font-family: georgia, times new roman, sans-serif !important;
font-size:12px !important; }
.content .entry .entry-title, .content .entry .entry-text {
padding-left: 0 !important; }
body, .content .entry .entry-text, .entry-date, .content .entry .entry-text .author * {
font-family: verdana }
.comment-head h3 {
font-family: arial;
font-size: 1.4em;
font-weight: bold; }
a, a:link {
color:#00C !important ;
text-decoration:underline !important;
border:0px !important;}
a:visited {
color:#306 !important;
text-decoration:underline !important;
border: 0px !important; }
.ljuser a, .ljuser a:link, .ljuser a:link b {
color: #00C !important;
text-decoration:underline!important;
border-bottom:none !important; }
.ljuser a:visited, .ljuser a:visited b {
color: #306 !important;
text-decoration:underline !important;
border-bottom: none !important; }
strong, b {
font-weight: bolder; }
a.comment-permalink {
color:#00C !important ;}
h2 {
font-size: 24px !important;
font-style: none; }
.entry-text H3 {
margin-top: 2px !important; }
.comment-head H3 {
margin-bottom:2px !important;}
.comment-head p {
margin-bottom: 0; }
.comment-menu {
font-size: 0.75em;
margin-bottom: 1.5em !important;
margin-top: 1em !important; }
.comments-links {
margin: 1em 0;
text-align: center;
font-weight: bold !important;}
.entry-comments-text>table {
background: none repeat scroll 0 0 #BDF;
border: 5px solid #BDF;
margin: 0 auto;
width: 450px !important; }
dd.entrymenu, #page .layout .layout-inner .entrymenu .btn span {
font-style:normal; font-weight:bold }
#page .entrymenu .btn-comments {
font-size:2.5em;
padding-left: 0px;
border: 0;
margin: 0 0 0 -3px;
padding-top:10px;
font-weight: bold;
color: #00c;
background: none;
background-image: none;
border-image: initial; }
a.subj-link, dt.entry-title, .content .entry .entry-title {
font-size: 22px;
font-weight:bold;
font-family: georgia, times new roman, serif;
font-style: italic; }
.header .nav-sub {
float: right;
padding: 4px 0 19px;
margin-right:50px }
HTML, #page {
min-width:0px; }
.header .userpic, .header .userpic img {
display:none}
.header .item {
display: inline;
padding-right: 20px; }
.footer {
border-top: 1px dotted !important;
background: #ffffff !important;
clear: both;
display: block;
margin-left:50px;
margin-right:50px;
padding-bottom: 30px;
position: relative; }
If you just want to read and marvel at the kludginess of the code, I've slapped it up on pastebin here.
This is as close to cloning the old LJ comments page as I can humanly make it. The basics were cobbled together from stoppedhiding's post here and firstkinkmod (who now has their code up here) but I spent most of yesterday refining tiny fiddly stuff with the help of gentlefailers and sunnysideolife. It's been deployed on the meme for most of today and so far, so good-- it's holding up.
Things that this layout fixes that the other various old-comment-page clones floating around don't all do:
- I evened out the left and right margins, they're now both at a fixed 50px.
- Aligned the poster's icon/username to the right side of the entry... it was bugging me that longer usernames were running into the margin. (You can set this layout to display icons or not, though.)
- Subject lines in comments are fixed to the top of the blue comment header box, instead of floating around in the middle. Takes up less space, especially for anon comments.
- Comment page numbers are back in a blue box under the entry.
Known issues:
- So far no one has managed to fix the thing where super-long comment threads run off the right side of the page and the overflow creates a scrollbar at the bottom of the comment area instead of the for the whole page (see this monster thread for an example of what I'm talking about, or, if your monitor is wider than that, screencaps. As far as I can tell, this is a "feature" of Minimalism... the way the divs are nested I'm not sure it can be fixed. FIXED
- There are no timestamps on comments in collapsed threads. This also seems to be layout-dependent and not something I can get back with just CSS.
- There's no "expand from top" function. I don't even know what witchcraft makes that work on the new comment pages.
- This breaks the sidebar completely. My one and only goal with this layout was to have the comments look as much like the old default as possible for memeing purposes; therefore everything else is pretty stark at best. So if you're looking at this layout thinking "well I like the look of the comments but I want the sidebar with a page summary and some tags and shit, I'll just delete that line that says sidebar {display:none}"... it won't work because the margins are fixed, sorry! Someone on stoppedhiding's post has a version with a sidebar that may be better for a personal journal.
Comments, questions, and further bug reports are all welcome! Right now I'm messing around with Expressive because it displays timestamps on collapsed comments, and lets long threads break the box with a scrollbar for the whole window. If I can get that one up and running, I'll probably throw it up here too as an alternative :)
ETA Dec 22 21:48PST: stoppedhiding PMed me to say someone found a fix for the scrolling issue.
.comment-wrap { margin-bottom:.5em; min-width:35%; }
.layout-inner{overflow:visible;}
.entry-comments-text {overflow:visible;} is the relevant code. I've added it to the text box, and the pastebin link has been updated to ffa1.1!
Anyways. Like the way fail_fandomanon looks right now? Want it for your own comm/journal? Here's how!
1. Set your layout to Minimalism "Georgia", with the sidebar on the left. (This code gets rid of the sidebar-- but it has to be on the left in the settings for it to work. CSS voodoo~)
2. Set "Disable custom comment pages" to NO. (LJ reset everyone's journal to the new comment page a couple hours ago, in what I assume was a childish fit of pique that we didn't like their present, so doublecheck your settings!)
3. In the custom CSS area, make sure "Use layout stylesheets" and "Use layout theme stylesheets" are both set to YES.
4. Copy and paste the mess in the box below into the custom CSS box:
body {
background-color: #fff;
color: #000; }
.comment-wrap.screened .comment-head,
.comment-wrap.screened .comment-head.odd,
.comment-wrap.screened .comment-head.even
{ background-color: #ccc; }
.sidebar-inner {
display:none;width:auto }
.content .entry .entry-text .author dt {
text-align: right !important;
width: 120 px!important;}
.content .entry .entry-text .author .username {
text-align: right !important;
width: 150px !important; }
.content {
float:left;
width:100%;
margin-right:-100%; }
.content-inner {
position:relative;
margin-right:50px !important;
margin-left:30px;
overflow:visible !important; }
.column-right .content-inner {
margin-right:50px;
margin-left:30px; }
.column-left .content-inner {
margin-right:15px;
margin-left:50px; }
.content .entry {
position:relative;
width:100%;
margin:3.5em 0 0; }
.entry {
margin-top: 0 !important; }
.entry-title, .entry-linkbar {
margin: 1em 0 0 !important; }
.column-right .hr-afterhead {
margin-right: 0px; }
.header .hr {
margin-right: 0px
margin-left: 0px !important; }
.column-left .hr-afterhead {
margin-left: 0px; }
.header h2 {
font-family: georgia, times new roman, serif !important;
font-size:28px !important;
font-weight: bold !important;
font-style: italic !important;
margin-left: 50px; !important}
.header-sec {
float: left;
padding: 4px 0 19px;
font-family: georgia, times new roman, sans-serif !important;
font-size:12px !important; }
.content .entry .entry-title, .content .entry .entry-text {
padding-left: 0 !important; }
body, .content .entry .entry-text, .entry-date, .content .entry .entry-text .author * {
font-family: verdana }
.comment-head h3 {
font-family: arial;
font-size: 1.4em;
font-weight: bold; }
a, a:link {
color:#00C !important ;
text-decoration:underline !important;
border:0px !important;}
a:visited {
color:#306 !important;
text-decoration:underline !important;
border: 0px !important; }
.ljuser a, .ljuser a:link, .ljuser a:link b {
color: #00C !important;
text-decoration:underline!important;
border-bottom:none !important; }
.ljuser a:visited, .ljuser a:visited b {
color: #306 !important;
text-decoration:underline !important;
border-bottom: none !important; }
strong, b {
font-weight: bolder; }
a.comment-permalink {
color:#00C !important ;}
h2 {
font-size: 24px !important;
font-style: none; }
.entry-text H3 {
margin-top: 2px !important; }
.comment-head H3 {
margin-bottom:2px !important;}
.comment-head p {
margin-bottom: 0; }
.comment-menu {
font-size: 0.75em;
margin-bottom: 1.5em !important;
margin-top: 1em !important; }
.comments-links {
margin: 1em 0;
text-align: center;
font-weight: bold !important;}
.entry-comments-text>table {
background: none repeat scroll 0 0 #BDF;
border: 5px solid #BDF;
margin: 0 auto;
width: 450px !important; }
dd.entrymenu, #page .layout .layout-inner .entrymenu .btn span {
font-style:normal; font-weight:bold }
#page .entrymenu .btn-comments {
font-size:2.5em;
padding-left: 0px;
border: 0;
margin: 0 0 0 -3px;
padding-top:10px;
font-weight: bold;
color: #00c;
background: none;
background-image: none;
border-image: initial; }
a.subj-link, dt.entry-title, .content .entry .entry-title {
font-size: 22px;
font-weight:bold;
font-family: georgia, times new roman, serif;
font-style: italic; }
.header .nav-sub {
float: right;
padding: 4px 0 19px;
margin-right:50px }
HTML, #page {
min-width:0px; }
.header .userpic, .header .userpic img {
display:none}
.header .item {
display: inline;
padding-right: 20px; }
.footer {
border-top: 1px dotted !important;
background: #ffffff !important;
clear: both;
display: block;
margin-left:50px;
margin-right:50px;
padding-bottom: 30px;
position: relative; }
If you just want to read and marvel at the kludginess of the code, I've slapped it up on pastebin here.
This is as close to cloning the old LJ comments page as I can humanly make it. The basics were cobbled together from stoppedhiding's post here and firstkinkmod (who now has their code up here) but I spent most of yesterday refining tiny fiddly stuff with the help of gentlefailers and sunnysideolife. It's been deployed on the meme for most of today and so far, so good-- it's holding up.
Things that this layout fixes that the other various old-comment-page clones floating around don't all do:
- I evened out the left and right margins, they're now both at a fixed 50px.
- Aligned the poster's icon/username to the right side of the entry... it was bugging me that longer usernames were running into the margin. (You can set this layout to display icons or not, though.)
- Subject lines in comments are fixed to the top of the blue comment header box, instead of floating around in the middle. Takes up less space, especially for anon comments.
- Comment page numbers are back in a blue box under the entry.
Known issues:
- So far no one has managed to fix the thing where super-long comment threads run off the right side of the page and the overflow creates a scrollbar at the bottom of the comment area instead of the for the whole page (see this monster thread for an example of what I'm talking about, or, if your monitor is wider than that, screencaps. As far as I can tell, this is a "feature" of Minimalism... the way the divs are nested I'm not sure it can be fixed. FIXED
- There are no timestamps on comments in collapsed threads. This also seems to be layout-dependent and not something I can get back with just CSS.
- There's no "expand from top" function. I don't even know what witchcraft makes that work on the new comment pages.
- This breaks the sidebar completely. My one and only goal with this layout was to have the comments look as much like the old default as possible for memeing purposes; therefore everything else is pretty stark at best. So if you're looking at this layout thinking "well I like the look of the comments but I want the sidebar with a page summary and some tags and shit, I'll just delete that line that says sidebar {display:none}"... it won't work because the margins are fixed, sorry! Someone on stoppedhiding's post has a version with a sidebar that may be better for a personal journal.
Comments, questions, and further bug reports are all welcome! Right now I'm messing around with Expressive because it displays timestamps on collapsed comments, and lets long threads break the box with a scrollbar for the whole window. If I can get that one up and running, I'll probably throw it up here too as an alternative :)
ETA Dec 22 21:48PST: stoppedhiding PMed me to say someone found a fix for the scrolling issue.
.comment-wrap { margin-bottom:.5em; min-width:35%; }
.layout-inner{overflow:visible;}
.entry-comments-text {overflow:visible;} is the relevant code. I've added it to the text box, and the pastebin link has been updated to ffa1.1!