layoutlounge | 25. My Supernatural Red Layout!

Layout Style: S2 Flexible Squares - with sidebar
Use Layout Stylesheet?: No
Custom external stylesheet?: No
Use external stylesheets?: No
Layout Width: 750 px
Header Credit:

serenitysangel

Click for Live Preview

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

body{
	background-color: #222222;
        background-image: url(YOUR BACKGROUND URL HERE);
         background-repeat: repeat;
	color: #ffffff;
	font-family: "Trebuchet ms", arial, verdana, sans-serif;
	font-size: 12px;
             margin: 20px 0 20px 0;
	}

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

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

blockquote {
		padding: 18px; 
		border: 1px dotted #821d2b; 
		color: #5c312c;
		font-size: 12px;
		line-height: 13px;
		font-family: "Trebuchet ms", arial, verdana, sans-serif;
		background: #222222;
		text-align: justify;
		}
b, i, s, u, em, strong
{
color: #e90d45;
}

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: #222222;
	border-color: #444444;
	border-style: dotted;
	border-width: 0px 1px 1px 1px;
}

#maincontent {
		font-family: "Trebuchet ms", arial, verdana, sans-serif;
		font-size: 12px;
	color: #ffffff;
	margin-left: 182px;
	text-align: center;
	}

#sidebar {
	padding: 0px 0 10px 0; 
        background-color: #222222;
	margin-left: 5px;
	font-family: "Trebuchet ms", arial, verdana, sans-serif;
	font-size: 11px;
	color: #ffffff;
	width: 160px;
	float: left;
	text-align: left;
        text-transform: normal;
	border-top: 0px dotted #821d2b;
	border-bottom: 1px dotted #821d2b;
	border-left: 0px dotted #821d2b;
	border-right: 1px dotted #821d2b;
	}

#header {		
	position: relative;
	line-height: 35px;
	text-align: center;
        color: #666666;
	font-family: "Twilight", arial, sans-serif;
	font-size: 11px;
	width: 100%;
	padding: 0px 0px 10px 0px;
	margin-bottom: 20px;
	text-align: center;
	letter-spacing: 1px;
        text-transform: uppercase;
	border-bottom: 0px dotted #821d2b;
}

#footer {			
	width: 100%;
	margin: 0px;
	text-align: center;
	font-family: "Twilight", arial, verdana, sans-serif;
	font-size: 11px;
	color: #ffffff;
	z-index: 100;
	}

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

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: 9px;
	font-family: "Twilight", arial, sans-serif;
	font-size: 15px;
	font-weight: normal;
	text-transform: uppercase;
	letter-spacing: -1px;
	color: #999999;
	text-align: center;
	background-color: #000000;
}

div#header a:hover {
	padding: 9px;
	color: #ffffff;
	background-color: #d60014;
	border-bottom: 0px dotted;
}

ul.navheader 
	{	
	padding: 10px 0px 0px 0px;
        background-color: #000000;	
	margin: 0px;
	}

ul.navheader li  {
	display: inline;
	padding: 10px 0px 0px 0px;
        background-color: #000000;
	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;
	}
		
#sidebar_tags .sbarcontent {
         height: 300px;
         overflow:auto;
}

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

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

.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 dotted #821d2b;
	text-align: center;
	font-family: "Trebuchet ms", arial, verdana, sans-serif;
	font-size: 9px;
	}

.sbarcalendarposts {
	padding: 1px;
        border: 1px dotted #821d2b;
	background-color: #222222;
	text-align: center;
	font-family: "Trebuchet ms", 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 dotted #821d2b;
	list-style: none;
        }

li.sbartitle {
	padding: 3px 5px 3px 5px;
	margin: 10px 0 10px 0;
        background-color: #000000;
	list-style: none;
	text-align: left;
	color: #dddddd;
        border-top: 0px dotted #821d2b;
        text-transform: normal;
	font-family: "Twilight", arial, verdana, sans-serif;
	font-size: 13px;
		}

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

#sidebar_summary li.sbaritem {
color: #ffffff;
border: 1px dotted #821d2b;
background-color: #222222;
padding: 3px;
text-transform: normal;
margin: 3px 0px;
    }

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

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

/* -----MAINCONTENT----- */

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

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

.ljuser img { 
	width: 0px;
	height: 0px;
	background-repeat: no-repeat;
/*so that IE users will still see an image*/
	background-image:

url(http://i77.photobucket.com/albums/j49/SireesAnwar/TinyIcons/bloody_halloween_

user.png); 
	padding: 16px 0px 0px 16px;
	}

.ljuser img[src="http://p-stat.livejournal.com/img/user.gif"] {
	background-image:

url(http://i77.photobucket.com/albums/j49/SireesAnwar/TinyIcons/bloody_halloween_

user.png);
	padding: 16px 0px 0px 16px;
	}

.ljuser img[src="http://p-stat.livejournal.com/img/community.gif"] {
	background-image:

url(http://i77.photobucket.com/albums/j49/SireesAnwar/TinyIcons/happy_halloween_g

host-street_of_mer.png);
	padding: 16px 0px 0px 16px;
	}

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

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

.subcontent {
        background-color: #222222;
        width: 512px;
	border-top: 0px dotted #821d2b;
	border-bottom: 1px dotted #821d2b;
	border-left: 0px dotted #821d2b;
	border-right: 0px dotted #821d2b;
}

.entry	{
        padding: 10px;
	color: #ffffff;
	font-family: "Trebuchet ms", arial, verdana, sans-serif;
	font-size: 12px;
	text-align: justify;
	}
	
hr {
	color: transparent;
	height: 1px;
	border-style : none; 
	border-bottom: 2px dotted #821d2b;
	}

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

.userpic {
	background-color: #222222 !important;
	position: relative;
	float: right;
	padding: 5px;
	margin: 10px;
	z-index: 15;
        color: #ffffff;
	border: 1px #cccccc dotted;
	}
	
.userpicfriends {
	background-color: #222222 !important;
	position: relative;
	float: right;
	padding: 5px;
	margin: 10px;
	text-align: center;
	font-family: "Trebuchet ms", arial, verdana, sans-serif;
	font-size: 12px;
	z-index: 15;
	border: 1px #cccccc dotted;
	}
	
.date {
	padding-top: 5px;
	padding-bottom: 5px;
	text-align: left;
        color: #ffffff;
	top: 5px;
	font-family: "Trebuchet ms", arial, verdana, sans-serif;
	font-size: 11px;
	text-transform: uppercase;
	}

.subject {
        background-color: #222222;
	font-weight: none;
	padding-bottom: 5px;
	padding-top: 5px;
        padding-left: 10px;
	color: #d60014;
	font-family: "Twilight", arial, verdana, sans-serif;
	font-size: 22px;
	text-transform: normal;
        text-decoration: underline;
	border-bottom: 0px dotted #821d2b;
	border-right: 0px dotted #821d2b;
	}
	
.subject a, .subject a:link, .subject a:visited {
	color: #d60014;
	}

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

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

.ljtags {
	margin-top: 5px;
	color: #ffffff;
	font-weight: lighter;
	text-transform: lowercase;
        margin: 15px 0px 0px 0px;
        padding: 5px 0px 5px 17px;
        background:

url(http://i77.photobucket.com/albums/j49/SireesAnwar/TinyIcons/tag_orange.png)

no-repeat center left;
	}
	
.currents strong, .currentmood strong, .currentmusic .currentlocation,

.ljtags strong

{
	font-family: "Twilight", arial, verdana, sans-serif;
	font-size: 12px;
	color: #777777;
	font-weight: lighter;
	text-transform: lowercase;
	}

.currentlocation
       {
       background:

url(http://i77.photobucket.com/albums/j49/SireesAnwar/TinyIcons/world.png)

no-repeat left center;
       padding: 2px 0px 5px 18px;
       }

.currentmood 
       {
       background:

url(http://i77.photobucket.com/albums/j49/SireesAnwar/TinyIcons/heart2.png)

no-repeat left center;
       padding: 2px 0px 5px 18px;
       }

.currentmusic 
       {
       background:

url(http://i77.photobucket.com/albums/j49/SireesAnwar/TinyIcons/ipod.png)

no-repeat left center;
       padding: 2px 0px 5px 18px;
       }

.currents, .currentmood, .currentmusic, .currentlocation {
	font-family: "Twilight", arial, verdana, sans-serif;
	font-size: 12px;
	color: #777777;
	font-weight: lighter;
	text-transform: lowercase;
	}

.ljtags a, .ljtags a:link, .ljtags a:visited {
	font-family: "Twilight", arial, verdana, sans-serif;
	font-size: 12px;
	color: #d60014;
	text-transform: lowercase;
	font-weight: lighter;
	}

.currentlocation a, .currentlocation a:link, .currentlocation a:visited {
	font-size: 12px;
	font-family: "Twilight", arial, verdana, sans-serif;
	color: #d60014;
	text-transform: lowercase;
	font-weight: lighter;
	}
	
.currentlocation a:hover, .ljtags a:hover {
	font-family: "Twilight", arial, verdana, sans-serif;
	font-size: 12px;
	color: #777777;
	font-weight: lighter;
	text-transform: lowercase;
	}

.comments {
	font-family: "Twilight", arial, verdana, sans-serif;
	font-size: 12px;
	font-size: 11px;
	text-align: center;
	padding: 5px 5px 5px 5px;
	position: relative;
	clear: right;
	margin-top: 5px;
	text-transform: lowercase;
	border-bottom: 1px #222222 dotted;
	}
	
div.comments a, div.comments a:link, div.comments a:visited{
	color: #d60014;
}

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

/* -----maincontent -- entry, reply pages----- */

.datesubjectcomment {
	margin-top: 20px;
	text-align: right;
	padding: 5px;
        background-color: #333333;
        color: #dddddd;
	}	
	
.userpiccomment {
	background-color: #222222 !important;
	position: relative;
	top: -30px;
	left: 0px;
	padding: 5px;
	margin: 20px 10px -20px 10px;
	z-index: 15;
	float: right;
	border: 1px #cccccc dotted;
	}
	
.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 dotted #821d2b;
	background-color:#222222;
	}
	
textarea.textbox  {
	width: 100% !important;
	}

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

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

.commentreply {
        text-align: justify;
	position: relative;
	margin: 10px;
	font-family: "Trebuchet ms", arial, verdana, sans-serif;
	font-size: 12px;
	color: #ffffff;
	}
	
.commentbox {
	padding: 5px;
	margin: 10px;
	text-align: left;
        background-color: #333333;
	border: 1px dotted #821d2b;
	}
	
.datesubjectcomment a:link, .datesubjectcomment a:visited {
	color: #d60014;
	}
	
.datesubjectcomment a:hover {
	color: #777777;
	}

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

.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 dotted #821d2b;
	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: #444444;
	border-style: dotted;
	border-width: 1px 1px 0px 1px;
	 width: 700px;
	 height: 300px;
         padding-left: 0px;
         padding-right: 0x;
         padding-bottom: 0px;
         padding-top: 0px;
         margin-left: auto;
         margin-right: auto;
         margin-top: 1px;
         background-color: #222222;
	 background-image: url(YOUR HEADER URL HERE);
	 background-position: center;         
         background-repeat: no-repeat;
            }

.separator {
          height: 20px;
         }

Header Made by

serenitysangel for me

Background

Fonts Used:
Twilight

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.

Flat | Top-Level Comments Only

From:

roguemyth.livejournal.com

This layout is sooo hot!!! I'm definitely going to use it and will credit <3

sireesanwar.livejournal.com

I am really glad you liked it. Thanks. I really hope you enjoy it.

Hi I just wanted to let you know that I realized that some of the fonts I used on the layout might not show up if you don't have them downloaded and in your computer. I've posted the font links above in the layout post.

77mrsbrooks.livejournal.com

the layout is awesome! will use it and will credit you. thanks for sharing!:)

I'm so glad you like it. Enjoy.

Yeah i really do. Just one thing. I'm trying to get the Twilight font but when i click on the link it is "broken link". Where i could get the font please? Thanks

Oops I didn't know that... okay... download it from me here...

http://www.box.net/shared/kvi7s6133c

starshines.livejournal.com

Hey! I just love this layout!! Using it at my personal journal with my own header. Crediting in my user info. :D

Glad you like. Enjoy!

sherry-g.livejournal.com

This layout is great! I'm using it for my community right now :D
I just have one question though. The tags in the sidebar, it is possible to have all of them show without having to scroll down each time to view all of them??

Yes, you simply have to change a couple of things.

Go to the Sidebar section of your code. You will find this code:

#sidebar_tags .sbarcontent {
height: 300px;
overflow:auto;
}

Change the Height from 300px to 100%

Then scroll down a little to find this code:

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

Change Height from 300px to 100%
Change the overflows from hidden/scroll to no.

This will give you the full list of Tag and leave the coding available should you want to make them scroll in the future.

It worked! Thank you so much!

You are very welcome.

cheery-lips.livejournal.com

This layout is very nice, I'll use it for my journal (I'll credit you in my profile). I'll use my own header, if you don't mind.

Headers are just for design purposes and are not required.

Enjoy the layout with whatever header you choose.

Merry Christmas!

Thanks, and Merry Christmas to you too (sorry for being late!).

You are welcome.

It is okay. I don't expect people to wait at their computer to reply. *lol*

Happy New Year! *lol*

Layout Lounge

Layouts, Tutorials, Help, and more

25. My Supernatural Red 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)

About

Links

Tags

Summary

April 2025