two layouts

[casey_bee]

I got bored yesterday and taught myself a bit of CSS. Yes, I am that sad.

works with: all LJ accounts
starts with style: S2--->Flexible Squares GRAYS
colors used: black, grey, white & orange
best viewed: 1024x768px screen. Firefox browser.

LILY #1



body {
background-color: #000000;
text-align: center;
color: #CCCCCC;
font-family: "Arial", sans-serif;
font-size: 12px;
margin: 0px;
}

#content
{
width: 700px;
margin-left: auto; margin-right: auto;
background-color: #CCCCCC;
border-width: 1px;
}

#maincontent {
margin: 0px 200px 100px 0px;
padding: 0px;
background: #666666;
margin-bottom: 20px;
}

#header {
width: auto;
margin: 0 0 25px 0;
padding: 10px 0 10px 10px;
text-align: right;
border-bottom: 10px solid #FFFFFF;
border-left: 10px solid #FFCC33;
text-transform: lowercase;
letter-spacing: 0px;
background-color: #666666;
font-size: 12pt;
color: #FFFFFF;
}

.headerimage {
position: relative;
margin-left: auto;
margin-right: auto;
margin-bottom: 10px;
width: 700px;
height: 260px;
background-repeat: no-repeat;
background-image: url("http://img167.imageshack.us/img167/8925/lilyfa6.png");
}

#footer {
text-transform: lowercase;
background-color: #666666;
font-size: 8pt;
color: #FFFFFF;
}

div#header a, div#header a:link, div#header a:visited, div#footer a, div#footer a:link, div#footer a:visited {
color: #CCCCCC;
font-size: 10pt;
}

div#header a:hover {
color: #FFFFFF;
font-size: 10pt;
background-color: #CCCCCC;
border-bottom: 2px solid #FFCC33;
}

div#footer a:hover {
color: #FFFFFF;
font-size: 10pt;
padding: 10px;
border-bottom: 5px solid #FFFFFF;
background-color: #CCCCCC;
}

#sidebar {
padding-top: 15px;
margin-top: 0px;
background-color: #666666;
border-color: #FFFFFF;
border-width: 1px;
border-style: solid;
font-size: 11px;
font-family: "Arial", sans-serif;
color: #FFFFFF;
width: 160px;
float: right;
text-align: left;
}

li.sbartitle {
border-style: solid;
border-width: 1px;
border-color: #FFFFFF;
background-color: #666666;
margin-bottom: 10px;
margin-top: 10px;
}

div.sbarbody a, div.sbarbody a:link, div.sbarbody a:visited {
color: #FFFFFF;
}

div.sbarbody a:hover {
font-weight: bold;
color: #FFFFFF;
background-color: #FFFFFF;
}

a, a:link, a:visited {
color: #FFFFFF;
}

a:hover {
text-decoration: none;
color: #FFFFFF;
background-color: #FFCC33;
}

.title {
display: none;
}

.subtitle {
display: none;
}

.entry {
background-color: #CCCCCC;
color: #000000;
font-family: "Arial", sans-serif;
font-size: 11px;
text-align: left;
border-width: 1px;
border-color: #666666;
border-style: solid;
}

.reply {
position: relative;
text-align: left;
font-family: "Arial", sans-serif;
font-size: 11px;
color: #000000;
}

div.comments a, div.comments a:link, div.comments a:visited {
color: #FFFFFF;
}

div.comments a:hover {
color: #FFFFFF;
background-color: #FFCC33;
}

.comments {
font-family: "Arial", sans-serif;
font-size: 11px;
text-align: right;
background-color: #000000;
padding: 0px 5px 0px 5px;
position: relative;
top: 10px;
}

.commentbox {
border-color: #FFFFFF;
border-width: 1px;
border-style: solid;
padding: 10px;
margin: 10px;
background-color: #CCCCCC;
color: #CCCCCC;
}

.datesubjectcomment a:link, .datesubjectcomment a:visited, .datesubjectcomment a:hover {
color: #FFFFFF;
}

.commentinfo {
background-color: #CCCCCC;
margin-top: 10px;
width: 100%;
color: #FFFFFF;
}

.input, textarea {
background-color: #CCCCCC;
color: #000000;
}

.commentreply {
position: relative;
margin: 10px;
color: #000000;
}

.userpic {
position: relative;
float: left;
padding: 3px;
margin-right: 8px;
margin-left: 5px;
margin-top: 8px;
background-color: #FFFFFF;
border-color: #FFCC33;
border-width: 1px;
border-style: solid;
}

.userpicfriends {
position: relative;
float: left;
padding: 5px;
margin-right: 5px;
margin-left: 5px;
margin-top: 5px;
text-align: left;
font-family: "Arial", sans-serif;
font-size: 8pt;
border-style: solid;
border-width: 1px;
border-color: #FFCC33;
background-color: #FFFFFF;
}

.userpiccomment {
position: relative;
float: left;
padding: 3px;
margin-right: 5px;
margin-left: 0px;
margin-top: 5px;
background-color: #FFFFFF;
border-color: #FFCC33;
border-width: 1px;
border-style: solid;
}

LILY #2



body {
background-color: #000000;
text-align: center;
color: #CCCCCC;
font-family: "Arial", sans-serif;
font-size: 12px;
margin: 0px;
border-width: 0px;
}

#content
{
width: 700px;
margin-left: auto; margin-right: auto;
background-color: transparent;
border-width: 0px;
}

#maincontent {
margin: 0px 200px 100px 0px;
padding: 0px;
background: #666666;
margin-bottom: 20px;
border-width: 0px;
}

#header {
width: auto;
margin: 0 0 25px 0;
padding: 10px 0 10px 10px;
text-align: right;
border-bottom: 10px solid #FFFFFF;
border-left: 10px solid #FFCC33;
text-transform: lowercase;
letter-spacing: 0px;
background-color: #666666;
font-size: 12pt;
color: #FFFFFF;
}

.headerimage {
position: relative;
margin-left: auto;
margin-right: auto;
margin-bottom: 10px;
width: 700px;
height: 260px;
background-repeat: no-repeat;
background-image: url("http://img167.imageshack.us/img167/8925/lilyfa6.png");
}

#footer {
text-transform: lowercase;
background-color: #666666;
font-size: 8pt;
color: #FFFFFF;
}

div#header a, div#header a:link, div#header a:visited, div#footer a, div#footer a:link, div#footer a:visited {
color: #CCCCCC;
font-size: 10pt;
}

div#header a:hover {
color: #FFFFFF;
font-size: 10pt;
background-color: #CCCCCC;
border-bottom: 2px solid #FFCC33;
}

div#footer a:hover {
color: #FFFFFF;
font-size: 10pt;
padding: 10px;
border-bottom: 5px solid #FFFFFF;
background-color: #CCCCCC;
}

#sidebar {
padding-top: 15px;
margin-top: 0px;
background-color: #666666;
border-color: #FFFFFF;
border-width: 0px;
border-style: solid;
font-size: 11px;
font-family: "Arial", sans-serif;
color: #FFFFFF;
width: 160px;
float: right;
text-align: left;
}

li.sbartitle {
border-style: solid;
border-width: 1px;
border-color: #FFFFFF;
background-color: #666666;
margin-bottom: 10px;
margin-top: 10px;
}

div.sbarbody a, div.sbarbody a:link, div.sbarbody a:visited {
color: #FFFFFF;
}

div.sbarbody a:hover {
font-weight: bold;
color: #FFFFFF;
background-color: #FFFFFF;
}

a, a:link, a:visited {
color: #FFFFFF;
}

a:hover {
text-decoration: none;
color: #FFFFFF;
background-color: #FFCC33;
}

.title {
display: none;
}

.subtitle {
display: none;
}

.entry {
background-color: #CCCCCC;
color: #000000;
font-family: "Arial", sans-serif;
font-size: 11px;
text-align: left;
border-width: 0px;
border-color: #666666;
border-style: solid;
}

.reply {
position: relative;
text-align: left;
font-family: "Arial", sans-serif;
font-size: 11px;
color: #000000;
}

div.comments a, div.comments a:link, div.comments a:visited {
color: #FFFFFF;
}

div.comments a:hover {
color: #FFFFFF;
background-color: #FFCC33;
}

.comments {
font-family: "Arial", sans-serif;
font-size: 11px;
text-align: right;
background-color: #CCCCCC;
padding: 0px 5px 0px 5px;
position: relative;
top: 10px;
}

.commentbox {
border-color: #FFFFFF;
border-width: 1px;
border-style: solid;
padding: 10px;
margin: 10px;
background-color: #CCCCCC;
color: #CCCCCC;
}

.datesubjectcomment a:link, .datesubjectcomment a:visited, .datesubjectcomment a:hover {
color: #FFFFFF;
}

.commentinfo {
background-color: #CCCCCC;
margin-top: 10px;
width: 100%;
color: #FFFFFF;
}

.input, textarea {
background-color: #CCCCCC;
color: #000000;
}

.commentreply {
position: relative;
margin: 10px;
color: #000000;
}

.userpic {
position: relative;
float: left;
padding: 3px;
margin-right: 8px;
margin-left: 5px;
margin-top: 8px;
background-color: #FFFFFF;
border-color: #FFCC33;
border-width: 1px;
border-style: solid;
}

.userpicfriends {
position: relative;
float: left;
padding: 5px;
margin-right: 5px;
margin-left: 5px;
margin-top: 5px;
text-align: left;
font-family: "Arial", sans-serif;
font-size: 8pt;
border-style: solid;
border-width: 1px;
border-color: #FFCC33;
background-color: #FFFFFF;
}

.userpiccomment {
position: relative;
float: left;
padding: 3px;
margin-right: 5px;
margin-left: 0px;
margin-top: 5px;
background-color: #FFFFFF;
border-color: #FFCC33;
border-width: 1px;
border-style: solid;
}

.datesubject {
background-color: #666666;
padding: 0px;
}


Full preview of version #2 here---> problem-city
[live preview no longer available]

INSTRUCTIONS:
1. Customize Journal --> Select New Theme --> Find "GRAYS flexible squares" and click Apply Theme [quickest way to do this is searching for "flexible squares" using the search feature]
2. Double check you got the GRAYS theme because it works best with that one
3. Customize Your Theme --> Custom CSS --> make sure all drop-down boxes are set to YES
4. Copy and paste all the code from your chosen text box above and enter it into the Custom Stylesheet box
5. Save the changes. Feel free to change the text etc. to your liking.

TERMS OF USE:
1. Please credit vands88/geeky_ness somewhere in your profile because I wasted two days doing this creating layouts is a lot of hard work.
2. Editing is okay, but editing it and then calling it yours is NOT.
3. No stealing my codes...please.

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.

NB: This is my first layout, it's not going to be perfect. However, if something's seriously gone wrong then please do let me know and I can try and fix it.

Banner credits:
Photography by vands88.
Textures used are by lovelamp.

Comments make me happy. :-)