Layout 039 : Jess (light mod) | 040 : Jess (dark mod)
Quickly, one last post for 2009!! Thank you for 3500 watchers!
Click for a Live Preview. | Generator
( Layout ) #039 : Jess (light mod)
Jess (ver. light) with a topbar! Made on request (:
( Install ) Step 1 - System
Select Theme
Page Setup
← Previous Step | 1 | 2 | 3 | 4 | Next Step →
( Install ) Step 2 - Display
Customize Display
← Previous Step | 1 | 2 | 3 | 4 | Next Step →
( Install ) Step 3 - Stylesheet
Custom CSS
← 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 700px wide.
.headerimage {background: url(HTTP://URLHERE.PNG) no-repeat center; height: ###px; }
Add a Banner | Replace Colours | Replace Images
( Optional ) Replace Colours
#ffffff#fafafa#ec086b#dddddd#aaaaaa#a5e025#666666#16afc5#000000
Add a Banner | Replace Colours | Replace Images
( Optional ) Replace Images
Get all the images at Box.net
Add a Banner | Replace Colours | Replace Images
Fruitstyle: Layouts and Winamp Skin Designs by Malionette
Click for a Live Preview. | Generator
( Layout ) #040 : Jess (dark mod)
Jess (ver. dark) with a topbar! Made on request (:
( Install ) Step 1 - System
Select Theme
Page Setup
← Previous Step | 1 | 2 | 3 | 4 | Next Step →
( Install ) Step 2 - Display
Customize Display
← Previous Step | 1 | 2 | 3 | 4 | Next Step →
( Install ) Step 3 - Stylesheet
Custom CSS
← 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 700px wide.
.headerimage {background: url(HTTP://URLHERE.PNG) no-repeat center; height: ###px; }
Add a Banner | Replace Colours | Replace Images
( Optional ) Replace Colours
#ffffff#ec086b#aaaaaa#a5e025#444444#222222#16afc5#000000
Add a Banner | Replace Colours | Replace Images
( Optional ) Replace Images
Get all the images at Box.net
Add a Banner | Replace Colours | Replace Images
Fruitstyle: Layouts and Winamp Skin Designs by Malionette
Click for a Live Preview. | Generator
( Layout ) #039 : Jess (light mod)
Jess (ver. light) with a topbar! Made on request (:
( Install ) Step 1 - System
Select Theme
- Select any S2 Flexible Squares layout.
Page Setup
- Ad Placement: Between Entries
(Ignore if you have a paid account.)
← Previous Step | 1 | 2 | 3 | 4 | Next Step →
( Install ) Step 2 - Display
Customize Display
- Set the user picture position for each entry: Left
← Previous Step | 1 | 2 | 3 | 4 | Next Step →
( Install ) Step 3 - Stylesheet
Custom CSS
- Use layout's stylesheets: No. IMPORTANT!!
- Custom Stylesheet: /* S2 FLEXIBLE SQUARES --- 039 Light Mod ~ Jess ---
Wingweaver22 @ Fruitstyle.livejournal.com
Do not remove this note. */
/* ------------------------------------------------ PAGE ------------------------------------------------ */
body { background: #ffffff; margin: 0; padding: 0; font: 9px arial; color: #666666;}
#content {width: 700px; margin: 0 auto; }
#content {background: #fafafa; }
#maincontent {background: #ffffff; }
/* ------------------------------------------------ MARKUP AND VARIABLES ------------------------------------------------ */
a {text-decoration: none;}
a:hover {cursor: help; }
abbr {border-color: #ec086b; }
b {font: bold 11px arial; color: #000000;}
blockquote {border: 1px solid #dddddd; padding: 5px; margin: 10px; }
caption {color: #dddddd; text-transform: uppercase;}
cite {font: italic 11px arial; }
code {font: italic 11px georgia;}
dt {border-bottom: 1px solid #dddddd; font: bold 11px arial; }
dd {padding: 2px;}
em {font: italic 11px arial;}
h1 {font: 20px arial black;}
h2 {font: bold 18px arial;}
h3 {font: bold 16px arial;}
h4 {font: bold 14px arial;}
h5 {font: bold 12px arial;}
h6 {font: bold 11px arial;}
hr {border: 0; border-bottom: 1px solid #dddddd;}
i {font: italic 11px arial; color: #16afc5; }
input {border: 1px solid #dddddd; font: 9px arial; color: #666666; background: #fafafa;}
input[type="submit"] {background: #fafafa; }
input[type="submit"]:hover {background: #ec086b; color: #ffffff; cursor: help; }
ol li {list-style: decimal-leading-zero; }
pre {font: 9px arial;}
q {font: italic 11px georgia;}
select {font: 9px arial; border: 1px solid #dddddd; color: #666666; background: #fafafa;}
small {font: 9px silkscreen, arial;}
strong {font: bold 11px arial;}
sub, sup {font-size: 9px; color: #a5e025; }
textarea {border: 1px solid #dddddd; padding: 2px; font: italic 11px georgia; color: #666666; background: #fafafa;}
tt {font: 11px monospace; }
ul li {list-style: circle;}
#sidebar_summary b{font: bold 11px arial; color: inherit;}
.ljuser b {color: inherit; }
.subject .ljuser b {font-size: inherit;}
#maincontent a:hover, #footer a:hover, #header a:hover {color: #aaaaaa;}
.LJ_Placeholder_Container A { position: absolute; top:50%; left:50%; visibility: hidden;}
/* ------------------------------------------------ LOOKS HOT ;) ------------------------------------------------ */
li a, a {color: #ec086b;}
li+li a {color: #aaaaaa;}
li+li+li a, a+a {color: #a5e025;}
li+li+li+li a, a+a+a {color: #16afc5;}
li+li+li+li+li a, a+a+a+a {color: #ec086b;}
li+li+li+li+li+li a {color: #aaaaaa;}
li+li+li+li+li+li+li a, a+a+a+a+a {color: #a5e025;}
li+li+li+li+li+li+li+li a, a+a+a+a+a+a {color: #16afc5;}
li+li+li+li+li+li+li+li+li a, a+a+a+a+a+a+a {color: #ec086b;}
li+li+li+li+li+li+li+li+li+li a {color: #aaaaaa;}
li+li+li+li+li+li+li+li+li+li+li a, a+a+a+a+a+a+a+a {color: #a5e025;}
li+li+li+li+li+li+li+li+li+li+li+li a, a+a+a+a+a+a+a+a+a {color: #16afc5;}
li+li+li+li+li+li+li+li+li+li+li+li+li a, a+a+a+a+a+a+a+a+a+a {color: #ec086b;}
li+li+li+li+li+li+li+li+li+li+li+li+li+li a {color: #aaaaaa;}
li+li+li+li+li+li+li+li+li+li+li+li+li+li+li a, a+a+a+a+a+a+a+a+a+a+a {color: #a5e025;}
li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li a, a+a+a+a+a+a+a+a+a+a+a+a {color: #16afc5;}
li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li a, a+a+a+a+a+a+a+a+a+a+a+a+a {color: #ec086b;}
li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li a {color: #aaaaaa;}
li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li a, a+a+a+a+a+a+a+a+a+a+a+a+a+a {color: #a5e025;}
li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li a, a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a {color: #16afc5;}
li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li a, a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a {color: #ec086b;}
li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li a {color: #aaaaaa;}
li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li a, a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a {color: #a5e025;}
li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li a, a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a {color: #16afc5;}
li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li a, a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a {color: #ec086b;}
li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li a {color: #aaaaaa;}
li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li a, a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a {color: #a5e025;}
li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li a, a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a {color: #16afc5;}
li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li a {color: #ec086b;}
/* ------------------------------------------------ HEADER ------------------------------------------------ */
.subtitle {display: none;}
.title { padding: 0 0 5px 5px; margin: 0; text-transform: uppercase; color: #aaaaaa;}
.navheader { padding: 12px 0 0 5px; margin: 0; font: 18px arial black; text-transform: uppercase; }
.navheader li {display: inline; }
.navheader li a, .navheader li {color: #ec086b;}
.navheader li+li a, .navheader li+li {color: #a5e025; }
.navheader li+li+li a, .navheader li+li+li {color: #16afc5;}
.navheader li+li+li+li a, .navheader li+li+li+li {color: #ec086b;}
.navheader li+li+li+li+li a, .navheader li+li+li+li+li {color: #a5e025; }
/* ------------------------------------------------ SIDEBAR ------------------------------------------------ */
#sidebar { padding: 10px; color: #aaaaaa; border-top: 1px solid #dddddd; }
.sbarbody, .sbarbody2 {float: left; width: 20%; }
.defaultuserpic {text-align: right; float: left; margin-bottom: 10px; }
.defaultuserpic img{border: 1px solid #dddddd; padding: 4px; }
.sbartitle {display: none;}
.sbarbody2 { padding: 5px; width: 40%;}
.sbarbody > ul.sbarlist {padding: 0; margin: 0;}
#sidebar_tags .sbaritem {border-bottom: 1px solid #dddddd; list-style: none; }
#sidebar_tags .sbaritem a {display: block; padding: 2px 5px 2px 0;}
#sidebar_tags .sbaritem a:hover {background: #ffffff; }
.tagcloud {margin: 0; padding: 0 5px 5px 0; list-style: none; }
.tagcloud a:hover {color: #dddddd; }
.tagcategory0 {font-size: 9px; color: #aaaaaa;}
.tagcategory1 {font-size: 11px; color: #ec086b;}
.tagcategory2 {font-size: 12px; color: #a5e025;}
.tagcategory3 {font-size: 12px; font-weight: bold; color: #16afc5;}
.tagcategory4 {font-size: 14px; color: #16afc5;}
.tagcategory5 {font-size: 14px; font-weight: bold; color: #ec086b;}
.tagcategory6 {font-size: 16px; color: #ec086b;}
.tagcategory7 {font-size: 16px; font-weight: bold; color: #a5e025;}
.tagcategory8 {font-size: 18px; color: #a5e025;}
.tagcategory9 {font-size: 20px; color: #16afc5; }
#sidebar_linklist .sbartitle {margin-bottom: 2px;}
#sidebar_linklist .sbaritem {border-bottom: 1px solid #dddddd; list-style: none; }
#sidebar_linklist .sbaritem a {display: block; padding: 2px 5px 2px 0;}
#sidebar_linklist .sbaritem a:hover {background: #ffffff; }
#sidebar_calendar .calendar {width: 100%; }
#sidebar_calendar .calendar td {border-top: 1px solid #dddddd; text-align: center; font: 9px silkscreen, arial;}
#sidebar_calendar .calendar td a {color: #16afc5; display: block;}
#sidebar_calendar .calendar td a:hover {color: #a5e025; }
#sidebar_summary .sbaritem{ margin: 0; padding: 2px 5px 2px 0;
border-bottom: 1px solid #dddddd; list-style: none; color: #dddddd; }
#sidebar_summary .sbaritem a:hover { color: #dddddd;}
/* ------------------------------------------------ ENTRY ------------------------------------------------ */
#maincontent {width: 100%; clear: both; border-top: 1px solid #dddddd; }
.clear {display: none;}
.subcontent {clear: right; border-bottom: 1px solid #dddddd;}
.subject , .subject a{font: 14px arial; color: #000000; letter-spacing: -1px; }
.subject {padding: 5px 5px 0 5px;}
.date {color: #ffffff; background: #dddddd; width: 200px; font: 9px silkscreen, arial; padding: 0 0 1px 5px; text-transform: uppercase;}
.userpic, .userpicfriends {float: right; background: #ffffff !important; color: transparent; text-align: center;}
.userpic img, .userpicfriends img {margin: 5px; border: 1px solid #dddddd; padding: 4px;}
.userpicfriends a font{ color: #16afc5 !important; }
.lj-view-friends .entry_text {min-height: 110px; }
.entry_text {padding: 10px 0 0 0; min-height: 85px; padding: 5px 5px 0 5px;}
.entry_text img {max-width: 420pxpx; border: 1px solid #dddddd; padding: 4px; }
.ljtags {margin-top: 10px; }
.currents strong { font: 9px arial; text-transform: uppercase; color: #dddddd; }
.currents {padding: 5px;}
.comments { margin: 5px 0 5px 0; padding: 0px 0 0 5px; color: #dddddd; }
/* ------------------------------------------------ TAGS PAGE ------------------------------------------------ */
.lj-view-tags h2{ font: 9px silkscreen, arial; background: #dddddd; margin: 0; padding: 2px 0 1px 5px; color: #ffffff; width: 250px;}
.lj-view-tags .ljtaglist {margin: 0; padding: 5px 0 0 30px;}
.lj-view-tags .ljtaglist li {list-style: decimal-leading-zero;}
/* ------------------------------------------------ ARCHIVE ------------------------------------------------ */
.year { padding: 5px 5px 0 0; margin: 0;}
.year li {display: inline; border-right: 1px solid #dddddd; padding: 0 5px 0 5px;}
.yeartable { margin: 10px 0 0 0; width: 100%; border-collapse: collapse;}
.yearmonth {background: #dddddd; text-transform: uppercase; color: #ffffff; font: 9px silkscreen, arial; padding: 1px 0 2px 5px; }
.yearmonth + .yearmonth {background: #ffffff;}
.yearday {text-transform: uppercase; text-align: center; padding: 5px;}
.yeardate {border-top: 1px solid #dddddd;}
.yeardate a {background-color: #ec086b; color: #ffffff; display: block;}
.yeardate + .yeardate a {background-color: #a5e025; }
.yeardate + .yeardate + .yeardate a {background-color: #16afc5;}
.yeardate + .yeardate + .yeardate + .yeardate a {background-color: #ec086b;}
.yeardate + .yeardate + .yeardate + .yeardate + .yeardate a{background-color: #a5e025; }
.yeardate + .yeardate + .yeardate + .yeardate + .yeardate + .yeardate a {background-color: #16afc5;}
.yeardate + .yeardate + .yeardate + .yeardate + .yeardate + .yeardate + .yeardate a {background-color: #ec086b;}
.yeardate a:hover {background: #dddddd !important; color: #ffffff !important; }
.lj-view-month .entry{padding: 5px;}
.lj-view-month dd a {color: #000000; font: bold 14px arial; letter-spacing: -1px;}
/* ------------------------------------------------ COMMENT PAGES ------------------------------------------------ */
.skiplinks {padding: 2px 0 2px 5px; color: #dddddd;}
.box center{ padding: 5px;}
.box center b {font: normal 9px arial;}
.box center table {border-collapse: collapse; text-transform: uppercase; }
.box b a {color: #16afc5;}
.box td a b, .box td a+a+a+a b, .box td a+a+a+a+a+a b, .box td a+a+a+a+a+a+a+a+a b {color: #ec086b;}
.box td a+a b, .box td a+a+a+a+a b, .box td a+a+a+a+a+a+a b, .box td a+a+a+a+a+a+a+a+a+a b {color: #a5e025;}
.box td a+a+a b, .box td a+a+a+a+a b, .box td a+a+a+a+a+a+a+a b, .box td a+a+a+a+a+a+a+a+a+a+a b {color: #16afc5;}
.box > div + div {background: #fafafa;}
.commentbox { border-top: 1px solid #dddddd; padding: 5px; min-height: 110px;}
.commentbox .userpiccomment {float: right; border: 1px solid #dddddd; padding: 4px; }
.commentboxpartial {border-top: 1px solid #dddddd; padding: 2px 0 2px 5px;}
.datesubjectcomment {color: #aaaaaa; text-transform: uppercase; margin-bottom: 10px;}
.datesubjectcomment a {text-transform: lowercase;}
.datesubjectcomment strong {color: #000000; text-transform: capitalize; font: normal 12px arial; letter-spacing: -1px; }
.commentbox div + div + div {font: 9px arial !important; color: #dddddd; }
.commentbox div + div + div div {display: inline; text-transform: uppercase; color: #aaaaaa; }
.box + .box {padding: 5px; border-top: 1px solid #dddddd; }
/* ------------------------------------------------ FOOTER ------------------------------------------------ */
.clearfoot {display: none;}
.navfooter {margin: 0; padding: 5px; }
.navfooter li {display: inline; list-style: none; border-right: 1px solid #dddddd; padding: 0 5px 0 5px;}
/* ------------------------------------------------ EXTRAS ------------------------------------------------ */
div.ContextualPopup {display: block !important;}
.ljuser 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;}
.ljuser img[src="http://l-stat.livejournal.com/img/community.gif"] {width:0; height: 0; padding: 9px 8px 0 2px !important;
background: url(http://img176.imageshack.us/img176/6571/userinfopk2.png) no-repeat;}
.subject .ljuser img[src="http://l-stat.livejournal.com/img/userinfo.gif"] { margin-left: 5px; }
.subject .ljuser img[src="http://l-stat.livejournal.com/img/community.gif"] { margin-left: 5px;}
img[src="http://l-stat.livejournal.com/img/icon_protected.gif"]{width: 0; height: 0; padding: 0 0 10px 10px !important;
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;
background: url(http://img329.imageshack.us/img329/4985/privatevy7.png) no-repeat;}
img[src="http://l-stat.livejournal.com/img/btn_del.gif"]{width: 0; height: 0; padding: 0 0 10px 10px !important;
background: url(http://img189.imageshack.us/img189/6336/deleteewh.png) no-repeat; }
img[src="http://l-stat.livejournal.com/img/btn_scr.gif"]{width: 0; height: 0; padding: 0 0 10px 10px !important;
background: url(http://img207.imageshack.us/img207/2286/unscreenme.png) no-repeat; }
img[src="http://l-stat.livejournal.com/img/btn_unscr.gif"]{width: 0; height: 0; padding: 0 0 10px 10px !important;
background: url(http://img387.imageshack.us/img387/7264/screenme.png) no-repeat; }
img[src="http://l-stat.livejournal.com/img/btn_freeze.gif"]{width: 0; height: 0; padding: 0 0 10px 10px !important;
background: url(http://img95.imageshack.us/img95/1418/freeze.png) no-repeat; }
img[src="http://l-stat.livejournal.com/img/btn_unfreeze.gif"]{width: 0; height: 0; padding: 0 0 10px 10px !important;
background: url(http://img374.imageshack.us/img374/1844/unfreeze.png) no-repeat; }
img[src="http://l-stat.livejournal.com/img/btn_track.gif"]{width: 0; height: 0; padding: 0 0 10px 10px !important;
background: url(http://img95.imageshack.us/img95/1002/tracku.png) no-repeat; }
::-moz-selection { background: #000000; color: #ffffff; }
::selection { background: #000000; color: #ffffff; }
code::-moz-selection { background: #000000; color: #ffffff; }
code::selection { background: #000000; color: #ffffff; }
div.ContextualPopup div.Inner div.Content { font: 9px arial !important; }
div.ContextualPopup div.Inner div.Content a { text-decoration: none !important; color: #ec086b !important;}
div.ContextualPopup div.Inner div.Content .RemoveFriend a { text-decoration: none !important; color: #16afc5 !important;}
div.ContextualPopup div.Inner div.Content .SetBan a { text-decoration: none !important; color: #a5e025 !important;}
div.ContextualPopup div.Inner div.Content a:hover { color: #aaaaaa !important; cursor: help; }
div.ContextualPopup div.Inner { background-color: transparent !important; border: 0; text-align: right;}
div.ContextualPopup .Content { padding: 5px; color: #666666 !important; width: 200px; border: 1px solid #dddddd; background-color: #ffffff;}
div.ContextualPopup .Content .OnlineStatus {font-weight: normal;}
div.ContextualPopup .Userpic { padding: 4px; border: 1px solid #dddddd; background-color: #ffffff; margin: 0 -55px 0 0;}
#lj_controlstrip td {border-right: 1px solid #aaaaaa; font: 9px arial; background: #ffffff; color: #000000;}
#lj_controlstrip td a {color: #ec086b;} #lj_controlstrip td a+a+a+a+a+a+a+a {color: #ec086b;}
#lj_controlstrip td a+a {color: #a5e025;} #lj_controlstrip td a+a+a+a+a+a+a {color: #16afc5;}
#lj_controlstrip td a+a+a {color: #16afc5;} #lj_controlstrip td a+a+a+a+a+a {color: #a5e025;}
#lj_controlstrip td a+a+a+a {color: #ec086b;} #lj_controlstrip td a+a+a+a+a {color: #ec086b;}
#lj_controlstrip td a b {color: #a5e025;}
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
The recommended banner size is 700px wide.
.headerimage {background: url(HTTP://URLHERE.PNG) no-repeat center; height: ###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#ec086b#dddddd#aaaaaa#a5e025#666666#16afc5#000000
Add a Banner | Replace Colours | Replace Images
( Optional ) Replace Images
Get all the images at Box.net
Add a Banner | Replace Colours | Replace Images
Fruitstyle: Layouts and Winamp Skin Designs by Malionette
Click for a Live Preview. | Generator
( Layout ) #040 : Jess (dark mod)
Jess (ver. dark) with a topbar! Made on request (:
( Install ) Step 1 - System
Select Theme
- Select any S2 Flexible Squares layout.
Page Setup
- Ad Placement: Between Entries
(Ignore if you have a paid account.)
← Previous Step | 1 | 2 | 3 | 4 | Next Step →
( Install ) Step 2 - Display
Customize Display
- Set the user picture position for each entry: Left
← Previous Step | 1 | 2 | 3 | 4 | Next Step →
( Install ) Step 3 - Stylesheet
Custom CSS
- Use layout's stylesheets: No. IMPORTANT!!
- Custom Stylesheet: /* S2 FLEXIBLE SQUARES --- 040 Dark Mod ~ Jess ---
Wingweaver22 @ Fruitstyle.livejournal.com
Do not remove this note. */
/* ------------------------------------------------ PAGE ------------------------------------------------ */
body { background: #000000; margin: 0; padding: 0; font: 9px arial; color: #aaaaaa;}
#content {width: 700px; margin: 0 auto;}
#content {background: #222222; }
#maincontent {background: #000000; }
/* ------------------------------------------------ MARKUP AND VARIABLES ------------------------------------------------ */
a {text-decoration: none;}
a:hover {cursor: help; }
abbr {border-color: #ec086b; }
b {font: bold 11px arial; color: #ffffff;}
blockquote {border: 1px solid #444444; padding: 5px; margin: 10px; }
caption {color: #444444; text-transform: uppercase;}
cite {font: italic 11px arial; }
code {font: italic 11px georgia;}
dt {border-bottom: 1px solid #444444; font: bold 11px arial; }
dd {padding: 2px;}
em {font: italic 11px arial;}
h1 {font: 20px arial black;}
h2 {font: bold 18px arial;}
h3 {font: bold 16px arial;}
h4 {font: bold 14px arial;}
h5 {font: bold 12px arial;}
h6 {font: bold 11px arial;}
hr {border: 0; border-bottom: 1px solid #444444;}
i {font: italic 11px arial; color: #16afc5; }
input {border: 1px solid #444444; font: 9px arial; color: #aaaaaa; background: #222222;}
input[type="submit"] {background: #222222; }
input[type="submit"]:hover {background: #ec086b; color: #000000; cursor: help; }
ol li {list-style: decimal-leading-zero; }
pre {font: 9px arial;}
q {font: italic 11px georgia;}
select {font: 9px arial; border: 1px solid #444444; color: #aaaaaa; background: #222222;}
small {font: 9px silkscreen, arial;}
strong {font: bold 11px arial;}
sub, sup {font-size: 9px; color: #a5e025; }
textarea {border: 1px solid #444444; padding: 2px; font: italic 11px georgia; color: #aaaaaa; background: #222222;}
tt {font: 11px monospace; }
ul li {list-style: circle;}
#sidebar_summary b{font: bold 11px arial; color: inherit;}
.ljuser b {color: inherit; }
.subject .ljuser b {font-size: inherit;}
#maincontent a:hover, #footer a:hover, #header a:hover {color: #aaaaaa;}
.LJ_Placeholder_Container A { position: absolute; top:50%; left:50%; visibility: hidden;}
/* ------------------------------------------------ LOOKS HOT ;) ------------------------------------------------ */
li a, a {color: #ec086b;}
li+li a {color: #aaaaaa;}
li+li+li a, a+a {color: #a5e025;}
li+li+li+li a, a+a+a {color: #16afc5;}
li+li+li+li+li a, a+a+a+a {color: #ec086b;}
li+li+li+li+li+li a {color: #aaaaaa;}
li+li+li+li+li+li+li a, a+a+a+a+a {color: #a5e025;}
li+li+li+li+li+li+li+li a, a+a+a+a+a+a {color: #16afc5;}
li+li+li+li+li+li+li+li+li a, a+a+a+a+a+a+a {color: #ec086b;}
li+li+li+li+li+li+li+li+li+li a {color: #aaaaaa;}
li+li+li+li+li+li+li+li+li+li+li a, a+a+a+a+a+a+a+a {color: #a5e025;}
li+li+li+li+li+li+li+li+li+li+li+li a, a+a+a+a+a+a+a+a+a {color: #16afc5;}
li+li+li+li+li+li+li+li+li+li+li+li+li a, a+a+a+a+a+a+a+a+a+a {color: #ec086b;}
li+li+li+li+li+li+li+li+li+li+li+li+li+li a {color: #aaaaaa;}
li+li+li+li+li+li+li+li+li+li+li+li+li+li+li a, a+a+a+a+a+a+a+a+a+a+a {color: #a5e025;}
li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li a, a+a+a+a+a+a+a+a+a+a+a+a {color: #16afc5;}
li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li a, a+a+a+a+a+a+a+a+a+a+a+a+a {color: #ec086b;}
li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li a {color: #aaaaaa;}
li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li a, a+a+a+a+a+a+a+a+a+a+a+a+a+a {color: #a5e025;}
li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li a, a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a {color: #16afc5;}
li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li a, a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a {color: #ec086b;}
li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li a {color: #aaaaaa;}
li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li a, a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a {color: #a5e025;}
li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li a, a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a {color: #16afc5;}
li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li a, a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a {color: #ec086b;}
li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li a {color: #aaaaaa;}
li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li a, a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a {color: #a5e025;}
li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li a, a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a {color: #16afc5;}
li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li a {color: #ec086b;}
/* ------------------------------------------------ HEADER ------------------------------------------------ */
.subtitle {display: none;}
.title { padding: 0 0 5px 5px; margin: 0; text-transform: uppercase; color: #666666;}
.navheader { padding: 12px 0 0 5px; margin: 0; font: 18px arial black; text-transform: uppercase; }
.navheader li {display: inline; }
.navheader li a, .navheader li {color: #ec086b;}
.navheader li+li a, .navheader li+li {color: #a5e025; }
.navheader li+li+li a, .navheader li+li+li {color: #16afc5;}
.navheader li+li+li+li a, .navheader li+li+li+li {color: #ec086b;}
.navheader li+li+li+li+li a, .navheader li+li+li+li+li {color: #a5e025; }
/* ------------------------------------------------ SIDEBAR ------------------------------------------------ */
#sidebar { padding: 10px; color: #666666; border-top: 1px solid #444444; }
.sbarbody, .sbarbody2 {float: left; width: 20%; }
.defaultuserpic {text-align: right; float: left; margin-bottom: 10px; }
.defaultuserpic img{border: 1px solid #444444; padding: 4px; }
.sbartitle {display: none;}
.sbarbody2 { padding: 5px; width: 40%;}
.sbarbody > ul.sbarlist {padding: 0; margin: 0;}
#sidebar_tags .sbaritem {border-bottom: 1px solid #444444; list-style: none; }
#sidebar_tags .sbaritem a {display: block; padding: 2px 5px 2px 0;}
#sidebar_tags .sbaritem a:hover {background: #000000; }
.tagcloud {margin: 0; padding: 0 5px 5px 0; list-style: none; }
.tagcloud a:hover {color: #444444; }
.tagcategory0 {font-size: 9px; color: #aaaaaa;}
.tagcategory1 {font-size: 11px; color: #ec086b;}
.tagcategory2 {font-size: 12px; color: #a5e025;}
.tagcategory3 {font-size: 12px; font-weight: bold; color: #16afc5;}
.tagcategory4 {font-size: 14px; color: #16afc5;}
.tagcategory5 {font-size: 14px; font-weight: bold; color: #ec086b;}
.tagcategory6 {font-size: 16px; color: #ec086b;}
.tagcategory7 {font-size: 16px; font-weight: bold; color: #a5e025;}
.tagcategory8 {font-size: 18px; color: #a5e025;}
.tagcategory9 {font-size: 20px; color: #16afc5; }
#sidebar_linklist .sbartitle {margin-bottom: 2px;}
#sidebar_linklist .sbaritem {border-bottom: 1px solid #444444; list-style: none; }
#sidebar_linklist .sbaritem a {display: block; padding: 2px 5px 2px 0;}
#sidebar_linklist .sbaritem a:hover {background: #000000; }
#sidebar_calendar .calendar {width: 100%; }
#sidebar_calendar .calendar td {border-top: 1px solid #444444; text-align: center; font: 9px silkscreen, arial;}
#sidebar_calendar .calendar td a {color: #16afc5; display: block;}
#sidebar_calendar .calendar td a:hover {color: #a5e025; }
#sidebar_summary .sbaritem{ margin: 0; padding: 2px 5px 2px 0;
border-bottom: 1px solid #444444; list-style: none; color: #444444; }
#sidebar_summary .sbaritem a:hover { color: #444444;}
/* ------------------------------------------------ ENTRY ------------------------------------------------ */
#maincontent {width: 100%; clear: both; border-top: 1px solid #444444; }
.clear {display: none;}
.subcontent {clear: right; border-bottom: 1px solid #444444;}
.subject , .subject a{font: 14px arial; color: #ffffff; letter-spacing: -1px; }
.subject {padding: 5px 5px 0 5px;}
.date {color: #000000; background: #444444; width: 200px; font: 9px silkscreen, arial; padding: 0 0 1px 5px; text-transform: uppercase;}
.userpic, .userpicfriends {float: right; background: #000000 !important; color: transparent; text-align: center;}
.userpic img, .userpicfriends img {margin: 5px; border: 1px solid #444444; padding: 4px;}
.userpicfriends a font{ color: #16afc5 !important; }
.lj-view-friends .entry_text {min-height: 110px; }
.entry_text {padding: 10px 0 0 0; min-height: 85px; padding: 5px 5px 0 5px;}
.entry_text img {max-width: 420pxpx; border: 1px solid #444444; padding: 4px; }
.ljtags {margin-top: 10px; }
.currents strong { font: 9px arial; text-transform: uppercase; color: #444444; }
.currents {padding: 5px;}
.comments { margin: 5px 0 5px 0; padding: 0px 0 0 5px; color: #444444; }
/* ------------------------------------------------ TAGS PAGE ------------------------------------------------ */
.lj-view-tags h2{ font: 9px silkscreen, arial; background: #444444; margin: 0; padding: 2px 0 1px 5px; color: #000000; width: 250px;}
.lj-view-tags .ljtaglist {margin: 0; padding: 5px 0 0 30px;}
.lj-view-tags .ljtaglist li {list-style: decimal-leading-zero;}
/* ------------------------------------------------ ARCHIVE ------------------------------------------------ */
.year { padding: 5px 5px 0 0; margin: 0;}
.year li {display: inline; border-right: 1px solid #444444; padding: 0 5px 0 5px;}
.yeartable { margin: 10px 0 0 0; width: 100%; border-collapse: collapse;}
.yearmonth {background: #444444; text-transform: uppercase; color: #000000; font: 9px silkscreen, arial; padding: 1px 0 2px 5px; }
.yearmonth + .yearmonth {background: #000000;}
.yearday {text-transform: uppercase; text-align: center; padding: 5px;}
.yeardate {border-top: 1px solid #444444;}
.yeardate a {background-color: #ec086b; color: #000000; display: block;}
.yeardate + .yeardate a {background-color: #a5e025; }
.yeardate + .yeardate + .yeardate a {background-color: #16afc5;}
.yeardate + .yeardate + .yeardate + .yeardate a {background-color: #ec086b;}
.yeardate + .yeardate + .yeardate + .yeardate + .yeardate a{background-color: #a5e025; }
.yeardate + .yeardate + .yeardate + .yeardate + .yeardate + .yeardate a {background-color: #16afc5;}
.yeardate + .yeardate + .yeardate + .yeardate + .yeardate + .yeardate + .yeardate a {background-color: #ec086b;}
.yeardate a:hover {background: #444444 !important; color: #000000 !important; }
.lj-view-month .entry{padding: 5px;}
.lj-view-month dd a {color: #ffffff; font: bold 14px arial; letter-spacing: -1px;}
/* ------------------------------------------------ COMMENT PAGES ------------------------------------------------ */
.skiplinks {padding: 2px 0 2px 5px; color: #444444;}
.box center{ padding: 5px;}
.box center b {font: normal 9px arial;}
.box center table {border-collapse: collapse; text-transform: uppercase; }
.box b a {color: #16afc5;}
.box td a b, .box td a+a+a+a b, .box td a+a+a+a+a+a b, .box td a+a+a+a+a+a+a+a+a b {color: #ec086b;}
.box td a+a b, .box td a+a+a+a+a b, .box td a+a+a+a+a+a+a b, .box td a+a+a+a+a+a+a+a+a+a b {color: #a5e025;}
.box td a+a+a b, .box td a+a+a+a+a b, .box td a+a+a+a+a+a+a+a b, .box td a+a+a+a+a+a+a+a+a+a+a b {color: #16afc5;}
.box > div + div {background: #222222;}
.commentbox { border-top: 1px solid #444444; padding: 5px; min-height: 110px;}
.commentbox .userpiccomment {float: right; border: 1px solid #444444; padding: 4px; }
.commentboxpartial {border-top: 1px solid #444444; padding: 2px 0 2px 5px;}
.datesubjectcomment {color: #aaaaaa; text-transform: uppercase; margin-bottom: 10px;}
.datesubjectcomment a {text-transform: lowercase;}
.datesubjectcomment strong {color: #ffffff; text-transform: capitalize; font: normal 12px arial; letter-spacing: -1px; }
.commentbox div + div + div {font: 9px arial !important; color: #444444; }
.commentbox div + div + div div {display: inline; text-transform: uppercase; color: #aaaaaa; }
.box + .box {padding: 5px; border-top: 1px solid #444444; }
/* ------------------------------------------------ FOOTER ------------------------------------------------ */
.clearfoot {display: none;}
.navfooter {margin: 0; padding: 5px; }
.navfooter li {display: inline; list-style: none; border-right: 1px solid #444444; padding: 0 5px 0 5px;}
/* ------------------------------------------------ EXTRAS ------------------------------------------------ */
div.ContextualPopup {display: block !important;}
.ljuser 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;}
.ljuser img[src="http://l-stat.livejournal.com/img/community.gif"] {width:0; height: 0; padding: 9px 8px 0 2px !important;
background: url(http://img176.imageshack.us/img176/6571/userinfopk2.png) no-repeat;}
.subject .ljuser img[src="http://l-stat.livejournal.com/img/userinfo.gif"] { margin-left: 5px; }
.subject .ljuser img[src="http://l-stat.livejournal.com/img/community.gif"] { margin-left: 5px;}
img[src="http://l-stat.livejournal.com/img/icon_protected.gif"]{width: 0; height: 0; padding: 0 0 10px 10px !important;
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;
background: url(http://img329.imageshack.us/img329/4985/privatevy7.png) no-repeat;}
img[src="http://l-stat.livejournal.com/img/btn_del.gif"]{width: 0; height: 0; padding: 0 0 10px 10px !important;
background: url(http://img189.imageshack.us/img189/6336/deleteewh.png) no-repeat; }
img[src="http://l-stat.livejournal.com/img/btn_scr.gif"]{width: 0; height: 0; padding: 0 0 10px 10px !important;
background: url(http://img207.imageshack.us/img207/2286/unscreenme.png) no-repeat; }
img[src="http://l-stat.livejournal.com/img/btn_unscr.gif"]{width: 0; height: 0; padding: 0 0 10px 10px !important;
background: url(http://img387.imageshack.us/img387/7264/screenme.png) no-repeat; }
img[src="http://l-stat.livejournal.com/img/btn_freeze.gif"]{width: 0; height: 0; padding: 0 0 10px 10px !important;
background: url(http://img95.imageshack.us/img95/1418/freeze.png) no-repeat; }
img[src="http://l-stat.livejournal.com/img/btn_unfreeze.gif"]{width: 0; height: 0; padding: 0 0 10px 10px !important;
background: url(http://img374.imageshack.us/img374/1844/unfreeze.png) no-repeat; }
img[src="http://l-stat.livejournal.com/img/btn_track.gif"]{width: 0; height: 0; padding: 0 0 10px 10px !important;
background: url(http://img95.imageshack.us/img95/1002/tracku.png) no-repeat; }
::-moz-selection { background: #ffffff; color: #000000; }
::selection { background: #ffffff; color: #000000; }
code::-moz-selection { background: #ffffff; color: #000000; }
code::selection { background: #ffffff; color: #000000; }
div.ContextualPopup div.Inner div.Content { font: 9px arial !important; }
div.ContextualPopup div.Inner div.Content a { text-decoration: none !important; color: #ec086b !important;}
div.ContextualPopup div.Inner div.Content .RemoveFriend a { text-decoration: none !important; color: #16afc5 !important;}
div.ContextualPopup div.Inner div.Content .SetBan a { text-decoration: none !important; color: #a5e025 !important;}
div.ContextualPopup div.Inner div.Content a:hover { color: #aaaaaa !important; cursor: help; }
div.ContextualPopup div.Inner { background-color: transparent !important; border: 0; text-align: right;}
div.ContextualPopup .Content { padding: 5px; color: #aaaaaa !important; width: 200px; border: 1px solid #444444; background-color: #000000;}
div.ContextualPopup .Content .OnlineStatus {font-weight: normal;}
div.ContextualPopup .Userpic { padding: 4px; border: 1px solid #444444; background-color: #000000; margin: 0 -55px 0 0;}
#lj_controlstrip td {border-right: 1px solid #666666; font: 9px arial; background: #000000; color: #ffffff;}
#lj_controlstrip td a {color: #ec086b;} #lj_controlstrip td a+a+a+a+a+a+a+a {color: #ec086b;}
#lj_controlstrip td a+a {color: #a5e025;} #lj_controlstrip td a+a+a+a+a+a+a {color: #16afc5;}
#lj_controlstrip td a+a+a {color: #16afc5;} #lj_controlstrip td a+a+a+a+a+a {color: #a5e025;}
#lj_controlstrip td a+a+a+a {color: #ec086b;} #lj_controlstrip td a+a+a+a+a {color: #ec086b;}
#lj_controlstrip td a b {color: #a5e025;}
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
The recommended banner size is 700px wide.
.headerimage {background: url(HTTP://URLHERE.PNG) no-repeat center; height: ###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#ec086b#aaaaaa#a5e025#444444#222222#16afc5#000000
Add a Banner | Replace Colours | Replace Images
( Optional ) Replace Images
Get all the images at Box.net
Add a Banner | Replace Colours | Replace Images
Fruitstyle: Layouts and Winamp Skin Designs by Malionette