LJ old!Default-esque layout.
LJ ticked me off with their changes last night, so I threw this together before I went to bed.
Other Notes:
Still under construction, I guess?
Comments have a minimum width set, so they don't get all smooshed into single-word columns when threads reach some arbitrary length. I hate when that happens, so I'm having a min width be a definite feature in about every layout I make ever.
I customized the reply/quickreply tables too! They stretch to the width of the page. :)
Colors were taken from a screenshot of the old LJ Default. ♥
Known issues: I got rid of the sidebar in the entry/comment-view pages. On one hand, this makes navigation a little more difficult, but on the other, you've got the whole page's width for the comments again, just like in the LJ Default views.
The coder behind the April theme that this is based on hard-coded a lot of their CSS into the HTML, as every web coder knows you shouldn't ever do, so half of this was a battle to override their CSS. Don't even get me started.
Please poke me if I missed anything that you'd like to see fixed!
CSS Code:
/* Bloggish: April theme. Put the sidebar on LEFT.
Layout by ladyasul.livejournal.com -- and it's still
in the works, so sorry in advance for any bugs. */
body {background-color: #fff;}
body, #beta {font-family: Verdana, sans-serif; font-size: 13px; color: #111;}
a,.entry-header a {color: #04e !important; text-decoration: underline;}
a:visited,.entry-header a:visited{color: #909 !important;}
a:hover,.entry-header a:hover{color: #d03 !important;}
#container { width: 100% !important;}
#container-inner {background: none; border: none;}
#banner { background: #ace; font-family: Verdana, sans-serif; color: #036; border: none;}
/* SIDEBAR */
#alpha {float: left; border-right: 1px dotted #999;}
.layout-two-column-left #beta { width: auto; margin: 0px 0px 0px 200px;}
.lj-view-entry #alpha { display: none;} /* hide the sidebar on entries... */
.lj-view-entry #beta { width: 100%; margin: 0px;} /* ...and expand the entry-page content! */
#beta-inner {border: none !important;}
.module-photo, .module-photo .module-content {text-align: center !important;}
.module-header {text-transform: none !important; font-family: Verdana, sans-serif !important; color: #111 !important; border: none !important; background: #ace; letter-spacing: 0 !important;}
.module-content {line-height: 110% !important;}
.module-list {padding: 0 0 0 20px;}
.module-list-item {margin: 5px 0 !important;}
.module-calendar .module-content table {margin: 0 auto;}
/* ENTRY stuffs */
.date-header, .trackbacks-header, .comments-header, .comments-open-header, .archive-header, .date-header {text-align: center !important;}
.entry{margin: 0 0 25px 0; padding-bottom:25px; border-bottom: 1px dotted #999; min-height: 150px;}
.entry-userpic { float: left; margin: 0 15px 10px 0; }
.entry-userpic .poster .ljuser:first-child {display: block;}
.entry-header, .entry-header a, .entry-header a:visited, .lj-view-tags #beta-inner h2 {font-size: 25px; color: #036 !important;}
.entry-header { padding: 0 0 15px 0; line-height: 120%;}
.metadata { margin: 0 0 10px 0;}
.ljtags, .entry-footer {margin-top: 10px;}
/* comments themselves */
.comment {min-width: 200px; margin-bottom: 25px;}
.comment, .comment-userpic, .comment .poster, .comment-header {background: #bdf;}
.comment-userpic > img {float: left; padding: 1px 5px 1px 4px;}
.comment-userpic .poster {margin-top: 0px;}
.comment-footer, .comment-content {clear: both; background:#fff;}
.comment-content {margin: 0 !important; padding: 2px 2px 5px 2px;}
.comment-footer {margin-bottom: 0px !important; padding: 0 2px 10px 2px;}
.collapsed-comment {background: transparent;}
/* comment-reply stuff */
.quickreply {background: #fff;}
#qrform > table, #postform > table {width: 100%;}
textarea .textbox, .lj-view-reply #commenttext {width: 99%;}
Instructions:
First, go to Select Journal Style and search for Bloggish. Pick the one called April -- the blueish, grayish one.
It looks like this:
Apply the April style, then scroll down to the bottom of the page, and click on the layout that has the sidebar on the LEFT side. This is pretty important. I'll try to fix the code later so that you can have the sidebar on whichever side you want, but for now, it's left-side only.
Then go to Customize your theme and select the CSS option. Tell it No, in the drop-down asking if you want to use the base weblog stylesheet, and then paste the above CSS code into the Custom stylesheet box and save changes.
And that should do it! :)
I'm curious as to who uses this. Leave me a comment? &heart; And if you comment to let me know, I'll be able to keep you updated on code tweaks, too.
Please credit!
Questions welcome!
EDIT: After some more poking around, I think I figured out what's wrong, that it's cutting off threads. It isn't the layout itself. Like I explained in this thread, the S2 layout system is broken; after too many comments on one page, it gives up and stops generating HTML. This means that it won't matter that the entry footer claims you've got five hundred comments in ten threads all on the one page; you'll probably only be able to see about 125 of them at one time no matter where you scroll; viewing the source says they don't exist on the page there.
And apparently it's been like this before the update...?
Ugh.
Casual use and logs where the comments are all replies to the original entry should be fine; threaded RPs and really long conversations, not so much. Please note, this goes for ALL layouts, as far as I'm aware, aside from the LJ Default.
Which rather defeats the purpose of using a custom layout in an RP community that does threading, now doesn't it. :(
- Details:
- Preview: Live preview currently at sailslayout02
- Account type: ALL, I think?
- Custom comment pages: YES. THAT WAS THE WHOLE POINT OF THIS.
- Friends/Archive/Subjects/Tags/Etc pages: Mostly. The layout base resisted styling. :P
- LJ controlstrip and contextual (user icon) popup box: Nope. Wasn't my priority.
- Written in: Notepad
- Tested + working fully in: Google Chrome (Windows), haven't tested other browsers yet. I was being lazy last night.
Other Notes:
Still under construction, I guess?
Comments have a minimum width set, so they don't get all smooshed into single-word columns when threads reach some arbitrary length. I hate when that happens, so I'm having a min width be a definite feature in about every layout I make ever.
I customized the reply/quickreply tables too! They stretch to the width of the page. :)
Colors were taken from a screenshot of the old LJ Default. ♥
Known issues: I got rid of the sidebar in the entry/comment-view pages. On one hand, this makes navigation a little more difficult, but on the other, you've got the whole page's width for the comments again, just like in the LJ Default views.
The coder behind the April theme that this is based on hard-coded a lot of their CSS into the HTML, as every web coder knows you shouldn't ever do, so half of this was a battle to override their CSS. Don't even get me started.
Please poke me if I missed anything that you'd like to see fixed!
CSS Code:
/* Bloggish: April theme. Put the sidebar on LEFT.
Layout by ladyasul.livejournal.com -- and it's still
in the works, so sorry in advance for any bugs. */
body {background-color: #fff;}
body, #beta {font-family: Verdana, sans-serif; font-size: 13px; color: #111;}
a,.entry-header a {color: #04e !important; text-decoration: underline;}
a:visited,.entry-header a:visited{color: #909 !important;}
a:hover,.entry-header a:hover{color: #d03 !important;}
#container { width: 100% !important;}
#container-inner {background: none; border: none;}
#banner { background: #ace; font-family: Verdana, sans-serif; color: #036; border: none;}
/* SIDEBAR */
#alpha {float: left; border-right: 1px dotted #999;}
.layout-two-column-left #beta { width: auto; margin: 0px 0px 0px 200px;}
.lj-view-entry #alpha { display: none;} /* hide the sidebar on entries... */
.lj-view-entry #beta { width: 100%; margin: 0px;} /* ...and expand the entry-page content! */
#beta-inner {border: none !important;}
.module-photo, .module-photo .module-content {text-align: center !important;}
.module-header {text-transform: none !important; font-family: Verdana, sans-serif !important; color: #111 !important; border: none !important; background: #ace; letter-spacing: 0 !important;}
.module-content {line-height: 110% !important;}
.module-list {padding: 0 0 0 20px;}
.module-list-item {margin: 5px 0 !important;}
.module-calendar .module-content table {margin: 0 auto;}
/* ENTRY stuffs */
.date-header, .trackbacks-header, .comments-header, .comments-open-header, .archive-header, .date-header {text-align: center !important;}
.entry{margin: 0 0 25px 0; padding-bottom:25px; border-bottom: 1px dotted #999; min-height: 150px;}
.entry-userpic { float: left; margin: 0 15px 10px 0; }
.entry-userpic .poster .ljuser:first-child {display: block;}
.entry-header, .entry-header a, .entry-header a:visited, .lj-view-tags #beta-inner h2 {font-size: 25px; color: #036 !important;}
.entry-header { padding: 0 0 15px 0; line-height: 120%;}
.metadata { margin: 0 0 10px 0;}
.ljtags, .entry-footer {margin-top: 10px;}
/* comments themselves */
.comment {min-width: 200px; margin-bottom: 25px;}
.comment, .comment-userpic, .comment .poster, .comment-header {background: #bdf;}
.comment-userpic > img {float: left; padding: 1px 5px 1px 4px;}
.comment-userpic .poster {margin-top: 0px;}
.comment-footer, .comment-content {clear: both; background:#fff;}
.comment-content {margin: 0 !important; padding: 2px 2px 5px 2px;}
.comment-footer {margin-bottom: 0px !important; padding: 0 2px 10px 2px;}
.collapsed-comment {background: transparent;}
/* comment-reply stuff */
.quickreply {background: #fff;}
#qrform > table, #postform > table {width: 100%;}
textarea .textbox, .lj-view-reply #commenttext {width: 99%;}
Instructions:
First, go to Select Journal Style and search for Bloggish. Pick the one called April -- the blueish, grayish one.
It looks like this:
Apply the April style, then scroll down to the bottom of the page, and click on the layout that has the sidebar on the LEFT side. This is pretty important. I'll try to fix the code later so that you can have the sidebar on whichever side you want, but for now, it's left-side only.
Then go to Customize your theme and select the CSS option. Tell it No, in the drop-down asking if you want to use the base weblog stylesheet, and then paste the above CSS code into the Custom stylesheet box and save changes.
And that should do it! :)
I'm curious as to who uses this. Leave me a comment? &heart; And if you comment to let me know, I'll be able to keep you updated on code tweaks, too.
Please credit!
Questions welcome!
EDIT: After some more poking around, I think I figured out what's wrong, that it's cutting off threads. It isn't the layout itself. Like I explained in this thread, the S2 layout system is broken; after too many comments on one page, it gives up and stops generating HTML. This means that it won't matter that the entry footer claims you've got five hundred comments in ten threads all on the one page; you'll probably only be able to see about 125 of them at one time no matter where you scroll; viewing the source says they don't exist on the page there.
And apparently it's been like this before the update...?
Ugh.
Casual use and logs where the comments are all replies to the original entry should be fine; threaded RPs and really long conversations, not so much. Please note, this goes for ALL layouts, as far as I'm aware, aside from the LJ Default.
Which rather defeats the purpose of using a custom layout in an RP community that does threading, now doesn't it. :(