Layout 045 : Frankfurt Air
Click for a Live Preview.
( Layout ) #045 : Frankfurt Air
I don't remember much about Frankfurt since I only there for a transfer. They do have really cool hand sinks and handles though!
( Install ) Step 1 - System
Select Theme
- Select any S2 Flexible Squares 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
- 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 --- 045 Frankfurt Air ---
Wingweaver22 @ Fruitstyle.livejournal.com
Do not remove this note. */
/* --------------------------- BODY --------------------------- */
body {font: 12px arial; color: #888888; margin: 0; padding: 0; }
a {color: #000000; text-decoration: none; border-bottom: 1px dotted #cccccc; }
a:hover {color: #888888; }
input, select, textarea {border: 1px solid #eeeeee; font: 12px arial !important; color: #888888; }
.ljuser b {padding: 0 0 0 2px; }
.subj-link {margin: 0 0 0 5px; }
blockquote {border: 1px dotted #cccccc; padding: 10px; }
/* --------------------------- HEADER & SIDEBAR --------------------------- */
#header { position: absolute; background: #eeeeee url(http://i43.tinypic.com/1zdubs2.png) no-repeat 5px 5px;
padding: 300px 0 0 0 ; width: 170px; margin: 0 10px 0 10px; z-index: 200;}
.title, .subtitle {display: none; }
.navheader { padding: 14px 0 0 0; margin: 10px 0 0 0; background: #ffffff;}
.navheader li, .sbaritem {background: #eeeeee; list-style: none; font: 11px arial; border-bottom: 2px solid #ffffff;}
.navheader li a, .sbaritem a {border: 0; padding: 0 5px 0 5px; background: #ffffff; color: #888888; }
li.view {background: #ffffff; padding: 0 5px 0 5px; color: #cccccc; }
.navheader li:hover, .sbaritem:hover {background: #ffffff; }
.navheader li:hover a, .sbaritem:hover a {color: #cccccc; }
#sidebar {position: absolute; padding: 406px 10px 0 10px; width: 170px; border-right: 1px solid #cccccc; z-index: 10; }
.defaultuserpic {background: #eeeeee; padding: 5px; text-align: center;}
.defaultuserpic a {display: block; border: 0; }
.defaultuserpic img {opacity: .7; }
.defaultuserpic a:hover img {opacity: 1; }
.sbarlist {list-style: none; padding: 0; margin: 0;}
.sbartitle { font: 16px arial; color: #000000; padding: 15px 5px 15px 5px; }
.calendar {text-align: center; width: 100%; }
.calendar td { border: 1px solid #eeeeee; font-size: 11px; }
.calendar td a {display: block; border: 0; background: #eeeeee; }
.sbarbody2 {padding: 0 5px 0 5px;}
/* --------------------------- ENTRY --------------------------- */
#maincontent { padding: 0 10px 0 200px;}
.entry_text, .entry {margin: 0 0 15px 0; }
.userpic, .userpicfriends {position: relative; float: right; margin: 0 0 10px 10px; background: #ffffff !important;}
.userpic img, .userpicfriends img { -moz-border-radius: 5px; -webkit-border-radius: 5px; background: #eeeeee;
border: 5px solid #eeeeee;}
.userpicfriends {color: #eeeeee; font-size: 0; text-align: left; }
.userpicfriends a {border: 0; font-size: 11px !important; display: block; background: #eeeeee;
margin: 2px 0 0 0; }
.userpicfriends font {color: #000000; background: #ffffff; padding: 0 5px 0 5px; }
.userpicfriends a:hover font {color: #888888; }
.userpicfriends a:hover {background: #ffffff; }
.datesubject {margin: 10px 0 0 0;}
.date { font-size: 9px; color: #cccccc; }
.subject {font: 16px arial; padding: 0px 0 15px 0; color: #000000; }
a img {border: 1px solid #cccccc; opacity: .7;}
a:hover img {opacity: 1; }
.currents, .ljtags { font: 9px arial; margin: 0px 0 15px 0;}
.currents img {float: right; }
.currents strong, .ljtags {text-transform: uppercase; color: #cccccc; }
.ljtags {margin: 15px 0 0 0; }
.clear, .clearfoot {display: none; }
.comments {background: #eeeeee; font-size: 11px; color: #eeeeee; clear: both;}
.comments a {background: #ffffff; border: 0; padding: 0 5px 0 5px; color: #888888;}
.comments a:hover {color: #cccccc; }
/* --------------------------- FOOTER --------------------------- */
#footer { clear: both; padding: 0 0 15px 0; }
.navfooter {padding: 0; margin: 0; text-align: center; }
.navfooter li {display: inline; font: 16px arial; letter-spacing: -1px; margin: 0 10px 0 10px;}
/* --------------------------- ARCHIVE / TAGS --------------------------- */
.year {padding: 15px 0 15px 0; margin: 10px 0 0 0; text-align: center; }
.year li {display: inline; font: 16px arial; letter-spacing: -1px; margin: 0 10px 0 10px;}
.yeartable {text-align: center; }
.yeartable td {border: 1px solid #eeeeee;}
.yeartable td a {display: block; border: 0; background: #eeeeee; text-transform: uppercase; font-size: 9px; }
.lj-view-tags h2 {font: 16px arial; color: #000000; }
.ljtaglist {width: 30%; margin: 0; padding: 0;}
.ljtaglist li {background: #eeeeee; list-style: none; font: 11px arial; border-bottom: 2px solid #ffffff;}
.ljtaglist li a {border: 0; padding: 0 5px 0 5px; background: #ffffff; color: #888888; }
.ljtaglist li:hover {background: #ffffff; }
.ljtaglist li:hover a {color: #cccccc; }
/* --------------------------- COMMENTS PAGE --------------------------- */
.skiplinks {margin: 10px 0 0 0; }
.datesubjectcomment > strong {font: 16px arial; color: #000000; }
.userpiccomment {float: left; -moz-border-radius: 5px; -webkit-border-radius: 5px; background: #eeeeee;
border: 5px solid #eeeeee; margin: 0 10px 10px 0;}
.box center {margin: 15px 0 15px 0;}
.commentbox, .commentboxpartial {clear: both; border-bottom: 2px solid #eeeeee; margin: 10px 0 0 0;}
.commentreply {padding: 10px; }
.commentboxpartial {padding-bottom: 10px;}
.commentbox div {text-align: left !important;}
.commentbox div div img {width: 16px; height: 16px; border: 0; padding: 0; margin: 0; }
.commentbox div div a {border: 0; padding: 0;}
.box {margin: 15px 0 0 0; }
.ljcmtmanage {border: 1px solid #cccccc; background: #ffffff; padding: 5px; }
/* --------------------------- REPLY FORMS --------------------------- */
#qrform table {border: 1px solid #eeeeee !important; padding: 5px; }
#postform table {border: 1px solid #eeeeee; margin: 10px 0 0 0;}
/* --------------------------- LJ CUSTOMS --------------------------- */
::-moz-selection { background: #888888; color: #ffffff; }
::selection { background: #888888; color: #ffffff; }
code::-moz-selection { background: #888888; color: #ffffff; }
code::selection { background: #888888; color: #ffffff; }
div.Inner { border: 1px solid #cccccc !important; }
div.Content { font: 11px arial; color: #888888; }
div.Userpic img { border: 5px solid #eeeeee; }
div.ContextualPopup div.Inner div.Content span a, div.ContextualPopup div.Inner div.Content a { color: #000000 !important; text-decoration: none !important;
font-weight: lighter; border-bottom: 1px dotted #cccccc;}
div.ContextualPopup div.Inner div.Content span a:hover, div.ContextualPopup div.Inner div.Content a:hover {color: #888888 !important; }
#lj_controlstrip td {background: #ffffff; font: 12px arial; border-right: 1px solid #eeeeee; border-bottom: 1px solid #eeeeee; }
#lj_controlstrip_statustext { color: #888888; }
#lj_controlstrip td a {color: #000000; border-bottom: 1px dotted #cccccc; }
#lj_controlstrip td #link_0 { border: 0; }
#lj_controlstrip .ljuser img {display: none; }
/* --------------------------- IMAGES --------------------------- */
.ljtags { padding-left: 12px; background: url(http://i41.tinypic.com/5estb7.jpg) no-repeat center left;}
.currentlocation { padding-left: 12px; background: url(http://i43.tinypic.com/15gb8rk.jpg) no-repeat center left;}
.currentmood { padding-left: 12px; background: url(http://i43.tinypic.com/33l2gd3.jpg) no-repeat center left;}
.currentmusic { padding-left: 12px; background: url(http://i39.tinypic.com/2uogpy8.jpg) no-repeat center left;}
/* Generated by Malionette's Tiny Icon Generator */
img[src*="img/userinfo.gif"],img[src*="img/newyearpic_1.gif"] {width: 0 !important; vertical-align: middle !important; margin: 0 auto; height: 0 !important;
background: transparent url(http://i43.tinypic.com/140y9g7.jpg) no-repeat; padding: 8px 0 0 6px !important; }
img[src*="img/community.gif"] {width: 0 !important; vertical-align: middle !important; margin: 0 auto; height: 0 !important;
background: transparent url(http://i39.tinypic.com/243izco.jpg) no-repeat; padding: 8px 0 0 9px !important; }
img[src*="img/syndicated.gif"] {width: 0 !important; vertical-align: middle !important; margin: 0 auto; height: 0 !important;
background: transparent url(http://i41.tinypic.com/11kl5zc.jpg) no-repeat; padding: 5px 0 0 5px !important; }
img[src*="img/icon_protected.gif"] {width: 0 !important; vertical-align: middle !important; margin: 0 auto; height: 0 !important;
background: transparent url(http://i39.tinypic.com/23s8ck7.jpg) no-repeat; padding: 8px 0 0 6px !important; }
img[src*="img/icon_private.gif"] {width: 0 !important; vertical-align: middle !important; margin: 0 auto; height: 0 !important;
background: transparent url(http://i42.tinypic.com/29nut0w.jpg) no-repeat; padding: 6px 0 0 9px !important; }
img[src*="img/icon_groups.gif"] {width: 0 !important; vertical-align: middle !important; margin: 0 auto; height: 0 !important;
background: transparent url(http://i39.tinypic.com/2n20kfq.jpg) no-repeat; padding: 8px 0 0 6px !important; }
/* --------------------------- INSTALL HEADER --------------------------- */
/* ######## Insert header url and header height. Don't touch anything else. ######## */
#header { background-image: url(http://i43.tinypic.com/1zdubs2.png); background-repeat: no-repeat; background-position: 5px 5px; padding-top: 300px;}
/* ######## Insert header height + 106. Example: 300 + 106 = 406 ######## */
#sidebar { padding-top: 406px; }
/* --------------------------- INSERT ANY NEW CODE BELOW --------------------------- */
;){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 160px wide and 300px high.
Replace the image within the CSS with your custom banner.
Add a Banner | Replace Colours | Replace Images
( Optional ) Replace Colours
#ffffff#eeeeee#cccccc#888888#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
