S2 Flexible Squares: The Little Princess

[emptylane]

One S2 flexible square layout. For more please visit walkingparasol! Entries are public.






Name:The Little Princess

Accounts:Works best with basic and paid accounts.

Style:S2 Flexible Squares

Tested In:Mozilla FireFox | Google Chrome.

Resolutions:1280x800 ( not tested in other resolutions )

installation:Go to "customize journal style" and make sure you are in S2. Type "flexible squares" in the search box on the right and choose any of the templates. Now press the "customize selected theme - button". Go to "custom CSS" and set all the drop down boxes to "no"! Copy the layout CSS in the box called "custom stylesheet" and press "save changes".

Custom Stylesheet: /*--- Original stylesheet by walkingparasol ---*/

body{ background: #f4f4ea; font-family:lucida sans unicode; font-size:8pt; margin-top: -10px; color: #a0a0a0; line-height:150%;}

a, a:link, a:visited, a:active{ color: #dbcab3; font-weight: 100; text-decoration: none; }

a:hover{ color: #e8dfc8; }

blockquote{ background: #fcfcfc; border-top: #dbcab3 5px solid; padding:10px; color: #a0a0a0;}

::-moz-selection { background: #dbcab3; color: #ffffff; }

code, kbd, pre, tt{ font-family: courier new; }

#content{ width: 650px; margin: auto; }

#maincontent{ margin-top:15px; }

#header{ text-align:right; color:#808080; padding: 0px; background: #f4f4ea; }

div#header a, div#header a:link, div#header a:visited, div#footer a, div#footer a:link, div#footer a:visited{ color: #dbcab3; border-bottom: 5px solid #ececec; }

div#header a:hover, div#footer a:hover{ color: #E8DFC8; }

ul.navheader{ padding: 0; margin: 0; }

ul.navheader li{ display:inline; list-style:none; margin:4px;}

.subcontent { padding: 0px; }

.entry{ background-color: #fcfcfc; padding: 30px; color: #9C9C87; font-family: arial; font-size: 11px; line-height: 150%; text-align: justify; }

.entry ul li { padding-left: 0px; margin-left: 0px; }

.entry ol li { padding-left: 0px; margin-left: 0px; }

.userpic, .userpicfriends { position: relative; float: left; margin: 20px 20px 0px 10px; text-align: center; font-size: 9px; background-color: #ffffff !important; z-index: 15; border: 1px solid #ffffff; }

.userpic img, .userpicfriends img, .defaultuserpic img{ background:#E8DFC8; padding:10px;}

.userpicfriends font { color: #aaaaaa !important; text-transform: lowercase; }

.subject { text-align: right; font-size: 16px; color: #ffffff; text-transform: lowercase; }

.subject a, .subject a:link, .subject a:visited { color: #ffffff; text-transform: lowercase; }

.subject a:hover { color: #ffffff; }

.datesubject { padding: 18px; background-color: #DBCAB3; border-bottom: 10px solid #F4F4EA; }

.currents{ text-align: left; margin: -30px 0px 0px 0px; padding-left: 15px; font-size: 11px; color: #9C9C87; border-left: 5px solid #ececec; text-transform: lowercase; }

.ljtags{ text-align: left; margin: 20px 0px 0px 0px; padding-left: 15px; font-size: 11px; color: #9C9C87; border-left: 5px solid #ececec; text-transform: lowercase; font-weight: bold; }

.ljtags a{ font-weight: normal; }

.currents:hover, .ljtags:hover { border-left: 5px solid #C6D9C3; }

.comments { text-align: right; border-top: 1px solid #F0F0E9; font-weight: normal; font-family: georgia; font-size: 14px; padding: 8px; position: relative; color: #ffffff; top: 10px; }

#header, .comments, #footer{ font-size: 8pt; text-transform:uppercase; font-family:"calibri"; letter-spacing:1px;}

.comments{ text-align: center; margin: 8px 0px auto auto; padding-top:10px; border-top: 1px #ececec solid; color:#fff; position: relative;}

div.comments a, div.comments a:link, div.comments a:visited{ color: #554855; }

div.comments a:hover{ color: #b0b9c8; }

.commentbox { color: #999999; font-family: arial; width: auto; }

.datesubjectcomment { padding: 5px; color: #777777; font-size: 8pt; font-family: arial; text-transform: lowercase; }

.datesubjectcomment a { text-decoration: none; }

.userpiccomment { position: relative; background: #e8dfc8; padding: 10px; border: 1px solid #ffffff; width: 45px; height: 45px; top: -30px; left: 0px; margin: 10px 10px -20px 10px; z-index: 15; float: left; }

input { border: 1px solid #EFEFEF; background: #FFFFFF; color: #C5C7BB; font-family: arial; font-size: 8pt; text-transform: lowercase; }

select { border: 1px solid #EFEFEF; background: #FFFFFF; color: #C5C7BB; font-family: arial; font-size: 8pt; text-transform: lowercase; }

#footer{ margin: -15px 0 0 0; padding: 20px; text-align: center; color: #808080; background: #F4F4EA;}

ul.navfooter{ padding: 0; margin: 0; display: inline;}

ul.navfooter li{ margin: 0 5px 0 5px; display: inline; }

.clearfoot{ clear: both; }

.clear{ height: 15px; }

span.ljuser, span.ljuser a b{ padding: 0; width: 0; height: 0; margin: 0; font-weight:100;}

span.ljuser img{ visibility: hidden; padding: 0; width: 0; height: 0; }

.ljtaglist{ padding:15px; list-style:none; background:#fff; }

.yeartable{ background:#fff; padding:0; margin-top:15px; }

.yearday, .yeardate{ border-left:1px #ececec dashed; padding:5px; }

.yearmonth{ background:#ececec; padding:5px; }

.yeardate{ border-top:1px #ececec dashed; }

ul.year, ul.year li{ list-style:none; padding:10px; display:inline; }

img[src="http://p-stat.livejournal.com/img/icon_protected.gif"], img[src="http://p-stat.livejournal.com/img/icon_private.gif"]{ width: 0; height: 0; padding: 0 0 10px 8px; background: url(http://i25.tinypic.com/2i11ptz.gif); }

h2, li.sbartitle, #lj_controlstrip, #sidebar_calendar, .title, .subtitle, .date { display:none; }

#sidebar{ background: #F4F4EA; padding:0px 0px 15px 0px; margin-top:10px; }

.sbarbody2{ padding: 15px; text-align:justify; }

ul.sbarlist{ list-style: none; width:100%; margin-left:-50px; text-align:right; }

li.sbaritem{ display:inline; list-style: none; padding:5px; }

.defaultuserpic { margin: 5px 15px 0px 5px; float: left; }

.defaultuserpic img { padding: 10px; background: #e8dfc8; border:1px solid #ffffff; }

Credit:credit somewhere on your profile or in your layout sidebar!

Icon:The icon used in this preview is made by the wonderful rudebox。