Layout 002 : Simple Greys: fruitstyle

malionette in fruitstyle

Layout 002 : Simple Greys

Feb 07, 2008 19:16

Click for a Live Preview.

( Layout ) #002 : Simple Greys
Layout base by graphicsbyjulz.

( Install ) Step 1 - System

Select Theme

Select any S2 OPAL layout.

Page Setup

Ad Placement: Vertical
(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

← Previous Step

Next Step →

Custom CSS

Use layout's stylesheets: No. IMPORTANT!!
Custom Stylesheet: /* S2 OPAL --- Simple greys ---
Wingweaver22 @ Fruitstyle.livejournal.com
Do not remove this note. */

/* ------------------------------ PAGE ------------------------------ */
a{
text-decoration: none;
color: #999999;
}

i{
color: #666666;
}

a:hover {
text-decoration: none;
color: #666666;
cursor: help;
}

input, select, textarea {
color: #666666;
font-size: 10px;
background-color: #e8e8e8;
border: 1px solid #999999;
font-family: tahoma;
}

b {
color: #666666;
}

a:visited {
text-decoration: none;
color: #999999;
}

blockquote {
background-color: #e8e8e8;
padding: 5px;
border: 1px dotted #999999;
font-family: tahoma;
color: #666666;
}

code {
background-color: #e8e8e8;
font-family: tahoma;
display: block;
color: #666666;
padding: 5px;
border: 1px solid #999999;
}
/* entire page & bg (most bottom layer) */

body {
font-family: trebuchet ms; /* font of entire page */
background-color: #999999; /* bg colour */
margin: 50px; /* margin - top and bottom spacing, shows bg colour ^ */
}

/* borders on page and sidebar */

.border4 { border: 0px solid #cccccc; } /* outer border on sidebars */
.border3 { border: 0px solid #cccccc; } /* outer border on page, second outer border on sidebars */
.border2 { border: 0px solid #cccccc; } /* inside border on sidebars and page */

/* body container (underneath everything, before bottom layer) */

#bodycontent {
background-color: #eeeeee; /* shows when header image has space also */
border: none; /* border around page */
width: 800px; /* width of page area */
padding: 0px; /* how much of ^ bg colour to be shown */
margin: auto;
}

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

/* userpic and title */

#header h3, #userpic { display: none; }

/* contains userpic, title, subtitle/dots.. header main */

#headerinfo {
background: top no-repeat #bbbbbb url(http://); /* repeat-x / no-repeat */
height: 50px; /* height of header */
font-size: 0px; /* changes size of title & dots */
}

/* space behind navigation */

#nav {
white-space: nowrap;
margin-top: 5px;
font-size: 10px;
text-align: right;
}

/* navigation links */

#nav a {
text-decoration: none;
letter-spacing: 2px;
color: #999999;
background-color: #eeeeee;
padding: 0 10px 0 10px;

}

#nav a:Hover {
background-color: #eeeeee;
color: #666666;
cursor: help;
}

/* contains sidebar and entries */

#content {
background-color: #eeeeee; /* behind entries + sidebar */
border: 0px solid #eeeeee; /* border around */
padding: 0px; /* padding inside box */
}

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

.calactitem {
float: left;
width: 19px;
font-size: 10px;
text-align: center;
background-color: #eeeeee;
border-left: 1px dotted #999999;
border-bottom: 0px solid #999999;
}

.calrow {
clear: both;
font-family: arial, sans-serif;
}

.calempty {
width: 20px;
font-size: 10px;
float: left;
}

.calinitem {
float: left;
width: 19px;
font-size: 10px;
text-align: center;
border-left: 1px dotted #999999;
border-bottom: 0px solid #999999;
}

/* sidebar (excluding borders) */

.columncontent {
background-color: #eeeeee;
border: 1px solid #999999;
padding: 5px;
width: 160px; /* change width of sidebar here */
font-size: 10px;
color: #666666;
}

/* sidebar box area */

.columnitem {
background-color: #eeeeee; /* bg of sidebox */
padding: 2px 1px 1px 1px; /* padding of text */
margin: 2px; /* around each link / textbox */
color: #666666;
text-align: justify;
border-top: 1px dotted #999999;
}

#sidecolumn TD {
color: #999999;
}

#sidecolumn a {
text-decoration: none;
color: #999999;
}

.sidetd {
width: 150px;
}

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

/* box of entire entries */
.entries {
color: #666666;
font-size: 10px;
}

/* individual entries */

.entry {
padding: 5px 5px 40px 5px;
color: #666666;
margin: 0px 0 22px 0;
border: 1px solid #999999;
}

/* between name/time and time/comment bar */

.entrydivider {
border-top: 0px dotted #999999;
margin: 4px 0 4px 0;
}

/* entry userpics */

.userpic2 {
float: right;
border-left: 4px solid #eeeeee;
border-right: 7px solid #eeeeee;
border-top: 3px solid #eeeeee;
margin-left: 5px;
}

/* time and community name */

.entryinfo {
background-color: #eeeeee;
font-size: 10px;
border-bottom: 1px dotted #999999;
padding-bottom: 7px;
color: #666666;
margin: 2px;
}

/* text of entries */

.entrytext {
margin: 4px;
}

.friendcolor {
width: 10px;
height: 10px;
border: 1px solid #eeeeee;
}

/* friend username (on friends page ) */

a.friendname {
padding-left: 5px;
}

a:hover.friendname {
color: #666666 !important;
font-weight: none;
background-color: #eeeeee !important;
text-decoration: none;
cursor: help;
}

.friendname {
color: #999999 !important;
font-weight: none;
text-decoration: none;
background-color: #eeeeee !important;
font-size: 10px;
}

/* comment bar (comment, read, edit) */

.entrylinks {
background-color: #eeeeee;
font-size: 10px;
}

.entrylinks a {
text-decoration: none;
color: #999999;

}

.entrylinks a:Hover {
color: #666666;
cursor: help;
}

/* viewing # entries, back 10, next 10 */

.messageholder {
margin: none;
}

.systemmessage {
background-color: #eeeeee;
color: #999999;
font-size: 10px;
}

/* link : Back, Next, Viewing 0-10... */

.systemmessage a {
text-decoration: none;
color: #999999;
}

.systemmessage a:Hover {
color: #666666;
background-color: #eeeeee;
cursor: help;
}

/* entry subject */

.subject {
font-weight: bold;
text-align: left;
}

/* back to top */

.backtop {
display: none;
}

.backtop a {
display: none;
}

/* meta (music, mood, location) */

.meta {
font-size: 10px;
}

.meta a {
text-decoration: none;
color: #999999;
}

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

/* Sun, mon, and numbers, 01, 02 of calendar */

.bigday {
font-size: 10px;
color: #666666;
float: left;
font-weight: none;
}

#cal a {
text-decoration: none;
font-weight: none;
color: #999999;
}

.systemtext {
font-weight: normal;
padding-left: 10px;
padding-right: 10px;
}

.notablemessage {
padding: 4px;
}

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

.ljtaglist{
list-style-type: circle;
font-family: tahoma;
font-size: 10px;
color: #999999;
}

.ljtaglist a{
text-decoration: none;
color: #999999;
font-family: tahoma;
font-size: 10px;
font-weight: none;
}

/* USER, COMMUNITY, PROTECTED ICONS */

.ljuser img {
/* fallback code for older browsers */
width: 0;
height: 0;
padding: 17px 20px 0 0;
/* for some reason IE doesn't understand
background shortcuts for this one */
background-image: url('http://i187.photobucket.com/albums/x24/malicelayout/com.png');
background-repeat: no-repeat;
background-position: left center;
}
.ljuser img[src="http://l-stat.livejournal.com/img/userinfo.gif"]{
width: 0;
height: 0;
padding: 0 5px 15px 10px;
background-image: url('http://i187.photobucket.com/albums/x24/malicelayout/com.png');
background-repeat: no-repeat;
background-position: left center;
}
.ljuser img[src="http://l-stat.livejournal.com/img/community.gif"]{
width: 0;
height: 0;
padding: 0 5px 18px 15px;
background-image: url('http://i187.photobucket.com/albums/x24/malicelayout/com.png');
background-repeat: no-repeat;
background-position: left center;
}

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

/*general positioning*/

div.ContextualPopup {
margin: 0px 0px 0px 150px;
font: normal 10px "tahoma", sans-serif !important;
}

/* attaches border to user icon*/

div.ContextualPopup img {
border: 0;
}

/*defines general look, font color/size/background color*/

div.ContextualPopup div.Inner {
background-color: #eeeeee !important;
color: #666666 !important;
border: 1px solid #999999;
padding: 0px;
width: 200px;
}

/*defines left side of popup without the user icon*/

div.ContextualPopup .Content {
padding: 2px 4px 6px 4px;
margin-right: 10px;
line-height: 1.4;
}

/*defines the text that shows the relation to the user (XYZ is your mutual friend) */

div.ContextualPopup .Relation {
font-weight: none !important;
}

/* look of words LJ Talk */

div.ContextualPopup .Content .OnlineStatus {
font-weight: none;
}

/*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: none !important;
color: #999999 !important;
}