Layout 019 : Dreamscape
Click for a Live Preview.
( Layout ) #019 : Dreamscape
Marche and Ritz from Final Fantasy Tactics Advance! The scan was from Animepaper.
( Install ) Step 1 - System
Select Theme
- Select any S2 Smooth Sailing layout.
Page Setup
- Ad Placement: Between Entries
(Ignore if you have a paid account.)
- Sidebar: 2 Column (sidebar on left)
← Previous Step | 1 | 2 | 3 | 4 | Next Step →
( Install ) Step 2 - Display
Customize Display
- Userinfo Position in Entries: Left
- Wrap Entry text under userinfo: Yes
- Userinfo Position in Comments: Right
- Wrap Comment text under userinfo: Yes
← Previous Step | 1 | 2 | 3 | 4 | Next Step →
( Install ) Step 3 - Stylesheet
Custom CSS
- Use layout's stylesheets: No. IMPORTANT!!
- Custom Stylesheet: /* S2 SMOOTH SAILING --- Dreamscape ---
Wingweaver22 @ Fruitstyle.livejournal.com
Do not remove this note. */
/* ------------------------------ PAGE ------------------------------ */
html {margin:0; padding: 0;}
body {font-family: arial, sans-serif; font-size: 11px; margin: 0; padding: 0; background-color: #78b3c9; color: #808080;
background-image: url(http://i34.tinypic.com/mvjjnm.jpg);}
font, small {font-size: 11px; font-family: arial;}
a, a:visited { color: #479ba9; padding: 0px; border: 0; text-decoration: none;}
a:hover { color: #ffffff; cursor: help; background-color: #afd6dd;}
input, textarea, select { background-color: #c9e1e0; font-family: tahoma; font-size: 10px; color: #ffffff; border: 1px solid #ffffff; margin-top: 5px; }
.pageblock{ padding: 0; border-left: 5px solid #ffffff; border-right: 5px solid #ffffff; margin: 0 auto; width: 650px;}
.pagefooterblock { display: none; }
/* ------------------------------ HEADER ------------------------------ */
.pageheaderblock { background-image: url(http://i35.tinypic.com/6ycrp1.jpg);
background-repeat: no-repeat; background-position: center bottom; height: 400px; width: 410px; margin: 0 auto;
border-left: 120px solid #a3ccd0; border-right: 120px solid #a3ccd0; background-color: #c9e1e0;}
.header-subtitle, .header-title , .header-icon {display: none;}
.header-menu { margin: 0; }
.header-menu a {font-size: 30px; text-transform: lowercase; font-family: arial narrow; letter-spacing: -1px; line-height: 18px; display: block; }
.header-menu a, .header-menu a:visited { color: #dfeeef; padding: 0px; border: 0; text-decoration: none;}
.header-menu a:hover { color: #ffffff; cursor: help; border-left: 5px solid #ffffff; padding: 0 0 0 10px; }
.header-menu ul { padding: 10px 0 0 5px; text-align: left; margin: 0 0 0 410px;}
.header-menu li { display: block; width: 115px;}
/* ------------------------------ BODY ------------------------------ */
.bodyblock { width: 400px; margin: 0 auto; background-color: #c9e1e0; border-left: 120px solid #a3ccd0; border-right: 120px solid #a3ccd0; padding: 0 5px 0 5px;}
.bodyheaderblock {display: none;}
.bodynavblock { background-color: transparent; margin-top: 5px; text-align: left;}
.bodynavblock a, .bodynavblock a:visited {color: #808080; background-color: transparent;border: none;text-align: left;}
.body-title { display: none; }
.body-midtitle { display: none; }
/* ------------------------------ SIDEBAR ------------------------------ */
.sidebar {position: absolute; margin: -390px 0 0 -115px; width: 100px; text-align: right; color: #ffffff;}
.sidebar a {margin: 0; padding: 0 3px 0 3px; color: #ffffff;}
.sidebar img{ border:0; padding: 0; margin: 0; background-color: transparent;}
.sidebox{display: block; }
.sideboxTitle {font-size: 30px; text-transform: lowercase; font-family: arial narrow; letter-spacing: -1px; color: #dfeeef; line-height: 18px;}
.sideboxContent {padding: 10px 0 10px 0;}
.latestmonth-inactive { padding: 0px; margin: 1px; }
.latestmonth-active { padding: 0px; margin: 0px; }
#tags_sidebox a, .listitem a { display: block; font-size: 10px; border-bottom: 1px dashed #dfeeef;}
#tags_sidebox, .listitem { font-size: 0; }
#tags_sidebox a:hover, .listitem a:hover{border-right: 5px solid #ffffff; padding: 0 10px 0 0;}
.profile-label { display: none; }
/* ------------------------------ ENTRIES ------------------------------ */
.entryHolder { width: 400px; margin: 0 0 10px 0;}
.entryHolder a img:hover { border-color: #dfeeef; }
.entryUserinfo {font-weight: normal; position: absolute; margin: -35px 0 0 405px; border: 1px dashed #ffffff; padding: 4px;}
.entryUserinfo-usericon {}
.entryUserinfo-usericon img { border: 5px solid #c9e1e0; background-color: #444444;}
.entryUserinfo-username {position: absolute; margin: 10px 0 0 0;}
.entryText { text-align: left; line-height: 10px; padding: 10px;}
.entryText b{text-transform: uppercase;}
.entryText img { border: 1px dashed #ffffff; padding: 4px; background-color: transparent; margin: 10px 2px 2px 2px; }
.commentText {min-height: 10px; border-bottom: 1px dashed #ffffff; margin-bottom: 5px;}
.ljcmt_full .commentText {min-height: 80px;}
.entryHeader {margin: 0 0 10px 0; min-height: 26px; border-left: 10px solid #ffffff;}
.entryHeader img {border:0; margin: 0; padding: 0; background-color: transparent;}
.entryHeaderSubject { text-transform: lowercase; letter-spacing: -1px; font-size: 26px; color: #ffffff; font-family: arial narrow;
margin: 0 0 0 -7px; position: absolute; }
.entryHeaderDate{ letter-spacing: 4px; color: #ffffff; text-transform: uppercase; font-size: 10px;
border-top: 1px dashed #ffffff; width: 390px; margin: 26px 0 0 -10px; position: absolute; background-color: #afd6dd; padding: 0 0 0 10px;}
.entryLinkbar {text-transform: uppercase; text-align: center; font-size: 10px; border-top: 1px dashed #ffffff; padding: 0 40px 0 0;}
.entryLinkbar a, .entryLinkbar a:visited {padding: 0 5px 0 5px;}
.entryLinkbar ul { margin: 0; }
.entryLinkbar li { display: inline; }
a[href*="entry.bml"], a[href*="tellafriend.bml"], a[href*="memadd.bml"], a[href*="content_flag.bml"] {display:none; padding: 0;}
/* ------------------------------ META ------------------------------ */
.entryMetadata { margin-top: 8px;}
.entryMetadata img { padding: 5px; border:0 ;}
.entryMetadata ul { margin: 0; padding: 1px; }
.entryMetadata li { list-style: none; display: block; padding: 2px 0 0 0;}
.entryMetadata a { padding: 0 4px 0 4px; }
.entryMetadata-label {text-transform: uppercase; font-size: 10px; letter-spacing: 1px;}
/* ------------------------------ FOOTER ------------------------------ */
#footer-menu li {display: inline; padding: 0 5px 0 5px;}
#footer-menu ul {text-transform: uppercase; font-size: 10px; margin: 5px 0 0 0; padding: 10px; border-top: 1px dashed #ffffff; text-align: center;}
#footer-menu a, #footer-menu a:visited { color: #479ba9; padding: 0px; border: 0; text-decoration: none;}
#footer-menu a:hover { color: #ffffff; cursor: help; background-color: #afd6dd;}
/* ------------------------------ COMMENT PAGE ------------------------------ */
.commentHolder {}
.commentUserinfo {font-weight: normal; position: absolute; margin: -35px 0 0 5px; border: 1px dashed #ffffff; padding: 4px;}
.commentUserinfo-usericon img { border: 5px solid #c9e1e0; background-color: #444444;}
.commentUserinfo-username {position: absolute; margin: 10px 0 0 0;}
.commentText { min-height: 110px; padding: 10px;}
.commentHeader { letter-spacing: 1px; color: #ffffff; text-transform: uppercase; font-size: 10px;
border-top: 1px dashed #ffffff; background-color: #afd6dd; padding: 0 0 0 10px; }
.commentHeaderScreened { background-color: #479ba9; }
.commentLinkbar ul { margin: 0 0 10px 0; color: #808080; }
.commentLinkbar li { display: inline; padding: 0 5px 0 5px; }
#commenttext{ width: 100%; }
#qrform table {border: 1px solid #ffffff !important;}
/* ------------------------------ ARCHIVE PAGE ------------------------------ */
.month { width: 400px; margin: 0 0 10px 0; }
.daytitles {background-color: #afd6dd; padding: 0 5px 0 5px; text-align: center; border-top: 1px dashed #ffffff;}
.entryHeader a{ text-transform: lowercase; letter-spacing: -1px; font-size: 26px; color: #ffffff; font-family: arial narrow; padding: 0 0 0 10px;}
.day-blank { }
.day { border: 1px solid #ffffff;}
.day-date {border-bottom: 1px dashed #ffffff; background-color: #a3ccd0; padding: 2px; }
.day-count {width: 100%; text-align: right; }
.day-count a{ background-color: #ffffff; display: block;}
.day-count a:hover {background-color: #afd6dd; border-right: 3px solid #ffffff; padding: 0 5px 0 0;}
/* ------------------------------ TAGS PAGE ------------------------------ */
/* tags container */
.tagstable td { font-size: 10px; padding: 0; margin:0;}
.tagstable { text-transform: lowercase; letter-spacing: 1px; width: 400px; padding: 0; margin: 0; }
.tagstable td a{display: block; padding: 2px 0px 2px 0px; border-bottom: 1px dashed #ffffff; margin: 0 5px 0 0;}
.tagstable td a:hover{ border-left: 3px solid #ffffff; padding: 2px 0px 2px 5px;}
/* ------------------------------ EXTRAS ------------------------------ */
::-moz-selection { background: #4fa3c6; color: #ffffff;}
::selection { background: #4fa3c6; color: #ffffff;}
code::-moz-selection { background: #4fa3c6; color: #ffffff;}
code::selection { background: #4fa3c6; color: #ffffff;}
div.ContextualPopup { margin: 10px 0 0 0px; font: normal 10px "arial" !important; }
div.ContextualPopup img { border-left: 1px solid #eeeeee; border-right: 1px solid #eeeeee; padding: 0 5px 0 5px; margin: 0 1px 0 5px !important;}
div.ContextualPopup div.Inner { color: #ffffff !important; background-color: #c9e1e0 !important; border: 1px solid #ffffff; padding: 0px; width: 220px; text-align: right;}
div.ContextualPopup div.Inner a, div.ContextualPopup div.Inner a:visited { text-decoration: none !important; font-weight: normal; color: #479ba9 !important;}
div.ContextualPopup div.Inner a:hover {color: #ffffff !important;}
#lj_controlstrip {top: 0;left: 0;width: 100%;height: 45px;position: absolute;background-color: #ffffff !important;}
#lj_controlstrip table { margin: 0; padding: 0; width: auto; background-color: #ffffff !important;}
#lj_controlstrip td {background-color: #ffffff !important; font-family: arial; color: #a3ccd0;}
#lj_controlstrip a {color: #479ba9;}
.ljuser img{margin: 0; padding: 0; border: 0; background-color: transparent;}
;}){kind=link}
;){kind=link}
← Previous Step | 1 | 2 | 3 | 4 | Next Step →
( Install ) Step 4 - Link Back
Please link back to fruitstyle so others can find my layouts. Put either a button or the code in your Userinfo.
ButtonCode
View available buttonsLayout by fruitstyle
← Previous Step | 1 | 2 | 3 | 4 | Next Step →
( Optional ) Add a Banner
The recommended banner size is 400px wide and 400px high.
Replace the image in the CSS.
Add a Banner | Replace Colours | Replace Images
( Optional ) Replace Colours
#ffffff#dfeeef#c9e1e0#afd6dd#a3ccd0#808080#78b3c9#479ba9#444444
How do I replace layout colours?
Add a Banner | Replace Colours | Replace Images
( Optional ) Replace Images
Get all the images at Box.net
How do I replace layout images?
Add a Banner | Replace Colours | Replace Images
Fruitstyle: Layouts and Winamp Skin Designs by Malionette
