lennie_layouts: [layout 009]

Lennie (

willowtree84) wrote in

lennie_layouts,
@ 2007-05-21 17:26:00

Entry tags:

fandom:degrassi, layout:flexible squares

[layout 009] :: Let's Chill

[Click image for bigger preview]

Info
Name:	Let's Chill
Style:	Flexible Squares
Browsers:	Tested in Firefox 2, Internet Explorer 6 & 7 (but the entry userpics are hidden), Opera 9
Resolutions:	800x600 and up
*Untested using a Plus account

Images -- GREY
*Please upload these to your own server or image host. Thank you.
navheader.png content.png datesubject.png userpic.png	entry.png blockquote.png bullet.png comments.png	defaultuserpic.png sidebartitle.png footer.png
*Comment with your username and a title (to replace "willowtree84" and "me, my tv & I" on the example header) to get your header (don't forget to mention which color you want).

Images -- BROWN
*Please upload these to your own server or image host. Thank you.
navheader.png content.png datesubject.png userpic.png	entry.png blockquote.png bullet.png comments.png	defaultuserpic.png sidebartitle.png footer.png
*Comment with your username and a title (to replace "willowtree84" and "me, my tv & I" on the example header) to get your header (don't forget to mention which color you want).

Code -- GREY
/******************************************************************** * Title: 09 - Let's Chill [grey] * * Date: 2007-03-11 * * Style: Flexible Squares (S2) * * Made by: willowtree84 * * http://community.livejournal.com/lennie_layouts/ * * * * Textures by vert_gazon (http://vert-gazon.livejournal.com/) * *******************************************************************/ / ------------------- GENERAL ------------------- / body { font-family: arial, verdana, sans-serif; font-size: 12px; margin: 0; text-align: center; color: #707070; background-color: #000; } ::-moz-selection { background: #101010; color: #868686; } a:link, a:visited, a:active { color: #366; font-weight: bold; text-decoration: none; } a:hover, a:focus { color: #707070; font-weight: bold; text-decoration: none; } blockquote { margin: 10px auto; padding: 10px 20px; width: 340px; font-style: italic; background: #101010 url(http://img.photobucket.com/albums/v286/willowtree84/lj_layout/shared_layouts/layout_010/grey/blockquote.png) 0 0 repeat-y; } html blockquote {width: 337px;} code, kbd, pre, tt {font-family: monospace;} hr { color: #707070; background-color: #707070; border: 0; height: 1px; width: 100%; text-align: center; margin-top: 10px; margin-bottom: 0; clear: left; } /* ------------------- NAV BAR ------------------- / #lj_controlstrip { background: none; background-color: #2B2B2B; border: 1px solid #2B2B2B; } #lj_controlstrip td { color: #707070; border: 1px solid #707070; } #lj_controlstrip_statustext {color: #707070;} #lj_controlstrip a {color: #707070;} #lj_controlstrip_user, #lj_controlstrip_userlinks, #lj_controlstrip_login {border-right: 1px solid #707070;} #lj_controlstrip_login td {border-bottom: 0;} / ------------------- CONTAINERS ------------------- / #content { width: 700px; margin: 0 auto; background: url(http://img.photobucket.com/albums/v286/willowtree84/lj_layout/shared_layouts/layout_010/grey/content.png) 0 0 repeat-y; } #header { width: 700px; height: 316px; text-align: left; background: #686868 url(http://img.photobucket.com/albums/v286/willowtree84/lj_layout/shared_layouts/layout_010/grey/header.png) 0 0 no-repeat; } #sidebar { width: 180px; float: right; margin: 0; padding: 80px 0 0 0; text-align: left; } #maincontent { margin-right: 185px; padding: 57px 0 0 0; } html #maincontent {margin-right: 187px;} #footer { width: 700px; text-align: center; z-index: 100; clear: both; } /* ------------------- HEADER & FOOTER ------------------- / ul.navheader { padding: 18px 0 0 0; margin: 0; position: relative; top: 316px; left: 0; height: 40px; text-align: center; text-transform: uppercase; font-size: 1em; font-weight: bold; list-style-type: none; background: #262626 url(http://img.photobucket.com/albums/v286/willowtree84/lj_layout/shared_layouts/layout_010/grey/navheader.png) 0 0 no-repeat; } ul.navfooter { padding: 27px 0 0 0; margin: 0; height: 39px; text-align: center; text-transform: uppercase; font-size: 1em; font-weight: bold; list-style-type: none; background: #262626 url(http://img.photobucket.com/albums/v286/willowtree84/lj_layout/shared_layouts/layout_010/grey/footer.png) 0 0 no-repeat; clear: both; } ul.navheader li, ul.navfooter li { padding: 0 25px 0 25px; display: inline; } .title, .subtitle {display: none;} .clearfoot { clear: both; display: none; } / ------------------- SIDEBAR ------------------- / .defaultuserpic { text-align: center; margin: 0 auto; background: url(http://img.photobucket.com/albums/v286/willowtree84/lj_layout/shared_layouts/layout_010/grey/defaultuserpic.png) 0 20px no-repeat; width: 134px; } .sbarbody {padding: 0;} .sbarbody2 { margin: 0; padding: 10px 23px; text-align: justify; } table.calendar { margin: 0 auto; text-align: center; } .sbarcalendar {border: 1px #707070 solid;} .sbarcalendarposts { border: 1px #707070 solid; background-color: #707070; } .sbarcalendarposts a:link, .sbarcalendarposts a:visited, .sbarcalendarposts a:active {color: #101010;} .sbarcalendarposts a:hover, .sbarcalendarposts a:focus {color: #2B2B2B;} ul.sbarlist { padding-left: 0; margin: 0; list-style: none; } #sidebar_calendar ul.sbarcontent { margin: 0; padding: 10px; } #sidebar_tags ul.sbarcontent, #sidebar_summary ul.sbarcontent, #sidebar_linklist ul.sbarcontent { margin: 0; padding: 10px 23px; } li.sbartitle { list-style: none; padding: 0 0 7px 23px; margin: 20px 0 0 0; text-align: left; text-transform: uppercase; font-weight: bold; font-size: 0.9em; background: transparent url(http://img.photobucket.com/albums/v286/willowtree84/lj_layout/shared_layouts/layout_010/grey/sidebartitle.png) bottom center no-repeat; } / ------------------- MAINCONTENT ------------------- / #content .ljuser a {border: none;} .entry { margin: 0; padding: 0 15px 0 10px; text-align: justify; font-size: 1.1em; line-height: 1.3em; background: #2B2B2B url(http://img.photobucket.com/albums/v286/willowtree84/lj_layout/shared_layouts/layout_010/grey/entry.png) top right repeat-y; } .entry ul, .entry ol { padding: 5px 25px 0 15px; margin: 10px auto 0 auto; width: 340px; list-style: none; } .entry ul li, .entry ol li { padding: 0 0 0 20px; background: url(http://img.photobucket.com/albums/v286/willowtree84/lj_layout/shared_layouts/layout_010/grey/bullet.png) 0 .1em no-repeat; } .entry a img, .userpic a img, .userpicfriends a img, .Userpic a img {border: none;} .userpic, .userpicfriends { position: relative; float: left; padding: 0; margin: 18px 5px 5px 0; text-align: center; z-index: 15; background-color: transparent !important; } +html .userpic, +html .userpicfriends, html .userpic, * html .userpicfriends {display: none;} .userpic img, .userpicfriends img { padding: 10px 8px; background: transparent url(http://img.photobucket.com/albums/v286/willowtree84/lj_layout/shared_layouts/layout_010/grey/userpic.png) 0 0 no-repeat !important; } .userpic a, .userpicfriends a {border: none;} .datesubject { margin: 0; padding: 6px 10px 0 9px; width: 494px; height: 68px; text-align: right; text-transform: uppercase; color: #868686; font-size: 0.9em; background: #262626 url(http://img.photobucket.com/albums/v286/willowtree84/lj_layout/shared_layouts/layout_010/grey/datesubject.png) 0 0 no-repeat; } * html .datesubject { width: 490px; margin-right: auto; } .date {padding-right: 5px;} .subject { padding: 7px 0 0 0; font-weight: bold; } .ljtags { margin-top: 25px; font-weight: bold; } .ljtags a:link, .ljtags a:visited, .ljtags a:active, .ljtags a:hover, .ljtags a:focus, .currents a:link, .currents a:visited, .currents a:active, .currents a:hover, .currents a:focus {font-weight: normal;} .currents, .ljtags {font-size: 0.9em;} .currents img {display: none;} .comments { margin: 0 -15px 0 -10px; padding: 33px 15px 0 10px; height: 41px; clear: left; text-align: right; text-transform: uppercase; font-size: 0.8em; background: #262626 url(http://img.photobucket.com/albums/v286/willowtree84/lj_layout/shared_layouts/layout_010/grey/comments.png) 0 0 no-repeat; } /* ------------------- MAINCONTENT -- year/achive pages ------------------- / ul.year { text-align: center; margin: 20px 0 0 0; padding: 0; } ul.year li {display: inline;} table.yeartable { margin: 25px auto 0 auto; padding: 10px 20px; width: 380px; background: #101010 url(http://img.photobucket.com/albums/v286/willowtree84/lj_layout/shared_layouts/layout_010/grey/blockquote.png) 0 0 repeat-y; } +html table.yeartable, * html table.yeartable {background: none;} table.yeartable td.yeardate, table.yeartable td.yearday {border: 1px #707070 solid;} table.yeartable td.yearday { background-color: #707070; color: #101010; text-align: center; } td.yearmonth {border-style: none;} table.yeartable td.yeardate a {border: none;} /* ------------------- MAINCONTENT -- entry, reply pages ------------------- / .datesubjectcomment { background-color: #707070 !important; padding: 5px; color: #2B2B2B; } .datesubjectcomment a:link, .datesubjectcomment a:visited, .datesubjectcomment a:active, .datesubjectcomment a:hover, .datesubjectcomment a:focus {color: #2B2B2B;} .userpiccomment { position: relative; float: left; background-color: #FFF; padding: 2px; margin: 0 5px 5px 0; z-index: 15; border: 1px #2C0400 solid; } .box { border: none; margin-right: 5px; padding: 10px; text-align: left; } .box font {color: #707070;} .box form#qrform table { border: 1px #707070 solid !important; margin-top: 10px; padding: 10px; background-color: #2B2B2B; } input, textarea, select, submit, button { background-color: #FFF; color: #2B2B2B; border: 1px #707070 solid; } textarea.textbox { width: 100% !important; border: 1px #2C0400 solid; } submit, button {color: #2B2B2B;} .reply{ position: relative; margin: 20px 30px 10px 30px; padding: 25px 10px 10px 10px; text-align: left; line-height: 125%; background-color: #2B2B2B; color: #707070; } .replytosubject { font-weight: bold; color: #FFF; } .replytoposter {color: #707070;} .commentreply { position: relative; margin: 10px 5px; color: #707070; background-color: #2B2B2B; text-align: justify; } .commentbox { border: 1px #707070 solid; padding: 5px; margin: 10px 0; background-color: #2B2B2B; } +html .commentbox, * html .commentbox {height: 120px;} .commentboxpartial { border: 1px #2B2B2B solid; padding: 5px; margin: 10px; background-color: #707070; } .commentinfo { background-color: #877033; margin-top: 10px; width: 100%; } /* ------------------- MISC ------------------- */ .clear {height: 15px;} #maincontent .clear, #maincontent .entry .clear {display: none;} .skiplinks { text-align: center; padding: 10px 0; } .separator {display: none;}

Code -- GREY

/********************************************************************
*   Title: 09 - Let's Chill [grey]                                  *
*   Date: 2007-03-11                                                *
*   Style: Flexible Squares (S2)                                    *
*   Made by: willowtree84                                           *
*   http://community.livejournal.com/lennie_layouts/                *
*                                                                   *    
*   Textures by vert_gazon (http://vert-gazon.livejournal.com/)     *
********************************************************************/

/* ------------------- GENERAL ------------------- */
body {
    font-family: arial, verdana, sans-serif;
    font-size: 12px;
    margin: 0;
    text-align: center;
    color: #707070;
    background-color: #000;
}

::-moz-selection {
    background: #101010;
    color: #868686;
}

a:link, a:visited, a:active {
    color: #366;
    font-weight: bold;
    text-decoration: none;
}
a:hover, a:focus {
    color: #707070;
    font-weight: bold;
    text-decoration: none;
}

blockquote {
    margin: 10px auto;
    padding: 10px 20px;
    width: 340px;
    font-style: italic;
    background: #101010 url(http://img.photobucket.com/albums/v286/willowtree84/lj_layout/shared_layouts/layout_010/grey/blockquote.png) 0 0 repeat-y;
}
* html blockquote {width: 337px;}
code, kbd, pre, tt {font-family: monospace;}

hr {
    color: #707070;
    background-color: #707070;
    border: 0;
    height: 1px;    
    width: 100%;
    text-align: center;
    margin-top: 10px;
    margin-bottom: 0;
    clear: left;
}


/* ------------------- NAV BAR ------------------- */
#lj_controlstrip {
    background: none;
    background-color: #2B2B2B;
    border: 1px solid #2B2B2B;
}
#lj_controlstrip td {
    color: #707070;
    border: 1px solid #707070;
}
#lj_controlstrip_statustext {color: #707070;}
#lj_controlstrip a {color: #707070;}
#lj_controlstrip_user, #lj_controlstrip_userlinks, #lj_controlstrip_login {border-right: 1px solid #707070;}
#lj_controlstrip_login td {border-bottom: 0;}


/* ------------------- CONTAINERS ------------------- */
#content {
    width: 700px;
    margin: 0 auto;
    background: url(http://img.photobucket.com/albums/v286/willowtree84/lj_layout/shared_layouts/layout_010/grey/content.png) 0 0 repeat-y;
}

#header {
    width: 700px;
    height: 316px;
    text-align: left;
    background: #686868 url(http://img.photobucket.com/albums/v286/willowtree84/lj_layout/shared_layouts/layout_010/grey/header.png) 0 0 no-repeat;
}

#sidebar {
    width: 180px;
    float: right;
    margin: 0;
    padding: 80px 0 0 0;
    text-align: left;
}

#maincontent {
    margin-right: 185px;
    padding: 57px 0 0 0;
}
* html #maincontent {margin-right: 187px;}

#footer {
    width: 700px;
    text-align: center;
    z-index: 100;
    clear: both;
}


/* ------------------- HEADER & FOOTER ------------------- */
ul.navheader {
    padding: 18px 0 0 0;
    margin: 0;
    position: relative;
    top: 316px;
    left: 0;
    height: 40px;
    text-align: center;
    text-transform: uppercase;
    font-size: 1em;
    font-weight: bold;
    list-style-type: none;
    background: #262626 url(http://img.photobucket.com/albums/v286/willowtree84/lj_layout/shared_layouts/layout_010/grey/navheader.png) 0 0 no-repeat;
}
ul.navfooter {
    padding: 27px 0 0 0;
    margin: 0;
    height: 39px;
    text-align: center;
    text-transform: uppercase;
    font-size: 1em;
    font-weight: bold;
    list-style-type: none;
    background: #262626 url(http://img.photobucket.com/albums/v286/willowtree84/lj_layout/shared_layouts/layout_010/grey/footer.png) 0 0 no-repeat;
    clear: both;
}

ul.navheader li, ul.navfooter li {
    padding: 0 25px 0 25px;
    display: inline;
}

.title, .subtitle {display: none;}

.clearfoot {
    clear: both;
    display: none;
}


/* ------------------- SIDEBAR ------------------- */
.defaultuserpic {
    text-align: center;
    margin: 0 auto;
    background: url(http://img.photobucket.com/albums/v286/willowtree84/lj_layout/shared_layouts/layout_010/grey/defaultuserpic.png) 0 20px no-repeat;
    width: 134px;
}

.sbarbody {padding: 0;}
.sbarbody2 {
    margin: 0;
    padding: 10px 23px;
    text-align: justify;
}

table.calendar {
    margin: 0 auto;
    text-align: center;
}

.sbarcalendar {border: 1px #707070 solid;}

.sbarcalendarposts {
    border: 1px #707070 solid;
    background-color: #707070;
}
.sbarcalendarposts a:link, 
.sbarcalendarposts a:visited, 
.sbarcalendarposts a:active {color: #101010;}
.sbarcalendarposts a:hover, 
.sbarcalendarposts a:focus {color: #2B2B2B;}

ul.sbarlist {
    padding-left: 0;
    margin: 0;
    list-style: none;
}
#sidebar_calendar ul.sbarcontent {
    margin: 0;
    padding: 10px;
}
#sidebar_tags ul.sbarcontent, #sidebar_summary ul.sbarcontent, #sidebar_linklist ul.sbarcontent {
    margin: 0;
    padding: 10px 23px;
}

li.sbartitle {
    list-style: none;
    padding: 0 0 7px 23px;
    margin: 20px 0 0 0;
    text-align: left;
    text-transform: uppercase;
    font-weight: bold;
    font-size: 0.9em;
    background: transparent url(http://img.photobucket.com/albums/v286/willowtree84/lj_layout/shared_layouts/layout_010/grey/sidebartitle.png) bottom center no-repeat;
}


/* ------------------- MAINCONTENT ------------------- */
#content .ljuser a {border: none;}

.entry {
    margin: 0;
    padding: 0 15px 0 10px;
    text-align: justify;
    font-size: 1.1em;
    line-height: 1.3em;
    background: #2B2B2B url(http://img.photobucket.com/albums/v286/willowtree84/lj_layout/shared_layouts/layout_010/grey/entry.png) top right repeat-y;
}

.entry ul, .entry ol {
    padding: 5px 25px 0 15px;
    margin: 10px auto 0 auto;
    width: 340px;
    list-style: none;
}
.entry ul li, .entry ol li {
    padding: 0 0 0 20px;
    background: url(http://img.photobucket.com/albums/v286/willowtree84/lj_layout/shared_layouts/layout_010/grey/bullet.png) 0 .1em no-repeat;
}

.entry a img, .userpic a img, .userpicfriends a img, .Userpic a img {border: none;}


.userpic, .userpicfriends {
    position: relative;
    float: left;
    padding: 0;
    margin: 18px 5px 5px 0;
    text-align: center;
    z-index: 15;
    background-color: transparent !important;
}
*+html .userpic, *+html .userpicfriends, * html .userpic, * html .userpicfriends {display: none;}
.userpic img, .userpicfriends img {
    padding: 10px 8px;
    background: transparent url(http://img.photobucket.com/albums/v286/willowtree84/lj_layout/shared_layouts/layout_010/grey/userpic.png) 0 0 no-repeat !important;
}
.userpic a, .userpicfriends a {border: none;}

.datesubject {
    margin: 0;
    padding: 6px 10px 0 9px;
    width: 494px;
    height: 68px;
    text-align: right;
    text-transform: uppercase;
    color: #868686;
    font-size: 0.9em;
    background: #262626 url(http://img.photobucket.com/albums/v286/willowtree84/lj_layout/shared_layouts/layout_010/grey/datesubject.png) 0 0 no-repeat;
}
* html .datesubject {
    width: 490px;
    margin-right: auto;
}
.date {padding-right: 5px;}
.subject {
    padding: 7px 0 0 0;
    font-weight: bold;
}

.ljtags {
    margin-top: 25px;
    font-weight: bold;
}
.ljtags a:link, 
.ljtags a:visited, 
.ljtags a:active, 
.ljtags a:hover, 
.ljtags a:focus, 
.currents a:link, 
.currents a:visited, 
.currents a:active, 
.currents a:hover, 
.currents a:focus {font-weight: normal;}

.currents, .ljtags {font-size: 0.9em;}
.currents img {display: none;}

.comments {
    margin: 0 -15px 0 -10px;
    padding: 33px 15px 0 10px;
    height: 41px;
    clear: left;
    text-align: right;
    text-transform: uppercase;
    font-size: 0.8em;
    background: #262626 url(http://img.photobucket.com/albums/v286/willowtree84/lj_layout/shared_layouts/layout_010/grey/comments.png) 0 0 no-repeat;
}


/* ------------------- MAINCONTENT -- year/achive pages ------------------- */
ul.year {
    text-align: center;
    margin: 20px 0 0 0;
    padding: 0;
}

ul.year li {display: inline;}

table.yeartable {
    margin: 25px auto 0 auto;    
    padding: 10px 20px;
    width: 380px;
    background: #101010 url(http://img.photobucket.com/albums/v286/willowtree84/lj_layout/shared_layouts/layout_010/grey/blockquote.png) 0 0 repeat-y;
}
*+html table.yeartable, * html table.yeartable {background: none;}

table.yeartable td.yeardate, 
table.yeartable td.yearday {border: 1px #707070 solid;}

table.yeartable td.yearday {
    background-color: #707070;
    color: #101010;
    text-align: center;
}

td.yearmonth {border-style: none;}

table.yeartable td.yeardate a {border: none;}

/* ------------------- MAINCONTENT --  entry, reply pages ------------------- */
.datesubjectcomment {
    background-color: #707070 !important;
    padding: 5px;
    color: #2B2B2B;
}
.datesubjectcomment a:link, 
.datesubjectcomment a:visited, 
.datesubjectcomment a:active, 
.datesubjectcomment a:hover, 
.datesubjectcomment a:focus {color: #2B2B2B;}

.userpiccomment {
    position: relative;
    float: left;
    background-color: #FFF;
    padding: 2px;
    margin: 0 5px 5px 0;
    z-index: 15;
    border: 1px #2C0400 solid;
}

.box {
    border: none;
    margin-right: 5px;
    padding: 10px;
    text-align: left;
}
.box font {color: #707070;}
.box form#qrform table {
    border: 1px #707070 solid !important;
    margin-top: 10px;
    padding: 10px;
    background-color: #2B2B2B;
}

input, textarea, select, submit, button {
    background-color: #FFF;
    color: #2B2B2B;
    border: 1px #707070 solid;
}

textarea.textbox {
    width: 100% !important;
    border: 1px #2C0400 solid;
}

submit, button {color: #2B2B2B;}

.reply{
    position: relative;
    margin: 20px 30px 10px 30px;
    padding: 25px 10px 10px 10px;
    text-align: left;
    line-height: 125%;
    background-color: #2B2B2B;
    color: #707070;
}

.replytosubject {
    font-weight: bold;
    color: #FFF;
}

.replytoposter {color: #707070;}

.commentreply {
    position: relative;
    margin: 10px 5px;
    color: #707070;
    background-color: #2B2B2B;    
    text-align: justify;
}

.commentbox {
    border: 1px #707070 solid;
    padding: 5px; 
    margin: 10px 0; 
    background-color: #2B2B2B;
}
*+html .commentbox, * html .commentbox {height: 120px;}

.commentboxpartial {
    border: 1px #2B2B2B solid;
    padding: 5px; 
    margin: 10px; 
    background-color: #707070;
}

.commentinfo {
    background-color: #877033; 
    margin-top: 10px; 
    width: 100%;
}


/* ------------------- MISC ------------------- */
.clear {height: 15px;}
#maincontent .clear, 
#maincontent .entry .clear {display: none;}

.skiplinks {
    text-align: center;
    padding: 10px 0;
}

.separator {display: none;}

Code -- BROWN
/******************************************************************** * Title: 09 - Let's Chill [brown] * * Date: 2007-03-11 * * Style: Flexible Squares (S2) * * Made by: willowtree84 * * http://community.livejournal.com/lennie_layouts/ * * * * Textures by vert_gazon (http://vert-gazon.livejournal.com/) * *******************************************************************/ / ------------------- GENERAL ------------------- / body { font-family: arial, verdana, sans-serif; font-size: 12px; margin: 0; text-align: center; color: #877033; background-color: #000; } ::-moz-selection { background: #2C0400; color: #AA8633; } a:link, a:visited, a:active { color: #AA8633; font-weight: bold; text-decoration: none; } a:hover, a:focus { color: #877033; font-weight: bold; text-decoration: none; } blockquote { margin: 10px auto; padding: 10px 20px; width: 340px; font-style: italic; background: #2C0400 url(http://img.photobucket.com/albums/v286/willowtree84/lj_layout/shared_layouts/layout_010/brown/blockquote.png) 0 0 repeat-y; } html blockquote {width: 337px;} code, kbd, pre, tt {font-family: monospace;} hr { color: #877033; background-color: #877033; border: 0; height: 1px; width: 100%; text-align: center; margin-top: 10px; margin-bottom: 0; clear: left; } /* ------------------- NAV BAR ------------------- / #lj_controlstrip { background: none; background-color: #452100; border: 1px solid #452100; } #lj_controlstrip td { color: #877033; border: 1px solid #877033; } #lj_controlstrip_statustext {color: #877033;} #lj_controlstrip a {color: #877033;} #lj_controlstrip_user, #lj_controlstrip_userlinks, #lj_controlstrip_login {border-right: 1px solid #877033;} #lj_controlstrip_login td {border-bottom: 0;} / ------------------- CONTAINERS ------------------- / #content { width: 700px; margin: 0 auto; background: url(http://img.photobucket.com/albums/v286/willowtree84/lj_layout/shared_layouts/layout_010/brown/content.png) 0 0 repeat-y; } #header { width: 700px; height: 316px; text-align: left; background: #877033 url(http://img.photobucket.com/albums/v286/willowtree84/lj_layout/shared_layouts/layout_010/brown/header.png) 0 0 no-repeat; } #sidebar { width: 180px; float: right; margin: 0; padding: 80px 0 0 0; text-align: left; } #maincontent { margin-right: 185px; padding: 57px 0 0 0; } html #maincontent {margin-right: 187px;} #footer { width: 700px; text-align: center; z-index: 100; clear: both; } /* ------------------- HEADER & FOOTER ------------------- / ul.navheader { padding: 18px 0 0 0; margin: 0; position: relative; top: 316px; left: 0; height: 40px; text-align: center; text-transform: uppercase; font-size: 1em; font-weight: bold; list-style-type: none; background: #452100 url(http://img.photobucket.com/albums/v286/willowtree84/lj_layout/shared_layouts/layout_010/brown/navheader.png) 0 0 no-repeat; } ul.navfooter { padding: 27px 0 0 0; margin: 0; height: 39px; text-align: center; text-transform: uppercase; font-size: 1em; font-weight: bold; list-style-type: none; background: #452100 url(http://img.photobucket.com/albums/v286/willowtree84/lj_layout/shared_layouts/layout_010/brown/footer.png) 0 0 no-repeat; clear: both; } ul.navheader li, ul.navfooter li { padding: 0 25px 0 25px; display: inline; } .title, .subtitle {display: none;} .clearfoot { clear: both; display: none; } / ------------------- SIDEBAR ------------------- / .defaultuserpic { text-align: center; margin: 0 auto; background: url(http://img.photobucket.com/albums/v286/willowtree84/lj_layout/shared_layouts/layout_010/brown/defaultuserpic.png) 0 20px no-repeat; width: 134px; } .sbarbody {padding: 0;} .sbarbody2 { margin: 0; padding: 10px 23px; text-align: justify; } table.calendar { margin: 0 auto; text-align: center; } .sbarcalendar {border: 1px #877033 solid;} .sbarcalendarposts { border: 1px #877033 solid; background-color: #877033; } .sbarcalendarposts a:link, .sbarcalendarposts a:visited, .sbarcalendarposts a:active {color: #2C0400;} .sbarcalendarposts a:hover, .sbarcalendarposts a:focus {color: #472400;} ul.sbarlist { padding-left: 0; margin: 0; list-style: none; } #sidebar_calendar ul.sbarcontent { margin: 0; padding: 10px; } #sidebar_tags ul.sbarcontent, #sidebar_summary ul.sbarcontent, #sidebar_linklist ul.sbarcontent { margin: 0; padding: 10px 23px; } li.sbartitle { list-style: none; padding: 0 0 7px 23px; margin: 20px 0 0 0; text-align: left; text-transform: uppercase; font-weight: bold; font-size: 0.9em; background: transparent url(http://img.photobucket.com/albums/v286/willowtree84/lj_layout/shared_layouts/layout_010/brown/sidebartitle.png) bottom center no-repeat; } / ------------------- MAINCONTENT ------------------- / #content .ljuser a {border: none;} .entry { margin: 0; padding: 0 15px 0 10px; text-align: justify; font-size: 1.1em; line-height: 1.3em; background: #472400 url(http://img.photobucket.com/albums/v286/willowtree84/lj_layout/shared_layouts/layout_010/brown/entry.png) top right repeat-y; } .entry ul, .entry ol { padding: 5px 25px 0 15px; margin: 10px auto 0 auto; width: 340px; list-style: none; } .entry ul li, .entry ol li { padding: 0 0 0 20px; background: url(http://img.photobucket.com/albums/v286/willowtree84/lj_layout/shared_layouts/layout_010/brown/bullet.png) 0 .1em no-repeat; } .entry a img, .userpic a img, .userpicfriends a img, .Userpic a img {border: none;} .userpic, .userpicfriends { position: relative; float: left; padding: 0; margin: 18px 5px 5px 0; text-align: center; z-index: 15; background-color: transparent !important; } +html .userpic, +html .userpicfriends, html .userpic, * html .userpicfriends {display: none;} .userpic img, .userpicfriends img { padding: 10px 8px; background: transparent url(http://img.photobucket.com/albums/v286/willowtree84/lj_layout/shared_layouts/layout_010/brown/userpic.png) 0 0 no-repeat !important; } .userpic a, .userpicfriends a {border: none;} .datesubject { margin: 0; padding: 6px 10px 0 9px; width: 494px; height: 68px; text-align: right; text-transform: uppercase; color: #AA8633; font-size: 0.9em; background: #452100 url(http://img.photobucket.com/albums/v286/willowtree84/lj_layout/shared_layouts/layout_010/brown/datesubject.png) 0 0 no-repeat; } * html .datesubject { width: 490px; margin-right: auto; } .date {padding-right: 5px;} .subject { padding: 7px 0 0 0; font-weight: bold; } .ljtags { margin-top: 25px; font-weight: bold; } .ljtags a:link, .ljtags a:visited, .ljtags a:active, .ljtags a:hover, .ljtags a:focus, .currents a:link, .currents a:visited, .currents a:active, .currents a:hover, .currents a:focus {font-weight: normal;} .currents, .ljtags {font-size: 0.9em;} .currents img {display: none;} .comments { margin: 0 -15px 0 -10px; padding: 33px 15px 0 10px; height: 41px; clear: left; text-align: right; text-transform: uppercase; font-size: 0.8em; background: #452100 url(http://img.photobucket.com/albums/v286/willowtree84/lj_layout/shared_layouts/layout_010/brown/comments.png) 0 0 no-repeat; } /* ------------------- MAINCONTENT -- year/achive pages ------------------- / ul.year { text-align: center; margin: 20px 0 0 0; padding: 0; } ul.year li {display: inline;} table.yeartable { margin: 25px auto 0 auto; padding: 10px 20px; width: 380px; background: #2C0400 url(http://img.photobucket.com/albums/v286/willowtree84/lj_layout/shared_layouts/layout_010/brown/blockquote.png) 0 0 repeat-y; } +html table.yeartable, * html table.yeartable {background: none;} table.yeartable td.yeardate, table.yeartable td.yearday {border: 1px #877033 solid;} table.yeartable td.yearday { background-color: #877033; color: #2C0400; text-align: center; } td.yearmonth {border-style: none;} table.yeartable td.yeardate a {border: none;} /* ------------------- MAINCONTENT -- entry, reply pages ------------------- / .datesubjectcomment { background-color: #877033 !important; padding: 5px; color: #2C0400; } .datesubjectcomment a:link, .datesubjectcomment a:visited, .datesubjectcomment a:active, .datesubjectcomment a:hover, .datesubjectcomment a:focus {color: #2C0400;} .userpiccomment { position: relative; float: left; background-color: #FFF; padding: 2px; margin: 0 5px 5px 0; z-index: 15; border: 1px #5D330A solid; } .box { border: none; margin-right: 5px; padding: 10px; text-align: left; } .box font {color: #877033;} .box form#qrform table { border: 1px #877033 solid !important; margin-top: 10px; padding: 10px; background-color: #472400; } input, textarea, select, submit, button { background-color: #FFF; color: #472400; border: 1px #5D330A solid; } textarea.textbox { width: 100% !important; border: 1px #5D330A solid; } submit, button {color: #2B2B2B;} .reply{ position: relative; margin: 20px 30px 10px 30px; padding: 25px 10px 10px 10px; text-align: left; line-height: 125%; background-color: #2B2B2B; color: #707070; } .replytosubject { font-weight: bold; color: #AA8633; } .replytoposter {color: #AA8633;} .commentreply { position: relative; margin: 10px 5px; color: #877033; text-align: justify; } .commentbox { border: 1px #877033 solid; padding: 5px; margin: 10px 0; background-color: #472400; } +html .commentbox, * html .commentbox {height: 120px;} .commentboxpartial { border: 1px #2B2B2B solid; padding: 5px; margin: 10px; background-color: #707070; } .commentinfo { background-color: #877033; margin-top: 10px; width: 100%; } /* ------------------- MISC ------------------- */ .clear {height: 15px;} #maincontent .clear, #maincontent .entry .clear {display: none;} .skiplinks { text-align: center; padding: 10px 0; } .separator {display: none;}

Code -- BROWN

/********************************************************************
*   Title: 09 - Let's Chill [brown]                                 *
*   Date: 2007-03-11                                                *
*   Style: Flexible Squares (S2)                                    *
*   Made by: willowtree84                                           *
*   http://community.livejournal.com/lennie_layouts/                *
*                                                                   *    
*   Textures by vert_gazon (http://vert-gazon.livejournal.com/)     *
********************************************************************/

/* ------------------- GENERAL ------------------- */
body {
    font-family: arial, verdana, sans-serif;
    font-size: 12px;
    margin: 0;
    text-align: center;
    color: #877033;
    background-color: #000;
}

::-moz-selection {
    background: #2C0400;
    color: #AA8633;
}

a:link, a:visited, a:active {
    color: #AA8633;
    font-weight: bold;
    text-decoration: none;
}
a:hover, a:focus {
    color: #877033;
    font-weight: bold;
    text-decoration: none;
}

blockquote {
    margin: 10px auto;
    padding: 10px 20px;
    width: 340px;
    font-style: italic;
    background: #2C0400 url(http://img.photobucket.com/albums/v286/willowtree84/lj_layout/shared_layouts/layout_010/brown/blockquote.png) 0 0 repeat-y;
}
* html blockquote {width: 337px;}
code, kbd, pre, tt {font-family: monospace;}

hr {
    color: #877033;
    background-color: #877033;
    border: 0;
    height: 1px;    
    width: 100%;
    text-align: center;
    margin-top: 10px;
    margin-bottom: 0;
    clear: left;
}


/* ------------------- NAV BAR ------------------- */
#lj_controlstrip {
    background: none;
    background-color: #452100;
    border: 1px solid #452100;
}
#lj_controlstrip td {
    color: #877033;
    border: 1px solid #877033;
}
#lj_controlstrip_statustext {color: #877033;}
#lj_controlstrip a {color: #877033;}
#lj_controlstrip_user, #lj_controlstrip_userlinks, #lj_controlstrip_login {border-right: 1px solid #877033;}
#lj_controlstrip_login td {border-bottom: 0;}


/* ------------------- CONTAINERS ------------------- */
#content {
    width: 700px;
    margin: 0 auto;
    background: url(http://img.photobucket.com/albums/v286/willowtree84/lj_layout/shared_layouts/layout_010/brown/content.png) 0 0 repeat-y;
}

#header {
    width: 700px;
    height: 316px;
    text-align: left;
    background: #877033 url(http://img.photobucket.com/albums/v286/willowtree84/lj_layout/shared_layouts/layout_010/brown/header.png) 0 0 no-repeat;
}

#sidebar {
    width: 180px;
    float: right;
    margin: 0;
    padding: 80px 0 0 0;
    text-align: left;
}

#maincontent {
    margin-right: 185px;
    padding: 57px 0 0 0;
}
* html #maincontent {margin-right: 187px;}

#footer {
    width: 700px;
    text-align: center;
    z-index: 100;
    clear: both;
}


/* ------------------- HEADER & FOOTER ------------------- */
ul.navheader {
    padding: 18px 0 0 0;
    margin: 0;
    position: relative;
    top: 316px;
    left: 0;
    height: 40px;
    text-align: center;
    text-transform: uppercase;
    font-size: 1em;
    font-weight: bold;
    list-style-type: none;
    background: #452100 url(http://img.photobucket.com/albums/v286/willowtree84/lj_layout/shared_layouts/layout_010/brown/navheader.png) 0 0 no-repeat;
}
ul.navfooter {
    padding: 27px 0 0 0;
    margin: 0;
    height: 39px;
    text-align: center;
    text-transform: uppercase;
    font-size: 1em;
    font-weight: bold;
    list-style-type: none;
    background: #452100 url(http://img.photobucket.com/albums/v286/willowtree84/lj_layout/shared_layouts/layout_010/brown/footer.png) 0 0 no-repeat;
    clear: both;
}

ul.navheader li, ul.navfooter li {
    padding: 0 25px 0 25px;
    display: inline;
}

.title, .subtitle {display: none;}

.clearfoot {
    clear: both;
    display: none;
}


/* ------------------- SIDEBAR ------------------- */
.defaultuserpic {
    text-align: center;
    margin: 0 auto;
    background: url(http://img.photobucket.com/albums/v286/willowtree84/lj_layout/shared_layouts/layout_010/brown/defaultuserpic.png) 0 20px no-repeat;
    width: 134px;
}

.sbarbody {padding: 0;}
.sbarbody2 {
    margin: 0;
    padding: 10px 23px;
    text-align: justify;
}

table.calendar {
    margin: 0 auto;
    text-align: center;
}

.sbarcalendar {border: 1px #877033 solid;}

.sbarcalendarposts {
    border: 1px #877033 solid;
    background-color: #877033;
}
.sbarcalendarposts a:link, 
.sbarcalendarposts a:visited, 
.sbarcalendarposts a:active {color: #2C0400;}
.sbarcalendarposts a:hover, 
.sbarcalendarposts a:focus {color: #472400;}

ul.sbarlist {
    padding-left: 0;
    margin: 0;
    list-style: none;
}
#sidebar_calendar ul.sbarcontent {
    margin: 0;
    padding: 10px;
}
#sidebar_tags ul.sbarcontent, #sidebar_summary ul.sbarcontent, #sidebar_linklist ul.sbarcontent {
    margin: 0;
    padding: 10px 23px;
}

li.sbartitle {
    list-style: none;
    padding: 0 0 7px 23px;
    margin: 20px 0 0 0;
    text-align: left;
    text-transform: uppercase;
    font-weight: bold;
    font-size: 0.9em;
    background: transparent url(http://img.photobucket.com/albums/v286/willowtree84/lj_layout/shared_layouts/layout_010/brown/sidebartitle.png) bottom center no-repeat;
}


/* ------------------- MAINCONTENT ------------------- */
#content .ljuser a {border: none;}

.entry {
    margin: 0;
    padding: 0 15px 0 10px;
    text-align: justify;
    font-size: 1.1em;
    line-height: 1.3em;
    background: #472400 url(http://img.photobucket.com/albums/v286/willowtree84/lj_layout/shared_layouts/layout_010/brown/entry.png) top right repeat-y;
}

.entry ul, .entry ol {
    padding: 5px 25px 0 15px;
    margin: 10px auto 0 auto;
    width: 340px;
    list-style: none;
}
.entry ul li, .entry ol li {
    padding: 0 0 0 20px;
    background: url(http://img.photobucket.com/albums/v286/willowtree84/lj_layout/shared_layouts/layout_010/brown/bullet.png) 0 .1em no-repeat;
}

.entry a img, .userpic a img, .userpicfriends a img, .Userpic a img {border: none;}


.userpic, .userpicfriends {
    position: relative;
    float: left;
    padding: 0;
    margin: 18px 5px 5px 0;
    text-align: center;
    z-index: 15;
    background-color: transparent !important;
}
*+html .userpic, *+html .userpicfriends, * html .userpic, * html .userpicfriends {display: none;}
.userpic img, .userpicfriends img {
    padding: 10px 8px;
    background: transparent url(http://img.photobucket.com/albums/v286/willowtree84/lj_layout/shared_layouts/layout_010/brown/userpic.png) 0 0 no-repeat !important;
}
.userpic a, .userpicfriends a {border: none;}

.datesubject {
    margin: 0;
    padding: 6px 10px 0 9px;
    width: 494px;
    height: 68px;
    text-align: right;
    text-transform: uppercase;
    color: #AA8633;
    font-size: 0.9em;
    background: #452100 url(http://img.photobucket.com/albums/v286/willowtree84/lj_layout/shared_layouts/layout_010/brown/datesubject.png) 0 0 no-repeat;
}
* html .datesubject {
    width: 490px;
    margin-right: auto;
}
.date {padding-right: 5px;}
.subject {
    padding: 7px 0 0 0;
    font-weight: bold;
}

.ljtags {
    margin-top: 25px;
    font-weight: bold;
}
.ljtags a:link, 
.ljtags a:visited, 
.ljtags a:active, 
.ljtags a:hover, 
.ljtags a:focus, 
.currents a:link, 
.currents a:visited, 
.currents a:active, 
.currents a:hover, 
.currents a:focus {font-weight: normal;}

.currents, .ljtags {font-size: 0.9em;}
.currents img {display: none;}

.comments {
    margin: 0 -15px 0 -10px;
    padding: 33px 15px 0 10px;
    height: 41px;
    clear: left;
    text-align: right;
    text-transform: uppercase;
    font-size: 0.8em;
    background: #452100 url(http://img.photobucket.com/albums/v286/willowtree84/lj_layout/shared_layouts/layout_010/brown/comments.png) 0 0 no-repeat;
}


/* ------------------- MAINCONTENT -- year/achive pages ------------------- */
ul.year {
    text-align: center;
    margin: 20px 0 0 0;
    padding: 0;
}

ul.year li {display: inline;}

table.yeartable {
    margin: 25px auto 0 auto;    
    padding: 10px 20px;
    width: 380px;
    background: #2C0400 url(http://img.photobucket.com/albums/v286/willowtree84/lj_layout/shared_layouts/layout_010/brown/blockquote.png) 0 0 repeat-y;
}
*+html table.yeartable, * html table.yeartable {background: none;}

table.yeartable td.yeardate, 
table.yeartable td.yearday {border: 1px #877033 solid;}

table.yeartable td.yearday {
    background-color: #877033;
    color: #2C0400;
    text-align: center;
}

td.yearmonth {border-style: none;}

table.yeartable td.yeardate a {border: none;}

/* ------------------- MAINCONTENT --  entry, reply pages ------------------- */
.datesubjectcomment {
    background-color: #877033 !important;
    padding: 5px;
    color: #2C0400;
}
.datesubjectcomment a:link, 
.datesubjectcomment a:visited, 
.datesubjectcomment a:active, 
.datesubjectcomment a:hover, 
.datesubjectcomment a:focus {color: #2C0400;}

.userpiccomment {
    position: relative;
    float: left;
    background-color: #FFF;
    padding: 2px;
    margin: 0 5px 5px 0;
    z-index: 15;
    border: 1px #5D330A solid;
}

.box {
    border: none;
    margin-right: 5px;
    padding: 10px;
    text-align: left;
}
.box font {color: #877033;}
.box form#qrform table {
    border: 1px #877033 solid !important;
    margin-top: 10px;
    padding: 10px;
    background-color: #472400;
}

input, textarea, select, submit, button {
    background-color: #FFF;
    color: #472400;
    border: 1px #5D330A solid;
}

textarea.textbox {
    width: 100% !important;
    border: 1px #5D330A solid;
}

submit, button {color: #2B2B2B;}

.reply{
    position: relative;
    margin: 20px 30px 10px 30px;
    padding: 25px 10px 10px 10px;
    text-align: left;
    line-height: 125%;
    background-color: #2B2B2B;
    color: #707070;
}

.replytosubject {
    font-weight: bold;
    color: #AA8633;
}

.replytoposter {color: #AA8633;}

.commentreply {
    position: relative;
    margin: 10px 5px;
    color: #877033;
    text-align: justify;
}

.commentbox {
    border: 1px #877033 solid;
    padding: 5px; 
    margin: 10px 0; 
    background-color: #472400;
}
*+html .commentbox, * html .commentbox {height: 120px;}

.commentboxpartial {
    border: 1px #2B2B2B solid;
    padding: 5px; 
    margin: 10px; 
    background-color: #707070;
}

.commentinfo {
    background-color: #877033; 
    margin-top: 10px; 
    width: 100%;
}


/* ------------------- MISC ------------------- */
.clear {height: 15px;}
#maincontent .clear, 
#maincontent .entry .clear {display: none;}

.skiplinks {
    text-align: center;
    padding: 10px 0;
}

.separator {display: none;}

Notes
If you find something wonky or you have any problems with this layout, please let me know.

(Post a new comment)

	shioan 2007-08-04 03:51 pm UTC (link)
	hi, we're using the brown one at classq. thanks for sharing these! is crediting you of course :) (Reply to this) (Thread)

	shioan 2007-08-04 04:37 pm UTC (link)
	by the way, how do I put back the userinfo icon with the username in the entries? (Reply to this) (Parent)(Thread)

willowtree84
2007-08-04 05:30 pm UTC (link)

Thanks, I'm glad you like it :)

What do you mean, the userinfo icon in the entries? Under the userpic? There's usually no icon there in Flexible Squares, it's always just the username...
If that's not what you mean, please provide an example entry so I can understand better.

Also, could you please upload the layout images to your own server or image host? Thank you. :)

(Reply to this) (Parent)(Thread)

	shioan 2007-08-04 06:06 pm UTC (link)
	as I see. I never noticed that with Flexible Squares. thanks for the info. oh yes I will upload them of course ASAP. I just didn't find the time now. I'm still fixing it you see. and I hope you don't mind me tweaking the layout a little. thanks a bunch! :) (Reply to this) (Parent)(Thread)

	willowtree84 2007-08-06 12:06 pm UTC (link)
	Of course, no problem :) (Reply to this) (Parent)

	distilledcharm 2009-02-26 04:54 am UTC (link)
	You are totally awesome for making this. Degrassi is my crack and I am using, will credit! (Reply to this)

Username:		Create an Account Forgot your login or password? Login w/ OpenID
Password:
	Remember Me
	English • Español • Deutsch • Русский…

About

Help

Get Involved

Legal

Store

LJ Labs