milou_veronica: s2 layout: my sweetest downfall [flexible squares]

use your woman as a human shield (

milou_veronica) wrote,
@ 2009-04-04 18:53:00

Current music:	Pistol Dreams - The Tallest Man On Earth
Entry tags:	style: flexible squares, wot: s2 layout

s2 layout: my sweetest downfall [flexible squares]
Lately I've been perusing topshop for future birthday presents (for myself, hah) and I thought, 'This design is cute, I should totally nick it'. So here we are.

image | live

layout:my sweetest downfall
a topshop knock-off
style: flexible squares
accounts: Basic, Paid, and Sponsored
features:custom comment pages, mini icons, sidebar
browsers: IE7, FF, Safari, Chrome, and Opera

/*-------------------------------------------------

my sweetest downfall - totally nicked from topshop ((flexible squares;milou veronica))

----------------------------------------------------*/

body { background: #ffffff url(http://i44.tinypic.com/2ufsfhz.png) repeat scroll 0 0;  text-align: center; color: #ffffff; font-family: Arial,Helvetica, sans-serif; font-size: .75em; padding:0;margin:0;}

.headerimage {display:none;position: relative; background: transparent url(http://i444.photobucket.com/albums/qq163/autexousy/backgrounds/063.png) repeat scroll 0 0; border-color:#171717;border-style:solid;border-width:6px 11px;width: 780px; height: px;margin: 0 auto;}

#content{ color: #444444; background: #ffffff url() repeat scroll 0 0;margin-top: 0px; padding: 0px;}

#maincontent { padding: 0px 10px 0 0; margin:0; background: #ffffff url() repeat scroll 0 0; text-align: justify;border-top:0px solid #1a1a1a;border: 1px solid #aaaaaa}

#sidebar {padding:10px 22px 10px 10px;width:136px; text-align: left; color: #666666; font-size: .85em; line-height: 1.75;margin-left: auto;float:left;height:100%;}
#content-outer {background: #171717 url() repeat scroll 0 0;min-width: 780px;width:70%; margin-left: auto; margin-right: auto; padding:8px 20px 0}

/*-------------------HEADER-----------------------*/
#header { background-color: #171717; margin: 0 auto 0 0;text-align: left; font-size: .8em;text-transform:lowercase; color: #666666; padding:0 0 5px 0;min-height:64px}

div#header a, div#header a:link, div#header a:visited{postion:relative;color: #aaaaaa;padding: 1px 6px;}
ul.navheader li:hover {background-color: #DF617E; color:#111111;} div#header ul.navheader li:hover a {color:#FFFFFF}
div#header li.view {color: #ffffff;background-color:#DF617E;} .title:first-letter {color:#DF617E;}
div#header li.view:hover{ background-color: #DF617E;color:#111}
ul.navheader{ padding: 28px 0;width:50%;margin:0;float:left;text-align:left}
ul.navheader li {margin: 0 -4px 0 0; list-style-type: none;background-color: #000000;padding: 28px 8px 28px;display:inline;}

.title {padding:20px 6px 0 0;text-transform: uppercase;letter-spacing: -1px;line-height:.85;margin: 0 0 0 auto; text-align: right;font-size:2.1em;color:#ffffff;max-width:px}
.subtitle{padding: 0 6px;text-transform: lowercase;line-height:1; text-align: right;font-size:.95em;font-style:italic;letter-spacing:.02em}

/*-------------------ENTRIES-----------------------*/
.subcontent {margin-left: 170px; margin-right: auto;}

.date {text-transform: uppercase; color: #dddddd; font-size:.6em; letter-spacing:.1em;}

.subject {font-size: 1.3em; letter-spacing:-0.09em;text-align:left;line-height: 1; color: #aaaaaa; text-transform: lowercase}

.subject a, .subject a:link, .subject a:visited {text-decoration: none;color: #aaaaaa;}

.datesubject {padding: 10px 5px 6px 10px;border-bottom:6px solid #eeeeee;}

.entry{margin: 0px; padding: 10px 20px 0 20px;text-align: justify;line-height: 1.75;  background-color: #ffffff;}

.entry_text {}

.entry ul li,.entry ol li{padding-left: 5px;margin-left: 15px;}

/*---------------------------USERPICS----------------------------*/
.userpic { position: relative; float: right; padding:0 1px; background-color: #ffffff; margin:50px 0 10px 10px; z-index: 15; border-right: 10px solid #DF617E;}
.userpicfriends { position: relative; background-color: transparent !important; float: right; padding: 0px; margin: 50px 0 10px 10px; text-align: right;z-index: 15;}
.userpicfriends img {padding: 0 1px; border-right: 10px solid #DF617E; background-color: #ffffff; }
.userpicfriends a font {color: #111111;}

/*--------------------------COMMENT BAR-------------------------*/
.comments {color: #ffffff; font-size: 8pt; text-align: center; padding: 6px; position: relative; margin:0; text-transform: uppercase; clear:right;font-style:itlic;font-weight:bold}

div.comments a, div.comments a:visited, div.comments a:link  { padding: 3px 6px;border-bottom:1px solid #eeeeee;border-right:1px solid #eeeeee}
 div.comments a:hover {border-width: 1px 0 0 1px; border-style:solid;border-color:#dddddd;background-color:#f3f3f3}
  .separator{height: 25px;background-color:#FFF}

/*-------------------------CURRENTS AND TAGS (minicons by brandspankingnew)-------------------------------------*/
.ljtags {clear:right;text-align: right; padding: 4px 18px 4px 0; background: transparent url(http://i42.tinypic.com/qq8jza.gif) no-repeat scroll 100% 50%;   margin-top: 50px; position: relative; text-transform: lowercase; font-size: 7pt; color: #888888; font-weight: bold; }
	.ljtags:hover {}  div.ljtags a {font-weight: normal; }

.currents {clear:right;text-align: right; margin:0; padding-top:15px; padding: 8px 0px 8px 0;  text-transform: lowercase; font-size: 7pt; color: #646464; }
.currents strong, .currentlocation strong, .currentmood strong, .currentgroups  strong, .currentmusic strong  {text-decoration: none; color: #888888; display:none;}
.currentlocation, .currentmood, .currentgroups , .currentmusic {padding: 4px 18px 4px 0; background: transparent none no-repeat scroll 100% 50%;}
.currentlocation {background-image: url(http://i42.tinypic.com/24vts91.gif);}
.currentmood{background-image: url(http://i44.tinypic.com/34xgpw5.gif);}
.currentgroups {background-image: url(http://i42.tinypic.com/21jx2xk.gif);}
.currentmusic {background-image: url(http://i41.tinypic.com/5dqgqv.gif);}
/*----------------------TAG PAGE------------------------------*/
h2 { padding: 10px 10px 10px 30px;font-weight: normal;margin: 0 0 0 160px; }

.ljtaglist {text-align: left; margin: 0 0 0 160px; padding:10px;font-size:10px; list-style:inside none square;} 
.ljtaglist li {padding:5px 0px;border-bottom: 1px dotted #eeeeee;color:#aaa} .ljtaglist li:hover{background-color:#f8f8f8;}

/*---------------------COMMENT PAGE-----------------------------*/
.box { text-align: left; margin-bottom:1px; padding: 0px; clear: right;margin-left:130px} .lj-view-entry #maincontent {border-bottom:none}

.datesubjectcomment {text-align: left; color: #999999; margin-top: 0px; }

.userpiccomment {position: relative; padding: 3px; border: 1px solid #eeeeee; background-color: #ffffff;  left: 0px; margin: 0px 10px 0px 0px; z-index: 15; float: left;}

input { font-family: Arial, Tahoma, "Verdana", sans-serif; font-size: 11px; background-color: #fafafa;  border: 1px solid #cccccc;  color: #999999;}
textarea.textbox  {width: 100% !important;}

.reply{ border: 0px ; position: relative; margin: 20px 30px 10px 30px; padding: 25px 10px 10px 10px; text-align: left; line-height: 1.25;}

.replytosubject {letter-spacing:2px; font-weight: bold;}

.commentreply {min-height: 65px; text-align: left; position: relative; margin: 10px 10px 10px 120px;}

.commentbox {border-bottom: 1px solid #eeeeee; padding: 30px 10px 10px 20px;margin: 7px 0px 7px 0px;}

.commentbox:hover, .commentboxpartial:hover {border-color: #dddddd;}

.commentboxpartial {border-bottom: 1px solid #eeeeee;padding: 10px; margin: 10px;}

.commentinfo { background-color: #ffffff; margin-top: 10px; width: 100%;}
form#postform{background-color: #ffffff;border:1px solid #eeeeee} form#qrform table {border-width: 0px !important;} form#qrform {background-color: #ffffff;}
.skiplinks {text-align: center; margin: 0 auto 10px;padding: 10px 0px; font-size: 7pt; color: #eeeeee;background-color: #ffffff;}
.skiplinks a {background-color:#ffffff;word-spacing:1px;}.skiplinks a:hover{background-color:#f7f7f7}
/*------------------------SIDEBAR-----------------------------------------*/
.defaultuserpic {text-align: center; margin: 5px;}
.defaultuserpic img {border: 1px solid #ececec;padding:1px;width:70px;height:70px}

.sbarheader {padding: 0px 5px 0px 5px;}
.sbarbody {padding: 0;}

.sbarbody2 { padding: 0;line-height:1.5}

ul.sbarlist{ margin: 0px; padding: 0px; list-style: none;}li.sbaritem{display:;}
li.sbaritem{padding:1px 0;margin:0;border-bottom: 1px solid #eeeeee;text-transform: lowercase;font-variant:small-caps;} li.sbaritem:hover {background-color: #f3f3f3;border-color:#ececec}
li.sbartitle{padding: 12px 6px 6px; font-size:1.2em;text-transform: lowercase;color: #222222;}

#sidebar_linklist  {line-height:1.2;margin:0; padding:0;}
#sidebar_summary,#sidebar_tags, #sidebar_calendar {line-height:1.2;}

.sbarcalendar { padding: 3px; border: 1px solid #f3f3f3;  text-align: center; font-size: .9em;} .sbarcalendarposts{vertical-align: middle !important; background-color: #f7f7f7; text-align: center;}
.sbarcalendarposts:hover {background-color: #dddddd;}
/*---------------------FOOTER----------------------------------*/
#footer { background-color: #171717;padding: 5px; text-align: center; margin:auto;text-transform: uppercase; font-size: .7em; letter-spacing: 3px; z-index: 100; clear: both; }

ul.navfooter{ padding: 0px; margin: 0px;}
ul.navfooter li  {list-style: none; margin: 0 10px;display:inline;}

div#footer li.viewing {color: #555555;display:none;}
div#footer a, div#footer a:link, div#footer a:visited {padding: 3px 0 0;color: #aaa; }
 div#footer a:hover { color:#bbbbbb; }

.clearfoot {background-color: #171717;clear: both;}

/*-----------------------ARCHIVE PAGE--------------------------------*/
ul.year { margin: 0px; margin: 0 auto 10px;background-color: #ffffff; text-align: center;padding: 20px}

ul.year li {display: inline;}

table.yeartable {margin-left: auto; margin-right: auto;padding: 10px;}
body.lj-view-tags #content #maincontent, body.lj-view-archive 
#content #maincontent {border-bottom:none;}
table.yeartable td.yeardate, table.yeartable td.yearday { border-width: 1px; border-style: solid; border-color: #dddddd;}

table.yeartable td.yearday { background-color: #FBFBF8; text-align: center;}

td.yearmonth {border-style: none;}

.clear {display:none; height: 8px;}

/*------------MINI ICONS-------------*/
img[src*="icon_protected.gif"], img[src*="icon_private.gif"], img[src*="icon_groups.gif"], .ljuser img[src*="syndicated.gif"], .ljuser img[src*="newsinfo.gif"], .ljuser img[src*="partnercomm.gif"],  .ljuser img[src*="sponcomm.gif"] , img[src*="btn_del.gif"], img[src*="btn_edit.gif"], img[src*="btn_scr.gif"], img[src*="btn_unscr.gif"], img[src*="btn_freeze.gif"], img[src*="btn_unfreeze.gif"], img[src*="btn_track.gif"], img[src*="btn_tracking.gif"], img[src*="btn_tracking_thread.gif"] , img[src*="anonymous.gif"], img[src*="openid-profile.gif"], form#postform img[src*="userinfo.gif"], img[src*="talk/none.gif"], img[src*="help.gif"], img[src*="pencil.gif"] {height: 0px; width: 0px; padding: 0 2px 10px 10px !important; background: transparent none no-repeat scroll 0 0; }

.subject img {vertical-align: middle !important;}
img[src*="icon_protected.gif"]{background-image: url(http://i43.tinypic.com/1z1da8y.png); }
img[src*="icon_private.gif"]{background-image: url(http://i43.tinypic.com/j79ukw.png); }
img[src*="icon_groups.gif"] {background-image: url(http://i40.tinypic.com/4udx5e.png); }

.ljuser img[src*="syndicated.gif"]{background-image: url(http://i44.tinypic.com/1iiutv.jpg) !important; } 
.ljuser img[src*="newsinfo.gif"] {background-image: url(http://i42.tinypic.com/33c96pw.jpg) !important; }
.ljuser img[src*="partnercomm.gif"]{background-image: url(http://i40.tinypic.com/15gxvro.png) !important; } 
.ljuser img[src*="sponcomm.gif"] {background-image: url(http://i39.tinypic.com/2hyxw7r.png) !important; }
img[src*="btn_del.gif"] {background-image: url(http://i41.tinypic.com/m7ztok.jpg); }
img[src*="btn_scr.gif"] {background-image: url(http://i40.tinypic.com/30auv5y.jpg); } 
img[src*="btn_unscr.gif"] {background-image: url(http://i41.tinypic.com/vfxurp.jpg); }
img[src*="btn_freeze.gif"] {background-image: url(http://i39.tinypic.com/xm3l7r.jpg); } 
img[src*="btn_unfreeze.gif"] {background-image: url(http://i41.tinypic.com/28reatl.jpg); }
img[src*="btn_track.gif"] {background-image: url(http://i41.tinypic.com/viecqo.jpg); } 
img[src*="btn_tracking.gif"],img[src*="btn_tracking_thread.gif"] {background-image: url(http://i42.tinypic.com/f9m79s.jpg); }
img[src*="anonymous.gif"] {background-image: url(http://i42.tinypic.com/r8fdsg.png); }  
img[src*="openid-profile.gif"] {background-image: url(http://i40.tinypic.com/2hd0a5v.jpg); } 
img[src*="userinfo.gif"] {background-image: url(http://i42.tinypic.com/282ovo1.png);}
img[src*="talk/none.gif"] {background-image: url(http://i40.tinypic.com/20ppj6o.jpg); } 
img[src*="help.gif"] {background-image: url(http://i41.tinypic.com/ztyn80.jpg); } 
img[src*="pencil.gif"] {background-image: url(http://i41.tinypic.com/xo03zt.jpg); }
img[src*="btn_edit.gif"] {background-image: url(http://i39.tinypic.com/15cnkg5.jpg); }

.ljuser img {  width: 0; height: 0; background: transparent url(http://i42.tinypic.com/282ovo1.png) no-repeat 0 0;  padding: 10px 10px 0 2px !important;  vertical-align: baseline !important;}
	.ljuser img[src*="userinfo.gif"] { background: transparent url(http://i42.tinypic.com/282ovo1.png) no-repeat 0 0 !important;  padding: 10px 10px 0 2px !important; }
	.ljuser img[src*="community.gif"] { background: transparent url(http://i44.tinypic.com/jhzebq.png) no-repeat scroll 0 0 !important;  padding: 10px 10px 0 2px !important; }

.Note .Inner { background: #ffffff none repeat scroll 0 0; border: 1px solid #eeeeee; color: #666666;} .ippu .track_title {letter-spacing: 3px; color: #444444; font-weight: normal;} div.ljcmtmanage { background: #ffffff none repeat scroll 0 0;  border: 1px solid #eeeeee; padding:10px; }

/*-----------------CONTEXTUAL POP-UP-----------------*/
div.ContextualPopup {position: relative; margin: 0px; text-align: left; font: normal 9px "Arial" !important; }
div.ContextualPopup div.Inner {  color: #aaaaaa !important;border:1px solid #eeeeee;background: transparent url(http://i42.tinypic.com/2vtqdz6.png) !important; padding: 0; width: 280px;}
div.ContextualPopup .Userpic { padding: 3px; margin: 5px 5px 0; border:  1px solid #eeeeee; background: #ffffff url();}
div.ContextualPopup .Content { padding: 5px;border-right: 1px solid #ececec; margin-right:68px;background: #ffffff url();}
div.ContextualPopup div.Inner a, div.ContextualPopup div.Inner a:visited { text-decoration: none !important; font-weight: bold; color: #999999 !important;}
div.ContextualPopup .Relation {font-size: 9pt;text-transform:uppercase}
/*--------------- MISC-------------- */
table#lj_controlstrip td {background-color: #1a1a1a;color: #444444;border: solid 1px #222222; border-left: none; }
#lj_controlstrip input, #lj_controlstrip select {border: 1px solid #2d2d2d;background-color: #222222; color:#aaaaaa}
#lj_controlstrip a { color: #999; } #lj_controlstrip_statustext { color: #444444; } #lj_controlstrip .ljuser a b {color:#ffffff;}#lj_controlstrip_userpic {display:none;}
a img {border:none;}
b, u { color: #333333;}
i, s { color: #aaaaaa;}
p, td {}
.appwidget-qotd table tr td div {border:1px solid #eeeeee !Important;padding:8px 15px !Important}
blockquote { padding:15px;  border: 1px solid #eeeeee;  background:  #f7f7f7 url() repeat;  color:#8c8c8c; }
code {display:block;  padding:5px;  border:1px dashed #DDDDDD;   font-size: 12px;}

kbd, pre, tt {font-family: monospace;}
textarea  { font-family: Georgia, Times New Roman, Times,serif;font-size: 12px; background: #f7f7f7 url() repeat; border: 1px solid #dddddd; color: #666666;}

/*-------------------COLORS-----------------------*/
a, a:link, a:visited, .subject a, div.comments a:hover,.subject a:link, .subject a:visited, h2, code, div#sidebar a, .datesubjectcomment a:link, .datesubjectcomment a:visited, div.ContextualPopup .Relation, .ljuser a b {
	color: #DF617E; 
	text-decoration: none;}
.ljuser a b {font-family: Georgia, Times New Roman, Times,serif;font-weight:normal;font-style:italic}
a:hover, .subject a:hover, div.comments a,  .datesubjectcomment a:hover, div#sidebar a:hover, div#sidebar li.sbaritem:hover a, .ljuser a b:hover {color: #74CFC6; text-decoration: none;}
.subject a, .subject a:link, .subject a:visited, .subject,h2 {text-decoration: none;color: #000000;  }
div#sidebar a { color: #555555;}

installation
01.	Choose Journal Style
02.	Select "Grays" Flexible Squares layout in "Select a New Theme"
03.	In Choose a Page Setup, select 2 Column (sidebar on right) or 2 Column (sidebar on left).
04.	Go to " Customise your Theme " and then "Style ". Change the "Background color of the outer table" to #FFFFFF.
05.	Then go to the "Sidebar" section. Make sure all the sidebar elements you wish to show are enabled. This is also where you add the free text.
06.	Still in "Customise your Theme", go to "Custom CSS ". Ensure Use layout's stylesheet(s) is set to no
07.	Paste code into the Custom Stylesheet box.
notes:
Q&A	♚ mini icons by Pinvoke and Brand Spanking New ♚ Upload images to your own server ♚ As per usual, feel free to add your own header/ edit bloody anything you want to. ♚Please address all questions to the F.A.Q.

Page 1 of 5
<<	[1] [2] [3] [4] [5]	>>

(121 comments) - (Post a new comment)

	areasontofight 2009-04-04 08:08 am UTC (link)
	That design is adorable. Just changed my layout, but I'll be memming this. :) I'm not a huge Topshop fan these days, but the website sure is pretty. (Reply to this) (Thread)

	milou_veronica 2009-04-04 08:29 am UTC (link)
	Thank-you! It is pretty, isn't it? I think it's the polka dots. (Reply to this) (Parent)

	starpins 2009-04-04 08:08 am UTC (link)
	s-so cute ;; (Reply to this) (Thread)

	milou_veronica 2009-04-04 08:30 am UTC (link)
	:D (Reply to this) (Parent)

	ayatome 2009-04-04 08:11 am UTC (link)
	this layout is so cute ♥ (Reply to this)

	adela_nightmoon 2009-04-04 08:17 am UTC (link)
	This layout's really great~! I have no doubt in my mind that this will be my next layout. ♥ ♥ (Reply to this)

	lisa_corner 2009-04-04 08:21 am UTC (link)
	This is so lovely... Thanks :) (Reply to this)

	lumati 2009-04-04 08:27 am UTC (link)
	I just changed my layout but darn if that's not too gorgeous to use. So... I'll be changing my layout again it seems. (Reply to this)

	sunev789 2009-04-04 08:35 am UTC (link)
	OH GOODNESS~! i've been waiting for a really good layout ;__; using it as soon as possible thank you muchly♥ (Reply to this)

	tribulation 2009-04-04 08:44 am UTC (link)
	Very nice! Shame I just changed my layout. (Reply to this)

	chinaraspberry 2009-04-04 09:16 am UTC (link)
	Oh you know I was totally going to say "this reminds me of the topshop website" lol 'tis sweet ♥ (Reply to this)

	yuuten 2009-04-04 09:22 am UTC (link)
	This is cute! And haha, I was about to ask if the name of the layout was from Regina Spektor's "Samson" before I previewed it XD But anyway, memming! ♥ (Reply to this)

	lorilann 2009-04-04 10:07 am UTC (link)
	So cute, mem'ing for later. (Reply to this)

	shwinlewin 2009-04-04 11:12 am UTC (link)
	Oh my FUCKING GODS. I love this layout! Nabbing it! (Reply to this) (Thread)

	shwinlewin 2009-04-04 11:13 am UTC (link)
	and crediting you ;3 (Reply to this) (Parent)

	ghost_factory 2009-04-04 12:08 pm UTC (link)
	that's totally cute. and omg i love samson by regina spektor. (Reply to this)

	ashmauve 2009-04-04 12:44 pm UTC (link)
	oh just what I needed. arial. :D so happy & thanks! really sweet, like u said (Reply to this)

	nazurahchan 2009-04-04 12:49 pm UTC (link)
	Used! (Reply to this)

	teh_haley 2009-04-04 01:13 pm UTC (link)
	wow, this is incredibly cute! (and yes, there's something about ironic knocking off topshop!) (Reply to this)

	comfortable_yet 2009-04-04 02:37 pm UTC (link)
	The topshop site is so cute but this is even better! Memming for later use and thank you! (Reply to this)

	nastyposition 2009-04-04 03:14 pm UTC (link)
	this is effing fantistic <3 (Reply to this)

	cancoydu 2009-04-04 03:16 pm UTC (link)
	oh it's so sweet... ♥ i definetely use this later :) (Reply to this)

	rose_invisible 2009-04-04 03:40 pm UTC (link)
	So cute.. I'll be using soon. ♥ (Reply to this)

	jengal20 2009-04-04 04:32 pm UTC (link)
	Ooh! LOVES Definatly meming this one since I'm still loving my current layout which is one of yours also;) (Reply to this)

	duttyduttylove 2009-04-04 04:55 pm UTC (link)
	Taken, thanks! I'll credit you in my profile :) (Reply to this)

	sleepingfingers 2009-04-04 05:00 pm UTC (link)
	Oh, I absolutely love this design! (Reply to this)

	keleosnoonna 2009-04-04 06:01 pm UTC (link)
	OMG SO PRETTY!! Memming for later use ♥ !! (Reply to this)

	sciencekitty 2009-04-04 06:56 pm UTC (link)
	This is so cute! Be back later to snag. :) (Reply to this)

(121 comments) - (Post a new comment)

Page 1 of 5
<<	[1] [2] [3] [4] [5]	>>

Username:		Create an Account Forgot your login or password? Login w/ OpenID
Password:
	Remember Me
	English • Español • Deutsch • Русский…

About

Help

Get Involved

Legal

LJ Labs

Store