Layout 044: Crystal Glasses
Click for a Live Preview.
( Layout ) #044 : Crystal Glasses (ver. 2)
Upon request, a remake of Layout 025: The Diamonds in the Glass for Flexible Squares.
( Install ) Step 1 - System
Select Theme
- Select any S2 Flexible Squares 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
- 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 --- 044 Crystal Glasses ---
Wingweaver22 @ Fruitstyle.livejournal.com
Do not remove this note. */
/* -------------------------- BODY -------------------------- */
body {background: #e5eeee url(http://img546.imageshack.us/img546/209/f38a3q.png) repeat; border-left: 15px solid #97b8b6; border-right: 15px solid #97b8b6; font: 11px arial; color: #666666;
margin: 0;}
#content-outer {background: #e5eeee; border-left: 1px solid #ffffff; border-right: 1px solid #ffffff; width: 750px; margin: 0 auto; padding: 0 10px 0 10px; }
a, a:visited {text-decoration: none; color: #97b8b6;}
a:hover { color: #ccdedd; cursor: help;}
blockquote, input, select, textarea { border: 1px dotted #dddddd; font: 9px arial; }
blockquote { padding: 10px;}
/* -------------------------- HEADER -------------------------- */
#header {background: #ffffff; padding-bottom: 10px;}
.navheader {padding: 20px; margin: 0; border-top: 10px solid #97b8b6; font-size: 9px; background: #ccdedd; height: 20px; border-bottom: 2px solid #97b8b6; }
.navheader li { display: block; border: 1px solid #ffffff; padding: 2px; float: left; margin-right: 10px; text-transform: uppercase; color: #ffffff; }
.navheader li a {color: #ffffff; }
.navheader li:hover {background: #ffffff; color: #97b8b6; }
.navheader li:hover a { color: #97b8b6; }
.title { border: 1px solid #dddddd; margin: 20px; padding: 0px 20px 0 20px; color: #e5eeee; font: 55px times new roman; letter-spacing: -5px; text-transform: lowercase;
text-align: right; }
.subtitle {display: none;}
/* -------------------------- SIDEBAR -------------------------- */
#sidebar li, #sidebar ul {margin: 0; padding: 0; list-style: none;}
#sidebar {border-top: 2px solid #ccdedd; border-bottom: 10px solid #ccdedd; background: #97b8b6; height: 150px; overflow: hidden; color: #ffffff; }
.defaultuserpic, .sbarbody2, .sbarbody {float: left; width: 168px; margin: 10px 10px 10px 0px; }
.defaultuserpic {-moz-border-radius: 10px; -webkit-border-radius: 10px; border: 10px solid #ffffff; text-align: center; background: #ffffff; margin: 10px; }
.defaultuserpic img {border: 1px solid #dddddd; padding: 3px; opacity: .7; }
img:hover {opacity: 1; }
.sbarbody, .sbartitle {display: none;}
#sidebar_calendar, #sidebar_tags, #sidebar_linklist, #sidebar_summary {display: block; height: 130px; overflow: auto;}
#sidebar table.calendar {width: 100%; }
#sidebar table.calendar td {border: 1px solid #ccdedd; text-align: center; }
#sidebar a {color: #ccdedd; }
#sidebar a:hover {color: #ffffff; }
#sidebar_linklist li.sbaritem a { border-bottom: 1px dashed #ffffff; padding: 0px 5px 0 5px; display: block; margin: 2px; }
/* -------------------------- ENTRY -------------------------- */
#maincontent {background: #ffffff; padding: 1px 0 1px 0; }
.subcontent {border: 1px solid #dddddd; padding: 10px; margin: 10px; min-height: 110px; }
.userpic img, .userpicfriends img {float: right; border: 1px solid #dddddd; padding: 3px; opacity: .7; margin-left: 10px; }
.userpic, .userpicfriends {background: #ffffff !important; color: #dddddd; text-align: right; }
.userpicfriends a font {color: #97b8b6; }
.datesubject {text-align: right; border-top: 1px solid #dddddd; border-bottom: 1px solid #dddddd; margin: 10px 108px 10px 0; }
.date {border-bottom: 1px solid #dddddd; }
.subject { font: 24px times new roman; letter-spacing: -2px; }
.entry {clear: both;}
.entry_text {padding: 10px 0 10px 0; }
.currents div, .comments, .ljtags {border-top: 1px solid #dddddd; }
.ljtags {font-weight: bold; margin: 10px 0 -10px 0; }
.currents img {float: right; padding: 5px; border: 1px solid #dddddd; background: #ffffff; border-top: 0;}
.clear {display: none;}
/* -------------------------- FOOTER -------------------------- */
#footer li, #footer ul{ margin: 0; padding: 0; list-style: none; text-align: center; }
#footer li {display: inline; }
/* -------------------------- COMMENTS -------------------------- */
.lj-view-entry .title {font-size: 24px; letter-spacing: -1px; color: #97b8b6;}
.skiplinks {text-align: center; padding-top: 10px; color: #dddddd; }
.box {border: 1px solid #dddddd; padding: 10px; margin: 10px;}
.box center {font-weight: lighter; text-transform: uppercase; font-size: 9px; border-bottom: 1px solid #dddddd; padding: 0 0 10px 0;}
.userpiccomment {float: left; border: 1px solid #dddddd; padding: 3px; opacity: .7; margin: 0 10px 0 0;}
.commentreply {border-top: 1px solid #dddddd; border-bottom: 1px solid #dddddd; margin-left: 108px; padding: 10px 0 10px 0;}
.commentbox, .commentboxpartial {clear: both; margin: 10px 0 0 0; padding: 10px; border: 1px solid #dddddd;}
#qrform table {border: 1px solid #dddddd !important; width: 100%; }
/* -------------------------- ARCHIVE -------------------------- */
.year, .year li{ list-style: none; padding: 0; margin: 0;text-align: center;}
.year {padding-top: 10px;}
.year li {display: inline; }
.yeartable { margin: 0 auto; margin-top: 10px;}
.yeartable td {background: #ffffff; border: 1px solid #dddddd;}
/* -------------------------- TAGS -------------------------- */
/* -------------------------- -------------------------- */
.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: #97b8b6; color: #ffffff; }
::selection { background: #97b8b6; color: #ffffff; }
code::-moz-selection { background: #97b8b6; color: #ffffff; }
code::selection { background: #97b8b6; color: #ffffff; }
← 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 ) Replace Colours
#ffffff#e5eeee#dddddd#ccdedd#97b8b6#666666
Replace Colours | Replace Images
( Optional ) Replace Images
Get all the images at Box.net
Background image courtesy of 77words.
Replace Colours | Replace Images
Fruitstyle: Layouts and Winamp Skin Designs by Malionette
