layoutlounge | #31 Valentine Red Layout

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

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: #f7f6f0;
        background-image: url(INSERT BACKGROUND IMAGE LINK);
        background-repeat: repeat;
	color: #000000;
	font-family: "Trebuchet ms", arial, verdana, sans-serif;
	font-size: 12px;
        margin: 10px 0 20px 0;
	}

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

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

blockquote {
		padding: 18px; 
		border: 1px solid #CECECE; 
		color: #4e4e4e;
		font-size: 12px;
		line-height: 13px;
		font-family: "Trebuchet ms", arial, verdana, sans-serif;
		background: #ffffff;
		text-align: justify;
		}
b, i, s, u, em, strong
{
color: #e7477f;
}

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

/*-----------------------
SECTION: In General
-------------------------*/
	
#content {  	
	width: 750px;	
	margin-left: auto; 
        margin-right: auto;  
	text-align: justify;
        padding: 0px;
        background-color: #f7f6f0;
	border-color: #cccccc;
	border-style: solid;
	border-width: 0px;
}

#maincontent {
	width: 530px;
	float: right;
	margin: 0px 0px 0px 10px;
	font-family: "Trebuchet ms", arial, verdana, sans-serif;
	font-size: 12px;
	color: #888888;
	text-align: center;
	}

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

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

#header {		
	position: relative;
	line-height: 25px;
	text-align: center;
        color: #ffffff;
	font-family: "trebuchet ms";
	font-size: 15px;
	width: 100%;
	padding: 0px 0px 10px 0px;
	margin-bottom: 15px;
	text-align: center;
	letter-spacing: 1px;
        text-transform: normal;
	border-bottom: 0px solid #cccccc;
	background-color: #a63a49;

}

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: "trebuchet ms";
	font-size: 15px;
	font-weight: normal;
	text-transform: normal;
	letter-spacing: -1px;
	color: #ffffff;
	text-align: center;
	background-color: #b8b3aa;
}

div#header a:hover {
	padding: 5px;
	color: #a63a49;
	background-color: #D7D3CD;
	border-bottom: 0px solid;
}

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: 10px;
	color: #888888;
	z-index: 100;
	}

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: #ffffff;
	margin-left: 5px;
	font-family: "Trebuchet ms", arial, verdana, sans-serif;
	font-size: 11px;
	color: #000000;
	width: 200px;
	float: left;
	text-align: left;
        text-transform: normal;
	border-top: 1px solid #cccccc;
	border-bottom: 1px solid #cccccc;
	border-left: 1px solid #cccccc;
	border-right: 1px solid #cccccc;
	}

#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: #a63a49;
	display: block;
	padding: 1px 1px 1px 0px;
	text-decoration: none;
		}

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

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

.sbarcalendarposts {
	padding: 1px;
        border: 1px solid #cccccc;
	background-color: #ffffff;
	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 solid #cccccc;
	list-style: none;
        }

li.sbartitle {
	padding: 3px 5px 3px 5px;
	margin: 10px 0 10px 0;
        background-color: #a63a49;
	list-style: none;
	text-align: center;
	color: #ffffff;
        border-top: 0px solid #cccccc;
        text-transform: normal;
	font-family: "Pea Alesa";
	font-size: 12px;
		}

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

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

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

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

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

.entry	{
        padding: 10px;
	margin: 0px;
	color: #000000;
	font-family: "arial";
	font-size: 12px;
	text-align: justify;
	}
	
hr {
	color: transparent;
	height: 1px;
	border-style : none; 
	border-bottom: 2px solid #cccccc;
	}

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

.userpic {
	background-color: #f7f6f0 !important;
	position: relative;
	float: right;
	padding: 5px;
	margin: 10px;
	z-index: 15;
        color: #cccccc !important;
	border: 1px #e6d6b7 solid;
	}

.userpicfriends {
	background-color: #f7f6f0 !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 #e6d6b7 solid;
	}

.userpicfriends a font {
	color: #dc9d30;
}

.date {
	padding-top: 5px;
	padding-bottom: 5px;
	text-align: center;
        color: #000000;
	top: 5px;
	font-family: "Trebuchet ms", arial, verdana, sans-serif;
	font-size: 11px;
	text-transform: uppercase;
	}

.subject {
        background-color: #ffffff;
	font-weight: bold;
	padding-bottom: 5px;
	padding-top: 5px;
        padding-left: 10px;
	color: #a63a49;
	font-family: "Pea Alesa";
	font-size: 14px;
	text-transform: normal;
        text-decoration: underline;
	border-bottom: 0px solid #cccccc;
	border-right: 0px solid #cccccc;
	}
	
.subject a, .subject a:link, .subject a:visited {
	color: #a63a49;
	}

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

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

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

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

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

.ljtags {
	margin-top: 5px;
	color: #cccccc;
	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: "Trebuchet ms", arial;
	font-size: 10px;
	color: #cccccc;
	font-weight: lighter;
	text-transform: lowercase;
	}

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

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

.currentlocation a, .currentlocation a:link, .currentlocation a:visited {
	font-family: "Trebuchet ms", arial;
	font-size: 10px;
	color: #a63a49;
	text-transform: lowercase;
	font-weight: lighter;
	}
	
.currentlocation a:hover, .ljtags a:hover {
	font-family: "Trebuchet ms", arial;
	font-size: 10px;
	color: #A5A5A5;
	font-weight: lighter;
	text-transform: lowercase;
	}

.comments {
	font-family: "king cool KC";
	font-size: 14px;
	font-weight: bold;
	text-align: center;
	padding: 5px 5px 5px 5px;
	position: relative;
	clear: center;
	margin-top: 5px;
	text-transform: lowercase;
	border-bottom: 1px #e6d6b7 solid;
	}
	
div.comments a, div.comments a:link, div.comments a:visited{
	color: #a63a49;
}

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

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

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

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

.skiplinks {
	text-transform: normal;
	text-align: center;
	padding: 10px 0 10px 0;
	}

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

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

.replytoposter {
        background-color: #ffffff;
	color: #a63a49;
	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: #000000;
	}
	
.commentbox {
	padding: 5px;
	margin: 10px;
	text-align: left;
        background-color: #ffffff;
	border: 1px solid #cccccc;
	}
	
.datesubjectcomment a:link, .datesubjectcomment a:visited {
	color: #a63a49;
	}
	
.datesubjectcomment a:hover {
	color: #A5A5A5;
	}

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

.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 #cccccc;
	color: #cccccc;
	}

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

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

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

ul.ljtaglist {
	color: #cccccc;
	font-family: "Trebuchet ms", arial, verdana, sans-serif;
	font-size: 10pt;
	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: 7px;
	font-size: 0.01px;
	}
	
#lj_controlstrip td {
	font-family: "georgia" !important;
	font-size: 11px;
	background-color: #da5e6f !important;
	border: 1px solid #f7f6f0;
	}

#lj_controlstrip a, .lj_controlstrip a:link, .lj_controlstrip a:visited, {
	font-family: "georgia" !important;
	font-size: 11px;
	color: #e6d6b7 !important;
	text-transform: lowercase;
	}

.headerimage {
          position: relative;
	border-color: #cccccc;
	border-style: solid;
	border-width: 0px;
	 width: 750px;
	 height: 250px;
         padding-left: 0px;
         padding-right: 0x;
         padding-bottom: 0px;
         padding-top: 0px;
         margin-left: auto;
         margin-right: auto;
         margin-top: 1px;
         background-color: transparent !important;
	 background-image: url(INSERT HEADER IMAGE LINK);
	 background-position: center;         
         background-repeat: no-repeat;
            }

.separator {
          height: 20px;
         }

Headers
750 x 223

750 x 250

Background Image:
Photobucket

Fonts Used:
Pea Alesa
king cool KC

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

Thank you! Got it up. Love having the tutorial, btw, so I can refer if I forget.

I'm glad you like the layout and I'm glad the tutorial is helping you. That is the reason for them and I realize some of the things I know aren't common knowledge. *lol*

I'm glad you like it though I noticed the white at the top and bottom of the image on your journal.

If you would like this white to disappear you need to change the images height in the coding which is explained in Header Image Help (http://community.livejournal.com/layout_lounge/7530.html).

I did that and the white is still there.

What I meant was for you to check out the part about changing sizes because it your code it says that the image is 250px but that image is actually 223px... I believe.

If you change the 250 to 223 the white will go away.

OOOOOhhhhh, okay. LOL I'll check that out.

*lol* I hope that worked.

It did! I'll be able to put all the pieces together one of these days. I'm the dum side of that icon! LOL

No you aren't. You just don't know this stuff like I do. I don't expect you too. I mean if you did... you wouldn't be using my layouts. *grin*

You have job security! Heehee.

*phew* good to know. *lol*

Thank you. I followed your instructions to a T and it worked perfectly.

My journal has never looked better.

I'm so glad you think it and the tutorials worked for you!

thanks i'm going to use this layout

oh thanks i didn't even notice that

You are welcome.

Amazing layout! I've been using a generic layout since the new year, and this is exactly what I need to celebrate my favorite holiday!! Only, how will I ever decide which header I want...oh well, I'll just snag all three and switch 'em out :)

Sounds like a plan to me. Enjoy it.

thank you for sharing this wonderful layout!~ ^^

Credit to you , of course.....

So welcome.

I'm rebooting this old journal and I love this layout ! It's so pretty. I really love it ! I just hope I can get it up with little trouble.

Thanks for sharing this !

Well I hope you have no trouble but if you have any issues with it... let me know as it is my strange joy to help with this stuff.

I'll be nabbing this. Thanks for making and sharing. <3 I followed your instructions and it seems to have worked! This is the first time I'm using a customized layout like this. <3 Now I just have to get used to the navigation bar being on the left side. xD

You are so welcome. I'm also glad my walkthough/tutorial helped you.

(deleted comment)

You are very welcome. Thanks so much for posting. Enjoy!

So beautiful. I love it.

Thank you. I'm glad.

You pick the image you would like and upload it to your online photo account.... I suggest PhotoBucket.com or TinyPic.com.

They give you a direct link which you will insert into the coding. This is explained a little more over at
http://community.livejournal.com/layout_lounge/7530.html

I hope this helps you.

Thank you so much for this layout! I changed the header, but the color scheme you used is so beautiful. Credit to you is assured, thank you! :D

Hey, thank you so much for the code~!!! ^^ I'm taking it ^.^

Love the layout! I installed the layout and header, however I can't get the background to work. I uploaded the image to photobucket, put the direct link in the css (just like I did with the header link), but then the whole layout got messed up. Any idea what I could be doing wrong? I currently don't have anything in between the ().

BTW, your tutorials are excellent. Thanks for all of it :)

Nevermind--I tried a different background from one of your tutorials and it worked fine. Again, thank you for the codes.

I'm not sure what went wrong. I would have had to see it. I would assume something was deleted by accident but if it working now... no idea.

I'm very glad the tutorials are helping. I tried to make them more basic sounding because far too many tutorials are too technical.

I'm glad the other background is working for you.

#31 Valentine 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

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