layoutlounge | 41. Nightmare Before Christmas Layout

sireesanwar.livejournal.com posting in

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

shinjifukushima

Click to see larger image

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

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

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

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

blockquote {
		padding: 18px; 
		border: 1px solid #7a7a7a; 
		color: #7a7a7a;
		font-size: 12px;
		line-height: 14px;
		font-family: "verdana", arial, verdana, sans-serif;
		background: #333333;
		text-align: left;
                     -moz-border-radius: 2%;

}
b, strong {
color: #7b5062;
}

i, em {
color: #cccccc;
}

s, u {
color: #9363c6;
}

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

/*-----------------------
SECTION: In General
-------------------------*/
	
#content {  	
	width: 800px;	
	margin-left: auto; 
        margin-right: auto;  
	text-align: left;
        padding: 0px;
        background-color: transparent !important;
	border-color: #888888;
	border-style: solid;
	border-width: 0px;
}

#maincontent {
	width: 565px;
	float: left;
	margin: 0px 0px 0px 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;
	border: 0px solid #333333;
	min-height: 200px;
	margin-right: 0px;
            -moz-border-radius: 1%;

}

/*-----------------------
SECTION: Header
-----------------------*/

#header {		
	position: relative;
	line-height: 125%;
	text-align: center;
        color: #888888;
	font-family: "verdana";
	font-size: 9px;
	width: 100%;
	padding: 0px 0px 10px 0px;
	margin-bottom: 0px;
	text-align: center;
	letter-spacing: 1px;
        text-transform: normal;
	border-bottom: 0px solid #333333;
	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: #68415e;
	text-align: center;
	background-color: #111111;
}

div#header a:hover {
	padding: 5px;
	color: #9363c6;
	background-color: #2a2a2a;
	border-bottom: 0px solid;
            -moz-border-radius: 2%;
}

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;
		}

/*-----------------------
SECTION: 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;
	border-bottom: 0px solid;
}

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

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

.clearfoot {		
	clear: both;
	}

/*-----------------------
SECTION: Sidebar
-------------------------*/

#sidebar {
	padding: 0px 0 10px 0; 
        background-color: #111111;
	margin-left: 0px;
	font-family: "verdana", arial, verdana, sans-serif;
	font-size: 11px;
	color: #7a7a7a;
	width: 215px;
	float: right;
	text-align: left;
        text-transform: normal;
	border: 0px solid #333333;
            -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: #246ca6;
	display: block;
	padding: 1px 1px 1px 0px;
	text-decoration: none;
		}

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

.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 {
	padding: 1px;
	border: 1px solid #333333;
	text-align: center;
	font-family: "verdana", arial, verdana, sans-serif;
	font-size: 9px;
	}

.sbarcalendarposts {
	padding: 1px;
        border: 1px solid #333333;
	background-color: #111111;
	text-align: center;
	font-family: "verdana", arial, 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 #333333;
	list-style: none;
        }

li.sbartitle {
	padding: 3px 5px 3px 5px;
	margin: 10px 0 10px 0;
	list-style: none;
	text-align: center;
	color: #cccccc;
        border-bottom: 0px solid #333333;
        text-transform: normal;
	font-weight: none;
	font-family: "Automobile", Arial;
	font-size: 18px;
        background-image: url(SIDEBARD/COMMENT IMAGE);
               -moz-border-radius: 5%;
		}

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

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

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

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

/*-----------------------
SECTION: Entries
-------------------------*/

.entry	{
        padding: 10px;
	margin: 0px;
	color: #7a7a7a;
	font-family: "arial";
	font-size: 12px;
	text-align: left;
	}
	
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: #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: #111111 !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: 1px #333333 solid;
            -moz-border-radius: 2%;

}

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

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

.subject {
        background-color: #111111;
	font-weight: none;
	padding-bottom: 5px;
	padding-top: 5px;
        padding-left: 10px;
	color: #68415e;
	font-family: "Automobile", Verdana;
	font-size: 18px;
	text-transform: normal;
        text-decoration: underline;
	border-bottom: 0px solid #333333;
	}
	
.subject a, .subject a:link, .subject a:visited {
	color: #68415e;
	}

.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;
        }

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

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

/*-----------------------
SECTION: Currents, tags, comment links
-------------------------*/

.ljtags {
	margin-top: 5px;
	color: #7a7a7a;
	font-weight: lighter;
	text-transform: lowercase;
        margin: 15px 0px 0px 0px;
        padding: 5px 0px 5px 17px;
        background: url() 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: #246ca6;
	text-transform: lowercase;
	font-weight: lighter;
	}

.currentlocation a, .currentlocation a:link, .currentlocation a:visited {
	font-family: "verdana", arial;
	font-size: 10px;
	color: #246ca6;
	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;
        background-image:url(SIDEBARD/COMMENT IMAGE);
		background-repeat:repeat;
            -moz-border-radius: 2%;
	}
	
div.comments a, div.comments a:link, div.comments a:visited{
	color: #cccccc;
}

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

/*-----------------------
SECTION: Comments Page
-------------------------*/

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

form div.box {
	text-align:center;
	background-color: #111111;
	width: 557px;
}

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

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

}

div#content input,
div#content textarea,
div#content select {
	color: #cccccc;
	border: 1px solid #444444;
	background-color:#333333;
	}
	
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: #7a7a7a;
	}
	
.replytosubject {
	color: #7a7a7a;
	font-weight: bold;
	text-transform: normal;
        padding: 5px;
        background-color: #111111;
	}

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

.commentreply {
        text-align: left;
	position: relative;
	margin: 10px;
	font-family: "verdana", arial, verdana, sans-serif;
	font-size: 10px;
	color: #7a7a7a;
	}
	
.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: #246ca6;
	}
	
.datesubjectcomment a:hover {
	color: #444444;
	}

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

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

/*-----------------------
SECTION: Year/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;
	}

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

SECTION: Tags Page
-------------------------*/

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

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

/*-----------------------
SECTION: Tiny Icons
-------------------------*/

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

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

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

/*-----------------------
SECTION: Mics
-------------------------*/

.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: 291px;
         padding-left: 0px;
         padding-right: 0x;
         padding-bottom: 0px;
         padding-top: 0px;
         margin-left: auto;
         margin-right: auto;
         margin-top: 1px;
         background-color: #111111;
	 background-image: url(HEADER IMAGE);
	 background-position: center;         
         background-repeat: no-repeat;
            }

.separator {
          height: 20px;
         }

Art Work:
Can Be found here.

Background Images:
Background:

Sidebar & Comments:

Fonts Used:
Automobile

See the Font Tutorial if you need help adding these fonts to your computer system.

Check out Using Layouts on the sidebar for any extra assistance.
Please direct people to

layout_lounge or

graffitigraphic.

Flat | Top-Level Comments Only

From:

shinjifukushima.livejournal.com

Thank you again so much! As soon as I'm done tinkering around with the comments and what not I'll post an entry letting all my friends know to come to you for requests.

You really did a fabulous job!

From:

sireesanwar.livejournal.com

Thanks. I'm so glad you love it.

From:

roguemyth.livejournal.com

Just wanted to say this layout is absolutely gorgeous!!!!! I'm going to add it to my favourites list for the next time I do a layout change. Really good job!!!

From:

sireesanwar.livejournal.com

Thank you. Feel free. That's why I make them!

Also, I love your icon. It is really beautiful. Mind if I snag it?

From:

roguemyth.livejournal.com

Sure can :)

From:

sireesanwar.livejournal.com

Thank you!

From:

catcey.livejournal.com

Like it, stole the background image.

From:

sireesanwar.livejournal.com

Cool

From:

skelngtnsuicide.livejournal.com

I died when I found this layout. ABSOLUTELY beautiful and Im snagging it and will credit!!

From:

sireesanwar.livejournal.com

I'm so glad! Well that you like it not that you died. Enjoy!

From:

skelngtnsuicide.livejournal.com

haha, thank you again, im so happy to have stumbled onto your work!

From:

sireesanwar.livejournal.com

Thanks. That is a really nice thing to say.

Just let me know if you need any help with anything!

From:

butete.livejournal.com

I'm in the middle of a massive layout overhaul and this layout is perfect. I hope you don't mind me using it ^^ Keep up the fantastic work! :3

From:

sireesanwar.livejournal.com

I don't mind at all. I'm overjoyed. Sorry about the delay in responding. I never got a notice that you commented here.

From:

darth-aneleh.livejournal.com

This is absolutely breathtaking! I hope you don't mind that I will use, with proper credits of course. :) Such a wonderful job!

From:

sireesanwar.livejournal.com

Of course, I don't mind. I want people to use them.... ENJOY!

From:

thehunter.livejournal.com

This is such a great layout! I just wanted to let you know that I'm using it at one of my DW accounts (http://hunterfic.dreamwidth.org). I replaced the background and sidebar/comments images and put up randomly cycling headers. :)

Thanks!

From:

sireesanwar.livejournal.com

Thanks. I'm glad you are enjoying it! Have fun with it.

From:

autumn-meadows.livejournal.com

Love this. Using and will credit.

From:

wickedlaw.livejournal.com

JACK!!

It's beautiful, I love it!!!
Hope you don't mind me taking it, I just love Nightmare Before Christmas =)

From:

sireesanwar.livejournal.com

Of course not. That is what I make them for. Enjoy it!

From:

iamusicklover.livejournal.com

Lovely !
Mind if I use it ? Will be doing a little editing though :)
But I will credit to you :)

From:

sireesanwar.livejournal.com

No problem. Enjoy.

From:

iamusicklover.livejournal.com

Thanks ! :)

From:

lostinabluebox.livejournal.com

This is amazing.

From:

sireesanwar.livejournal.com

Thanks!

Flat | Top-Level Comments Only

About

Welcome to the Lounge. Our tutorials are saved here. These are currently all for LJ and Flexible Squares. Should you have general questions about us check out our FAQ. I do NOT customize layouts for individuals.

Layout Change Quick Guide

If you like Flexible Squares, I have tons of layouts for you, and still create them.

I've been creating Layouts for DW's Bannering. Here's how to use them:
1. Go to Transmogrified Layouts.
2. Choose Basic.
3. Go to Custom CSS.
4. Make sure all boxes are unchecked
5. Copy Coding to Stylesheet Box.
6. Make sure to update with your own images/image urls. Imgur images are okay to be used.
7.Click Save.

Tips Welcome:

You can also find layout_lounge at LiveJournal.

Summary

April 2025

S	M	T	W	T	F	S
		1	2	3	4	5
6	7	8	9	10	11	12
13	14	15	16	17	18	19
20	21	22	23	24	25	26
27	28	29	30

Layout Lounge

Layouts, Tutorials, Help, and more

41. Nightmare Before Christmas Layout

(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)

(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