layout: serenity [+ 5 matching headers]

[casey_bee]

works with: all LJ accounts
starts with style: S2 ---> Flexible Squares (any)
colors used: grey, white, blue
best viewed: 1024x768px screen. Firefox browser.

matching headers: [2]stock, [1]coldplay, [1]doctor who, [1]house

SERENITY


image preview | live preview no longer available

body {
background-color: #ffffff;
border-left: 200px solid #F5F5F5;
color: #585858;
margin-top: 0px;
}

a, a:link, a:visited, a:active {
color: #5eaffa;
text-decoration: none;
}

a:hover, a:hover b, a:hover strong {
color: #C1C1C1;
text-decoration: none;
}

strong, b {
color: #5eaffa;
font-weight: bold;
}

strong, i {
color: #C1C1C1;
font-weight: italic;
}

.title, .subtitle{
display: none;
}

.defaultuserpic img {
display: none;
}

li.sbartitle {
display: none;
}

blockquote {
margin: 8px;
padding: 8px;
background: #FFFFFF;
color: #585858;
line-height: 15px;
font-family: "Trebuchet ms", arial, verdana, sans-serif;
font-size: 7.5pt;
text-align: justify;
border: 1px solid #5eaffa;
}

code, kbd, pre, tt {
font-family: monospace;
}

#content {
width: 750px;
background-color: transparent;
border-width: 0px;
padding: 0px;
margin-top: 0px;
margin-left: 0px;
}

#sidebar {
background-color: transparent;
border-bottom: 2px solid #F5F5F5;
border-top: 0px;
border-right: 0px;
border-left: 0px;
padding-left: 50px;
padding-right: 0px;
padding-top: 0px;
padding-bottom: 0px;
width: 100%;
}

#maincontent {
float: right;
width: 650px;
margin-top: 55px;
margin-bottom: 0px;
margin-left: 0px;
margin-right: 0px;
padding: 0px;
border: none;
background-color: transparent;
}

#header {
width: auto;
padding: 2px;
line-height: 30px;
background-color: transparent;
font-family: arial, sans-serif;
font-size: 22pt;
font-weight: normal;
text-transform: lowercase;
letter-spacing: -1px;
color: #C1C1C1;
text-align: right;
border-bottom: 2px solid #F5F5F5;
border-top: 2px solid #F5F5F5;
border-left: 0px;
border-right: 0px;
padding-bottom: 10px;
}

#footer {
width: auto;
padding: 3px;
text-align: right;
background-color: transparent;
border: none;
}

.entry {
padding: 0px;
background-color: transparent;
color: #585858;
line-height: 13.5pt;
font-family: arial, sans-serif;
font-size: 8pt;
text-align: justify;
border-width: 0px;
margin-bottom: 60px;
}

.userpic {
padding: 5px;
background-color: #ffffff;
border-style: solid;
border-width: 1px;
border-color: #E5E5E5;
}

.userpicfriends {
margin-right: 10px;
padding: 5px;
background-color: #ffffff !important;
border-style: solid;
border-width: 1px;
border-color: #E5E5E5;
}

.userpiccomment {
padding: 5px;
background-color: #ffffff;
border-style: solid;
border-width: 1px;
border-color: #E5E5E5;
}

.date {
color: #5eaffa;
background-color: transparent;
border-width: 0px;
font-family: tahoma, arial, verdana, sans-serif;
font-size: 7pt;
text-transform: lowercase;
margin-left: 10px;
}

.datesubjectcomment {
color: #5eaffa;
background-color: transparent;
border-width: 0px;
font-family: tahoma, verdana, sans-serif;
font-size: 7pt;
margin-left: 10px;
border-bottom: 1px #e5e5e5 solid;
}

.subject, .subject a, .subject a:link, .subject a:visited, .subject a:hover {
color: #C1C1C1;
font-weight: normal;
background-color: transparent;
border: none;
font-family: arial, sans-serif;
font-size: 23pt;
letter-spacing: 1px;
text-transform: lowercase;
}

.datesubject {
background-color: transparent;
border-width: 0px;
}

div#header a, div#header a:link, div#header a:visited, div#header a:active {
padding: 9px;
font-family: arial, sans-serif;
font-size: 16pt;
font-weight: normal;
text-transform: lowercase;
letter-spacing: -1px;
color: #5eaffa;
text-align: center;
background-color: transparent;
}

div#header a:hover {
padding: 9px;
color: #C1C1C1;
background-color: #ffffff;
}

div#footer a, div#footer a:link, div#footer a:visited, div#footer a:active {
color: #5eaffa;
font-weight: normal;
}

div#footer a:hover {
color: #585858;
font-weight: normal;
}

ul.navheader {
padding: 9px;
background-color: transparent;
border-width: 0px;
}

ul.navheader li {
padding: 0px;
background-color: transparent;
border-width: 0px;
}

.ljtags {
margin-top: 10px;
font-family: tahoma, arial, verdana, sans-serif;
font-size: 7pt;
color: #5eaffa;
font-weight: bold;
text-transform: lowercase;
}

.ljtags a:link, .ljtags a:visited, .ljtags a:active {
color: #c1c1c1;
font-weight: normal;
text-transform: lowercase;
}

.ljtags a:hover {
color: #585858;
border-bottom: 1px solid #5eaffa;
font-weight: normal;
text-transform: lowercase;
}

.currentlocation a:link, .ljtags a:visited, .ljtags a:active {
color: #c1c1c1;
font-weight: normal;
text-transform: lowercase;
}

.currentlocation a:hover {
color: #585858;
text-decoration: none;
border-bottom: 1px #5eaffa solid;
font-weight: normal;
text-transform: lowercase;
}

.currents, .currentmusic, .currentmood, .currentlocation {
color: #c1c1c1;
background-color: transparent;
border-width: 0px;
font-family: tahoma, arial, verdana, sans-serif;
font-size: 7pt;
text-transform: lowercase;
}

.comments {
text-transform: lowercase;
font-family: arial, verdana, sans-serif;
font-size: 12pt;
letter-spacing: -1px;
color: #5eaffa;
font-weight: normal;
text-align: right;
background-color: transparent;
border: none;
}

div.comments a, div.comments a:link, div.comments a:visited, div.comments a:active {
color: #5eaffa;
}

div.comments a:hover {
color: #C1C1C1;
}

div#sidebar a:link, div#sidebar a:visited, div#sidebar a:active {
font-family: tahoma, arial, verdana, sans-serif;
font-size: 8pt;
color: #5eaffa;
}

div#sidebar a:hover {
font-family: tahoma, arial, verdana, sans-serif;
font-size: 8pt;
color: #C1C1C1;
text-decoration: none;
}

li.sbaritem {
padding-left: 9px;
padding-bottom: 0px;
border-width: 0px;
background-color: transparent;
list-style: none;
display: inline;
}

li.sbaritem a, li.sbaritem a:link, li.sbaritem a:visited, li.sbaritem a:active {
font-family: arial, verdana, sans-serif;
font-size: 12pt;
color: #C1C1C1;
line-height: 15px;
letter-spacing: -1px;
text-transform: lowercase;
border: none;
list-style: none;
display: inline;
}

li.sbaritem a:hover, a:hover visited, a:hover b {
color: #C1C1C1;
text-decoration: none;
background-color: transparent;
}

.sbarbody {
background-color: transparent;
border-width: 0px;
padding: 0px;
text-align: right;
}

.sbarbody2 {
background-color: transparent;
border-width: 0px;
padding-top: 2px;
padding-left: 9px;
font-family: arial, sans-serif;
font-size: 8pt;
line-height: 15px;
color: #C1C1C1;
text-align: left;
}

ul.sbarlist {
background-color: transparent;
border-width: 0px;
}

ul.navfooter {
background-color: transparent;
border-width: 0px;
}

ul.navfooter li {
color: #5eaffa;
background-color: transparent;
border-width: 0px;
font-family: tahoma, arial, verdana, sans-serif;
font-size: 7pt;
letter-spacing: 0px;
border-width: 0px;
}

.commentbox, .commenttext, textarea {
background-color: #ffffff;
color: #585858;
border: 1px #e5e5e5 solid;
font-face: tahoma, verdana, sans-serif;
font-size: 8pt;
}

.commentreply {
color: #585858;
font-face: arial, tahoma, verdana, sans-serif;
font-size: 8pt;
line-height: 13pt;
}

.box {
border-width: 0px;
background-color: #ffffff;
font-family: arial, verdana, sans-serif;
font-size: 8pt;
font-weight: normal;
color: #585858;
margin-left: 15px;
line-height: 13pt;
}

input {
background-color: #ffffff;
border: 1px #e5e5e5 solid;
color: #5eaffa;
font-size: 8pt;
font-face: arial, verdana, sans-serif;
line-height: 13pt;
}

.commentboxpartial {
background-color: #ffffff;
color: #585858;
border: 1px #e5e5e5 solid;
margin-left: 30px;
font-size: 7pt;
font-family: tahoma, verdana, sans-serif;
color: #5eaffa;
}

.ljtaglist {
list-style-type: none;
margin: -1px 20px 0px 20px;
margin-left: 50px; width: 50%;
text-transform: lowercase;
text-align: left;
color: #585858;
font-size: 10px;
background: #FFFFFF;
}

H2 {
color: #C1C1C1;
font-size: 18px;
text-transform: lowercase;
}

.headerimage {
position: relative;
margin-left: 2px;
margin-right: 0px;
margin-bottom: 2px;
padding-right: 0px;
width: 748px;
height: 200px;
background-repeat: no-repeat;
background-image: url("http://img517.imageshack.us/img517/492/lheader4un6.png");
}



INSTRUCTIONS:
1. Customize Journal --> Select New Theme --> Find "flexible squares" (any type will do) and click Apply Theme (the quickest way to do this is searching for "flexible squares" using the search feature)
2. Customize Your Theme --> Custom CSS --> make sure the drop down boxes are set to YES
3. Copy and paste all the code from the above text box above and enter it into the Custom Stylesheet box
4. Save the changes
5. Customize Your Theme ---> Sidebar ---> The only things you want to say "YES" to are blurb, tags & links (if you want them)
This layout looks really snazzy with a nice long blurb, if you're stuck for ideas just use a quote or something
6. Customize Your Theme ---> Text ---> Change whatever you want to change
I suggest changing most text into lowercase so it matches the layout better

CHANGING THE HEADER:
The default layout comes with the paintbrush header...just because.
Feel free to delete it completely, change it to one of the matching headers (below), or use one of your own! :-)

If you would like to delete the header then go to the custom CSS and delete everything from .headerimage { to the end of the text. If you want to jazz it up a little, you could fudge the first "margin-top" you come across (under the "body" section) so the top of the page looks less squished.

If you would like to change the image, simply replace the header image section with this:

.headerimage {
position: relative;
margin-left: 2px;
margin-right: 0px;
margin-bottom: 2px;
padding-right: 0px;
width: THE WIDTH OF YOUR IMAGE IN PIXELS;
height: THE HEIGHT OF YOUR IMAGE IN PIXELS;
background-repeat: no-repeat;
background-image: url("YOUR IMAGE URL");
}

[obviously changing the width, height & url to fit your image]
The recommended size of your header is 748x200px. :-)


OPTIONAL HEADERS:
I made a few headers to go with this layout:
1. music: coldplay
2. stock: summer
3. stock: paintbrush
4. tv: doctor who
5. tv: house md

All are 748x200px. Lyrics in #3 are by Feeder
If you want any of these edited/customised, please just ask.

TERMS OF USE:
1. Please credit vands88/geeky_ness somewhere in your profile.
2. Editing is okay, but editing it and then calling it yours is NOT.
3. No stealing my codes...please?
4. Comment if taking. Not mandatory, but it's good manners.

I strongly suggest you don't edit the codes unless you know what you're doing. I don't have time to answer and solve all of the comments saying "I changed this and now it's gone all wrong"...plus, the odds are I won't know what to do. So, if you edit it, on your own head be it.
However, if you do have a query, want something customised or need a little help, I'm your girl. :-)

Enjoy 'em folks! :D

EDIT:
10/12/08 - updated code to comply with LJ changes - thanks to intotheheart!