LJ old!Default-esque layout for Style Contest (good quality this time, I swear!)
LJ's changes ticked me off last night, so I did a quickie layout. This is not that layout. This one is a modified version of a layout I did specifically for an RP game, building a stylesheet for Style Contest from the ground up.
Other Notes:
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. :)
Known issues: Not off the top of my head. Please let me know if you find any!
Colors were taken from a screenshot of the old LJ Default. ♥
Please poke me if I missed anything that you'd like to see fixed!
CSS Code:
/* CSS Layout for Style Contest/Unstyled by http://ladyasul.livejournal.com
hosted at http://ladyasul.livejournal.com/20662.html This is for use by
people who LIKED the LJ Default before they screwed it all up. Lemme know
if you use it; I'm curious. :)*/
html *{
margin-top: 0;
margin-bottom: 0;
/* padding: 0; */
}
hr{
display: block;
height: 2px;
border-width: 0;
color: #999;
background-color: #999;
margin: 15px 30px;
}
.entry-body i{ color: #000;}
h2{ font-size: 18px;}
a{ color: #04e; text-decoration: none;}
a:visited{color: #909;}
a:hover{ text-decoration: underline; color: #d03;}
code, kbd, pre, tt, textarea{ font-family: Lucida Console, Monaco, monospace;}
code{ background-color: #eef8ff;}
textarea{
background-color: #def;
color: #def;
margin: 5px 2px;
padding: 2px;
}
blockquote{ margin: 0 30px;}
body{
background: #fff;
font-family: Verdana, sans-serif;
font-size: 12px;
color: #111;
padding: 0 0 30px 0;
}
#container{
clear: both;
margin: 0;
padding: 0 0 30px 0;
width: 100%;
min-width: 640px;
position: absolute;
top: 0px;
z-index: 15;
background: #fff;
overflow: visible;
}
#container-inner{
padding: 0 30px 0 10px;
}
table#lj_controlstrip{
z-index: 20 !important;
background: #000 none !important;
}
#banner{
background: #ace;
margin: 0 -30px 0 -10px;
padding: 70px 30px 30px 50px;
}
#pagebody {
position: relative;
}
/* Sidebar */
#alpha{
position: absolute;
width: 180px;
overflow: hidden;
top: 0px;
left: 0px;
padding: 20px 10px 20px 0;
border-right: #999 1px dotted;
}
.module{
margin: 7px 0 10px 0;
}
.module-header{
margin: 20px 0 5px 0;
}
.module-photo .module-content{
text-align: center;
}
.module-calendar table{
margin: 0 0 0 12px;
font-size: 11px;
}
.module-calendar td{
padding: 3px;
text-align: center;
}
.module-calendar tr{
background: #def;
}
.module-calendar tr:first-child{
background: #ace;
}
#alpha ul {
padding-left: 0px;
margin-left: 0px;
list-style: none;
}
#alpha li {
padding: 0 5px 0 25px;
text-indent: -10px;
}
/* Entries */
#beta{
margin-left: 210px;
overflow: visible;
position: relative;
padding-top: 20px;
}
.content-nav {
font-size: 14px;
margin: 0 0 10px 0;
font-weight: bold;
text-align: right;
}
.date-header{
text-align: center;
font-style: italic;
margin-bottom: 20px;
}
.entry{
min-width: 450px;
margin-bottom: 50px;
position: relative;
padding-bottom: 5px;
border-bottom: 2px solid #999;
overflow: visible;
}
.entry-userpic{
float: right;
margin: 0 0 10px 10px;
text-align: center;
width: 120px;
}
.entry-header{
margin: 0 0 5px 0;
font-size: 18px;
font-weight: bold;
}
.metadata{
margin: 0 10px 10px 5px;
border-left: 2px solid #999;
padding-left: 5px;
}
.metadata img{ display: none;}
.entry-body{}
.ljtags{ margin: 10px 0 0 0;}
.entry-footer{
margin: 10px 0 0 0;
clear: right;
}
/* comments */
.comments: {
position: relative;
}
.comments-header {
margin: -25px 25px 25px;
text-align: center;
font-weight: bold;
}
.comment{
margin-top: 20px;
}
.comment-replies{
margin-left: 20px;
}
.comment, .comment-replies{
clear: both;
min-width: 200px;
overflow: visible;
}
.comment-userpic {
background: #bdf;
float: left;
padding: 3px;
margin: 0 10px 10px 0;
position: relative;
z-index: 15;
}
.comment-header ,.comment-footer,.comment-content{
background: #bdf;
padding: 5px;
margin: 0;
position: relative;
z-index: 5;
}
.comment-content {
background: #fff;
border: 3px solid #bdf;
}
/* reply fields */
.lj-view-reply #beta-inner table:first-child {
margin: 0 0 10px 0;
}
.lj-view-reply #beta-inner > h2 { padding-bottom: 15px;}
.lj-view-reply #commenttext {
width: 100% !important;
}
#qrform > table {
padding: 10px;
width: 100% !important;
margin: 20px 0 0 20px;
background: #fff;
border: 1px solid #333 !important;
}
.lj-view-reply #postform > table {
width: 100%;
}
input#subject, textarea.textbox {
font-family: Verdana, sans-serif !important;
font-size: 12px;
color: #113 !important;
background: #fff;
padding: 2px 5px !important;
}
/* Other views */
.lj-view-tags #beta h2{
margin: 0 0 5px 0;
}
.lj-view-tags #beta ul {
padding-left: 0px;
margin-left: 0px;
list-style: none;
}
.lj-view-tags #beta ul li {
padding: 0 5px 0 25px;
text-indent: -10px;
}
.lj-view-month dt{
font-size: 18px;
margin: 0 0 3px 0;
}
.lj-view-month dd{
margin: 3px 0 20px 15px;
}
.lj-view-archive #beta ul {
list-style: none;
margin: 0 auto 50px auto;
padding: 0;
text-align: center;
}
.lj-view-archive #beta ul li{
display: inline;
font-size: 18px;
font-weight: bold;
margin: 20px;
}
.lj-view-archive #beta table {
background: #def;
border: #fff !important;
margin: 20px auto 50px auto !important;
}
.lj-view-archive #beta table td,.lj-view-archive #beta table th{
height: 30px;
width: 35px;
padding: 3px;
border-collapse: separate !important;
border-spacing: 0px;
border: 3px solid #fff !important;
}
.lj-view-archive #beta table th,.lj-view-archive #beta table td[colspan="7"] {
background: #bdf;
border: none !important;
border-bottom: 3px solid #fff !important;
}
.lj-view-archive #beta table tr:first-child th{
font-weight: bold;
font-size: 18px;
}
Instructions:
First, go to Select Journal Style and search for Style Contest. Pick the one called Unstyled -- the empty-looking white one.
It looks like this:
Apply the Unstyled layout, 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!
- Details:
- Preview: Live preview currently at sailslayout03
- Account type: ALL, I think?
- Custom comment pages: EMPHATICALLY, YES. THAT WAS THE WHOLE POINT OF THIS.
- Friends/Archive/Subjects/Tags/Etc pages: WITH ATTENTION TO DETAIL, YES! ♥
- LJ controlstrip and contextual (user icon) popup box: Nope. Didn't touch it this time.
- Written in: Notepad
- Tested + working fully in: Google Chrome (Windows), haven't tested other browsers yet. I was being lazy. :)
Other Notes:
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. :)
Known issues: Not off the top of my head. Please let me know if you find any!
Colors were taken from a screenshot of the old LJ Default. ♥
Please poke me if I missed anything that you'd like to see fixed!
CSS Code:
/* CSS Layout for Style Contest/Unstyled by http://ladyasul.livejournal.com
hosted at http://ladyasul.livejournal.com/20662.html This is for use by
people who LIKED the LJ Default before they screwed it all up. Lemme know
if you use it; I'm curious. :)*/
html *{
margin-top: 0;
margin-bottom: 0;
/* padding: 0; */
}
hr{
display: block;
height: 2px;
border-width: 0;
color: #999;
background-color: #999;
margin: 15px 30px;
}
.entry-body i{ color: #000;}
h2{ font-size: 18px;}
a{ color: #04e; text-decoration: none;}
a:visited{color: #909;}
a:hover{ text-decoration: underline; color: #d03;}
code, kbd, pre, tt, textarea{ font-family: Lucida Console, Monaco, monospace;}
code{ background-color: #eef8ff;}
textarea{
background-color: #def;
color: #def;
margin: 5px 2px;
padding: 2px;
}
blockquote{ margin: 0 30px;}
body{
background: #fff;
font-family: Verdana, sans-serif;
font-size: 12px;
color: #111;
padding: 0 0 30px 0;
}
#container{
clear: both;
margin: 0;
padding: 0 0 30px 0;
width: 100%;
min-width: 640px;
position: absolute;
top: 0px;
z-index: 15;
background: #fff;
overflow: visible;
}
#container-inner{
padding: 0 30px 0 10px;
}
table#lj_controlstrip{
z-index: 20 !important;
background: #000 none !important;
}
#banner{
background: #ace;
margin: 0 -30px 0 -10px;
padding: 70px 30px 30px 50px;
}
#pagebody {
position: relative;
}
/* Sidebar */
#alpha{
position: absolute;
width: 180px;
overflow: hidden;
top: 0px;
left: 0px;
padding: 20px 10px 20px 0;
border-right: #999 1px dotted;
}
.module{
margin: 7px 0 10px 0;
}
.module-header{
margin: 20px 0 5px 0;
}
.module-photo .module-content{
text-align: center;
}
.module-calendar table{
margin: 0 0 0 12px;
font-size: 11px;
}
.module-calendar td{
padding: 3px;
text-align: center;
}
.module-calendar tr{
background: #def;
}
.module-calendar tr:first-child{
background: #ace;
}
#alpha ul {
padding-left: 0px;
margin-left: 0px;
list-style: none;
}
#alpha li {
padding: 0 5px 0 25px;
text-indent: -10px;
}
/* Entries */
#beta{
margin-left: 210px;
overflow: visible;
position: relative;
padding-top: 20px;
}
.content-nav {
font-size: 14px;
margin: 0 0 10px 0;
font-weight: bold;
text-align: right;
}
.date-header{
text-align: center;
font-style: italic;
margin-bottom: 20px;
}
.entry{
min-width: 450px;
margin-bottom: 50px;
position: relative;
padding-bottom: 5px;
border-bottom: 2px solid #999;
overflow: visible;
}
.entry-userpic{
float: right;
margin: 0 0 10px 10px;
text-align: center;
width: 120px;
}
.entry-header{
margin: 0 0 5px 0;
font-size: 18px;
font-weight: bold;
}
.metadata{
margin: 0 10px 10px 5px;
border-left: 2px solid #999;
padding-left: 5px;
}
.metadata img{ display: none;}
.entry-body{}
.ljtags{ margin: 10px 0 0 0;}
.entry-footer{
margin: 10px 0 0 0;
clear: right;
}
/* comments */
.comments: {
position: relative;
}
.comments-header {
margin: -25px 25px 25px;
text-align: center;
font-weight: bold;
}
.comment{
margin-top: 20px;
}
.comment-replies{
margin-left: 20px;
}
.comment, .comment-replies{
clear: both;
min-width: 200px;
overflow: visible;
}
.comment-userpic {
background: #bdf;
float: left;
padding: 3px;
margin: 0 10px 10px 0;
position: relative;
z-index: 15;
}
.comment-header ,.comment-footer,.comment-content{
background: #bdf;
padding: 5px;
margin: 0;
position: relative;
z-index: 5;
}
.comment-content {
background: #fff;
border: 3px solid #bdf;
}
/* reply fields */
.lj-view-reply #beta-inner table:first-child {
margin: 0 0 10px 0;
}
.lj-view-reply #beta-inner > h2 { padding-bottom: 15px;}
.lj-view-reply #commenttext {
width: 100% !important;
}
#qrform > table {
padding: 10px;
width: 100% !important;
margin: 20px 0 0 20px;
background: #fff;
border: 1px solid #333 !important;
}
.lj-view-reply #postform > table {
width: 100%;
}
input#subject, textarea.textbox {
font-family: Verdana, sans-serif !important;
font-size: 12px;
color: #113 !important;
background: #fff;
padding: 2px 5px !important;
}
/* Other views */
.lj-view-tags #beta h2{
margin: 0 0 5px 0;
}
.lj-view-tags #beta ul {
padding-left: 0px;
margin-left: 0px;
list-style: none;
}
.lj-view-tags #beta ul li {
padding: 0 5px 0 25px;
text-indent: -10px;
}
.lj-view-month dt{
font-size: 18px;
margin: 0 0 3px 0;
}
.lj-view-month dd{
margin: 3px 0 20px 15px;
}
.lj-view-archive #beta ul {
list-style: none;
margin: 0 auto 50px auto;
padding: 0;
text-align: center;
}
.lj-view-archive #beta ul li{
display: inline;
font-size: 18px;
font-weight: bold;
margin: 20px;
}
.lj-view-archive #beta table {
background: #def;
border: #fff !important;
margin: 20px auto 50px auto !important;
}
.lj-view-archive #beta table td,.lj-view-archive #beta table th{
height: 30px;
width: 35px;
padding: 3px;
border-collapse: separate !important;
border-spacing: 0px;
border: 3px solid #fff !important;
}
.lj-view-archive #beta table th,.lj-view-archive #beta table td[colspan="7"] {
background: #bdf;
border: none !important;
border-bottom: 3px solid #fff !important;
}
.lj-view-archive #beta table tr:first-child th{
font-weight: bold;
font-size: 18px;
}
Instructions:
First, go to Select Journal Style and search for Style Contest. Pick the one called Unstyled -- the empty-looking white one.
It looks like this:
Apply the Unstyled layout, 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!