layout #02

[cakeholes]

Info
Style: Flexible Squares
Works with: Basic, Paid, maybe Sponsored
Works in: AOL Browser, IE, maybe others
Best view: 800x600 and up
Sidebar: None

Directions
Go to manage and select customize.
In the 'basic' tab make sure 's2' is selected.
In the 'look and feel' tab select 'flexible squares' under layout and language drop-down.
In the 'custom options' tab:
--go to 'custom css' and put all the drop down boxes to 'no.'
--paste the layout code in the stylesheet box.

***it would be a good idea to change the header navigation text to one word phrases (i.e. recent, profile, ect.)

Images
Locked entry: HERE
User icon: HERE
Community icon: HERE
Private post: HERE
---tiny icons credit to _excentric_
---code credit to lovelamp 's Tiny Icon Generator

Stylesheet Code

/*---------------------------------------------------
Custom layout by: keb91
Style: Flexible Squares
Extra Stuff: The color #65b7b3 is all the blue.
-----------------------------------------------------*/

body {
margin-top: 10px;
background-color: #efefef;
background-image: url();
background-position: center;
background-attachment: scroll;
text-align: center;
color: #888888;
font-family: "Verdana", sans-serif;
font-size: 10px;

}

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

a:hover {
color: #65b7b3;
font-weight: bold;
text-decoration: none;
}

p, td, blockquote {
font-size: 10px;
}

b, i, s, u, emphasise, abbr, strong, strike {
color: #999999;
}

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

/*---------------------------------------------------------------------
General page alignment and width
------------------------------------------------------------------------*/

#content
{
width: 600px;
margin-left: auto; margin-right: auto;
background-color: #ffffff;
border-top: solid 0px #ffffff;
border-bottom: solid 0px #ffffff;
padding: 15px;
text-align: justify;
}

#maincontent {
margin-top: 25px;
font-family: "Verdana", sans-serif;
font-size: 11px;
background-color: #ffffff;
color: #888888;
margin-left: 0px; /*width of sidebar*/
text-align: justify;
}

#sidebar {

display: none;
}

/*-----------------------------------------------------------------------------
Header - you can add a header image with either #header or .headerimage
--------------------------------------------------------------------------------*/

#header {
width: auto;
padding-top: 4px;
padding-bottom: 4px;
margin: 0px;
line-height: 20px;
text-align: center;
text-transform: uppercase;
font-family: "Trebuchet Ms", sans-serif;
font-size: 10px;
font-weight: none;
letter-spacing: 2px;
word-spacing: 10px;
background-color: #65b7b3;
color: #ffffff;
}

/*look and color of links (also partly for footer)*/
div#header a, div#header a:link, div#header a:visited, div#footer a, div#footer a:link, div#footer a:visited {
padding:5px;
color: #aad8d8;
}

div#header a:hover, div#footer a:hover {
padding:5px;
color: #65b7b3;
font-size: 14px;
text-decoration: bold;
background-color: #aad8d8;
}

/*title and subtitle*/
.title {
display: none;
font-family: "Verdana", sans-serif;
font-size: 13px;
color: #888888;
font-weight: normal;
text-transform: uppercase;
letter-spacing: 1px;
margin-top: 10px;
}

.subtitle{
display: none;
font-family: "Verdana", sans-serif;
color: #888888;
font-size: 11px;
font-weight: normal;
letter-spacing: 1px;
}

/*-----------------------------------------------------------------------------
Header - top navigation
--------------------------------------------------------------------------------*/

/* header -- links to views; title of journal; subtitle of journal */

ul.navheader
{
padding: 5px;
margin: 5px;
font-size: 14px;
}

ul.navheader li {
display: inline;
padding: 5 3px 5 3px;
font-size: 14px;
}

/*-----------------------------------------------------------------------------
Entry stuff
------------------------------------------------------------------------*/

.subcontent {
}

.entry {
margin: 5px 5px 5px 5px;
margin-left: 0px /*width of sidebar*/
padding: 2px;
padding-left:5px;
background-color: #ffffff;
color: #888888;
line-height: 8pt;
font-family: "Verdana", sans-serif;
font-size: 10px;
text-align: justify;
}

.userpic {

float: right;
text-align: center;
padding: 3px;
margin: 10px;
z-index: 15;
font-size: 8px
border: 1px dotted #65b7b3;

}

.date {
line-height: 200%;
top: 5px;
color: #999999;
text-transform: uppercase;
text-align: left;
font-family: "Verdana", sans-serif;
font-size: 10px;
}

.subject {
font-weight: bold;
padding: 1px;
text-align: left;
text-transform: uppercase;
letter-spacing: 1px;
color: #65b7b3;
font-family: "Verdana", sans-serif;
font-size: 14px;
border-bottom: 1px dotted #dbdbdb;
}

.subject a, .subject a:link, .subject a:visited {
color: #888888;
}

.subject a:hover {
color: #65b7b3;
}

.datesubject {
background-color: #ffffff;
padding: 5px;
}

.entry ul li
{
padding-left: 5px;
margin-left: 15px;
}

.entry ol li
{
padding-left: 5px;
margin-left: 15px;
}

/*---------------------------------------------------------------------
Entry Stuff - Current Mood, Music and Location
------------------------------------------------------------------------*/

.currents, .currentmood, .currentmusic {
font-family: "Verdana", sans-serif;
font-size: 10px;
color: #AAAAAA;
text-align: left;
}

.ljtags {
font-family: "arial", sans-serif;
font-size: 10px;
color: #7F7F7F;
margin-top: 14px;
margin-bottom: 1px;
text-transform: lowercase;
font-weight: bold;
position: left;
}

/*---------------------------------------------------------------------
Entry Stuff - Comments
------------------------------------------------------------------------*/

.comments {
font-family: "Verdana", sans-serif;
font-size: 12px;
text-align: right;
background-color: #ffffff;
padding: 0px 5px 0px 5px;
position: relative;
top: 15px;
}

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

div.comments a:hover {
color: #65b7b3;
text-decoration: none;
font-size: 12px;
padding: 3px
}

/*---------------------------------------------------------------------
Entry Stuff - Separator
------------------------------------------------------------------------*/

.separator{
/* for formatting separators between entries */
height: 9px;
}

/*------------------------------------------------------------
Special friends page customization
-------------------------------------------------------------------------------*/

.userpicfriends {
background-color:#ffffff !important;
position: relative;
float: right;
padding: 5px;
margin: 10px;
text-align: center;
font-family: "Verdana", sans-serif;
font-size: 11px;
z-index: 15;
}

/*------------------------------------------------------------
Sidebar
-------------------------------------------------------------------------------*/

.defaultuserpic {
text-align: center;
}

.sbarheader {
padding: 0px 5px 0px 5px;
}

.sbarbody {
padding: 0px 5px 0px 5px;
}

.sbarbody2 {
padding: 0 15px 0 15px;
}

div#sidebar a, div#sidebar a:link, div#sidebar a:visited{
color: #65b7b3;
}

div#sidebar a:hover {
color: #65b7b3;
text-decoration: none;
}

/*------------------------------------------------------------
Sidebar - Calendar
-------------------------------------------------------------------------------*/

table.calendar {
margin-right: auto;
margin-left: auto;
}

.sbarcalendar {
border-color: #ffffff;
border-width: 1px;
border-style: solid;
text-align: center;
font-family: "Verdana", sans-serif;
font-size: 10px;
}

.sbarcalendarposts {
border-color: #ffffff;
border-width: 1px;
border-style: solid;
background-color: #ffffff;
text-align: center;
font-family: "Verdana", sans-serif;
font-size: 10px;
}

/*------------------------------------------------------------
Sidebar - link box contents and sidebar box titles
-------------------------------------------------------------------------------*/

ul.sbarlist
{
padding-left: 0px;
margin-left: 0px;
list-style: none;
}

li.sbaritem
{
padding-left: 15px;
list-style: none;
}

li.sbartitle
{
padding-left: 15px;
text-align: center;
list-style: none;
border-style: dotted;
border-width: 0px;
border-color: #65b7b3;
background-color: #ffffff;
margin-bottom: 10px;
margin-top: 10px;
font-size: 13px;
color: #888888;
}

/*----------------------------------------------------
footer
----------------------------------------------------------------*/

#footer {
width: 100%;
text-align: center;
font-family: "Verdana", sans-serif;
font-size: 12px;
font-weight: bold;
letter-spacing: 1px;
background-color: #ffffff;
color: #888888;
border-color: #ffffff;
border-width: 1px;
border-style: solid;
z-index: 100;
clear: both;
}

ul.navfooter{
padding: 5px;
color: #999999;
margin: 5px;
}

ul.navfooter li {
display: inline;
color: #999999;
margin: 0 5px 0 5px;
}

.clearfoot {
clear: both;
}

/*----------------------------------------------------
Archive Pages
----------------------------------------------------------------*/

ul.year {
text-align: center;
padding-bottom: 40px;
}

ul.year li {
display: inline;
}

table.yeartable {
margin-left: auto;
margin-right: auto;
}

table.yeartable td.yeardate, table.yeartable td.yearday {
border-width: 1px;
border-style: solid;
border-color: #999999;
}

table.yeartable td.yearday {
background-color: #65b7b3;
text-align: center;
}

td.yearmonth {
border-style: none;
}

/*----------------------------------------------------
Comments pages
----------------------------------------------------------------*/

.datesubjectcomment {
background-color: #ffffff;
padding: 5px;
margin-top: 20px;
}

.userpiccomment {
position: relative;
background-color: #ffffff;
top: -30px;
left: 0px;
padding: 5px;
margin: 10px 10px -20px 10px;
z-index: 15;
float: left;
}

.box {
border-style: solid;
border-width: 0px 0px 0px 0px;
border-color: #999999;
padding: 10px;
clear: left;
}

input, textarea {
background-color: #ffffff;
color: #65b7b3;
}

textarea.textbox {
width: 100% !important;
}

.reply {
position: relative;
margin: 20px 30px 10px 30px;
padding: 25px 10px 10px 10px;
text-align: left;
font-family: "Verdana", sans-serif;
font-size: 11px;
line-height: 125%;
background-color: #ffffff;
color: #65b7b3;
}

.replytosubject {
font-weight: bold;
}

.commentreply {
position: relative;
margin: 10px;
font-size: 11px;
font-family: "Verdana", sans-serif;
color: #000000;
}

.commentbox {

border-color: #999999;
border-width: 0px;
border-style: solid;
padding: 10px;
margin: 10px;
background-color: #ffffff;
}

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

.datesubjectcomment a:hover {
color: #888888;
}

.commentboxpartial {
border-color: #999999;
border-width: 1px;
border-style: solid;
padding: 10px;
margin: 10px;
background-color: #ffffff;
}

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

.skiplinks {
text-align: center;
}

/*--------------------------------------------
Misc
-----------------------------------------*/

.clear {
height: 15px;
}

.headerimage {
position: relative;
width: 600px;
height: 0px;
margin-left: auto;
margin-right: auto;
margin-bottom: 0px;
background-image: url("");
background-repeat: no-repeat;
}

/*usericons and locked posts*/
.subject img[src="http://stat.livejournal.com/img/icon_protected.gif"]{
width: 0;
height: 0;
padding: 15px 11px 0px 0px;
background: url(http://i19.tinypic.com/632ymj4.gif);
}

.subject img[src="http://stat.livejournal.com/img/icon_private.gif"]{
width: 0;
height: 0;
padding: 15px 15px 0px 0px;
background: url(http://i14.tinypic.com/61l8ewp.gif);
}

.ljuser img {
width: 0;
height: 0;
background-repeat: no-repeat;
background-color:transparent;
/* so that IE users will still see an image */
background-image: url(http://i18.tinypic.com/4uyvq76.gif);
padding: 8px 6px 0 2px;
}

.ljuser img[src="http://stat.livejournal.com/img/userinfo.gif"] {
background-color:transparent;
background-image: url(http://i18.tinypic.com/4uyvq76.gif);
padding: 8px 6px 0 2px;
}

.ljuser img[src="http://stat.livejournal.com/img/community.gif"] {
background-color:transparent;
background-image: url(http://i15.tinypic.com/4y81d3m.gif);
padding: 9px 9px 0 2px;
}

Extra Stuff
---please comment if you are taking
---credit keb91 or painfuldefeat
---feel free to customize any which way you want, just don't repost as your own
---enjoy!

Layouts will now be posted at vapores.
Watch there instead of here for further updates, thanks! :)