.007
Layout Time :D
Two versions, S2 Flexible Squares.
~! Please notice that it's my first time experimenting with a layout, so I apologize beforehand in case something isn't working properly. But I double-checked everything, so it should be fine !~
Light Version
IMG preview
CODE
/*---------------------------------------------------
layout by http://honey-x-flavor.livejournal.com
please visit http://community.livejournal.com/paper_crunch
-----------------------------------------------------*/
body {
background-color: #ffffff;
background-image: url(http://i28.tinypic.com/148gl21.jpg);
background-repeat: repeat;
text-align: center;
color: #333333;
font-family: "Verdana", sans-serif;
font-size: 11px;
margin: 20px 0 20px 0;
}
a, a:link, a:visited {
color: #ADADAD;
text-decoration: none;
}
a:hover {
color: #7A7A7A;
text-decoration: none;
}
p, td {
font-size: 11px;
}
blockquote {
border-left: 1px solid #939393;
padding: 0px 10px 0px 5px;
margin: 0px 10px 0px 20px;
}
code, kbd, pre, tt {
font-family: monospace;
}
/*---------------------------------------------------------------------
General page alignment and width
------------------------------------------------------------------------*/
#content
{
width: 600px;
margin-left: auto; margin-right: auto;
background-color: #FFFEFD;
border-width: 1px;
border-style: none;
padding: 15px;
}
#maincontent {
margin-top: 5px;
font-family: "Verdana", sans-serif;
font-size: 11px;
background-color: #FFFEFD;
color: #000000;
border-style: none;
border-color: #999999;
border-width: 1px;
margin-left: 0px;
text-align: left;
}
#sidebar {
padding: 5px;
margin: 5px 0px 0px -250px;
background-color: #FFFEFD;
border-color: #999999;
border-width: 1px;
border-style: none;
font-size: 11px;
display: inline;
font-family: "Verdana", sans-serif;
color: #333333;
width: 200px;
float: left;
text-align: center;
}
/*-----------------------------------------------------------------------------
Header - you can add a header image with either #header or .headerimage
--------------------------------------------------------------------------------*/
#header {
width: 100%;
padding: 0px 0px 10px 0px;
margin: 0px;
text-align: left;
font-family: "Verdana", sans-serif;
font-size: 10px;
font-weight: bold;
letter-spacing: 1px;
border-style: none;
border-color: #999999;
border-width: 1px;
background-color: #FFFEFD;
color: #333333;
text-transform: lowercase;
}
.headerimage {
position: relative;
width: 630px;
height: 400px;
margin-left: auto;
margin-right: auto;
margin-bottom: 0px;
background-image: url(INSERT URL HERE);
background-repeat: no-repeat;
}
div#header a, div#header a:link, div#header a:visited, div#footer a, div#footer a:link, div#footer a:visited {
color: #ADADAD;
}
div#header a:hover, div#footer a:hover {
color: #7A7A7A;
text-decoration: none;
}
.title {
display: none;
}
.subtitle{
display: none;
}
/*-----------------------------------------------------------------------------
Header - top navigation
--------------------------------------------------------------------------------*/
ul.navheader
{
padding: 0px;
margin: 0px;
}
ul.navheader li {
display: inline;
padding: 0 3px 0 3px;
}
/*-----------------------------------------------------------------------------
Entry stuff
------------------------------------------------------------------------*/
.subcontent {
}
.entry {
margin: 0px 10px 10px 30px;
padding: 10px;
background-color: #FFFEFD !important;
color: #3C3C3C;
font-family: "Verdana", sans-serif;
font-size: 11px;
text-align: left;
border-style: none;
}
.userpic {
position: absolute;
float: right;
background-color: #FFFEFD !important;
padding: 10px;
margin-left: 630px;
border-style: none;
text-align: right;
}
.date {
color: #ADADAD;
top: 5px;
color: #919BAD;
font-family: "Verdana", sans-serif;
font-size: 9px;
text-align: right;
background-color: #F5F5F5;
}
.subject {
font-weight: bold;
color: #7A7A7A;
font-family: "Verdana", sans-serif;
text-align: right;
font-size: 14px;
letter-spacing: 1px;
border-color: #ADADAD;
border-width: 1px;
border-bottom-style: dashed;
padding-right: 10px;
padding-top: 2px;
background-color: #F5F5F5;
}
.subject a, .subject a:link, .subject a:visited {
color: #7A7A7A;
}
.subject a:hover {
color: #ADADAD;
}
.datesubject {
background-color: none;
padding: 5px;
}
.entry ul li
{
padding-left: 5px;
margin-left: 15px;
}
.entry ol li
{
padding-left: 5px;
margin-left: 15px;
}
.ljtags {
margin-top: 30px;
padding-left: 5px;
text-align: left;
text-transform: lowercase;
font-size: 9px;
color: #7A7A7A;
border-left: 4px solid #939393;
}
.blockquote {
padding-left: 20px;
border-left: 4px solid #939393;
}
/*---------------------------------------------------------------------
Entry Stuff - Current Mood, Music and Location
------------------------------------------------------------------------*/
.currents {
background-color: transparent;
}
.currents strong{
font-weight: normal;
font-size: 9px;
color: #7A7A7A;
}
.currentlocation, .currentmood, .currentmusic, .currentgroup {
font-family: "Verdana", sans-serif;
text-align: left;
padding-left: 5px;
font-size: 9px;
color: #7A7A7A;
}
/*---------------------------------------------------------------------
Entry Stuff - Comments
------------------------------------------------------------------------*/
.comments {
font-family: "Verdana", sans-serif;
font-size: 9px;
text-align: right;
padding: 0px 5px 0px 5px;
position: relative;
top: 15px;
border-right: 4px solid #939393;
background-color: transparent;
color: #3C3C3C;
}
div.comments a, div.comments a:link, div.comments a:visited{
color: #3C3C3C;
}
div.comments a:hover {
color: #ADADAD;
text-decoration: none;
}
/*---------------------------------------------------------------------
Entry Stuff - Separator
------------------------------------------------------------------------*/
.separator{
height: 35px;
}
/*------------------------------------------------------------
Special friends page customization
-------------------------------------------------------------------------------*/
.userpicfriends {
position: absolute;
float: right;
background-color: #FFFEFD !important;
padding: 10px;
margin-left: 630px;
border-style: none;
text-align: center;
color: #AEA6A4 !important;
}
.userpicfriends font {
font-family: tahoma;
font-weight: normal;
font-size: 7.5pt;
width: 100px;
background-color: transparent !important;
padding: 0px;
color: #AEA6A4;
}
.userpicfriends font:hover {
color: #939998;
}
/*------------------------------------------------------------
Sidebar
-------------------------------------------------------------------------------*/
.defaultuserpic {
display: none;
}
.sbarheader {
padding: 0px 0px 0px 0px;
}
.sbarbody {
padding: 0px 0px 0px 0px;
}
.sbarbody2 {
padding: 0 0px 0 0px;
color: #3C3C3C;
}
div#sidebar a, div#sidebar a:link, div#sidebar a:visited{
color: #7A7A7A;
}
div#sidebar a:hover {
color: #ADADAD;
text-decoration: none;
}
/*------------------------------------------------------------
Sidebar - Calendar
-------------------------------------------------------------------------------*/
table.calendar {
margin-right: auto;
margin-left: auto;
}
.sbarcalendar {
border-color: #3C3C3C;
border-width: 1px;
border-style: solid;
text-align: center;
font-family: "Verdana", sans-serif;
font-size: 11px;
}
.sbarcalendarposts {
border-color: #3C3C3C;
border-width: 1px;
border-style: solid;
background-color: #DADADA;
text-align: center;
font-family: "Verdana", sans-serif;
font-size: 11px;
}
/*------------------------------------------------------------
Sidebar - link box contents and sidebar box titles
-------------------------------------------------------------------------------*/
ul.sbarlist
{
padding-left: 0px;
margin-left: 0px;
list-style: none;
}
li.sbaritem
{
padding: 0px;
list-style: none;
padding-bottom: 2px;
padding-top: 2px;
}
li.sbartitle
{
text-align: center;
list-style: none;
color: #333333;
background-color: none;
margin-bottom: 10px;
margin-top: 10px;
letter-spacing: 2px;
border-color: #ADADAD;
border-width: 1px;
border-bottom-style: dashed;
text-transform: lowercase;
padding: 10px 10px 2px 10px;
}
/*----------------------------------------------------
footer
----------------------------------------------------------------*/
#footer {
width: 100%;
text-align: center;
font-family: "Verdana", sans-serif;
font-size: 11px;
font-weight: bold;
letter-spacing: 1px;
background-color: #FFFEFD;
color: #333333;
border-color: #999999;
border-width: 1px;
border-style: none;
z-index: 100;
clear: both;
}
ul.navfooter{
padding: 0px;
margin: 0px;
}
ul.navfooter li {
display: inline;
margin: 0 5px 0 5px;
}
.clearfoot {
clear: both;
}
/*----------------------------------------------------
Archive Pages
----------------------------------------------------------------*/
ul.year {
text-align: center;
padding-bottom: 40px;
}
ul.year li {
display: inline;
}
table.yeartable {
margin-left: auto;
margin-right: auto;
}
table.yeartable td.yeardate, table.yeartable td.yearday {
border-width: 1px;
border-style: solid;
border-color: #999999;
}
table.yeartable td.yearday {
background-color: #d4dce8;
text-align: center;
}
td.yearmonth {
border-style: none;
}
/*----------------------------------------------------
Comments pages
----------------------------------------------------------------*/
.datesubjectcomment {
background-color: #DEDEDE;
border: 0px solid #777777;
color: #414141;
padding: 7px;
}
.userpiccomment {
position: relative;
background-color: #939393 !important;
top: -20px;
left: 0px;
padding: 5px;
margin: 10px 10px -20px 0px;
z-index: 15;
float: left;
border-style: none;
}
.box {
background-color: transparent;
padding: 15px;
clear: none !important;
font-family:Arial, Helvetica, sans-serif;
font-size: 10px;
margin-top: 15px;
}
.commentbox {
border: 1px #CACACA solid;
background-color: #F5F5F5;
padding-bottom: 30px;
padding-top: 10px;
padding-left: 10px;
padding-right: 5px;
margin-top: 10px;
font-family:Arial, Helvetica, sans-serif;
font-size: 10px;
}
input, textarea {
background-color: #F5F5F5;
color: #3C3C3C;
font-size: 11px;
}
textarea.textbox {
width: 95% !important;
}
.reply {
position: relative;
margin: 20px 30px 10px 30px;
padding: 25px 10px 10px 10px;
text-align: left;
font-family: "Verdana", sans-serif;
font-size: 11px;
line-height: 125%;
background-color: #F5F5F5;
color: #3C3C3C;
}
.replytosubject {
font-weight: bold;
}
.commentreply {
position: relative;
margin: 10px;
font-size: 11px;
font-family: "Verdana", sans-serif;
color: #3C3C3C;
}
.datesubjectcomment a:link, .datesubjectcomment a:visited {
color: #484848;
}
.datesubjectcomment a:hover {
color: #FFFFFF;
}
.commentboxpartial {
border-color: #999999;
border-width: 1px;
border-style: solid;
padding: 10px;
margin: 10px;
background-color: #F5F5F5;
}
.commentinfo {
background-color: #F5F5F5;
margin-top: 10px;
width: 100%;
}
.skiplinks {
text-align: center;
}
/*--------------------------------------------
Misc
-----------------------------------------*/
.clear {
height: 15px;
}
/*--------------------------------------------
Tiny Icons : taken from velvetb0x @ lj
-----------------------------------------*/
img[src*="icon_protected.gif"], img[src*="icon_private.gif"], img[src*="icon_groups.gif"], .ljuser img[src*="syndicated.gif"], .ljuser img[src*="newsinfo.gif"], .ljuser
img[src*="partnercomm.gif"], .ljuser img[src*="sponcomm.gif"], img[src*="userinfo.gif"], img[src*="talk/none.gif"], img[src*="help.gif"] {height: 0px; width: 0px;background:
transparent none no-repeat scroll 0 0; }
.subject img {vertical-align: middle !important;}
img[src*="icon_protected.gif"]{ background-image:url(http://i35.tinypic.com/oih3.jpg);
padding:0 0 11px 12px !important;}
img[src*="icon_private.gif"]{ background-image:url(http://i35.tinypic.com/oih3.jpg); padding:0 0 11px 12px !important;}
img[src*="icon_groups.gif"]{ background-image:url(http://i35.tinypic.com/oih3.jpg); padding:0 0 11px 12px !important; }
.ljuser img { width: 0; height: 0; background: transparent url(http://i37.tinypic.com/16kw0v9.jpg) no-repeat 0 0; padding: 10px 10px 0 2px !important; vertical-align: baseline
!important;}
.ljuser img[src*="userinfo.gif"] { background: transparent url(http://i37.tinypic.com/16kw0v9.jpg) no-repeat center left !important; padding: 10px 10px 0 2px !important; }
.ljuser img[src*="community.gif"] { background: transparent url(http://i38.tinypic.com/2l9pe12.jpg) no-repeat scroll 0 0 !important; padding: 10px 10px 0 2px !important; }
img[src="http://l-stat.livejournal.com/img/btn_track.gif"] {
background:transparent url(http://i37.tinypic.com/zyf21w.jpg) repeat scroll 0 0; height: 0; padding: 0 0 16px 16px !important; width:0; }
img[src="http://l-stat.livejournal.com/img/btn_freeze.gif"] {
background:transparent url(http://i36.tinypic.com/2v959jl.jpg) repeat scroll 0 0; height: 0; padding: 0 0 16px 16px !important; width:0; }
img[src="http://l-stat.livejournal.com/img/btn_del.gif"] {
background:transparent url(http://i33.tinypic.com/2qd4rk2.jpg) repeat scroll 0 0; height: 0; padding: 0 0 16px 16px !important; width:0; }
img[src="http://l-stat.livejournal.com/img/btn_scr.gif"] {
background:transparent url(http://i36.tinypic.com/64nuzb.jpg) repeat scroll 0 0; height: 0; padding: 0 0 16px 16px !important; width:0; }
Dark Version
IMG preview
CODE
/*---------------------------------------------------
layout by http://honey-x-flavor.livejournal.com
please visit http://community.livejournal.com/paper_crunch
-----------------------------------------------------*/
body {
background-color: #000000;
background-image: url(http://i26.tinypic.com/2nroeau.jpg);
background-repeat: repeat;
text-align: center;
color: #333333;
font-family: "Verdana", sans-serif;
font-size: 11px;
margin: 20px 0 20px 0;
}
a, a:link, a:visited {
color: #ADADAD;
text-decoration: none;
}
a:hover {
color: #7A7A7A;
text-decoration: none;
}
p, td {
font-size: 11px;
}
blockquote {
border-left: 1px solid #939393;
padding: 0px 10px 0px 5px;
margin: 0px 10px 0px 20px;
}
code, kbd, pre, tt {
font-family: monospace;
}
/*---------------------------------------------------------------------
General page alignment and width
------------------------------------------------------------------------*/
#content
{
width: 600px;
margin-left: auto; margin-right: auto;
background-color: #FFFEFD;
border-width: 1px;
border-style: none;
padding: 15px;
}
#maincontent {
margin-top: 5px;
font-family: "Verdana", sans-serif;
font-size: 11px;
background-color: #FFFEFD;
color: #000000;
border-style: none;
border-color: #999999;
border-width: 1px;
margin-left: 0px;
text-align: left;
}
#sidebar {
padding: 5px;
margin: 5px 0px 0px -250px;
background-color: #FFFEFD;
border-color: #999999;
border-width: 1px;
border-style: none;
font-size: 11px;
display: inline;
font-family: "Verdana", sans-serif;
color: #333333;
width: 200px;
float: left;
text-align: center;
}
/*-----------------------------------------------------------------------------
Header - you can add a header image with either #header or .headerimage
--------------------------------------------------------------------------------*/
#header {
width: 100%;
padding: 0px 0px 10px 0px;
margin: 0px;
text-align: left;
font-family: "Verdana", sans-serif;
font-size: 10px;
font-weight: bold;
letter-spacing: 1px;
border-style: none;
border-color: #999999;
border-width: 1px;
background-color: #FFFEFD;
color: #333333;
text-transform: lowercase;
}
.headerimage {
position: relative;
width: 630px;
height: 400px;
margin-left: auto;
margin-right: auto;
margin-bottom: 0px;
background-image: url(INSERT URL HERE);
background-repeat: no-repeat;
}
div#header a, div#header a:link, div#header a:visited, div#footer a, div#footer a:link, div#footer a:visited {
color: #ADADAD;
}
div#header a:hover, div#footer a:hover {
color: #7A7A7A;
text-decoration: none;
}
.title {
display: none;
}
.subtitle{
display: none;
}
/*-----------------------------------------------------------------------------
Header - top navigation
--------------------------------------------------------------------------------*/
ul.navheader
{
padding: 0px;
margin: 0px;
}
ul.navheader li {
display: inline;
padding: 0 3px 0 3px;
}
/*-----------------------------------------------------------------------------
Entry stuff
------------------------------------------------------------------------*/
.subcontent {
}
.entry {
margin: 0px 10px 10px 30px;
padding: 10px;
background-color: #FFFEFD !important;
color: #3C3C3C;
font-family: "Verdana", sans-serif;
font-size: 11px;
text-align: left;
border-style: none;
}
.userpic {
position: absolute;
float: right;
background-color: #FFFEFD !important;
padding: 10px;
margin-left: 630px;
border-style: none;
text-align: right;
}
.date {
color: #ADADAD;
top: 5px;
color: #919BAD;
font-family: "Verdana", sans-serif;
font-size: 9px;
text-align: right;
background-color: #F5F5F5;
}
.subject {
font-weight: bold;
color: #7A7A7A;
font-family: "Verdana", sans-serif;
text-align: right;
font-size: 14px;
letter-spacing: 1px;
border-color: #ADADAD;
border-width: 1px;
border-bottom-style: dashed;
padding-right: 10px;
padding-top: 2px;
background-color: #F5F5F5;
}
.subject a, .subject a:link, .subject a:visited {
color: #7A7A7A;
}
.subject a:hover {
color: #ADADAD;
}
.datesubject {
background-color: none;
padding: 5px;
}
.entry ul li
{
padding-left: 5px;
margin-left: 15px;
}
.entry ol li
{
padding-left: 5px;
margin-left: 15px;
}
.ljtags {
margin-top: 30px;
padding-left: 5px;
text-align: left;
text-transform: lowercase;
font-size: 9px;
color: #7A7A7A;
border-left: 4px solid #939393;
}
.blockquote {
padding-left: 20px;
border-left: 4px solid #939393;
}
/*---------------------------------------------------------------------
Entry Stuff - Current Mood, Music and Location
------------------------------------------------------------------------*/
.currents {
background-color: transparent;
}
.currents strong{
font-weight: normal;
font-size: 9px;
color: #7A7A7A;
}
.currentlocation, .currentmood, .currentmusic, .currentgroup {
font-family: "Verdana", sans-serif;
text-align: left;
padding-left: 5px;
font-size: 9px;
color: #7A7A7A;
}
/*---------------------------------------------------------------------
Entry Stuff - Comments
------------------------------------------------------------------------*/
.comments {
font-family: "Verdana", sans-serif;
font-size: 9px;
text-align: right;
padding: 0px 5px 0px 5px;
position: relative;
top: 15px;
border-right: 4px solid #939393;
background-color: transparent;
color: #3C3C3C;
}
div.comments a, div.comments a:link, div.comments a:visited{
color: #3C3C3C;
}
div.comments a:hover {
color: #ADADAD;
text-decoration: none;
}
/*---------------------------------------------------------------------
Entry Stuff - Separator
------------------------------------------------------------------------*/
.separator{
height: 35px;
}
/*------------------------------------------------------------
Special friends page customization
-------------------------------------------------------------------------------*/
.userpicfriends {
position: absolute;
float: right;
background-color: #FFFEFD !important;
padding: 10px;
margin-left: 630px;
border-style: none;
text-align: center;
color: #AEA6A4 !important;
}
.userpicfriends font {
font-family: tahoma;
font-weight: normal;
font-size: 7.5pt;
width: 100px;
background-color: transparent !important;
padding: 0px;
color: #AEA6A4;
}
.userpicfriends font:hover {
color: #939998;
}
/*------------------------------------------------------------
Sidebar
-------------------------------------------------------------------------------*/
.defaultuserpic {
display: none;
}
.sbarheader {
padding: 0px 0px 0px 0px;
}
.sbarbody {
padding: 0px 0px 0px 0px;
}
.sbarbody2 {
padding: 0 0px 0 0px;
color: #3C3C3C;
}
div#sidebar a, div#sidebar a:link, div#sidebar a:visited{
color: #7A7A7A;
}
div#sidebar a:hover {
color: #ADADAD;
text-decoration: none;
}
/*------------------------------------------------------------
Sidebar - Calendar
-------------------------------------------------------------------------------*/
table.calendar {
margin-right: auto;
margin-left: auto;
}
.sbarcalendar {
border-color: #3C3C3C;
border-width: 1px;
border-style: solid;
text-align: center;
font-family: "Verdana", sans-serif;
font-size: 11px;
}
.sbarcalendarposts {
border-color: #3C3C3C;
border-width: 1px;
border-style: solid;
background-color: #DADADA;
text-align: center;
font-family: "Verdana", sans-serif;
font-size: 11px;
}
/*------------------------------------------------------------
Sidebar - link box contents and sidebar box titles
-------------------------------------------------------------------------------*/
ul.sbarlist
{
padding-left: 0px;
margin-left: 0px;
list-style: none;
}
li.sbaritem
{
padding: 0px;
list-style: none;
padding-bottom: 2px;
padding-top: 2px;
}
li.sbartitle
{
text-align: center;
list-style: none;
color: #333333;
background-color: none;
margin-bottom: 10px;
margin-top: 10px;
letter-spacing: 2px;
border-color: #ADADAD;
border-width: 1px;
border-bottom-style: dashed;
text-transform: lowercase;
padding: 10px 10px 2px 10px;
}
/*----------------------------------------------------
footer
----------------------------------------------------------------*/
#footer {
width: 100%;
text-align: center;
font-family: "Verdana", sans-serif;
font-size: 11px;
font-weight: bold;
letter-spacing: 1px;
background-color: #FFFEFD;
color: #333333;
border-color: #999999;
border-width: 1px;
border-style: none;
z-index: 100;
clear: both;
}
ul.navfooter{
padding: 0px;
margin: 0px;
}
ul.navfooter li {
display: inline;
margin: 0 5px 0 5px;
}
.clearfoot {
clear: both;
}
/*----------------------------------------------------
Archive Pages
----------------------------------------------------------------*/
ul.year {
text-align: center;
padding-bottom: 40px;
}
ul.year li {
display: inline;
}
table.yeartable {
margin-left: auto;
margin-right: auto;
}
table.yeartable td.yeardate, table.yeartable td.yearday {
border-width: 1px;
border-style: solid;
border-color: #999999;
}
table.yeartable td.yearday {
background-color: #d4dce8;
text-align: center;
}
td.yearmonth {
border-style: none;
}
/*----------------------------------------------------
Comments pages
----------------------------------------------------------------*/
.datesubjectcomment {
background-color: #DEDEDE;
border: 0px solid #777777;
color: #414141;
padding: 7px;
}
.userpiccomment {
position: relative;
background-color: #939393 !important;
top: -20px;
left: 0px;
padding: 5px;
margin: 10px 10px -20px 0px;
z-index: 15;
float: left;
border-style: none;
}
.box {
background-color: transparent;
padding: 15px;
clear: none !important;
font-family:Arial, Helvetica, sans-serif;
font-size: 10px;
margin-top: 15px;
}
.commentbox {
border: 1px #CACACA solid;
background-color: #F5F5F5;
padding-bottom: 30px;
padding-top: 10px;
padding-left: 10px;
padding-right: 5px;
margin-top: 10px;
font-family:Arial, Helvetica, sans-serif;
font-size: 10px;
}
input, textarea {
background-color: #F5F5F5;
color: #3C3C3C;
font-size: 11px;
}
textarea.textbox {
width: 95% !important;
}
.reply {
position: relative;
margin: 20px 30px 10px 30px;
padding: 25px 10px 10px 10px;
text-align: left;
font-family: "Verdana", sans-serif;
font-size: 11px;
line-height: 125%;
background-color: #F5F5F5;
color: #3C3C3C;
}
.replytosubject {
font-weight: bold;
}
.commentreply {
position: relative;
margin: 10px;
font-size: 11px;
font-family: "Verdana", sans-serif;
color: #3C3C3C;
}
.datesubjectcomment a:link, .datesubjectcomment a:visited {
color: #484848;
}
.datesubjectcomment a:hover {
color: #FFFFFF;
}
.commentboxpartial {
border-color: #999999;
border-width: 1px;
border-style: solid;
padding: 10px;
margin: 10px;
background-color: #F5F5F5;
}
.commentinfo {
background-color: #F5F5F5;
margin-top: 10px;
width: 100%;
}
.skiplinks {
text-align: center;
}
/*--------------------------------------------
Misc
-----------------------------------------*/
.clear {
height: 15px;
}
/*--------------------------------------------
Tiny Icons : taken from velvetb0x @ lj
-----------------------------------------*/
img[src*="icon_protected.gif"], img[src*="icon_private.gif"], img[src*="icon_groups.gif"], .ljuser img[src*="syndicated.gif"], .ljuser img[src*="newsinfo.gif"], .ljuser img[src*="partnercomm.gif"], .ljuser img[src*="sponcomm.gif"], img[src*="userinfo.gif"], img[src*="talk/none.gif"], img[src*="help.gif"] {height: 0px; width: 0px;background: transparent none no-repeat scroll 0 0; }
.subject img {vertical-align: middle !important;}
img[src*="icon_protected.gif"]{ background-image:url(http://i35.tinypic.com/oih3.jpg);
padding:0 0 11px 12px !important;}
img[src*="icon_private.gif"]{ background-image:url(http://i35.tinypic.com/oih3.jpg); padding:0 0 11px 12px !important;}
img[src*="icon_groups.gif"]{ background-image:url(http://i35.tinypic.com/oih3.jpg); padding:0 0 11px 12px !important; }
.ljuser img { width: 0; height: 0; background: transparent url(http://i37.tinypic.com/16kw0v9.jpg) no-repeat 0 0; padding: 10px 10px 0 2px !important; vertical-align: baseline !important;}
.ljuser img[src*="userinfo.gif"] { background: transparent url(http://i37.tinypic.com/16kw0v9.jpg) no-repeat center left !important; padding: 10px 10px 0 2px !important; }
.ljuser img[src*="community.gif"] { background: transparent url(http://i38.tinypic.com/2l9pe12.jpg) no-repeat scroll 0 0 !important; padding: 10px 10px 0 2px !important; }
img[src="http://l-stat.livejournal.com/img/btn_track.gif"] {
background:transparent url(http://i37.tinypic.com/zyf21w.jpg) repeat scroll 0 0; height: 0; padding: 0 0 16px 16px !important; width:0; }
img[src="http://l-stat.livejournal.com/img/btn_freeze.gif"] {
background:transparent url(http://i36.tinypic.com/2v959jl.jpg) repeat scroll 0 0; height: 0; padding: 0 0 16px 16px !important; width:0; }
img[src="http://l-stat.livejournal.com/img/btn_del.gif"] {
background:transparent url(http://i33.tinypic.com/2qd4rk2.jpg) repeat scroll 0 0; height: 0; padding: 0 0 16px 16px !important; width:0; }
img[src="http://l-stat.livejournal.com/img/btn_scr.gif"] {
background:transparent url(http://i36.tinypic.com/64nuzb.jpg) repeat scroll 0 0; height: 0; padding: 0 0 16px 16px !important; width:0; }
HEADERS
630x312
630x400
download .pdf file to make your own header
How to install the layout:
1. Go to Customize Journal Style and choose a Flexible Squares layout.
2. While still there, at 3. Choose a Page Setup, choose Ad Placement: Horizontal (if you don't have a paid account) and also a 2-column style.
3. Click Customize Your Theme (next to the tiny layout preview you chose) and go to Custom CSS. Make sure all the dropdown boxes are set to "NO". Copy the code in the custom stylesheet box.
FIND THE .headerimage part in the code. It looks like this:
.headerimage {
position: relative;
width: 630px;
height: 400px;
margin-left: auto;
margin-right: auto;
margin-bottom: 0px;
background-image: url(INSERT URL HERE);
background-repeat: no-repeat;
}
Replace the "INSERT URL HERE" part with the url of the header that you'll upload to YOUR OWN SERVER of choice, like photobucket or tinypic. DON'T HOTLINK MY IMAGES or else Bill will turn into a purple frog. With a mohawk.
Also, in case you decide to use one of the 630x312 headers, don't forget to change the height to 312px!
♫ Comment :D
♫ Credit honey_x_flavor and/or paper_crunch.
♫ No hotlinking!
♫ You can edit the code if you know CSS.
♫ You can modify the textless headers to your choice or you can download the .pdf file I provided you with and make a header that fits your taste.
♫ Tiny lj icons thanks to pinvoke ♥.
♫ JOIN/FRIEND the community for future updates.
Two versions, S2 Flexible Squares.
~! Please notice that it's my first time experimenting with a layout, so I apologize beforehand in case something isn't working properly. But I double-checked everything, so it should be fine !~
Light Version
IMG preview
CODE
/*---------------------------------------------------
layout by http://honey-x-flavor.livejournal.com
please visit http://community.livejournal.com/paper_crunch
-----------------------------------------------------*/
body {
background-color: #ffffff;
background-image: url(http://i28.tinypic.com/148gl21.jpg);
;){kind=link}
background-repeat: repeat;
text-align: center;
color: #333333;
font-family: "Verdana", sans-serif;
font-size: 11px;
margin: 20px 0 20px 0;
}
a, a:link, a:visited {
color: #ADADAD;
text-decoration: none;
}
a:hover {
color: #7A7A7A;
text-decoration: none;
}
p, td {
font-size: 11px;
}
blockquote {
border-left: 1px solid #939393;
padding: 0px 10px 0px 5px;
margin: 0px 10px 0px 20px;
}
code, kbd, pre, tt {
font-family: monospace;
}
/*---------------------------------------------------------------------
General page alignment and width
------------------------------------------------------------------------*/
#content
{
width: 600px;
margin-left: auto; margin-right: auto;
background-color: #FFFEFD;
border-width: 1px;
border-style: none;
padding: 15px;
}
#maincontent {
margin-top: 5px;
font-family: "Verdana", sans-serif;
font-size: 11px;
background-color: #FFFEFD;
color: #000000;
border-style: none;
border-color: #999999;
border-width: 1px;
margin-left: 0px;
text-align: left;
}
#sidebar {
padding: 5px;
margin: 5px 0px 0px -250px;
background-color: #FFFEFD;
border-color: #999999;
border-width: 1px;
border-style: none;
font-size: 11px;
display: inline;
font-family: "Verdana", sans-serif;
color: #333333;
width: 200px;
float: left;
text-align: center;
}
/*-----------------------------------------------------------------------------
Header - you can add a header image with either #header or .headerimage
--------------------------------------------------------------------------------*/
#header {
width: 100%;
padding: 0px 0px 10px 0px;
margin: 0px;
text-align: left;
font-family: "Verdana", sans-serif;
font-size: 10px;
font-weight: bold;
letter-spacing: 1px;
border-style: none;
border-color: #999999;
border-width: 1px;
background-color: #FFFEFD;
color: #333333;
text-transform: lowercase;
}
.headerimage {
position: relative;
width: 630px;
height: 400px;
margin-left: auto;
margin-right: auto;
margin-bottom: 0px;
background-image: url(INSERT URL HERE);
background-repeat: no-repeat;
}
div#header a, div#header a:link, div#header a:visited, div#footer a, div#footer a:link, div#footer a:visited {
color: #ADADAD;
}
div#header a:hover, div#footer a:hover {
color: #7A7A7A;
text-decoration: none;
}
.title {
display: none;
}
.subtitle{
display: none;
}
/*-----------------------------------------------------------------------------
Header - top navigation
--------------------------------------------------------------------------------*/
ul.navheader
{
padding: 0px;
margin: 0px;
}
ul.navheader li {
display: inline;
padding: 0 3px 0 3px;
}
/*-----------------------------------------------------------------------------
Entry stuff
------------------------------------------------------------------------*/
.subcontent {
}
.entry {
margin: 0px 10px 10px 30px;
padding: 10px;
background-color: #FFFEFD !important;
color: #3C3C3C;
font-family: "Verdana", sans-serif;
font-size: 11px;
text-align: left;
border-style: none;
}
.userpic {
position: absolute;
float: right;
background-color: #FFFEFD !important;
padding: 10px;
margin-left: 630px;
border-style: none;
text-align: right;
}
.date {
color: #ADADAD;
top: 5px;
color: #919BAD;
font-family: "Verdana", sans-serif;
font-size: 9px;
text-align: right;
background-color: #F5F5F5;
}
.subject {
font-weight: bold;
color: #7A7A7A;
font-family: "Verdana", sans-serif;
text-align: right;
font-size: 14px;
letter-spacing: 1px;
border-color: #ADADAD;
border-width: 1px;
border-bottom-style: dashed;
padding-right: 10px;
padding-top: 2px;
background-color: #F5F5F5;
}
.subject a, .subject a:link, .subject a:visited {
color: #7A7A7A;
}
.subject a:hover {
color: #ADADAD;
}
.datesubject {
background-color: none;
padding: 5px;
}
.entry ul li
{
padding-left: 5px;
margin-left: 15px;
}
.entry ol li
{
padding-left: 5px;
margin-left: 15px;
}
.ljtags {
margin-top: 30px;
padding-left: 5px;
text-align: left;
text-transform: lowercase;
font-size: 9px;
color: #7A7A7A;
border-left: 4px solid #939393;
}
.blockquote {
padding-left: 20px;
border-left: 4px solid #939393;
}
/*---------------------------------------------------------------------
Entry Stuff - Current Mood, Music and Location
------------------------------------------------------------------------*/
.currents {
background-color: transparent;
}
.currents strong{
font-weight: normal;
font-size: 9px;
color: #7A7A7A;
}
.currentlocation, .currentmood, .currentmusic, .currentgroup {
font-family: "Verdana", sans-serif;
text-align: left;
padding-left: 5px;
font-size: 9px;
color: #7A7A7A;
}
/*---------------------------------------------------------------------
Entry Stuff - Comments
------------------------------------------------------------------------*/
.comments {
font-family: "Verdana", sans-serif;
font-size: 9px;
text-align: right;
padding: 0px 5px 0px 5px;
position: relative;
top: 15px;
border-right: 4px solid #939393;
background-color: transparent;
color: #3C3C3C;
}
div.comments a, div.comments a:link, div.comments a:visited{
color: #3C3C3C;
}
div.comments a:hover {
color: #ADADAD;
text-decoration: none;
}
/*---------------------------------------------------------------------
Entry Stuff - Separator
------------------------------------------------------------------------*/
.separator{
height: 35px;
}
/*------------------------------------------------------------
Special friends page customization
-------------------------------------------------------------------------------*/
.userpicfriends {
position: absolute;
float: right;
background-color: #FFFEFD !important;
padding: 10px;
margin-left: 630px;
border-style: none;
text-align: center;
color: #AEA6A4 !important;
}
.userpicfriends font {
font-family: tahoma;
font-weight: normal;
font-size: 7.5pt;
width: 100px;
background-color: transparent !important;
padding: 0px;
color: #AEA6A4;
}
.userpicfriends font:hover {
color: #939998;
}
/*------------------------------------------------------------
Sidebar
-------------------------------------------------------------------------------*/
.defaultuserpic {
display: none;
}
.sbarheader {
padding: 0px 0px 0px 0px;
}
.sbarbody {
padding: 0px 0px 0px 0px;
}
.sbarbody2 {
padding: 0 0px 0 0px;
color: #3C3C3C;
}
div#sidebar a, div#sidebar a:link, div#sidebar a:visited{
color: #7A7A7A;
}
div#sidebar a:hover {
color: #ADADAD;
text-decoration: none;
}
/*------------------------------------------------------------
Sidebar - Calendar
-------------------------------------------------------------------------------*/
table.calendar {
margin-right: auto;
margin-left: auto;
}
.sbarcalendar {
border-color: #3C3C3C;
border-width: 1px;
border-style: solid;
text-align: center;
font-family: "Verdana", sans-serif;
font-size: 11px;
}
.sbarcalendarposts {
border-color: #3C3C3C;
border-width: 1px;
border-style: solid;
background-color: #DADADA;
text-align: center;
font-family: "Verdana", sans-serif;
font-size: 11px;
}
/*------------------------------------------------------------
Sidebar - link box contents and sidebar box titles
-------------------------------------------------------------------------------*/
ul.sbarlist
{
padding-left: 0px;
margin-left: 0px;
list-style: none;
}
li.sbaritem
{
padding: 0px;
list-style: none;
padding-bottom: 2px;
padding-top: 2px;
}
li.sbartitle
{
text-align: center;
list-style: none;
color: #333333;
background-color: none;
margin-bottom: 10px;
margin-top: 10px;
letter-spacing: 2px;
border-color: #ADADAD;
border-width: 1px;
border-bottom-style: dashed;
text-transform: lowercase;
padding: 10px 10px 2px 10px;
}
/*----------------------------------------------------
footer
----------------------------------------------------------------*/
#footer {
width: 100%;
text-align: center;
font-family: "Verdana", sans-serif;
font-size: 11px;
font-weight: bold;
letter-spacing: 1px;
background-color: #FFFEFD;
color: #333333;
border-color: #999999;
border-width: 1px;
border-style: none;
z-index: 100;
clear: both;
}
ul.navfooter{
padding: 0px;
margin: 0px;
}
ul.navfooter li {
display: inline;
margin: 0 5px 0 5px;
}
.clearfoot {
clear: both;
}
/*----------------------------------------------------
Archive Pages
----------------------------------------------------------------*/
ul.year {
text-align: center;
padding-bottom: 40px;
}
ul.year li {
display: inline;
}
table.yeartable {
margin-left: auto;
margin-right: auto;
}
table.yeartable td.yeardate, table.yeartable td.yearday {
border-width: 1px;
border-style: solid;
border-color: #999999;
}
table.yeartable td.yearday {
background-color: #d4dce8;
text-align: center;
}
td.yearmonth {
border-style: none;
}
/*----------------------------------------------------
Comments pages
----------------------------------------------------------------*/
.datesubjectcomment {
background-color: #DEDEDE;
border: 0px solid #777777;
color: #414141;
padding: 7px;
}
.userpiccomment {
position: relative;
background-color: #939393 !important;
top: -20px;
left: 0px;
padding: 5px;
margin: 10px 10px -20px 0px;
z-index: 15;
float: left;
border-style: none;
}
.box {
background-color: transparent;
padding: 15px;
clear: none !important;
font-family:Arial, Helvetica, sans-serif;
font-size: 10px;
margin-top: 15px;
}
.commentbox {
border: 1px #CACACA solid;
background-color: #F5F5F5;
padding-bottom: 30px;
padding-top: 10px;
padding-left: 10px;
padding-right: 5px;
margin-top: 10px;
font-family:Arial, Helvetica, sans-serif;
font-size: 10px;
}
input, textarea {
background-color: #F5F5F5;
color: #3C3C3C;
font-size: 11px;
}
textarea.textbox {
width: 95% !important;
}
.reply {
position: relative;
margin: 20px 30px 10px 30px;
padding: 25px 10px 10px 10px;
text-align: left;
font-family: "Verdana", sans-serif;
font-size: 11px;
line-height: 125%;
background-color: #F5F5F5;
color: #3C3C3C;
}
.replytosubject {
font-weight: bold;
}
.commentreply {
position: relative;
margin: 10px;
font-size: 11px;
font-family: "Verdana", sans-serif;
color: #3C3C3C;
}
.datesubjectcomment a:link, .datesubjectcomment a:visited {
color: #484848;
}
.datesubjectcomment a:hover {
color: #FFFFFF;
}
.commentboxpartial {
border-color: #999999;
border-width: 1px;
border-style: solid;
padding: 10px;
margin: 10px;
background-color: #F5F5F5;
}
.commentinfo {
background-color: #F5F5F5;
margin-top: 10px;
width: 100%;
}
.skiplinks {
text-align: center;
}
/*--------------------------------------------
Misc
-----------------------------------------*/
.clear {
height: 15px;
}
/*--------------------------------------------
Tiny Icons : taken from velvetb0x @ lj
-----------------------------------------*/
img[src*="icon_protected.gif"], img[src*="icon_private.gif"], img[src*="icon_groups.gif"], .ljuser img[src*="syndicated.gif"], .ljuser img[src*="newsinfo.gif"], .ljuser
img[src*="partnercomm.gif"], .ljuser img[src*="sponcomm.gif"], img[src*="userinfo.gif"], img[src*="talk/none.gif"], img[src*="help.gif"] {height: 0px; width: 0px;background:
transparent none no-repeat scroll 0 0; }
.subject img {vertical-align: middle !important;}
img[src*="icon_protected.gif"]{ background-image:url(http://i35.tinypic.com/oih3.jpg);
;){kind=link}
padding:0 0 11px 12px !important;}
img[src*="icon_private.gif"]{ background-image:url(http://i35.tinypic.com/oih3.jpg); padding:0 0 11px 12px !important;}
img[src*="icon_groups.gif"]{ background-image:url(http://i35.tinypic.com/oih3.jpg); padding:0 0 11px 12px !important; }
.ljuser img { width: 0; height: 0; background: transparent url(http://i37.tinypic.com/16kw0v9.jpg) no-repeat 0 0; padding: 10px 10px 0 2px !important; vertical-align: baseline
!important;}
.ljuser img[src*="userinfo.gif"] { background: transparent url(http://i37.tinypic.com/16kw0v9.jpg) no-repeat center left !important; padding: 10px 10px 0 2px !important; }
.ljuser img[src*="community.gif"] { background: transparent url(http://i38.tinypic.com/2l9pe12.jpg) no-repeat scroll 0 0 !important; padding: 10px 10px 0 2px !important; }
img[src="http://l-stat.livejournal.com/img/btn_track.gif"] {
background:transparent url(http://i37.tinypic.com/zyf21w.jpg) repeat scroll 0 0; height: 0; padding: 0 0 16px 16px !important; width:0; }
img[src="http://l-stat.livejournal.com/img/btn_freeze.gif"] {
background:transparent url(http://i36.tinypic.com/2v959jl.jpg) repeat scroll 0 0; height: 0; padding: 0 0 16px 16px !important; width:0; }
img[src="http://l-stat.livejournal.com/img/btn_del.gif"] {
background:transparent url(http://i33.tinypic.com/2qd4rk2.jpg) repeat scroll 0 0; height: 0; padding: 0 0 16px 16px !important; width:0; }
img[src="http://l-stat.livejournal.com/img/btn_scr.gif"] {
background:transparent url(http://i36.tinypic.com/64nuzb.jpg) repeat scroll 0 0; height: 0; padding: 0 0 16px 16px !important; width:0; }
Dark Version
IMG preview
CODE
/*---------------------------------------------------
layout by http://honey-x-flavor.livejournal.com
please visit http://community.livejournal.com/paper_crunch
-----------------------------------------------------*/
body {
background-color: #000000;
background-image: url(http://i26.tinypic.com/2nroeau.jpg);
;){kind=link}
background-repeat: repeat;
text-align: center;
color: #333333;
font-family: "Verdana", sans-serif;
font-size: 11px;
margin: 20px 0 20px 0;
}
a, a:link, a:visited {
color: #ADADAD;
text-decoration: none;
}
a:hover {
color: #7A7A7A;
text-decoration: none;
}
p, td {
font-size: 11px;
}
blockquote {
border-left: 1px solid #939393;
padding: 0px 10px 0px 5px;
margin: 0px 10px 0px 20px;
}
code, kbd, pre, tt {
font-family: monospace;
}
/*---------------------------------------------------------------------
General page alignment and width
------------------------------------------------------------------------*/
#content
{
width: 600px;
margin-left: auto; margin-right: auto;
background-color: #FFFEFD;
border-width: 1px;
border-style: none;
padding: 15px;
}
#maincontent {
margin-top: 5px;
font-family: "Verdana", sans-serif;
font-size: 11px;
background-color: #FFFEFD;
color: #000000;
border-style: none;
border-color: #999999;
border-width: 1px;
margin-left: 0px;
text-align: left;
}
#sidebar {
padding: 5px;
margin: 5px 0px 0px -250px;
background-color: #FFFEFD;
border-color: #999999;
border-width: 1px;
border-style: none;
font-size: 11px;
display: inline;
font-family: "Verdana", sans-serif;
color: #333333;
width: 200px;
float: left;
text-align: center;
}
/*-----------------------------------------------------------------------------
Header - you can add a header image with either #header or .headerimage
--------------------------------------------------------------------------------*/
#header {
width: 100%;
padding: 0px 0px 10px 0px;
margin: 0px;
text-align: left;
font-family: "Verdana", sans-serif;
font-size: 10px;
font-weight: bold;
letter-spacing: 1px;
border-style: none;
border-color: #999999;
border-width: 1px;
background-color: #FFFEFD;
color: #333333;
text-transform: lowercase;
}
.headerimage {
position: relative;
width: 630px;
height: 400px;
margin-left: auto;
margin-right: auto;
margin-bottom: 0px;
background-image: url(INSERT URL HERE);
background-repeat: no-repeat;
}
div#header a, div#header a:link, div#header a:visited, div#footer a, div#footer a:link, div#footer a:visited {
color: #ADADAD;
}
div#header a:hover, div#footer a:hover {
color: #7A7A7A;
text-decoration: none;
}
.title {
display: none;
}
.subtitle{
display: none;
}
/*-----------------------------------------------------------------------------
Header - top navigation
--------------------------------------------------------------------------------*/
ul.navheader
{
padding: 0px;
margin: 0px;
}
ul.navheader li {
display: inline;
padding: 0 3px 0 3px;
}
/*-----------------------------------------------------------------------------
Entry stuff
------------------------------------------------------------------------*/
.subcontent {
}
.entry {
margin: 0px 10px 10px 30px;
padding: 10px;
background-color: #FFFEFD !important;
color: #3C3C3C;
font-family: "Verdana", sans-serif;
font-size: 11px;
text-align: left;
border-style: none;
}
.userpic {
position: absolute;
float: right;
background-color: #FFFEFD !important;
padding: 10px;
margin-left: 630px;
border-style: none;
text-align: right;
}
.date {
color: #ADADAD;
top: 5px;
color: #919BAD;
font-family: "Verdana", sans-serif;
font-size: 9px;
text-align: right;
background-color: #F5F5F5;
}
.subject {
font-weight: bold;
color: #7A7A7A;
font-family: "Verdana", sans-serif;
text-align: right;
font-size: 14px;
letter-spacing: 1px;
border-color: #ADADAD;
border-width: 1px;
border-bottom-style: dashed;
padding-right: 10px;
padding-top: 2px;
background-color: #F5F5F5;
}
.subject a, .subject a:link, .subject a:visited {
color: #7A7A7A;
}
.subject a:hover {
color: #ADADAD;
}
.datesubject {
background-color: none;
padding: 5px;
}
.entry ul li
{
padding-left: 5px;
margin-left: 15px;
}
.entry ol li
{
padding-left: 5px;
margin-left: 15px;
}
.ljtags {
margin-top: 30px;
padding-left: 5px;
text-align: left;
text-transform: lowercase;
font-size: 9px;
color: #7A7A7A;
border-left: 4px solid #939393;
}
.blockquote {
padding-left: 20px;
border-left: 4px solid #939393;
}
/*---------------------------------------------------------------------
Entry Stuff - Current Mood, Music and Location
------------------------------------------------------------------------*/
.currents {
background-color: transparent;
}
.currents strong{
font-weight: normal;
font-size: 9px;
color: #7A7A7A;
}
.currentlocation, .currentmood, .currentmusic, .currentgroup {
font-family: "Verdana", sans-serif;
text-align: left;
padding-left: 5px;
font-size: 9px;
color: #7A7A7A;
}
/*---------------------------------------------------------------------
Entry Stuff - Comments
------------------------------------------------------------------------*/
.comments {
font-family: "Verdana", sans-serif;
font-size: 9px;
text-align: right;
padding: 0px 5px 0px 5px;
position: relative;
top: 15px;
border-right: 4px solid #939393;
background-color: transparent;
color: #3C3C3C;
}
div.comments a, div.comments a:link, div.comments a:visited{
color: #3C3C3C;
}
div.comments a:hover {
color: #ADADAD;
text-decoration: none;
}
/*---------------------------------------------------------------------
Entry Stuff - Separator
------------------------------------------------------------------------*/
.separator{
height: 35px;
}
/*------------------------------------------------------------
Special friends page customization
-------------------------------------------------------------------------------*/
.userpicfriends {
position: absolute;
float: right;
background-color: #FFFEFD !important;
padding: 10px;
margin-left: 630px;
border-style: none;
text-align: center;
color: #AEA6A4 !important;
}
.userpicfriends font {
font-family: tahoma;
font-weight: normal;
font-size: 7.5pt;
width: 100px;
background-color: transparent !important;
padding: 0px;
color: #AEA6A4;
}
.userpicfriends font:hover {
color: #939998;
}
/*------------------------------------------------------------
Sidebar
-------------------------------------------------------------------------------*/
.defaultuserpic {
display: none;
}
.sbarheader {
padding: 0px 0px 0px 0px;
}
.sbarbody {
padding: 0px 0px 0px 0px;
}
.sbarbody2 {
padding: 0 0px 0 0px;
color: #3C3C3C;
}
div#sidebar a, div#sidebar a:link, div#sidebar a:visited{
color: #7A7A7A;
}
div#sidebar a:hover {
color: #ADADAD;
text-decoration: none;
}
/*------------------------------------------------------------
Sidebar - Calendar
-------------------------------------------------------------------------------*/
table.calendar {
margin-right: auto;
margin-left: auto;
}
.sbarcalendar {
border-color: #3C3C3C;
border-width: 1px;
border-style: solid;
text-align: center;
font-family: "Verdana", sans-serif;
font-size: 11px;
}
.sbarcalendarposts {
border-color: #3C3C3C;
border-width: 1px;
border-style: solid;
background-color: #DADADA;
text-align: center;
font-family: "Verdana", sans-serif;
font-size: 11px;
}
/*------------------------------------------------------------
Sidebar - link box contents and sidebar box titles
-------------------------------------------------------------------------------*/
ul.sbarlist
{
padding-left: 0px;
margin-left: 0px;
list-style: none;
}
li.sbaritem
{
padding: 0px;
list-style: none;
padding-bottom: 2px;
padding-top: 2px;
}
li.sbartitle
{
text-align: center;
list-style: none;
color: #333333;
background-color: none;
margin-bottom: 10px;
margin-top: 10px;
letter-spacing: 2px;
border-color: #ADADAD;
border-width: 1px;
border-bottom-style: dashed;
text-transform: lowercase;
padding: 10px 10px 2px 10px;
}
/*----------------------------------------------------
footer
----------------------------------------------------------------*/
#footer {
width: 100%;
text-align: center;
font-family: "Verdana", sans-serif;
font-size: 11px;
font-weight: bold;
letter-spacing: 1px;
background-color: #FFFEFD;
color: #333333;
border-color: #999999;
border-width: 1px;
border-style: none;
z-index: 100;
clear: both;
}
ul.navfooter{
padding: 0px;
margin: 0px;
}
ul.navfooter li {
display: inline;
margin: 0 5px 0 5px;
}
.clearfoot {
clear: both;
}
/*----------------------------------------------------
Archive Pages
----------------------------------------------------------------*/
ul.year {
text-align: center;
padding-bottom: 40px;
}
ul.year li {
display: inline;
}
table.yeartable {
margin-left: auto;
margin-right: auto;
}
table.yeartable td.yeardate, table.yeartable td.yearday {
border-width: 1px;
border-style: solid;
border-color: #999999;
}
table.yeartable td.yearday {
background-color: #d4dce8;
text-align: center;
}
td.yearmonth {
border-style: none;
}
/*----------------------------------------------------
Comments pages
----------------------------------------------------------------*/
.datesubjectcomment {
background-color: #DEDEDE;
border: 0px solid #777777;
color: #414141;
padding: 7px;
}
.userpiccomment {
position: relative;
background-color: #939393 !important;
top: -20px;
left: 0px;
padding: 5px;
margin: 10px 10px -20px 0px;
z-index: 15;
float: left;
border-style: none;
}
.box {
background-color: transparent;
padding: 15px;
clear: none !important;
font-family:Arial, Helvetica, sans-serif;
font-size: 10px;
margin-top: 15px;
}
.commentbox {
border: 1px #CACACA solid;
background-color: #F5F5F5;
padding-bottom: 30px;
padding-top: 10px;
padding-left: 10px;
padding-right: 5px;
margin-top: 10px;
font-family:Arial, Helvetica, sans-serif;
font-size: 10px;
}
input, textarea {
background-color: #F5F5F5;
color: #3C3C3C;
font-size: 11px;
}
textarea.textbox {
width: 95% !important;
}
.reply {
position: relative;
margin: 20px 30px 10px 30px;
padding: 25px 10px 10px 10px;
text-align: left;
font-family: "Verdana", sans-serif;
font-size: 11px;
line-height: 125%;
background-color: #F5F5F5;
color: #3C3C3C;
}
.replytosubject {
font-weight: bold;
}
.commentreply {
position: relative;
margin: 10px;
font-size: 11px;
font-family: "Verdana", sans-serif;
color: #3C3C3C;
}
.datesubjectcomment a:link, .datesubjectcomment a:visited {
color: #484848;
}
.datesubjectcomment a:hover {
color: #FFFFFF;
}
.commentboxpartial {
border-color: #999999;
border-width: 1px;
border-style: solid;
padding: 10px;
margin: 10px;
background-color: #F5F5F5;
}
.commentinfo {
background-color: #F5F5F5;
margin-top: 10px;
width: 100%;
}
.skiplinks {
text-align: center;
}
/*--------------------------------------------
Misc
-----------------------------------------*/
.clear {
height: 15px;
}
/*--------------------------------------------
Tiny Icons : taken from velvetb0x @ lj
-----------------------------------------*/
img[src*="icon_protected.gif"], img[src*="icon_private.gif"], img[src*="icon_groups.gif"], .ljuser img[src*="syndicated.gif"], .ljuser img[src*="newsinfo.gif"], .ljuser img[src*="partnercomm.gif"], .ljuser img[src*="sponcomm.gif"], img[src*="userinfo.gif"], img[src*="talk/none.gif"], img[src*="help.gif"] {height: 0px; width: 0px;background: transparent none no-repeat scroll 0 0; }
.subject img {vertical-align: middle !important;}
img[src*="icon_protected.gif"]{ background-image:url(http://i35.tinypic.com/oih3.jpg);
padding:0 0 11px 12px !important;}
img[src*="icon_private.gif"]{ background-image:url(http://i35.tinypic.com/oih3.jpg); padding:0 0 11px 12px !important;}
img[src*="icon_groups.gif"]{ background-image:url(http://i35.tinypic.com/oih3.jpg); padding:0 0 11px 12px !important; }
.ljuser img { width: 0; height: 0; background: transparent url(http://i37.tinypic.com/16kw0v9.jpg) no-repeat 0 0; padding: 10px 10px 0 2px !important; vertical-align: baseline !important;}
.ljuser img[src*="userinfo.gif"] { background: transparent url(http://i37.tinypic.com/16kw0v9.jpg) no-repeat center left !important; padding: 10px 10px 0 2px !important; }
.ljuser img[src*="community.gif"] { background: transparent url(http://i38.tinypic.com/2l9pe12.jpg) no-repeat scroll 0 0 !important; padding: 10px 10px 0 2px !important; }
img[src="http://l-stat.livejournal.com/img/btn_track.gif"] {
background:transparent url(http://i37.tinypic.com/zyf21w.jpg) repeat scroll 0 0; height: 0; padding: 0 0 16px 16px !important; width:0; }
img[src="http://l-stat.livejournal.com/img/btn_freeze.gif"] {
background:transparent url(http://i36.tinypic.com/2v959jl.jpg) repeat scroll 0 0; height: 0; padding: 0 0 16px 16px !important; width:0; }
img[src="http://l-stat.livejournal.com/img/btn_del.gif"] {
background:transparent url(http://i33.tinypic.com/2qd4rk2.jpg) repeat scroll 0 0; height: 0; padding: 0 0 16px 16px !important; width:0; }
img[src="http://l-stat.livejournal.com/img/btn_scr.gif"] {
background:transparent url(http://i36.tinypic.com/64nuzb.jpg) repeat scroll 0 0; height: 0; padding: 0 0 16px 16px !important; width:0; }
HEADERS
630x312
630x400
download .pdf file to make your own header
How to install the layout:
1. Go to Customize Journal Style and choose a Flexible Squares layout.
2. While still there, at 3. Choose a Page Setup, choose Ad Placement: Horizontal (if you don't have a paid account) and also a 2-column style.
3. Click Customize Your Theme (next to the tiny layout preview you chose) and go to Custom CSS. Make sure all the dropdown boxes are set to "NO". Copy the code in the custom stylesheet box.
FIND THE .headerimage part in the code. It looks like this:
.headerimage {
position: relative;
width: 630px;
height: 400px;
margin-left: auto;
margin-right: auto;
margin-bottom: 0px;
background-image: url(INSERT URL HERE);
background-repeat: no-repeat;
}
Replace the "INSERT URL HERE" part with the url of the header that you'll upload to YOUR OWN SERVER of choice, like photobucket or tinypic. DON'T HOTLINK MY IMAGES or else Bill will turn into a purple frog. With a mohawk.
Also, in case you decide to use one of the 630x312 headers, don't forget to change the height to 312px!
♫ Comment :D
♫ Credit honey_x_flavor and/or paper_crunch.
♫ No hotlinking!
♫ You can edit the code if you know CSS.
♫ You can modify the textless headers to your choice or you can download the .pdf file I provided you with and make a header that fits your taste.
♫ Tiny lj icons thanks to pinvoke ♥.
♫ JOIN/FRIEND the community for future updates.