Layout 031 : 5TARlite
Click for a Live Preview. | Generator
( Layout ) #031 : 5TARlite
This layout will expand and shrink to your browser size.
( Install ) Step 1 - System
Select Theme
- Select any S2 OPAL layout.
Page Setup
- Ad Placement: Horizontal
(Ignore if you have a paid account.)
← Previous Step | 1 | 2 | 3 | 4 | Next Step →
( Install ) Step 2 - Display
Customize Display
- Always display userpic?: Yes
- Summary Items: 0
Bio
- Define a WebPage for the 5th block to show.
← Previous Step | 1 | 2 | 3 | 4 | Next Step →
( Install ) Step 3 - Stylesheet
Custom CSS
- Use layout's stylesheets: No. IMPORTANT!!
- Custom Stylesheet: /* S2 OPAL --- 5TARlite ---
Wingweaver22 @ Fruitstyle.livejournal.com
Do not remove this note. */
/* --------------------- PAGE --------------------- */
body { background: #eeeeee; font: 11px Trebuchet MS, sans-serif; margin-top: 10px; padding: 0; color: #606060; z-index: 2; }
a, a:visited, a:active { color: #909090; text-decoration: none; border-bottom: 1px solid #dddddd; outline: none; }
a:hover, a:visited:hover, a:active:hover { cursor: help; border-color: #909090; color: #606060; outline: none; }
a:active {border-right: 0; border-left: 0;}
blockquote { background-color: #333333; color: #dddddd; padding: 5px; }
input, textarea, select {background-color: #fafafa; font: 9px Trebuchet MS, sans-serif; border: 1px solid #dddddd; padding: 1px; color: #606060; }
input[type*="submit"]:hover, input[type*="button"]:hover {color: #909090 !important; cursor: help; background: #ffffff !important; }
.border1, .border2, .border3, .border4 {border: 0; padding: 0; margin: 0;}
/* --------------------- HEADER --------------------- */
#header h3 { display: none;}
#headerinfo, #userpic {display: none;}
#nav { text-align: center; text-transform: uppercase; font-size: 9px; }
#nav a {border-bottom: 20px solid #dddddd; padding: 22px 0 22px 0; width: 19.9%; display: block; float: left; color: #ffffff; background: #333333;}
#nav a:hover { color: #909090; }
#nav a { border-color: #bad2d9 ;}
#nav a + a { border-color: #6e7c91; }
#nav a + a + a { border-color: #474f5d;}
#nav a + a + a + a { border-color: #a43564;}
#nav a + a + a + a + a { border-color: #db4f84;}
/* --------------------- BODY --------------------- */
#content {clear: both; background: #ffffff; }
#content table { border-spacing: 0; width: 100%; }
#bodycontent {width: 77%; margin: 0 auto; padding: 1px 0 0 0; border-top: 2px solid #909090; background: #333333; margin-top: 50px;}
.messageholder {width: 74.7%; border-right: 1px solid #dddddd; border-bottom: 1px solid #dddddd; }
.messageholder td {padding: 5px 15px 5px 15px;}
/* --------------------- SIDEBAR --------------------- */
.sidetd {width: 20% !important; border-right: 1px solid #dddddd; }
.columncontent > strong { border-bottom: 1px solid #dddddd; display: block; font-size: 12px; margin-bottom: 10px; color: #606060;
padding: 10px 0 10px 0; text-align: center; background: #fafafa; text-transform: uppercase;}
.columncontent {padding: 0 0 10px 0; border-bottom: 1px solid #dddddd;}
.columnitem {padding: 1px 5px 1px 5px; }
.columnitem a {display: block; font-size: 10px; border: 0; border-bottom: 1px solid #dddddd;}
.columnitem .ljuser a {display: inline; padding: 0;}
.sidetd .border4 + br {display: none;}
.sidetd td.calinitem, .sidetd td.calactitem {text-align: center; font-size: 10px; padding: 0; }
/* --------------------- ENTRY --------------------- */
.entries {}
.entry { border-bottom: 2px solid #dddddd; clear: both; overflow: auto; }
.entrytext a img{ border: 1px solid #dddddd; padding: 3px;}
.entrytext a img:hover {border-color: #909090; }
.subject {font-size: 22px; border-bottom: 1px solid #dddddd; padding: 15px; background: #fafafa; color: #333333; }
.subject a {color: #333333; display: block; border-bottom: 0; }
.subject .ljuser a {display: inline;}
.subject a:hover {color: #909090; }
a.lj_invisible {display: none;}
.userpic2, .entryinfo, .entrylinks {float: right; width: 24.5%; text-align: center; clear: none; }
.userpic2 { margin-top: 1%;}
.userpic2 img {border: 1px solid #dddddd; padding: 3px; }
.userpic2 img:hover {border-color: #909090;}
.userpic2 a {border: 0;}
.entrytext { width: 74.7%; border-right: 1px solid #dddddd; clear: none; min-height: 100px; overflow: auto; height: auto; }
.entrytext > p { padding: 0 15px 0 15px;}
.entryinfo, .entrylinks { font-size: 9px; text-transform: uppercase; clear: both;}
.entryinfo img, .entrydivider {display: none;}
.entrylinks a {display: block; border: 0; }
a[href*="tellafriend.bml"]{display: none;} a[href*="entry.bml"]{display: none;} a[href*="content_flag.bml"]{display: none;}
a[href*="subscriptions"]{display: none;} a[href*="memadd"]{display: none;} a[href*="edittags"]{display: none;} .backtop {display: none;}
.meta {border-top: 1px solid #dddddd; font-size: 10px; padding: 5px 15px 5px 15px; }
/* --------------------- CALENDAR --------------------- */
#cal .entry table { margin: 10px 0 10px 0; border-top: 1px solid #dddddd; }
#cal .entry td {vertical-align: top; text-align: center; border-left: 1px solid #dddddd; border-bottom: 1px solid #dddddd; }
#cal .entry table tr:first-child { background: #fafafa; }
#cal .entry table tr:first-child .bigday { border: 0; }
#cal .entry table tr td:first-child { border-left: 0; }
#cal .bigday { float: left; border-right: 1px solid #dddddd; padding: 3px; }
#cal .entryinfo {margin-top: 1%; font-size: 18px; text-transform: lowercase; }
#cal .entrylinks {margin-top: 1%; }
.notablemessage { border-bottom: 1px solid #dddddd; text-align: center; padding: 5px; }
.notablemessage a {border-bottom: 0; font-weight: normal; }
/* --------------------- TAGS --------------------- */
ul.ljtaglist {padding: 0; margin-left: 5%; }
ul.ljtaglist li { padding: 5px; display: inline-table; width: 30%; border-bottom: 1px solid #dddddd; overflow: auto;}
/* --------------------- COMMENTS --------------------- */
#postform td {border-bottom: 1px solid #dddddd; border-right: 1px solid #dddddd; padding: 2px; background: #ffffff;}
#postform td td:first-child {border-left: 1px solid #dddddd;}
#postform td tr:first-child td {border-top: 1px solid #dddddd;}
.entries > .userpic2 { display: none; }
.entries div .entry {clear: none;}
form .entry {clear: none; margin: 3px; border: 1px solid #dddddd; }
form .entry .entrylinks a {display: inline; }
form .entrytext {margin: 0;}
form .notablemessage {border: 0;}
form .notablemessage b{ font-size: 12px; text-transform: uppercase; }
form .entry .subject {font-size: 12px; font-weight: bold; text-transform: uppercase; color: #606060; padding: 0 5px 0 5px;}
.ljcmtmanage {border: 1px solid #dddddd; padding: 5px; font-size: 10px; background: #ffffff; }
.postedby { border-bottom: 1px solid #dddddd; margin: 0; }
#qrform table {width: 74.9%; padding: 5px; border-right: 1px solid #dddddd !important; position: relative; z-index: 200; background: #ffffff;
border-bottom: 1px solid #dddddd !important; border-top: 0 !important; border-left: 0 !important; }
#qrform .de, #qrform label { font-size: 9px; }
/* --------------------- EXTRA --------------------- */
* html span.ljuser{ background-image: url(img/useryb4.png) !important no-repeat left middle; padding: 10px 8px 0px 0px !important;}
* html span.ljuser img{ visibility: hidden; }
img[src="http://l-stat.livejournal.com/img/userinfo.gif"] { width: 0; height: 0; padding: 12px 8px 0 2px !important;
background: url(http://img291.imageshack.us/img291/4575/useryb4.png) no-repeat;}
img[src="http://l-stat.livejournal.com/img/community.gif"] {width:0; height: 0; padding: 9px 8px 0 2px !important;
background: url(http://i38.tinypic.com/2r6crih.png) no-repeat;}
img[src="http://l-stat.livejournal.com/img/icon_protected.gif"]{width: 0; height: 0; padding: 0 0 10px 10px !important; margin-left: 5px;
background: url(http://img72.imageshack.us/img72/4144/lockedib8.png) no-repeat;}
img[src="http://l-stat.livejournal.com/img/icon_private.gif"]{width: 0; height: 0; padding: 0 0 10px 10px !important; margin-left: 5px;
background: url(http://i34.tinypic.com/14kkvpz.jpg) no-repeat;}
.imagepreview { border-top: 1px solid #dddddd; border-bottom: 1px solid #dddddd; text-align: center; padding: 10px;}
.imagepreview + br + b, .imagepreview + br + br + b {text-align: center; display: block;}
.layoutinfo {margin: 5px; }
.alternating-rows td {border-bottom: 1px solid #dddddd; padding: 3px;}
.layoutinfo div a img {border: 0; }
#lj_controlstrip td{background: #333333; border-right: 1px solid #606060; color: #ffffff; }
#lj_controlstrip a, #lj_controlstrip a:visited, #lj_controlstrip a:active { color: #dddddd !important; text-decoration: none !important;
border-bottom: 1px solid #606060; outline: none; }
#lj_controlstrip a:hover, #lj_controlstrip a:visited:hover, #lj_controlstrip a:active:hover
{ cursor: help; border-color: #909090; color: #ffffff !important; outline: none; }
#lj_controlstrip #lj_controlstrip_statustext { color: #ffffff !important;}
#lj_controlstrip input, #lj_controlstrip select {background-color: #606060 !important; font: 9px Trebuchet MS, sans-serif;
border: 1px solid #909090; padding: 1px; color: #dddddd !important; }
#lj_controlstrip input[type*="submit"]:hover, #lj_controlstrip input[type*="button"]:hover
{color: #ffffff !important; cursor: help; background: #909090 !important; }
div.ContextualPopup div.Inner div.Content { font: 9px Trebuchet MS, sans-serif !important; background: #333333;
padding: 5px; color: #ffffff !important; width: 200px; }
div.ContextualPopup div.Inner div.Content a { text-decoration: none !important; font-weight: normal; text-transform: uppercase;
color: #dddddd !important; border-bottom: 1px solid #909090;}
div.ContextualPopup div.Inner div.Content a:hover { color: #909090 !important; cursor: help; border-color: #606060; }
div.ContextualPopup div.Inner { background-color: transparent !important; border: 0; text-align: right;}
div.ContextualPopup .Userpic { padding: 10px; background: #333333; margin: 0 -60px 0 0;}
Feel like customizing? Use the Custom CSS Generator
← 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
#header {background-image: url(HTTP://URLHERE.PNG); }
;){kind=link}
#nav {padding-top: ###px; }
- Replace HTTP://URLHERE.PNG with your banner url
Replace ### with your banner height (pixels) - Add the code to the bottom of the Custom Stylesheet box
Add a Banner | Replace Colours | Replace Images
( Optional ) Replace Colours
#ffffff#fafafa#eeeeee#dddddd#db4f84#bad2d9#a43564#909090#6e7c91#606060#474f5d#333333
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
