layoutlounge | 33. Jorja Fox Blue Layout with Headers

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

rainbowjumpsuit
Layout Width: 750 px

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: #000000;
        background-image: url(BACKGROUND URL);
        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: #226089;
	text-decoration: none;
	}

a:hover {
	color: #4c228a;
	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: #f7f6f0;
		text-align: justify;
		}
b, i, s, u, em, strong
{
color: #4c228a;
}

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: #888888;
	border-style: solid;
	border-width: 0px 1px 1px 1px;
}

#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: #f7f6f0;
        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: #f7f6f0;
	font-family: "trebuchet ms";
	font-size: 15px;
	width: 750px;
	padding: 0px 0px 10px 0px;
	margin-bottom: 15px;
	text-align: center;
	letter-spacing: 1px;
        text-transform: normal;
	background-color: #226089;
	border-left: 1px solid #888888;
	border-right: 1px solid #888888;
}

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: #f7f6f0;
	text-align: center;
	background-color: #226089;
}

div#header a:hover {
	padding: 5px;
	color: #226089;
	background-color: #191919;
	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: 12px;
	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: #f7f6f0;
	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: #226089;
	display: block;
	padding: 1px 1px 1px 0px;
	text-decoration: none;
		}

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

.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: #f7f6f0;
	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: #226089;
	list-style: none;
	text-align: center;
	color: #f7f6f0;
        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: #226089;
      scrollbar-base-color: #f7f6f0;
      scrollbar-face-color: #f7f6f0;
      scrollbar-highlight-color: #226089;
      scrollbar-darkshadow-color: #cccccc;
      scrollbar-shadow-color: #cccccc;
}

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

#sidebar_summary li.sbaritem a {
	text-decoration: none;
	display: inline !important;
	color: #226089;
	border: 0px solid #226089 !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: #000000;
}

.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: #f7f6f0;
	font-weight: bold;
	padding-bottom: 5px;
	padding-top: 5px;
        padding-left: 10px;
	color: #4c228a;
	font-family: "Pea Alesa";
	font-size: 14px;
	line-height: 17px;
	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: #4c228a;
	}

.subject a:hover {
	color: #4c228a;
	}

.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: #226089;
	font-weight: bold;
	}

span.ljuser a:hover b {
	padding-top: 2px;

padding-bottom: 2px;
	color: #4c228a;
	font-weight: lighter;
	}

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

.ljtags {
	margin-top: 5px;
	color: #7a7071;
	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: 12px;
	color: #7a7071;
	font-weight: lighter;
	text-transform: lowercase;
	}

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

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

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

.comments {
	font-family: "Trebuchet ms";
	font-size: 12px;
	font-weight: bold;
	text-align: center;
	padding: 5px 5px 5px 5px;
	position: relative;
	clear: center;
	margin-top: 5px;
	text-transform: lowercase;
	border-bottom: 0px #e6d6b7 solid;
	}
	
div.comments a, div.comments a:link, div.comments a:visited{
	color: #226089;
}

div.comments a:hover {
	color: #4c228a;
	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: #f7f6f0;
        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: #000000;
	border: 1px solid #cccccc;
	background-color:#f7f6f0;
	}
	
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: #f7f6f0;
	}

.replytoposter {
        background-color: #f7f6f0;
	color: #226089;
	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: #f7f6f0;
	border: 1px solid #cccccc;
	}
	
.datesubjectcomment a:link, .datesubjectcomment a:visited {
	color: #226089;
	}
	
.datesubjectcomment a:hover {
	color: #4c228a;
	}

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

.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: #908e8e !important;
	border: 0px solid #226089;
	}

#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: #888888;
	border-style: solid;
	border-width: 1px;
	 width: 750px;
	 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: transparent!important;
	 background-image: url(HEADER URL);
	 background-position: center;         
         background-repeat: no-repeat;
            }

.separator {
          height: 20px;
         }

750 x 300

Background Used:

Fonts Used:
Pea Alesa

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:

rainbowjumpsuit.livejournal.com

Hey! Thanks again! I love this.

I have a stupid question though. I know I'm going to sound like an idiot but.. I found the place where I need to put the url for the header but, what is the url? Do I need to upload it or something? If so, from where?

Sorry I'm so dense.

sireesanwar.livejournal.com

Tis okay.

Do you have a PhotoBucket or even a ScrapBook here at LJ. You will need to upload it to on of those and then use the Direct Link for the URL. Same with the background image. Back ground image is at top of coding.

Also I updated this coding a second ago because I missed something.

Thanks. I uploaded them to scrapbook on LJ, but I guess I did something wrong. Any idea what I screwed up? The layout is up at my LJ, but the header and background are still screwed.

Okay this is a little harder with LJ scrapebook... but I think you go into your scrapbook and click on the image until it is the only thing on the page.

Your header code is
http://pics.livejournal.com/rainbowjumpsuit/pic/0002rfr6

Background
http://pics.livejournal.com/rainbowjumpsuit/pic/0002sw4r

The URLs you currently have come up showing the image in the scrapbook. You have to click on them one more time to get the URL links I have given you above.

I hope this helps and if it does... I'll be around tomorrow.

Thanks.

I clicked on the links you put there and they work - obviously. But when I enter them into the code it still doesn't work. IDK what I'm doing.

It looks like it is working.

This is part of the reason I got with PhotoBucket because they give you a clear "Direct Link" url for such things and I never have issues with them.

Let me know if you are still having issues.

Yea. I had my girlfriend upload them to photobucket, and it worked fine!

Thanks so much!

:D

Cool. I'm glad it is working for you.

Layout Lounge

Layouts, Tutorials, Help, and more

33. Jorja Fox Blue Layout with Headers

(no subject)

(no subject)

(no subject)

(no subject)

(no subject)

(no subject)

(no subject)

(no subject)

(no subject)

About

Links

Tags

Summary

April 2025