Three Columns

Designer's Comments

Look carefully for specific instructions

************************************
STYLE: Flexible Squares, S2
SCREEN: looks good in anything
Browser: Firefox and Safari tested
ACCOUNT: Free & Paid tested, Plus not sure.
CREDIT: minty_peach
************************************

If you have any additional questions, feel free to contact me at my graphics journal at LJ - (minty_peach.livejournal.com)

this is the original layout entry:
http://minty-peach.livejournal.com/58584.html

Using This Layout

For specific instructions read designer's comments

1. Log into livejournal.com (customize)
2. Set Style System to S2
3. Click on Look and Feel
4. Set Layout to Flexible Squares
5. Click on Custom Options
6. Click on Custom CSS
7. Copy (ctrl c) and paste (ctrl v) code to Custom CSS

Layout Code

Copy and paste to Custom Style Sheet

Help

Set style to Flexible Squares

/* ----------------------
CREATOR -- Minty_Peach.
LAYOUT ID -- Three Column 78.
DO NOT STEAL STYLESHEET. 
------------------------*/

BODY {
margin: 0px 0px 100px 0px;
background-color: #DDDDDD;
text-align: left;
font-size: 11px;
color: #8e8e8e;
font-family: "Tahoma", sans-serif;
}

a, a:link, a:visited {
color: #DD8803;
text-transform: lowercase;
text-decoration: none;
}

a:hover{
color: #999;
text-decoration: none;
}

b, i, s, u { 
color: #DD8803;
}

blockquote {
line-height: 18px;
margin: 0px; 
padding: 5px; 
color: #a5a5a5;
font-size: 11px;
border-top: 2px solid #dddddd;
text-align: justify;
}

p, td {
font-size: 11px;
}

code, kbd, pre, tt {
font-family: tahoma;
}

#content {
width: 800px;
background-color: #FDFDFD;
margin-left: auto;
margin-right: auto;
overflow: hidden;
}

#maincontent {
margin: 0px 170px 0px 160px;
background-color: #FDFDFD;
}

/*---------------- SIDEBAR ----------------*/

#sidebar {
width: 150px;
padding: 0px 15px 0px 15px;
line-height: 18px;
color: #aaaaaa;
font-size: 11px;
text-align: justify;
float: right;
}

.defaultuserpic {
text-align: center;
}

.sbarheader, .sbarbody2, .sbarbody {
padding: 0px 3px 0px 3px;
}

table.calendar {
margin-right: auto;
margin-left: auto;
}

.sbarcalendar {
padding: 2px;
border: 1px solid #ddd;
text-align: center;
color: #bbbbbb;
font-size: 7pt;
}

.sbarcalendarposts {
padding: 2px;
border: 1px solid #ccc;
background: #eee;
text-align: center;
color: #EB8A00;
font-size: 7pt;
}

ul.sbarlist {
list-style: none;
margin-left: 0px;
padding-left: 0px;
}

li.sbaritem {
list-style: none;
background-color: #e3e3e3;
border-right: 5px solid #A3D167;
color: #aaaaaa; 
font-size: 11px;
text-transform: lowercase;
padding: 3px;
margin-bottom: 8px;
}

li.sbaritem:hover {
background-color: #eeeeee;
border-right: 7px solid #DD8803;
color: #999999; 
}

li.sbartitle {
padding: 20px 3px 3px 1px;
list-style: none;
border-bottom: 1px solid #dddddd;
font-size: 14px;
color: #aaaaaa;
text-transform: lowercase;
}

/*---------------- HEADER & FOOTER LINKS ----------------*/

#header { 
float: left;
width: 140px;
padding: 40px 10px 10px 10px;
text-align: right; 
background-color: #FDFDFD;
}

#footer { 
float: left;
width: 140px;
padding: 10px;
text-align: right; 
background-color: #FDFDFD;
clear: both;
}

div#header a, div#header a:link, div#header a:visited, div#footer a, div#footer a:link, div#footer a:visited { 
display: block;
background-color: #e3e3e3;
border-left: 5px solid #A3D167;
color: #DD8803; 
font-size: 11px;
text-transform: lowercase;
padding: 3px;
margin-bottom: 8px;
}

div#header a:hover, div#footer a:hover { 
background-color: #eeeeee;
border-left: 7px solid #DD8803;
color: #999999; 
}

ul.navheader, ul.navfooter { 
padding: 0px; 
margin: 0px; 
}

ul.navheader li, ul.navfooter li { 
display: inline; 
list-style: none; 
padding: 0px; 
margin: 0px;
}

div#header li.view {
display: block;
background-color: #e3e3e3;
border-left: 7px solid #DD8803;
color: #aaaaaa; 
font-size: 11px;
text-transform: lowercase;
padding: 3px;
margin-bottom: 8px;
}

div#footer li.viewing { 
display: none;
}

.clearfoot {
display: none; 
}

/*---------------- TITLE & SUBTITLE ----------------*/

.title	{
display: none;
}

.subtitle {
display: none;
}

/*---------------- TAGS PAGE ----------------*/

.ljtaglist { 
list-style-type: none; 
margin: -1px 20px 0px 20px; 
margin-left: 70px;
width: 50%; 
text-transform: lowercase;
text-align: left; 
}

ul.ljtaglist {
color: #999999;
font-size: 9pt;
text-align: left;
margin-right: auto;
margin-left: auto; 
}

ul.ljtaglist li{
padding: 5px;
margin: 0px;
list-style: decimal-leading-zero;
list-style-position: outside;
}

.ljtaglist li { 
border-bottom: 1px solid #cccccc; 
padding: 7px 4px 7px 25px; 
}

H2 { 
text-align: center; 
padding: 10px;  
font-size: 12px; 
text-transform: uppercase;
}

/*---------------- ENTRIES ----------------*/

.subcontent {
padding: 35px 15px 10px 15px;
background: #FDFDFD;
}

.entry{
margin: 2px;
padding: 2px;
color: #999999;
font-size: 11px;
line-height: 18px;
text-align: justify;
}

.entry ul li {
padding-left: 0px;
margin-left: 0px;
list-style: decimal-leading-zero;
list-style-position: outside;
}

.entry ol li {
padding-left: 0px;
margin-left: 0px;
list-style: decimal-leading-zero;
list-style-position: outside;
}

/*---------------- USERPICS, USERPICS FOR FLIST ----------------*/

.userpic {
display: none;
position: relative;
float: left;
margin: 0px 10px 10px 0px;
z-index: 15;
}

.userpicfriends {
position: relative;
float: left;
background-color: #FDFDFD !important;
margin: 0px 10px 10px 0px;
text-align: left;
font-size: 11px;
z-index: 15;
}

.userpicfriends font {
color: #999999 !important;
text-transform: uppercase;
}

.userpicfriends br {
display: block;
height: 0px;
}

/*---------------- DATE, SUBJECT, COMMENT ----------------*/

.date{
text-align: left;
top: 2px;
color: #bbbbbb;
font-size: 11px;
text-transform: lowercase;
}

.subject {
font-size: 12px;
color: #DD8803;
text-transform: lowercase;
text-align: left;
}

.datesubject {
padding: 3px;
background-color: #e3e3e3;
}

.ljtags {
margin-top: 12px;
color: #333;
font-size: 11px;
font-weight: light;
}

.currents {
background-color: transparent;
}

.currents strong{
font-weight: normal;
font-size: 10px;
color: #999999
text-transform: lowercase;
}

.currentlocation {
padding-left: 17px;
font-size: 7pt;
color: #999999;
background: url('http://cbimg9.com/layouts/08/04/25/27099aa.png') 2px 1px no-repeat;
}

.currentmood {
padding-left: 17px;
font-size: 10px;
color: #aaaaaa;
background: url('http://cbimg9.com/layouts/08/04/25/27099ab.gif') 1px 1px no-repeat;
}

.currentmusic {
padding-left: 17px;
font-size: 10px;
color: #aaaaaa;
background: url('http://cbimg9.com/layouts/08/04/25/27099ac.gif') 0px 1px no-repeat;
}
		
.ljtags { 
margin-top: 20px; 
padding-left: 17px;
text-transform: lowercase;
font-size: 10px;
color: #aaaaaa;
background: url('http://cbimg9.com/layouts/08/04/25/27099ad.gif') 0px 0px no-repeat;
}

.ljtags a, .ljtags a:link, .ljtags a:visited { 
color: #aaaaaa; 
font-size: 11px;
text-transform: lowercase; 
}

.comments {
text-align: center;
color: #aaaaaa;
font-size: 11px;
padding: 5px;
position: relative;
top: 10px;
}

div.comments a, div.comments a:link, div.comments a:visited {
font-size: 11px;
color: #aaaaaa;
text-transform: lowercase;
}

div.comments a:hover {
color: #777777;
}

/*---------------- CALENDAR PAGE ----------------*/

ul.year{
text-align: center;
padding: 10px 10px 10px 10px;
}

ul.year li {
color: #999999;
display: inline;
}

table.yeartable {
margin-left: auto;
margin-right: auto;
padding: 3px;
}

table.yeartable td.yeardate, table.yeartable td.yearday {
color: #999999;
}

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

td.yearmonth {
color: #999999;
border-style: none;
}

/*---------------- HEADER IMAGE ----------------*/

.headerimage {
position: relative;

width: 800px;
height: 147px;

margin-left: auto;
margin-right: auto;
margin-bottom: 0px; 
background-image: url('http://cbimg9.com/layouts/08/04/25/27099ae.png'); 
background-repeat: no-repeat;
}

.separator {
height: 0px;
}

/*---------------- COMMENT PAGE ----------------*/

.clear {
display: none;
height: 0px;
}

.skiplinks {
padding: 15px;
background-color: #FDFDFD;
text-align: center;
font-size: 7pt;
color: #999999;
}

.datesubjectcomment {
background-color: #e3e3e3;
padding: 3px;
}

.userpiccomment {
position: relative;
border: 1px solid #cccccc;
background-color: #FEFEFE;
top: -10px;
left: 0px;
padding: 7px;
margin: 10px 10px -20px 0px;
z-index: 15;
float: left;
}

.box {
padding: 10px;
background: #FDFDFD;
clear: right;
}

input, textarea {
background-color: #eeeeee;
color: #444444;
}

textarea.textbox{
width: 95% !important;
 }

.reply{
position: relative;
margin: 5px 5px 5px 5px;
padding: 5px 5px 5px 5px;
text-align: left;
font-family: "tahoma";
font-size: 11px;
line-height: 125%;
color: #EB8A00;
}

.replytosubject {
font-weight: bold;
}

.commentreply {
position: relative;
padding: 10px 10px 20px 130px;
font-size: 11px;
color: #777777;
}

.commentbox {
border-color: #cccccc;
border-width: 1px;
border-style: solid;
padding: 10px;
margin: 10px;
}

.datesubjectcomment a:link, .datesubjectcomment a:visited {
color: #EB8A00;
}

.datesubjectcomment a:hover {
color: #999999;
}

.commentboxpartial {
border-color: #bbbbbb;
border-width: 1px;
border-style: dashed;
padding: 7px;
margin: 12px;
}

/*----------- TINY USER PICS - PASTE CODES BELOW HERE -----------*/

Layout Comments

Showing latest 7 of 7 comments

clean ans simple.I love it. Thank you

By lisamoon on Nov 2, 2010 10:57 am

love it =)

By Remixless on Jan 26, 2009 11:47 pm

very simple and sleek! is there any way i could put my own header on this?

By michellechai on Oct 22, 2008 3:53 pm

Love it

By Packratofthemind on Jun 9, 2008 10:14 pm

Veryyyy minimalistic. I like it.

By futura on Apr 26, 2008 8:14 pm

I like the banner quite a bit.

By tokyo-rose on Apr 26, 2008 1:01 am

oooooooooo very simple. its cute, i like the swirlies. :]

By aaayotiffany on Apr 25, 2008 9:06 pm

Layout Details

Designer	mintypeach
Submitted on	Apr 25, 2008
Page views	30,173
Favorites	17
Comments	7
Reviewer	Synesthesia
Approved on	Apr 25, 2008

Three Columns

Designer's Comments

Using This Layout

Layout Code

Layout Comments

Layout Details

Layout Tags

Layout Tools

Layout Affiliates