layoutlounge | 15. In the Dark

Layout Style: S2 Flexible Squares - with sidebar
Use Layout Stylesheet?: No
Custom external stylesheet?: No
Use external stylesheets?: No

Click to see larger image

body{
	background-color: #222222;
        background-image: url();
         background-repeat: repeat;
	color: #ffffff;
	font-family: Verdana, sans-serif;
	font-size: 11px;
             margin: 20px 0 20px 0;
	}

a, a:link, a:visited {
	color: #777777;
	text-decoration: none;
	}

a:hover {
	color: #444444;
	text-decoration: none;
	}

blockquote {
		padding: 18px; 
		border: 1px solid #555555; 
		color: #cccccc;
		font-size: 8pt;
		line-height: 13px;
		font-family: Verdana, sans-serif;
		background: #000000;
		text-align: justify;
		}

p, td{
	}
	
code, kbd, pre, tt {
		font-family: monospace;
	}
	
ul.ljtaglist {
	text-align: left;
	padding-left: 5px;
}

#content {  	
	width: 700px;	
	margin-left: auto; 
        margin-right: auto;  
	text-align: justify;
        padding: 0px;
        background-color: #000000;
	border-color: #555555;
	border-style: solid;
	border-width: 0px 1px 1px 1px;
}

#maincontent {
		font-family: Verdana, sans-serif;
		font-size: 11px;
	color: #ffffff;
	margin-left: 182px;
	text-align: center;
	}

#sidebar {
	padding: 0px 0 10px 0; 
        background-color: #000000;
	margin-left: 5px;
	font-family: Verdana, sans-serif;
	font-size: 10px;
	color: #ffffff;
	width: 160px;
	float: left;
	text-align: left;
        text-transform: normal;
	border-top: 1px solid #333333; 
	border-bottom: 1px solid #333333; 
	border-left: 1px solid #333333; 
	border-right: 1px solid #333333; 
	}

#header {		
	position: relative;
	text-align: center;
        color: #ffffff;
	font-family: Verdana, sans-serif;
	font-size: 10px;
	width: 100%;
	padding: 0px 0px 10px 0px;
	margin-bottom: 10px;
	text-align: center;
	letter-spacing: 1px;
        text-transform: uppercase;
	border-bottom: 0px solid #111111;
}

#footer {			
	width: 100%;
	margin: 0px;
	text-align: center;
	font-family: Verdana, sans-serif;
	font-size: 10px;
	color: #ffffff;
	z-index: 100;
	}
	
/* header -- links to views; title of journal; subtitle of journal */

div#header a, div#header a:link, div#header a:visited, div#footer a,

div#footer

a:link, div#footer a:visited{
	color: #777777;
	text-decoration: none;
}

div#header a:hover, div#footer a:hover{
	color: #444444;
	text-decoration: none;
}

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

ul.navheader li  {
	display: inline;
	padding: 10px 0px 0px 0px;
	margin: 0 2px;
	}
	
.title, .subtitle {
		display: none;
		}

/* sidebar */

#sidebar .sbarcalendarposts a, #sidebar .sbarcalendarposts a:link,

.sbarcalendarposts

a:visited{
	padding: 0px;
	text-align: center;
	}

#sidebar .sbarcalendarposts a:hover {
	padding: 0px;
	text-align: center;
	}

div#sidebar a, div#sidebar a:link, div#sidebar a:visited{
	color: #777777;
	display: block;
	padding: 3px 3px 3px 0px;
	text-decoration: none;
		}

div#sidebar a:hover {
	padding: 3px 3px 3px 0px;
	color: #444444;
}

.defaultuserpic {
	text-align: center;
	}

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

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

.sbarbody2 {
	padding: 0 15px 0 15px;
	}
		
table.calendar {
	margin-right: auto;
	margin-left: auto;
	}
	
.sbarcalendar {
	padding: 1px;
	border: 1px solid #777777;
	text-align: center;
	font-family: Verdana, sans-serif;
	font-size: 9px;
	}

.sbarcalendarposts {
	padding: 1px;
        border: 1px solid #777777;
	background-color: #000000;
	text-align: center;
	font-family: Verdana, sans-serif;
	font-size: 9px;
	}
	
ul.sbarlist {
	padding-left: 0px;
	margin-left: 0px;		
        list-style: none;
	}

li.sbaritem {
	padding-left: 0px;
        border-bottom: 0px solid #111111;
	list-style: none;
        }

li.sbartitle {
	padding: 3px 5px 3px 5px;
	margin: 10px 0 10px 0;
        background-color: #222222;
	list-style: none;
	text-align: left;
	color: #ffffff;
        text-transform: uppercase;
	font-family: Verdana, sans-serif;
	font-size: 10px;
		}

#sidebar_summary li.sbaritem {
color: #ffffff;
border: 1px solid #555555;
background-color: #000000;
padding: 3px;
text-transform: normal;
margin: 3px 0px;
    }

#sidebar_summary li.sbaritem a {
        text-decoration: none;
display: inline !important;
color: #ffffff;
border: 0px solid #fe5eed !important;
background-color: transparent !important;
    }

#sidebar_summary li.sbaritem a: hover{
        text-decoration: none;
color: #000000;
border: 0px solid #fe5eed;
background-color: transparent !important;
    }

/* maincontent */

span.ljuser a b {
	padding: 2px 0 2px 0;
	color: #777777;
	font-weight: bold;
	}

span.ljuser a:hover b {
	padding-top: 2px;
	padding-bottom: 2px;
	color: #444444;
	font-weight: lighter;
	}

ul.ljtaglist li  {
	list-style: none;
	}

ul.ljtaglist {
	color: #ffffff;
	font-family: Verdana, sans-serif;
	font-size: 10pt;
	padding-left: 12px;
	padding: 8px;
	}

.subcontent {
        background-color: #000000;
        width: 512px;
	border-top: 1px solid #333333; 
	border-bottom: 1px solid #333333; 
	border-left: 1px solid #333333; 
	border-right: 1px solid #333333; 
}

.entry	{
        padding: 10px;
	color: #ffffff;
	font-family: Verdana, sans-serif;
	font-size: 11px;
	text-align: justify;
	}
	
hr {
	color: transparent;
	height: 1px;
	border-style : none; 
	border-bottom: 2px solid #333333;
	}

.entry ul li, ol li, li {
	padding-left: 5px;
	margin-left: 5px;
	list-style: normal;
	list-style-position: outside;
	}

.userpic {
	background-color: #000000 !important;
	position: relative;
	float: right;
	padding: 5px;
	margin: 10px;
	z-index: 15;
	border: 2px #000000 solid;
	}
	
.userpicfriends {
	background-color: #000000 !important;
	position: relative;
	float: right;
	padding: 5px;
	margin: 10px;
	text-align: center;
	font-family: Verdana, sans-serif;
	font-size: 11px;
	z-index: 15;
	border: 1px #000000 solid;
	}
	
.date {
	padding-top: 5px;
	padding-bottom: 5px;
	text-align: right;
        color: #ffffff;
	top: 5px;
	font-family: Verdana, sans-serif;
	font-size: 10px;
	text-transform: uppercase;
	}

.subject {
        background-color: #222222;
	font-weight: none;
	padding-bottom: 5px;
	padding-top: 5px;
        padding-left: 10px;
	color: #ffffff;
	font-family: Verdana, sans-serif;
	font-size: 12px;
	text-transform: normal;
	border-left: 0px solid #111111;
	border-right: 0px solid #111111;
	}
	
.subject a, .subject a:link, .subject a:visited {
	color: #777777;
	}

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

.datesubject {
	background-color: transparent;
	padding: 0px;
	text-align: left;
	border-left: 0px solid #333333; 
	border-right: 0px solid #333333; 
	border-top: 0px solid #333333; 
        }

.ljtags {
	margin-top: 20px;
	color: #ffffff;
	font-weight: lighter;
	text-transform: normal;
	}
	
.currents strong, .currentmood strong, .currentmusic .currentlocation,

.ljtags strong

{
	color: #ffffff;
	font-weight: lighter;
	text-transform: normal;
	}

.currents, .currentmood, .currentmusic, .currentlocation {
	color: #ffffff;
	font-weight: lighter;
	text-transform: normal;
	}

.ljtags a, .ljtags a:link, .ljtags a:visited {
	color: #777777;
	text-transform: normal;
	font-weight: lighter;
	}

.currentlocation a, .currentlocation a:link, .currentlocation a:visited {
	color: #777777;
	text-transform: normal;
	font-weight: lighter;
	}
	
.currentlocation a:hover, .ljtags a:hover {
	color: #444444;
	font-weight: lighter;
	text-transform: normal;
	}

.comments {
	font-family: Verdana, sans-serif;
	font-size: 10px;
	text-align: right;
	padding: 5px 5px 5px 5px;
	position: relative;
	clear: right;
	margin-top: 15px;
	text-transform: normal;
	border-bottom: 1px #000000 solid;
	}
	
div.comments a, div.comments a:link, div.comments a:visited{
	color: #777777;
}

div.comments a:hover {
	color: #444444;
	text-decoration: none;
}

/* maincontent --  entry, reply pages */

.datesubjectcomment {
	margin-top: 20px;
	text-align: right;
	padding: 5px;
        background-color: #000000;
        color: #888888;
	}	
	
.userpiccomment {
	background-color: #000000 !important;
	position: relative;
	top: -30px;
	left: 0px;
	padding: 5px;
	margin: 20px 10px -20px 10px;
	z-index: 15;
	float: right;
	border: 1px #000000 solid;
	}
	
.box {
	padding: 10px;
	margin-top: 0px;
	text-align: left;
        clear:right;
	}

form div.box {
	text-align:center;
}

div#content input,
div#content textarea,
div#content select {
	color: #ffffff;
	border: 1px solid #333333; 
	background-color:#000000;
	}
	
textarea.textbox  {
	width: 100% !important;
	}

.reply	{
	position: relative;
	margin: 20px 30px 10px 30px;
	padding: 25px 10px 10px 10px;
	text-align: left;
	font-family: Verdana, sans-serif;
	font-size: 11px;
	line-height: 125%;
	color: #ffffff;
	}
	
.replytosubject {
	color: #cccccc;
	font-weight: bold;
	text-transform: normal;
        padding: 5px;
        background-color: #000000;
	}

.replytoposter {
        background-color: #000000;
	color: #ffffff;
	text-transform: normal;
        padding: 5px;
}

.commentreply {
        text-align: justify;
	position: relative;
	margin: 10px;
	font-family: Verdana, sans-serif;
	font-size: 11px;
	color: #ffffff;
	}
	
.commentbox {
	padding: 5px;
	margin: 10px;
	text-align: left;
        background-color: #000000;
	border: 1px solid #333333; 
	}
	
.datesubjectcomment a:link, .datesubjectcomment a:visited {
	color: #777777;
	}
	
.datesubjectcomment a:hover {
	color: #444444;
	}

.commentboxpartial {
	padding: 10px; 
	margin: 10px; 
        background-color: #000000;
	}

.commentinfo {
	margin-top: 10px; 
	width: 100%;
	}
		
	
/* maincontent -- year/achive pages */
	
ul.year {
	text-align: center;
	padding: 20px 0 20px 0;
	}

ul.year li {
	display: inline;		
	}

table.yeartable {
	margin-left: auto;
	margin-right: auto;
	}

table.yeartable td.yeardate, table.yeartable td.yearday {
	border: 1px #777777 solid;
	color: #ffffff;
	}

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

td.yearmonth {
	color: #ffffff;
	border-style: none;
	}

/* footer */
	
ul.navfooter{
	padding: 0px;	
	margin: 0px;
	}

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

.clearfoot {		
	clear: both;
	}
	
	
/* misc  */
			
.clear {
	height: 7px;
	font-size: 0.01px;
	}
	
.skiplinks {
	text-transform: normal;
	text-align: center;
	padding: 10px 0 10px 0;
	}
	
.headerimage {
          position: relative;
	border-color: #555555;
	border-style: solid;
	border-width: 1px 1px 0px 1px;
	 width: 700px;
	 height: 200px;
         padding-left: 0px;
         padding-right: 0x;
         padding-bottom: 0px;
         padding-top: 0px;
         margin-left: auto;
         margin-right: auto;
         margin-top: 1px;
         background-color: #000000;
	 background-image:

url(http://i77.photobucket.com/albums/j49/SireesAnwar/sireesanwarheader047a2.jpg);
	 background-position: center;         
         background-repeat: no-repeat;
            }

.separator {
          height: 20px;
         }

700 x 200

Check out "Using A Layouts" on the sidebar for any extra assistance.

Please direct people to

graffitigraphic.

Flat | Top-Level Comments Only

From:

bdweller.livejournal.com

Totally Snagging, this is exactly the kind of layout I've been looking for.

I read in a previous post that you don't mind headers/things being changed. AWESOME. :)

Thanks again, and yeah, if anyone asks I'll gladly send 'em your way.

sireesanwar.livejournal.com

Totally fine.

Your icon is so cool!

Layout Lounge

Layouts, Tutorials, Help, and more

15. In the Dark

(no subject)

(no subject)

About

Links

Tags

Summary

April 2025