Tranquil Dream

Designer's Comments

Look carefully for specific instructions

First of all, what would normally be a "sidebar" has been converted into a "topbar". I suggest only setting your BLURB to view.

************************************
STYLE: Flexible Squares, S2
SCREEN: looks good in anything
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 enrty:
http://minty-peach.livejournal.com/54768.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

/* BY: Minty_Peach -- (http://minty_peach.livejournal.com)
DO NOT REMOVE THIS SECTION
DO NOT EDIT AND REPOST AS YOUR OWN */

BODY {
margin: 100px 0px 50px 0px;
background-color: #111111;
text-align: left;
font-size: 10px;
color: #8e8e8e;
font-family: "Verdana", sans-serif;
background-image: url('');
background-repeat: repeat;
}

i, s, u { 
color: #afafaf; 
}

a, a:link, a:visited {
color: #F53F3F;
font-style: italic;
text-transform: lowercase;
text-decoration: none;
}

a:hover{
color: #555555;
}

blockquote {
margin: 7px; 
padding: 7px; 
color: #777777;
background-color: #f5f5f5;
font-size: 10px;
border: 1px solid #cccccc;
text-align: justify;
line-height: 16px;
}

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

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

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

#maincontent {
margin: 0px 0px 0px 0px;
}

#sidebar {
width: 740px;
padding: 30px;
color: #777777;
background-color: #f5f5f5;
font-family: "verdana" Helvetica, sans-serif;
font-size: 10px;
line-height: 16px;
text-align: justify;
float: center;
border-bottom: 30px solid #111111;
}

.defaultuserpic {
float: left;
padding: 7px;
background-color: #FDFDFD;
margin-bottom: 10px;
margin-right: 20px;
margin-top: -20px;
border: 1px solid #cccccc;
}

.sbarheader {
padding: 0px 4px 0px 4px;
}

.sbarbody {
padding: 0px 4px 0px 4px;
}

.sbarbody2 {
padding: 0 4px 0 4px;
}

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

.sbarcalendar {
padding: 3px;
border: 1px solid #ddd;
background: #FEFEFE;
text-align: center;
font-family: "Verdana", Helvetica, sans-serif;
color: #bbbbbb;
font-size: 10px;
}

.sbarcalendarposts {
padding: 3px;
border: 1px solid #ccc;
background: #eee;
text-align: center;
font-family: "Verdana", Helvetica, sans-serif;
color: #EB8A00;
font-size: 10px;
}

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

li.sbaritem {
padding-left: 5px;
list-style: none;
}

li.sbaritem:hover {
background-color: #eeeeee;
}

li.sbartitle {
list-style: none;		
text-align: left;
text-transform: lowercase;
color: #eeeeee;
font-family: "arial" Helvetica, sans-serif;
font-size: 1pt;
}

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

/**************************************************** 
HEADER & FOOTER LINKS - NOT THE HEADERIMAGE
**************************************************/

#header { 
width: auto;
line-height: 20px;
padding-top: 20px;
text-align: center; 
background-color: #f5f5f5;
font-size: 11pt; 
color: #cccccc;
text-transform: uppercase;
font-style: italic;
}

#footer { 
width: auto;
line-height: 30px;
text-align: center; 
background-color: #FDFDFD;
font-size: 11pt; 
color: #cccccc;
clear: both;
text-transform: uppercase;
font-style: italic;
}

div#header a, div#header a:link, div#header a:visited { 
color: #aaaaaa; 
font-size: 11pt;
text-transform: uppercase;
}

div#footer a, div#footer a:link, div#footer a:visited { 
color: #aaaaaa; 
font-size: 11pt; 
text-transform: uppercase;
}

div#header a:hover { 
color: #777777; 
}

div#footer a:hover {
color: #777777; 
}

ul.navheader { 
padding: 0 3px 0 3px; 
margin: 0 3px 0 3px; }

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

div#header li.view { 
color: #bbbbbb;
}

div#footer li.viewing {
color: #bbbbbb;
}

#footer .viewing { 
display:none; 
}

ul.navfooter {
padding: 0 2px 0 2px; 
margin: 0 2px 0 2px;
}

ul.navfooter li {
display: inline;
margin: 0 0px 0 0px;
}

.clearfoot {
clear: both;
}

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

ul.navfooter li {
display: inline;
margin: 0 0px 0 0px;
}

/******************* title & subtitle *********************/

.title	{
display: none;
}

.subtitle {
display: none;
}

/******************************* TAGS PAGE LAYOUT ********************************/

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

.ljtaglist li { 
background: #FDFDFD;
border-bottom: 1px solid #cccccc; 
padding: 6px 3px 6px 20px; 
color: #666666; 
}

H2 { 
background: #FDFDFD;
margin: 30px; 
text-align: left; 
padding: 10px; 
line-height: 12px; 
font-weight: normal; 
font-style: italic; 
font-size: 12px; 
text-transform: uppercase;
font-family: arial; 
color: #888888; 
}

/***********************************************
ENTRY, TAGS LIST, SUB CONTENT, EXTRA
***********************************************/

ul.ljtaglist {
color: #bbb;
font-family: "Tahoma", Helvetica, sans-serif;
font-size: 9pt;
padding: 8px 8px 8px 12px;
text-align: left;
margin-right: auto;
margin-left: auto; 
padding: 25px;
}

.subcontent {
padding: 30px;
background: #FDFDFD;
}

.entry{
margin: 0px;
padding: 5px 135px 5px 5px;
color: #666666;
font-family: "verdana" Helvetica, sans-serif;
font-size: 10px;
line-height: 16px;
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, FRIENDS PAGE USERPICS, DATE, SUBJECT &MORE
************************************************/

.userpic {
position: relative;
float: right;
padding: 7px;
margin: 0px 0px 5px 5px;
z-index: 15;
background-color: #FFFFFF;
border: 1px solid #cccccc;
}

.userpicfriends {
position: relative;
float: right;
padding: 7px;
margin: 0px 0px 5px 5px;
text-align: right;
font-size: 7pt;
z-index: 15;
background-color: #FFFFFF !important;
border: 1px solid #cccccc;
}

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

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

.date {
text-align: left;
font-weight: normal;
font-style: italic;
padding-left: 13px;
color: #999999;
font-size: 8pt;
text-transform: uppercase;
background: url('http://cbimg9.com/layouts/08/04/13/26826aa.png') 0px 1px no-repeat;
}

.subject {
text-align: left;
padding-bottom: 1px;
color: #666666;
font-style: italic;
font-size: 8pt;
text-transform: uppercase;
padding-left: 13px;
}

.subject a, .subject a:link, .subject a:visited {
color: #aaaaaa;
text-transform: lowercase;
}

.subject a:hover {
color: #999;
}

.datesubject {
padding: 3px;
border-bottom: 1px solid #cccccc;
}

.currents strong{
font-weight: normal;
text-transform: uppercase;
font-size: 7pt;
color: #999999;
}

.currentlocation {
padding-left: 12px;
font-size: 7pt;
background: url('http://cbimg9.com/layouts/08/04/13/26826ab.png') 0px 2px no-repeat;
}

.currentmood {
padding-left: 12px;
font-size: 7pt;
background: url('http://cbimg9.com/layouts/08/04/13/26826ab.png') 0px 2px no-repeat;
}

.currentmusic {
padding-left: 12px;
font-size: 7pt;
background: url('http://cbimg9.com/layouts/08/04/13/26826ab.png') 0px 2px no-repeat;
}
		
.ljtags { 
margin-top: 25px; 
padding-left: 12px;
text-transform: uppercase;
font-size: 7pt;
color: #999999;
background: url('http://cbimg9.com/layouts/08/04/13/26826ab.png') 0px 2px no-repeat;
}

.comments {
font-family: "Verdana", sans-serif;
font-size: 10pt;
text-align: center;
font-weight: none;
padding: 5px;
position: relative;
color: #aaaaaa;
top: 10px;
}

div.comments a, div.comments a:link, div.comments a:visited {
color: #aaaaaa;
padding: 10pt;
text-transform: uppercase;
}

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

/***********************************************
ARCHIVE PAGE/CALENDAR
******************************************/

ul.year{
text-align: center;
padding: 4px 4px 4px 4px;
border: 0px solid #454545;
}

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

table.yeartable {
margin-left: auto;
margin-right: auto;
padding: 4px;
border: 0px solid #454545;
}

table.yeartable td.yeardate, table.yeartable td.yearday {
color: #888888;
padding: 4px;
border: 1px solid #999999;
text-align: center;
}

table.yeartable td.yearday {
background: #cccccc;
border: 1px solid #aaaaaa;
padding: 4px;
text-align: center;
}

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

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

.headerimage {
position: relative;
width: 0px;
height: 0px;
margin-left: auto;
margin-right: auto;
margin-bottom: 0px; 
background-image: url(''); 
background-repeat: no-repeat;
}

.separator {
height: 30px;
background-color: #111111;
}

/*********************************************** 
COMMENT PAGES 
******************************************/

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

.skiplinks {
text-transform: lowercase;
text-align: center;
background: #FDFDFD;
padding: 15px;
color: #999999;
border-bottom: 1px dashed #bbbbbb;
}

.datesubjectcomment {
background-color: #eeeeee;
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 {
border-style: dashed;
border-width: 0px 0px 0px 0px;
border-color: #ffffff;
padding: 15px;
background: #FFFFFF;
clear: left;
}

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: 10px;
line-height: 125%;
color: #EB8A00;
}

.replytosubject {
font-weight: bold;
}

.commentreply {
position: relative;
padding: 10px 10px 20px 130px;
font-size: 10px;
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;
}

.commentinfo {
margin-top: 10px;
width: 100%;
}

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

Layout Comments

Showing latest 7 of 7 comments

Sorry, but how do I insert a header into this layout? This probably won't get answered but I thought I'd give it a try. ANYWAY, whenever I try to insert the header it reverts back to the base layout (flexible squares). I'm generally crap at HTML, so can anyone help me with this? D:

By kaeli123 on Apr 4, 2009 12:35 am

Is there a way I can take my advertisement from the top of the page to the bottom? it just doesn't look as nice with the AD being the first thing you see.

By itsnotaphase on Jul 24, 2008 11:41 pm

hey minty peach, quick question! i added this layout to 6feet.livejournal.com and it didn't turn out like it!!

please help!

By 6Feet on Apr 30, 2008 3:55 am

Livejournal has since changed their method of using CSS layouts, I have step by step instructions here:

http://minty-peach.li vejournal.com/6396.html

By mintypeach on Apr 27, 2008 10:33 pm

where do you see the look and feel tab?

By miisha on Apr 20, 2008 9:01 pm

If it's the live preview, I have no control over it. But you can view it in it's original entry at my livejournal, here:

http://minty-peach.li vejournal.com/54768.html

By mintypeach on Apr 13, 2008 12:28 pm

uhh, the preview isn't working for me.

By aaayotiffany on Apr 13, 2008 3:12 am

Layout Details

Designer	mintypeach
Submitted on	Apr 12, 2008
Page views	37,839
Favorites	16
Comments	7
Reviewer	pandora
Approved on	Apr 13, 2008

Tranquil Dream

Designer's Comments

Using This Layout

Layout Code

Layout Comments

Layout Details

Layout Tags

Layout Tools

Layout Affiliates