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:

chevellechik70.livejournal.com

I snagged this one. :) Thanks!

sireesanwar.livejournal.com

I'm glad you liked it.

shini-chii.livejournal.com

Oh my God, this is the kind of layout I've been looking for~ ♥♥♥♥.

I hope you don't mind if I modify it a little (like changing the header and... I don't think I'll need to change anything else) I saw you gave instructions to someone to change headers, so I don't think you mind, but if it's a problem, just tell me and I'll modify it back.

Of course, I'll credit you and wouldn't dare redistribute the layout. Thanks in advance and aklgdnasg gorgeous work ♥♥♥♥ *glee*.

Yay! I'm so happy you've been looking have have finally found it.

No, I don't mind you changing headers at all. I usually start with a header for color purposes or simply put a header with it just so people can see what it will look like. You have every right to use any header you like. I actually don't mind if you change link colors and things like that. Sometimes people just want things to look different but this is layout is a start.

All I ask is that if someone asks you send them here. That's all I care about. I just decided I should make a comm for layouts because I was figuring this things out anyway... might as well share.

Thank you very much, then. ♥

And I'll be sure to. I sense a "if you love me, go see

layout_lounge" post coming soon in my LJ. :P

lol I love that. Sure send people over.

aruna7.livejournal.com

OMG I love that one!!!

I'm currently installing it. I'll add you in my resources.

Good job! =)

So glad you liked it. Enjoy.

Thanks.

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.

Totally fine.

Your icon is so cool!

illimerent.livejournal.com

Using this! I changed the header to match my icon theme, but other than that it's as-is. :3

Glad you like it. Enjoy!

Glad you made it! :)

Thank you.

Layout Lounge

Layouts, Tutorials, Help, and more

15. In the Dark

(no subject)

(no subject)

(no subject)

(no subject)

(no subject)

(no subject)

(no subject)

(no subject)

(no subject)

(no subject)

(no subject)

(no subject)

(no subject)

(no subject)

About

Links

Tags

Summary

April 2025