Layout 010 : Glass | 011 : Carbon: fruitstyle

malionette in fruitstyle

Layout 010 : Glass | 011 : Carbon

Mar 09, 2008 21:34

Click for a Live Preview.

( Layout ) #010 : Glass
The twins, Glass and Carbon!

( Install ) Step 1 - System

Select Theme

Select any S2 Smooth Sailing layout.

Page Setup

Ad Placement: Horizontal
(Ignore if you have a paid account.)
Sidebar: 2 Column (sidebar on right)

← Previous Step | 1 | 2 | 3 | 4 | Next Step →

( Install ) Step 2 - Display

Customize Display

Userinfo Position in Entries: Right
Wrap Entry text under userinfo: Yes
Userinfo Position in Comments: Right

← 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 --- Glass ---
Wingweaver22 @ Fruitstyle.livejournal.com
Do not remove this note. */

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

body {
font-family: tahoma;
font-size: 9px;
margin: 0;
padding: 0;
background-color: #fefefe;
}

.bodyblock > div {display: none;}

a, a:visited{
color: #0fd5dc;
padding: 0px;
background-color: transparent;
border: 0;
text-decoration: none;
}

a:hover {
color: #c7c7c7;
cursor: help;
}

blockquote{
background-color: transparent;
color: #c7c7c7;
margin-left: 0px;
font-size:9px;
padding: 5px;
margin-right: 120px;
}

blockquote:first-line {
letter-spacing: 3px;
color: #0fd5dc;
}

blockquote:hover {
background-color: transparent;
cursor: text;
}

input, textarea, select {
background-color: #fefefe;
font-family: tahoma;
font-size: 9px;
color: #808080;
border: 1px solid #eeeeee;
margin-top: 5px;
}

/* Layout (page) container */

.pageblock{
width: 450px;
margin: 0 auto;
padding: 0 10px 0 10px;
border-right: 1px solid #eeeeee;
border-left: 1px solid #eeeeee;
background-color: #fefefe;
}

.pagefooterblock { display: none; }

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

.pageheaderblock {}

/* title, subtitle, journal icon*/

.header-subtitle, .header-icon, .header-title{
display: none;
}

/* ------------------------------ LINKBAR ------------------------------ */

.header-menu {
position: relative;
width: 430px;
font-family: tahoma;
font-size: 9px;
text-transform: lowercase;
text-align: center;
padding-top: 15px;
}

/* LINKBAR LINK */

.header-menu a, .header-menu a:visited {
padding: 0 5px 2px 5px;
color: #0fd5dc;
word-spacing: -1px;
}

.header-menu a:hover {
color: #c7c7c7;
border-bottom: 1px solid #eeeeee;
cursor: help;
}

.header-menu ul, #footer-menu ul { margin: 0px; padding: 0px; }
.header-menu li, #footer-menu li { display: inline; }

/* ------------------------------ BODY ------------------------------ */

/* Body, contains entries sidebar, and footer */

.bodyblock {
margin-top: 20px;
}

/* body title */

.bodyheaderblock {
display: none;
}

/* body linkbar (top of page, back 20) */

.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;
}

/* contains body title */

.body-title { display: none; }

/* seperates entries from comments - only on comments page */

.body-midtitle { display: none; }

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

/* contains all entries */

.entryHolder {
padding: 0px;
color: #808080;
background-color: transparent;
text-align: justify;
font-family: tahoma;
font-size: 9px;
}

/* welcome note!! */

#welcomenoteText {
padding-bottom: 15px;
margin: 0px;
background-color: transparent;
text-align: justify;

letter-spacing: 0px;
word-spacing: 4px;
}

/* contains userpic and username/community */

.entryUserinfo {
font-family: tahoma;
font-size: 9px;
font-weight: normal;
text-align: center;
padding: 10px;
background-color: transparent;
}

/* userpic */

.entryUserinfo-usericon img {
padding: 5px;
border: 1px solid #eeeeee;
background-color: #fafafa;
height: 50px;
width: 50px;
}

/* all entry's text */

.entryText {
text-align: justify;
word-spacing: 2px;
}

/* contains subject and time */

.entryHeader {
background-color: transparent;
color: #808080;
font-family: tahoma;
border-bottom: 1px #eeeeee solid;
font-size: 9px;
padding: 0px 0px 2px 4px;
margin-bottom: 5px;
letter-spacing: 1px;
font-weight: none;
text-transform: lowercase;
}

/* below vv are actually found on the calendar page */

.entryHeader a{
color: #808080;
background-color: #eeeeee;
padding: 2px 8px 2px 8px;
}

.entryHeader a:hover{
color: #c7c7c7;
background-color: #eeeeee;
padding: 2px 8px 2px 8px;
}

/* entry subject */

.entryHeaderSubject {
font-weight: none;
font-size: 9px;
text-transform: lowercase;
padding-left: 4px;
letter-spacing: 2px;
color: #808080;
}

/* entry date */

.entryHeaderDate{
color: #c7c7c7;
border: none;
letter-spacing: 1px;
padding: 0;
text-decoration : none;
}

/* entry link bar (comment, reply, link, remember) */

.entryLinkbar {
text-transform: lowercase;
text-align: center;
font-size: 9px;
font-family: tahoma;
letter-spacing: 0px;
padding: 20px 0px 0px 0px;
}

.entryLinkbar a, .entryLinkbar a:visited { padding-right: 3px; }
.entryLinkbar a:hover { color: #c7c7c7; background-color: transparent; padding-bottom: 1px; }
.entryLinkbar ul { margin: 0; padding: 10px; }
.entryLinkbar li { padding: 0 4px 0 0; display: inline;}

/* ------------------------------ META ------------------------------ */

.entryMetadata { margin-top: 8px;}
.entryMetadata img { padding: 5px; float: right;}
.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; }

/* metadata subject (mood: , location: ) */

.entryMetadata-label {
padding: 10px;
color: #808080;
font-style: italic;
text-transform: lowercase;
}

/* ------------------------------ FOOTER ------------------------------ */

#footer-menu {
text-transform: lowercase;
text-align: left;
font-family: tahoma;
font-size: 9px;
margin-bottom: 10px;
}

#footer-menu a, .footer-menu a:visited {
padding: 1px 10px 1px 10px;
color: #0fd5dc;
white-space: nowrap;
}

#footer-menu a:hover { color: #808080; }

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

/* sidebar container */

.sidebar {
position: absolute;
width: 100px;
top: 20%;
margin-left: 20px;
color: #808080;
}

.sidebox{
margin: 0 0 10px 0;
display: block;
}

/* sidebar title (note 1, latest month, search) */

.sideboxTitle {
text-transform: lowercase;
font-size: 9px;
letter-spacing: 1px;
border-bottom: 1px #eeeeee solid;
color: #c7c7c7;
padding: 0 0 2px 0;
margin-bottom: 5px;
text-align: right;
}

/* content of all sidebar boxes */

.sideboxContent {
text-align: right;
padding: 3px;
}

/* in the freetext boxes */

.sidebox #freetext { text-align: left; }

/* in the profile, latest month, search boxes */

.sidebox #latestmonth, .sidebox #search, .sidebox #profile { text-align: left; }

/* latest month box (inactive date and active date [link]) */

.latestmonth-inactive { padding: 0px; margin: 1px; }
.latestmonth-active { padding: 0px; margin: 0px; }

/* in the tags box */

#tags_sidebox a { display: block; font-size: 9px; }
#tags_sidebox { font-size: 0; text-align: left;}

/* label of profile box */

.profile-label { display: none; }

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

/* comments holder */

.commentHolder { color: #808080; background-color: #eeeeee; font-family: tahoma; font-size: 9px; margin: 4px 8px 4px 8px; }

/* comment userpics */

.commentUserinfo { text-align: left; margin: 8px 8px 8px 8px; background-color: #eeeeee; }

/* commenter's userpic */

.commentUserinfo-usericon img { padding-bottom: 2px; border: 0; }

/* text of comment */

.commentText { padding: 6px; }

/* comment's header ( contains date, subject) */

.commentHeader { text-transform: lowercase; background-color: #eeeeee; color: #808080;
font-family: tahoma; font-size: 9px; padding: 4px 0 4px 0; }
.commentHeader a{ color: #808080; }

/* for screen comments */

.commentHeaderScreened { font-family: tahoma; font-size: 9px; background-color: #c7c7c7; padding: 4px 0 4px 0; }

/* comment's subject (re: roflcakes) */

.commentHeaderSubject { font-weight: normal; font-family: tahoma; font-size: 9px; }

/* linkbar of comments (reply, delete, screen) */

.commentLinkbar { border-top: none; font-family: tahoma; font-size: 9px; color: #808080;
text-transform: lowercase; padding-bottom: 10px; text-align: left; }
.commentLinkbar a { color: #808080; font-family: tahoma; font-size: 9px; }
.commentLinkbar a:hover { font-family: tahoma; font-size: 9px; color: transparent; }
.commentLinkbar ul { margin: 0; padding: 0; color: #808080; }
.commentLinkbar li { padding: 0px 5px 0px 5px; color: #808080; margin: 0; display: inline; }

/* container of reply box */

.replyform { border: 0px; background-color: #eeeeee; color: #808080; }

/* reply text container */

#commenttext{ width: 100%; }

/* ------------------------------ ARCHIVE PAGE ------------------------------ */

.yearlinks { text-align: right; }
.yearlink{ padding-left:4px; padding-right: 4px; }

/* calendar container (dates, boxes) */

.month { width: 400px; padding-bottom: 5px; margin: 4px 4px 4px 10px; }

/* subject lines (when viewing a month) not individual lines */

.daysubjects { color: #808080; letter-spacing: 1px; padding: 6px 0 6px 0; }

/* days of the week (sun, mon, tue) */

.daytitles { text-align: ; background: #eeeeee; padding: 2px; color: #808080; }

/* blank days */

.day-blank { padding: 2px; }

/* day */

.day { padding: 2px; }

/* NUMBERED DATE */

.day-date { color: #808080; text-align: left; }

/* NUMBER OF ENTRIES MADE ON DAY */

.day-count { width: 50%; text-align: left; float: right; font-size: 9px; }

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

/* tags container */

.tagstable td { padding-top: 5px 0px 5px 0px; }
.tagstable { text-transform: lowercase; letter-spacing: 1px; width: 400px; }

/* ------------------------------ EXTRAS ------------------------------ */

::-moz-selection { background: #eeeeee; color: #808080; }
::selection { background: #eeeeee; color: #808080; }
code::-moz-selection { background: #eeeeee; color: #808080;}
code::selection { background: #eeeeee; color: #808080;}

/*------ Look of contextual Popup ------*/

/* general positioning */
div.ContextualPopup {
margin: 10px 0 0 0px;
font: normal 9px "tahoma" !important;
}
/* userpic */
div.ContextualPopup img {
border-left: 1px solid #eeeeee;
border-right: 1px solid #eeeeee;
padding: 0 5px 0 5px;
margin: 0 1px 0 5px !important;
}
/* defines general look, font color/size/background color*/
div.ContextualPopup div.Inner {
background-color: #fefefe !important;
color: #808080 !important;
border: 1px solid #eeeeee;
padding: 0px;
width: 220px;
text-align: right;
}
/* defines left side of popup without the user icon*/
div.ContextualPopup .Content {
padding: 2px 4px 6px 4px;
}
/* defines the text that shows the relation to the user (XYZ is your mutual friend) */
div.ContextualPopup .Relation {
font-weight: normal !important;
letter-spacing: 2px;
}
/* look of words LJ Talk */
div.ContextualPopup .Content .OnlineStatus {
font-weight: normal;
}
/* element that contains the user icon */
div.ContextualPopup .Userpic {
padding: 4px 4px 0 0;
}
/* defines the look of the links */
div.ContextualPopup div.Inner a, div.ContextualPopup div.Inner a:visited {
text-decoration: none !important;
font-weight: normal;
color: #0fd5dc !important;
}

#lj_controlstrip {
top: 0;
left: 0;
width: 100%;
border-bottom: 1px solid #eeeeee;
height: 50px;
position: absolute;
background-color: #fefefe !important;
}

#lj_controlstrip table { margin: 0; padding: 0; width: auto; background-color: #fefefe !important;}

#lj_controlstrip td {
background-color: #fefefe !important;
font-family: tahoma;
color: #808080;
}

#lj_controlstrip a {
color: #0fd5dc !important;
font-family: tahoma;
font-size: 9px;
text-transform: lowercase;
font-variant: normal;
}

#lj_controlstrip a:hover {
color: #c7c7c7 !important;
cursor: help;
border: 0;
text-decoration: none;
}

#lj_controlstrip img {
background-repeat: no-repeat;
}

#lj_controlstrip a img {
padding: 0; margin: 0; border: 0;
}

#lj_controlstrip form {
padding: 0; margin: 0; border: 0;
}

#lj_controlstrip input {
font-family: tahoma;
font-size: 9px;
color: #808080;
background-color: transparent;
border: 0;
padding: 0; margin: 0;
text-transform: lowercase;
}

#lj_controlstrip select, #lj_controlstrip input#xc_user, #lj_controlstrip input#xc_password, #lj_controlstrip input#xc_remember {
font-family: tahoma;
font-size: 9px;
background-color: #fefefe;
padding: 0; margin: 0;
border: 1px solid #eeeeee;
}

#lj_controlstrip_userpic {
vertical-align: top;
width: 50px;
height: 50px;
}

#lj_controlstrip_userpic img{
vertical-align: top;
width: 50px;
height: 50px;
}

#lj_controlstrip_user {
text-align: left;
vertical-align: middle;
padding: 0 10px 0 10px;
white-space: nowrap;
}

#lj_controlstrip_actionlinks {
text-align: left;
vertical-align: middle;
padding: 0 1em 0 1em;
white-space: nowrap;
}

#lj_controlstrip_statustext {
font-size: 9px;
color: #808080 !important;
font-weight: normal;
letter-spacing: 2px;
}

#lj_controlstrip_login {
vertical-align: middle;
padding-left: 10px;
white-space: nowrap;
}

#lj_controlstrip_loggedout_userpic {
}

#lj_controlstrip_user, #lj_controlstrip_login, #lj_controlstrip_loggedout_userpic, #lj_controlstrip_actionlinks {
border: 0;
}

#lj_controlstrip_search {
border: 0;
}

#lj_controlstrip_loggedout_userpic {
background-image: url(/img/controlstrip/ljlogo-dark-loggedout.gif);
background-repeat: no-repeat;
background-position: top left;
}

#lj_controlstrip_cprod {
position: absolute;
top: 5px;
right: 10px;
text-align: right;
}

#lj_controlstrip_cprod a {
padding: 0 1px 0 1px;
}

#lj_controlstrip_search {
padding-left: 1em;
vertical-align: middle;
text-align: left;
}

.lj_controlstrip_search_sup {
padding-left: 0;
width: 35%;
text-align: center;
}

#lj_controlstrip_search_input_text {
background: #fefefe !important;
position: relative;
z-index: 100;
}

.lj_controlstrip_search_input_text_sup {
width: 100% !important;
}

#lj_controlstrip_search_submit {
position: relative;
z-index: 100;
}

/* so that IE users will see a new image */
* html span.ljuser{
background-image: url(http://img291.imageshack.us/img291/4575/useryb4.png) !important;
background-repeat: no-repeat;
background-position: left middle;
padding: 10px 8px 0px 0px !important;
}

* html span.ljuser img{ visibility: hidden; }

.ljuser img[src="http://l-stat.livejournal.com/img/userinfo.gif"] {
width: 0;
height: 0;
background-repeat: no-repeat;
background-image: url(http://img291.imageshack.us/img291/4575/useryb4.png) !important;
padding: 10px 8px 0 4px !important;
}

.ljuser img[src="http://l-stat.livejournal.com/img/community.gif"] {
width:0;
height: 0;
background-repeat: no-repeat;
background-image: url(http://img401.imageshack.us/img401/7833/communityei5.png) !important;
padding: 11px 8px 0 4px !important;
}

img[src="http://l-stat.livejournal.com/img/icon_protected.gif"]{
width: 0;
height: 0;
padding: 0 0 10px 10px;
background: url(http://img72.imageshack.us/img72/4144/lockedib8.png);
}

img[src="http://l-stat.livejournal.com/img/icon_private.gif"]{
width: 0;
height: 0;
padding: 0 0 10px 10px;
background: url(http://img329.imageshack.us/img329/4985/privatevy7.png);
}

← 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 450px wide.
.pageheaderblock {background: url(HTTP://URLHERE.PNG) no-repeat bottom center; padding-bottom: ###px; }.header-menu {margin-bottom: 10px;}

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

#fefefe#fafafa#eeeeee#c7c7c7#808080#0fd5dc
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

Click for a Live Preview.

( Layout ) #011 : Carbon
The twins, Glass and Carbon!

( Install ) Step 1 - System

Select Theme

Select any S2 Smooth Sailing layout.

Page Setup

Ad Placement: Horizontal
(Ignore if you have a paid account.)
Sidebar: 2 Column (sidebar on right)

← Previous Step | 1 | 2 | 3 | 4 | Next Step →

( Install ) Step 2 - Display

Customize Display

Userinfo Position in Entries: Right
Wrap Entry text under userinfo: Yes
Userinfo Position in Comments: Right

← 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 --- Carbon ---
Wingweaver22 @ Fruitstyle.livejournal.com
Do not remove this note. */

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

body {
font-family: tahoma;
font-size: 9px;
margin: 0;
padding: 0;
background-color: #1a1a1a;
}

.bodyblock > div {display: none;}

a, a:visited{
color: #888888;
padding: 0px;
background-color: transparent;
border: 0;
text-decoration: none;
}

a:hover {
color: #444444;
cursor: help;
}

blockquote{
background-color: transparent;
color: #444444;
margin-left: 0px;
font-size:9px;
padding: 5px;
margin-right: 120px;
}

blockquote:first-line {
letter-spacing: 3px;
color: #888888;
}

blockquote:hover {
background-color: transparent;
cursor: text;
}

input, textarea, select {
background-color: #1a1a1a;
font-family: tahoma;
font-size: 9px;
color: #585858;
border: 1px solid #272727;
margin-top: 5px;
}

/* Layout (page) container */

.pageblock{
width: 450px;
margin: 0 auto;
padding: 0 10px 0 10px;
border-right: 1px solid #272727;
border-left: 1px solid #272727;
background-color: #1a1a1a;
}

.pagefooterblock { display: none; }

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

.pageheaderblock {}

/* title, subtitle, journal icon*/

.header-subtitle, .header-icon, .header-title{
display: none;
}

/* ------------------------------ LINKBAR ------------------------------ */

.header-menu {
position: relative;
width: 430px;
font-family: tahoma;
font-size: 9px;
text-transform: lowercase;
text-align: center;
padding-top: 15px;
}

/* LINKBAR LINK */

.header-menu a, .header-menu a:visited {
padding: 0 5px 2px 5px;
color: #888888;
word-spacing: -1px;
}

.header-menu a:hover {
color: #444444;
border-bottom: 1px solid #272727;
cursor: help;
}

.header-menu ul, #footer-menu ul { margin: 0px; padding: 0px; }
.header-menu li, #footer-menu li { display: inline; }

/* ------------------------------ BODY ------------------------------ */

/* Body, contains entries sidebar, and footer */

.bodyblock {
margin-top: 20px;
}

/* body title */

.bodyheaderblock {
display: none;
}

/* body linkbar (top of page, back 20) */

.bodynavblock {
background-color: transparent;
margin-top: 5px;
text-align: left;
}

.bodynavblock a, .bodynavblock a:visited {
color: #585858;
background-color: transparent;
border: none;
text-align: left;
}

/* contains body title */

.body-title { display: none; }

/* seperates entries from comments - only on comments page */

.body-midtitle { display: none; }

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

/* contains all entries */

.entryHolder {
padding: 0px;
color: #585858;
background-color: transparent;
text-align: justify;
font-family: tahoma;
font-size: 9px;
}

/* welcome note!! */

#welcomenoteText {
padding-bottom: 15px;
margin: 0px;
background-color: transparent;
text-align: justify;
letter-spacing: 0px;
word-spacing: 4px;
}

/* contains userpic and username/community */

.entryUserinfo {
font-family: tahoma;
font-size: 9px;
font-weight: normal;
text-align: center;
padding: 10px;
background-color: transparent;
}

/* userpic */

.entryUserinfo-usericon img {
padding: 5px;
border: 1px solid #272727;
background-color: #1d1d1d;
height: 50px;
width: 50px;
}

/* all entry's text */

.entryText {
text-align: justify;
word-spacing: 2px;
}

/* contains subject and time */

.entryHeader {
background-color: transparent;
color: #585858;
font-family: tahoma;
border-bottom: 1px #272727 solid;
font-size: 9px;
padding: 0px 0px 2px 4px;
margin-bottom: 5px;
letter-spacing: 1px;
font-weight: none;
text-transform: lowercase;
}

/* below vv are actually found on the calendar page */

.entryHeader a{
color: #585858;
background-color: #272727;
padding: 2px 8px 2px 8px;
}

.entryHeader a:hover{
color: #444444;
background-color: #272727;
padding: 2px 8px 2px 8px;
}

/* entry subject */

.entryHeaderSubject {
font-weight: none;
font-size: 9px;
text-transform: lowercase;
padding-left: 4px;
letter-spacing: 2px;
color: #585858;
}

/* entry date */

.entryHeaderDate{
color: #444444;
border: none;
letter-spacing: 1px;
padding: 0;
text-decoration : none;
}

/* entry link bar (comment, reply, link, remember) */

.entryLinkbar {
text-transform: lowercase;
text-align: center;
font-size: 9px;
font-family: tahoma;
letter-spacing: 0px;
padding: 20px 0px 0px 0px;
}

.entryLinkbar a, .entryLinkbar a:visited { padding-right: 3px; }
.entryLinkbar a:hover { color: #444444; background-color: transparent; padding-bottom: 1px; }
.entryLinkbar ul { margin: 0; padding: 10px; }
.entryLinkbar li { padding: 0 4px 0 0; display: inline;}

/* ------------------------------ META ------------------------------ */

.entryMetadata { margin-top: 8px;}
.entryMetadata img { padding: 5px; float: right;}
.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; }

/* metadata subject (mood: , location: ) */

.entryMetadata-label {
padding: 10px;
color: #585858;
font-style: italic;
text-transform: lowercase;
}

/* ------------------------------ FOOTER ------------------------------ */

#footer-menu {
text-transform: lowercase;
text-align: left;
font-family: tahoma;
font-size: 9px;
margin-bottom: 10px;
}

#footer-menu a, .footer-menu a:visited {
padding: 1px 10px 1px 10px;
color: #888888;
white-space: nowrap;
}

#footer-menu a:hover { color: #585858; }

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

/* sidebar container */

.sidebar {
position: absolute;
width: 100px;
top: 20%;
margin-left: 20px;
color: #585858;
}

.sidebox{
margin: 0 0 10px 0;
display: block;
}

/* sidebar title (note 1, latest month, search) */

.sideboxTitle {
text-transform: lowercase;
font-size: 9px;
letter-spacing: 1px;
border-bottom: 1px #272727 solid;
color: #444444;
padding: 0 0 2px 0;
margin-bottom: 5px;
text-align: right;
}

/* content of all sidebar boxes */

.sideboxContent {
text-align: right;
padding: 3px;
}

/* in the freetext boxes */

.sidebox #freetext { text-align: left; }

/* in the profile, latest month, search boxes */

.sidebox #latestmonth, .sidebox #search, .sidebox #profile { text-align: left; }

/* latest month box (inactive date and active date [link]) */

.latestmonth-inactive { padding: 0px; margin: 1px; }
.latestmonth-active { padding: 0px; margin: 0px; }

/* in the tags box */

#tags_sidebox a { display: block; font-size: 9px; }
#tags_sidebox { font-size: 0; text-align: left;}

/* label of profile box */

.profile-label { display: none; }

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

/* comments holder */

.commentHolder { color: #585858; background-color: #272727; font-family: tahoma; font-size: 9px; margin: 4px 8px 4px 8px; }

/* comment userpics */

.commentUserinfo { text-align: left; margin: 8px 8px 8px 8px; background-color: #272727; }

/* commenter's userpic */

.commentUserinfo-usericon img { padding-bottom: 2px; border: 0; }

/* text of comment */

.commentText { padding: 6px; }

/* comment's header ( contains date, subject) */

.commentHeader { text-transform: lowercase; background-color: #272727; color: #585858;
font-family: tahoma; font-size: 9px; padding: 4px 0 4px 0; }
.commentHeader a{ color: #585858; }

/* for screen comments */

.commentHeaderScreened { font-family: tahoma; font-size: 9px; background-color: #444444; padding: 4px 0 4px 0; }

/* comment's subject (re: roflcakes) */

.commentHeaderSubject { font-weight: normal; font-family: tahoma; font-size: 9px; }

/* linkbar of comments (reply, delete, screen) */

.commentLinkbar { border-top: none; font-family: tahoma; font-size: 9px; color: #585858;
text-transform: lowercase; padding-bottom: 10px; text-align: left; }
.commentLinkbar a { color: #585858; font-family: tahoma; font-size: 9px; }

.commentLinkbar a:hover { font-family: tahoma; font-size: 9px; color: transparent; }
.commentLinkbar ul { margin: 0; padding: 0; color: #585858; }
.commentLinkbar li { padding: 0px 5px 0px 5px; color: #585858; margin: 0; display: inline; }

/* container of reply box */

.replyform { border: 0px; background-color: #272727; color: #585858; }

/* reply text container */

#commenttext{ width: 100%; }

/* ------------------------------ ARCHIVE PAGE ------------------------------ */

.yearlinks { text-align: right; }
.yearlink{ padding-left:4px; padding-right: 4px; }

/* calendar container (dates, boxes) */

.month { width: 400px; padding-bottom: 5px; margin: 4px 4px 4px 10px; }

/* subject lines (when viewing a month) not individual lines */

.daysubjects { color: #585858; letter-spacing: 1px; padding: 6px 0 6px 0; }

/* days of the week (sun, mon, tue) */

.daytitles { text-align: ; background: #272727; padding: 2px; color: #585858; }

/* blank days */

.day-blank { padding: 2px; }

/* day */

.day { padding: 2px; }

/* NUMBERED DATE */

.day-date { color: #585858; text-align: left; }

/* NUMBER OF ENTRIES MADE ON DAY */

.day-count { width: 50%; text-align: left; float: right; font-size: 9px; }

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

/* tags container */

.tagstable td { padding-top: 5px 0px 5px 0px; }
.tagstable { text-transform: lowercase; letter-spacing: 1px; width: 400px; }

/* ------------------------------ EXTRAS ------------------------------ */

::-moz-selection { background: #272727; color: #585858; }
::selection { background: #272727; color: #585858; }
code::-moz-selection { background: #272727; color: #585858;}
code::selection { background: #272727; color: #585858;}

/*------ Look of contextual Popup ------*/

/* general positioning */
div.ContextualPopup {
margin: 10px 0 0 0px;
font: normal 9px "tahoma" !important;
}
/* userpic */
div.ContextualPopup img {
border-left: 1px solid #272727;
border-right: 1px solid #272727;
padding: 0 5px 0 5px;
margin: 0 1px 0 5px !important;
}
/* defines general look, font color/size/background color*/
div.ContextualPopup div.Inner {
background-color: #1a1a1a !important;
color: #585858 !important;
border: 1px solid #272727;
padding: 0px;
width: 220px;
text-align: right;
}
/* defines left side of popup without the user icon*/
div.ContextualPopup .Content {
padding: 2px 4px 6px 4px;
}
/* defines the text that shows the relation to the user (XYZ is your mutual friend) */
div.ContextualPopup .Relation {
font-weight: normal !important;
letter-spacing: 2px;
}
/* look of words LJ Talk */
div.ContextualPopup .Content .OnlineStatus {
font-weight: normal;
}
/* element that contains the user icon */
div.ContextualPopup .Userpic {
padding: 4px 4px 0 0;
}
/* defines the look of the links */
div.ContextualPopup div.Inner a, div.ContextualPopup div.Inner a:visited {
text-decoration: none !important;
font-weight: normal;
color: #888888 !important;
}

#lj_controlstrip {
top: 0;
left: 0;
width: 100%;
border-bottom: 1px solid #272727;
height: 50px;
position: absolute;
background-color: #1a1a1a !important;
}

#lj_controlstrip table { margin: 0; padding: 0; width: auto; background-color: #1a1a1a !important;}

#lj_controlstrip td {
background-color: #1a1a1a !important;
font-family: tahoma;
color: #585858;
}

#lj_controlstrip a {
color: #888888 !important;
font-family: tahoma;
font-size: 9px;
text-transform: lowercase;
font-variant: normal;
}

#lj_controlstrip a:hover {
color: #444444 !important;
cursor: help;
border: 0;
text-decoration: none;
}

#lj_controlstrip img {
background-repeat: no-repeat;
}

#lj_controlstrip a img {
padding: 0; margin: 0; border: 0;
}

#lj_controlstrip form {
padding: 0; margin: 0; border: 0;
}

#lj_controlstrip input {
font-family: tahoma;
font-size: 9px;
color: #585858;
background-color: transparent;
border: 0;
padding: 0; margin: 0;
text-transform: lowercase;
}

#lj_controlstrip select, #lj_controlstrip input#xc_user, #lj_controlstrip input#xc_password, #lj_controlstrip input#xc_remember {
font-family: tahoma;
font-size: 9px;
background-color: #1a1a1a;
padding: 0; margin: 0;
border: 1px solid #272727;
}

#lj_controlstrip_userpic {
vertical-align: top;
width: 50px;
height: 50px;
}

#lj_controlstrip_userpic img{
vertical-align: top;
width: 50px;
height: 50px;
}

#lj_controlstrip_user {
text-align: left;
vertical-align: middle;
padding: 0 10px 0 10px;
white-space: nowrap;
}

#lj_controlstrip_actionlinks {
text-align: left;
vertical-align: middle;
padding: 0 1em 0 1em;
white-space: nowrap;
}

#lj_controlstrip_statustext {
font-size: 9px;
color: #585858 !important;
font-weight: normal;
letter-spacing: 2px;
}

#lj_controlstrip_login {
vertical-align: middle;
padding-left: 10px;
white-space: nowrap;
}

#lj_controlstrip_loggedout_userpic {
}

#lj_controlstrip_user, #lj_controlstrip_login, #lj_controlstrip_loggedout_userpic, #lj_controlstrip_actionlinks {
border: 0;
}

#lj_controlstrip_search {
border: 0;
}

#lj_controlstrip_loggedout_userpic {
background-image: url(/img/controlstrip/ljlogo-dark-loggedout.gif);
background-repeat: no-repeat;
background-position: top left;
}

#lj_controlstrip_cprod {
position: absolute;
top: 5px;
right: 10px;
text-align: right;
}

#lj_controlstrip_cprod a {
padding: 0 1px 0 1px;
}

#lj_controlstrip_search {
padding-left: 1em;
vertical-align: middle;
text-align: left;
}

.lj_controlstrip_search_sup {
padding-left: 0;
width: 35%;
text-align: center;
}

#lj_controlstrip_search_input_text {
background: #1a1a1a !important;
position: relative;
z-index: 100;
}

.lj_controlstrip_search_input_text_sup {
width: 100% !important;
}

#lj_controlstrip_search_submit {
position: relative;
z-index: 100;
}

/* so that IE users will see a new image */
* html span.ljuser{
background-image: url(http://img291.imageshack.us/img291/4575/useryb4.png) !important;
background-repeat: no-repeat;
background-position: left middle;
padding: 10px 8px 0px 0px !important;
}

* html span.ljuser img{ visibility: hidden; }

.ljuser img[src="http://l-stat.livejournal.com/img/userinfo.gif"] {
width: 0;
height: 0;
background-repeat: no-repeat;
background-image: url(http://img291.imageshack.us/img291/4575/useryb4.png) !important;
padding: 10px 8px 0 4px !important;
}

.ljuser img[src="http://l-stat.livejournal.com/img/community.gif"] {
width:0;
height: 0;
background-repeat: no-repeat;
background-image: url(http://img401.imageshack.us/img401/7833/communityei5.png) !important;
padding: 11px 8px 0 4px !important;
}

img[src="http://l-stat.livejournal.com/img/icon_protected.gif"]{
width: 0;
height: 0;
padding: 0 0 10px 10px;
background: url(http://img72.imageshack.us/img72/4144/lockedib8.png);
}

img[src="http://l-stat.livejournal.com/img/icon_private.gif"]{
width: 0;
height: 0;
padding: 0 0 10px 10px;
background: url(http://img329.imageshack.us/img329/4985/privatevy7.png);
}

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

#888888#585858#444444#272727#1d1d1d#1a1a1a
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

layouts