layoutlounge | 46. Massive Effect Dark Layout

Layout Style: S2 Flexible Squares
Features: Sidebar, Scrolling Tags, Custom Page Summary
Layout Width: 800px
Requested By:

the_lady_revan /

the_seattlegirl

[ Preview ] [ Live ]

Font(s) Used: None
Layout:

layout_lounge
Header:

graffitigraphic

Sidebar:
.Using Layouts or Layout Changes for Beginners on the sidebar for any extra assistance.
.Font Tutorial if you need help adding these fonts to your computer system.
.Tiny Icons for some suggested images.

Layout Code:

/*-----------------
S2 Flexible Squares
http://community.livejournal.com/layout_lounge/
PLEASE DO NOT REMOVE THIS SECTION 
--------------------------*/

body{ 
 background-color: #000000;
 background-image: url(BACKGROUND URL);
 background-repeat: repeat;
 background-attachment: fixed;
 color: #a7a1a1;
 font-family: "verdana", arial, verdana, sans-serif;
 font-size: 12px;
 margin: 10px 0 20px 0;
 }

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

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

blockquote {
 width: 350px;
 background: #222222;
 padding: 0px 10px 14px 10px; 
 color: #7a7a7a;
 font-size: 11px;
 line-height: 13px;
 font-family: "verdana", arial, verdana, sans-serif;
 text-align: left;
 -moz-border-radius: 2%;
 }

b, strong { color: #d74c51; }
i, em { color: #246ca6; }
s, u { color: #c59b8f; }

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

/*-----------GENERAL--------------*/
	
#content {  	
 width: 800px;	
 margin-left: auto; 
 margin-right: auto;  
 text-align: left;
 padding: 0px;
 background-color: transparent !important;
 }

#maincontent {
 width: 565px;
 float: left;
 margin: 0px;
 font-family: "verdana", arial, verdana, sans-serif;
 font-size: 12px;
 color: #888888;
 text-align: center;
 }

.subcontent {
 background-color: #111111;
 opacity: 1.0;
 width: 563px;
 min-height: 200px;
 margin-right: 0px;
 -moz-border-radius: 1%;
 }

/*---------HEADER----------*/

#header { 
 position: relative;
 line-height: 125%;
 text-align: left;
 text-transform: normal;
 color: #888888;
 font-family: "verdana", arial;
 font-size: 9px;
 letter-spacing: 1px;
 width: 100%;
 padding: 0px 0px 10px 0px;
 margin-bottom: 0px;
 background-color: #111111;
 }

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

div#footer

div#header a, div#header a:link, div#header a:visited, div#header a:active {
 padding: 5px;
 font-family: "verdana";
 font-size: 9px;
 font-weight: normal;
 text-transform: normal;
 letter-spacing: 1px;
 color: #d74c51;
 background-color: #111111;
 }

div#header a:hover {
 padding: 5px;
 color: #d00a0e;
 background-color: #2a2a2a;
 -moz-border-radius: 4%;
 }

div#header li.view {
 background-color: #2a2a2a;
 color: #888888; 
 padding: 5px;
 -moz-border-radius: 4%;
}

ul.navheader { padding: 10px 0px 0px 0px; background-color: transparent !important; margin: 0px; }

ul.navheader li  { display: inline; padding: 10px 0px 0px 0px; background-color: transparent !important; margin: 0 2px; }
	
.title, .subtitle { display: none; }

/*-------------FOOTER--------*/

#footer {	
 width: 100%;
 margin: 0px;
 text-align: center;
 font-family: "georgia";
 font-size: 12px;
 color: #555555;
 z-index: 100;
 }

div#footer a { 
 padding: 5px;
 font-family: "trebuchet ms";
 font-size: 15px;
 font-weight: normal;
 text-transform: normal;
 letter-spacing: -1px;
 color: #68415e;
 text-align: center;
 background-color: transparent !important;
 }

div#footer a:hover {
 padding: 5px;
 color: #444444;
 background-color: transparent !important;
 }

ul.navfooter{ padding: 0px;	 margin: 0px; }

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

.clearfoot { clear: both; }

/*------------SIDEBAR-----------*/

#sidebar {
 background-color: #111111;
 padding: 0px 0 10px 0;
 margin-left: 0px;
 font-family: "verdana", arial, verdana, sans-serif;
 font-size: 11px;
 color: #555555;
 text-transform: normal;
 text-align: left;
 width: 215px;
 float: right;
 -moz-border-radius-bottomleft: 2%;
 -moz-border-radius-bottomright: 2%;
 }

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

.sbarcalendarposts

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

#sidebar .sbarcalendarposts a:hover { padding: 0px; text-align: center; }
		
#sidebar_tags .sbarcontent { height: 250px; overflow:auto; }

div#sidebar a, div#sidebar a:link, div#sidebar a:visited{
 color: #d00a0e;
 display: block;
 padding: 1px 1px 1px 0px;
 }

div#sidebar a:hover {
 padding: 1px 1px 1px 0px;
 color: #7a7a7a;
 }

.defaultuserpic { text-align: center; }

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

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

.sbarbody2 { 	padding: 0 5px 0 5px; }
		
table.calendar { margin-right: auto; 	margin-left: auto; }
	
.sbarcalendar, .sbarcalendarposts { 
 color: #555555;
 border-right: 2px solid #555555;
 border-bottom: 2px solid #555555;
 -moz-border-radius-bottomleft: .5%;
 -moz-border-radius-bottomright: .5%;
 padding: 2px;
 margin: 10px;
 }

ul.sbarlist { padding-left: 0px; margin-left: 0px; list-style: none; }

li.sbaritem {
 border-bottom: 1px dashed #444444;
 padding-left: 0px;
 list-style: none;
 }

li.sbaritem:hover {
 background-color: #222222;
 border-bottom: 1px dashed #444444;
 padding-left: 0px;
 list-style: none;
 }

li.sbartitle {
 padding: 3px 5px 3px 5px;
 margin: 10px 0 10px 0;
 text-align: center;
 color: #555555;
 text-transform: normal;
 font-weight: none;
 font-family: "trebuchet ms", Arial;
 font-size: 18px;
 background-color: #000000;
 -moz-border-radius: 5%;
 }

ul.tagList {width: 100%;}
 .tagBox {
 height: 250px;
 overflow-x: hidden;
 overflow-y: scroll; 
 scrollbar-arrow-color: #d74c51;
 scrollbar-base-color: #ffffff;
 scrollbar-face-color: #ffffff;
 scrollbar-highlight-color: #d74c51;
 scrollbar-darkshadow-color: #333333;
 scrollbar-shadow-color: #333333;
 }

#sidebar_summary li.sbaritem {
 color: #555555;
 border-right: 2px solid #333333;
 border-bottom: 2px solid #333333;
 -moz-border-radius-bottomleft: .5%; 
 -moz-border-radius-bottomright: .5%;
 background-color: #111111;
 padding: 3px;
 text-transform: normal;
 margin: 3px 0px;
 }

#sidebar_summary li.sbaritem a {
 display: inline !important;
 color: #246ca6;
 background-color: transparent !important;
 }

#sidebar_summary li.sbaritem a: hover{
 color: #007ba7;
 background-color: transparent !important;
 }

/*------------ENTRIES-----------*/

.entry { 
 padding: 10px;
 margin: 0px;
 color: #a7a1a1;
 font-family: "arial";
 font-size: 12px;
 text-align: left;
 }
	
hr {
 color: transparent;
 height: 1px;
 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: #111111 !important;
 position: relative;
 float: right;
 padding: 5px;
 margin: 10px;
 z-index: 15;
 color: #333333 !important;
 border: 1px #333333 solid;
 -moz-border-radius: 2%;
 }

.userpicfriends {
 background-color: #222222 !important;
 position: relative;
 float: right;
 padding: 5px;
 margin: 10px;
 text-align: right;
 font-family: "verdana", arial, verdana, sans-serif;
 font-size: 11px;
 z-index: 15;
 border: 5px #222222 solid;
  -moz-border-radius: 2%;
 }

.userpicfriends a font { color: #68415e; }

.date {
 margin: 0px 0 0 5px;
 padding: 5px;
 text-align: left;
 color: #444444;
 top: 5px;
 font-family: "verdana", arial, verdana, sans-serif;
 font-size: 11px;
 text-transform: uppercase;
 }

.subject {
 background-color: #111111;
 font-weight: none;
 padding: 5px 0px 5px 10px;
 color: #68415e;
 font-family: "trebuchet ms", Verdana;
 font-size: 18px;
 text-transform: normal;
 text-decoration: underline;
 }
	
.subject a, .subject a:link, .subject a:visited { color: #68415e; }

.subject a:hover { color: #7a7a7a; }

.datesubject {
 background-color: transparent;
 padding: 0px;
 text-align: left;
 }

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

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

/*-----------CURRENTS------------*/

.ljtags {
 margin-top: 5px;
 color: #7a7a7a;
 font-weight: lighter;
 text-transform: lowercase;
 margin: 15px 0px 0px 0px;
 padding: 5px 0px 5px 17px;
 background: url(TAGS TINY ICON) no-repeat center left;
 }
	
.currents strong, .currentmood strong, .currentmusic .currentlocation,

.ljtags strong 
{
 font-family: "verdana", arial;
 font-size: 10px;
 color: #7a7a7a;
 font-weight: lighter;
 text-transform: lowercase;
 }

.currents, .currentmood, .currentmusic, .currentlocation {
 font-family: "verdana", arial;
 font-size: 10px;
 color: #7a7a7a;
 font-weight: lighter;
 text-transform: lowercase;
 }

.ljtags a, .ljtags a:link, .ljtags a:visited {
 font-family: "verdana", arial;
 font-size: 10px;
 color: #d74c51;
 text-transform: lowercase;
 font-weight: lighter;
 }

.currentlocation a, .currentlocation a:link, .currentlocation a:visited {
 font-family: "verdana", arial;
 font-size: 10px;
 color: #d74c51;
 text-transform: lowercase;
 font-weight: lighter;
 }
	
.currentlocation a:hover, .ljtags a:hover {
 font-family: "verdana", arial;
 font-size: 10px;
 color: #444444;
 font-weight: lighter;
 text-transform: lowercase;
 }

.comments {
 font-family: "Verdana", arial;
 font-size: 10px;
 font-weight: normal;
 text-align: right;
 padding: 5px 5px 5px 5px;
 position: relative;
 clear: center;
 margin-top: 5px;
 text-transform: lowercase;
 }
	
div.comments a, div.comments a:link, div.comments a:visited{ color: #246ca6; }

div.comments a:hover { color: #7a7a7a; }

/*------------COMMENTS-----------*/

.box {
 padding: 5px;
 margin-top: 0px;
 text-align: left;
 clear: right;
 width: 557px;
 }

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

.skiplinks {
 text-align: right;
 margin-bottom: 5px;
 font-family: "Verdana", arial;
 padding: 10px;
 font-size: 9px;
 letter-spacing: 1px;
 color: #7a7a7a;
 background-color: #111111;
 -moz-border-radius-bottomleft:2%;
 -moz-border-radius-bottomright:2%;
 }

.datesubjectcomment {
 margin-top: 20px;
 text-align: right;
 padding: 5px;
 background-color: #111111;
 color: #a7a1a1;
 }	
	
.userpiccomment {
 background-color: #222222 !important;
 position: relative;
 top: -30px;
 left: 0px;
 padding: 5px;
 margin: 20px 10px -20px 10px;
 z-index: 15;
 float: right;
 border: 5px #222222 solid;
 color: #a7a1a1;
 -moz-border-radius: 2%;
 }

div#content input,
div#content textarea,
div#content select {
 color: #7a7a7a;
 background-color: #222222;
 border: 5px #222222 solid;
 -moz-border-radius: 2%;
 }
	
textarea.textbox  { width: 100% !important; }

.reply	{
 position: relative;
 margin: 20px 30px 10px 30px;
 padding: 25px 10px 10px 10px;
 text-align: left;
 font-family: "verdana", arial, verdana, sans-serif;
 font-size: 10px;
 line-height: 125%;
 color: #a7a1a1;
 }
	
.replytosubject {
 color: #a7a1a1;
 font-weight: bold;
 text-transform: normal;
 padding: 5px;
 background-color: #111111;
 }

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

.commentreply {
 text-align: left;
 position: relative;
 margin: 10px;
 font-family: "verdana", arial, verdana, sans-serif;
 font-size: 10px;
 color: #a7a1a1;
 }
	
.commentbox {
 padding: 5px;
 margin: 10px;
 text-align: left;
 background-color: #111111;
 border: 1px solid #333333;
 -moz-border-radius: 2%;
 }
	
.datesubjectcomment a:link, .datesubjectcomment a:visited { color: #d00a0e; }
	
.datesubjectcomment a:hover { color: #7a7a7a; }

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

.commentinfo { margin-top: 10px;  width: 100%; }

/*------------ARCHIVE PAGE-----------*/

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 solid #333333; color: #333333; }

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

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

/*-----------TAG PAGE------------*/

ul.ljtaglist {
 color: #333333;
 font-family: "verdana", arial, verdana, sans-serif;
 font-size: 12px;
 padding: 8px 8px 8px 20px;
 }

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

/*-----------TINY ICONS------------*/

.currentlocation {
 background: url(LOCATION TINY ICON) no-repeat left center;
 padding: 2px 0px 5px 18px;
 }

.currentmood {
 background: url(MOOD TINY ICON) no-repeat left center;
 padding: 2px 0px 5px 18px;
 }

.currentmusic {
 background: url(MUSIC TINY ICON) no-repeat left center;
 padding: 2px 0px 5px 18px;
 }

.currentgroups {
 background: url(CUSTOM GROUP TINY ICON) no-repeat left center;
 padding: 2px 0px 5px 18px;
 }

.ljuser img { 
 width: 0;
 height: 0;
 background-repeat: no-repeat;
 background-color:transparent;
 background: URL(USER TINY ICON); 
 padding: 16px 0px 0 16px;
 }

.ljuser img[src="http://l-stat.livejournal.com/img/userinfo.gif"] {
 background-color:transparent;
 background: URL(USER TINY ICON); 
 padding: 16px 0px 0 16px;
 }

.ljuser img[src="http://l-stat.livejournal.com/img/community.gif"] {
 background-color:transparent;
 background: URL(COMMUNITY TINY ICON);  
 padding: 16px 0px 0 16px;
 }

/*----------MISC------------*/

.clear { height: 0px; font-size: 0.01px; }
	
#lj_controlstrip td {
 font-family: "georgia" !important;
 font-size: 11px;
 background: #111111;
 border: 0px solid #eeeeee;
 }

#lj_controlstrip a, .lj_controlstrip a:link, .lj_controlstrip a:visited, {
 font-family: "georgia" !important;
 font-size: 11px;
 color: #c9bb9f !important;
 text-transform: lowercase;
 }
	
.headerimage {
 position: relative;
 width: 800px;
 height: 300px;
 padding: 0px;
 margin-left: auto;
 margin-right: auto;
 margin-top: 1px;
 background-color: #111111;
 background-image: url(HEADER URL);
 background-position: center;         
 background-repeat: no-repeat;
 -moz-border-radius-topleft: 2%;
 -moz-border-radius-topright: 2%;
            }

.separator { height: 10px; }

Header 800 x 300

Little Lighter:

PLEASE NO HOTLINKING IMAGES

Flat | Top-Level Comments Only

From:

the-seattlegirl.livejournal.com

It looks wonderful! Thanks so much for helping us out. I can't get over how great it looks ^_^

Since the user art wasn't mine I wanted to be sure that others made sure to ask JC-Blade (http://jc-blade.deviantart.com/) before they used the header.

sireesanwar.livejournal.com

Thanks for letting us all know that the original images are from JC-Blade.

I'm really glad you love it. I hope you saw the coding over at the test site cause that has all your coding in it.

Layout Lounge

Layouts, Tutorials, Help, and more

46. Massive Effect Dark Layout

(no subject)

(no subject)

About

Links

Tags

Summary

April 2025