A Flotilla of Ships: One Journal Layout

A really simple design based on the layout I made for my personal website. It has nothing to do with seafaring.

Info:

Journal Style: Flexible Squares
Browser: Firefox 3.5, Safari 4, Opera 10, Chrome
Resolution: 800x600 & above
Ad Placement: Horizontal/Between Entries
Images?: Some tiny icons

Instructions:

1. Go here, and type Flexible Squares in the search box. Apply any of the layouts.

2. (For Plus accounts: choose your preferred ad placement.) Go to Custom CSS, select No on all the drop-down boxes. Leave the Custom External Stylesheet URL box blank, then copy and paste this code in the Custom stylesheet box:

/* A Flotilla of Ships ~Layout by enekoro-sama@LJ */
/* Tiny Icons by http://minty-peach.livejournal.com */
/* main */
body {background:#ffffff;
color:#bbbbaa;
font-size:8pt;
font-family:"Georgia",Palatino,serif;}

/* journal content */
#content {width:600px;
margin:0 auto;
position:relative;}
#maincontent {float:bottom;
padding-top:25px;}
.subcontent {margin:0 auto;
border-top:1px dotted #dddddd;}
.entry {padding:5px;
color:#666666;
margin:0 auto;
width:550px;
line-height:20px;}

.date {padding:5px;
text-align:center;
color:#ccccbb;}
.subject {font-size:16pt;
text-align:center;
letter-spacing:-1px;
color:#ccccbb;}
.subject a, .subject a:link, .subject a:visited {color:#ccbbaa;}
.subject a:hover {color:#ffeeee;}

.userpic {float:right;
padding:5px;
width:70px;
height:70px;}
.userpic img {width:70px;
height:70px;
border:5px solid #dddddd;}
.userpicfriends {float:right;
width:70px;
height:70px;
padding:5px;
background:transparent !important;}
.userpicfriends img {width:70px;
height:70px;}
.userpicfriends a font {color:#dddddd;
font-size:8pt;
padding:3px;}

.skiplinks {text-align:center;
text-transform:lowercase;}
.skiplinks a, .skiplinks a:link, .skiplinks a:visited {color:#dddddd;}
.skiplinks a:hover {color:#eeeeee;}

/* sidebar */
#sidebar {float:top;
width:600px;
height:90px;
padding:5px;}
#sidebar a, #sidebar a:link, #sidebar a:active, #sidebar a:visited {border-bottom:1px dotted #dddddd;}
#sidebar a:hover {border-bottom:1px dotted #666666;
color:#666666;}

.sbaritem {display:inline;
float:bottom;
padding-left:15px;}
.sbarlist {width:600px;}

.sbarbody {width:10px;}
.sbarbody2 {float:right;
width:475px;
padding-bottom:5px;}

.sbartitle, #sidebar_summary, #sidebar_tags, #sidebar_calendar {display:none;}

.defaultuserpic {width:100px;
height:100px;
float:left;
margin:0 auto;
padding:5px;}
.defaultuserpic img {width:100px;
height:100px;
border:5px solid #dddddd;}

/* header */
#header {font-family:"Times",Palatino,serif;}
padding:10px;
margin:0 auto;}
#header a, #header a:link, #header a:visited {color:#dddddd;
text-decoration:none;}
#header a:hover {color:#eeeeee;}

.view {color:#aaaa77;
cursor:default;}

.title {text-align:center;
font-style:italic;
font-size:20pt;
letter-spacing:-2px;}

.subtitle {font-family:"Georgia",Palatino,serif;
font-size:14pt;
color:#bbbbaa;
text-align:center;
letter-spacing:-2px;
padding-bottom:15px;}

.navheader {text-align:center;
font-family:"Georgia",Palatino,serif;
font-size:10pt;
padding:10px;}

.navheader li {display:inline;
border-top:1px dotted #dddddd;
padding:10px;
margin:0 auto;}

/* footer */
.clearfoot {clear:both;}

.navfooter {margin:0 auto;}
.navfooter li {display:inline;
text-align:center;
padding:10px;
font-size:18px;}

.viewing {cursor:default;
color:#aaaa77;}

/* comments */
.commentbox {border-top:1px dotted #dddddd;
padding:10px;}

.datesubjectcomment{padding:5px;
color:#aaaa77;}
.userpiccomment {float:left;
padding:5px;}
.commentreply {padding:5px;}

.comments {text-align:center;}

/* archives */
.year {list-style-type:none;
font-size:12pt;
border-top:1px dotted #dddddd;
padding:10px;}

.yeartable {padding:10px;
text-align:center;
font-size:10pt;
border-top:1px dotted #dddddd;
margin:0 auto;}

.yeardate {padding:5px;}

.yearday {padding:5px;
color:#ffffff;
background:#dddddd;}

.yearmonth {padding:5px;
font-size:10pt;}

/* tag list */
h2 {font-weight:normal;
text-transform:lowercase;}

.ljtaglist {list-style-type:none;
padding:10px;
width:525px;
float:left;
border-top:1px dotted #dddddd;}

/* metadata */
.currentlocation strong, .currentgroups strong, .currentmood strong, .currentmusic strong {display:none;}
.currentlocation, .ljtags, .currentmood, .currentgroups, .currentmusic {padding: 3px 0 1px 14px;
background: transparent none no-repeat scroll 0 50%;}
.ljtags {padding-top:10px;
background-image: url(http://i438.photobucket.com/albums/qq107/Enekoro/Icons/Minty-Peach/Tiny%20Icons%20Set%203/LM15.png);}
.currentlocation {background-image: url(http://i438.photobucket.com/albums/qq107/Enekoro/Icons/Minty-Peach/Tiny%20Icons%20Set%203/LM16.png);}
.currentmood{background-image: url(http://i438.photobucket.com/albums/qq107/Enekoro/Icons/Minty-Peach/Tiny%20Icons%20Set%203/LM19.png);}
.currentgroups {background-image: url(http://i438.photobucket.com/albums/qq107/Enekoro/Icons/Minty-Peach/Tiny%20Icons%20Set%203/telly.png);}
.currentmusic {background-image: url(http://i438.photobucket.com/albums/qq107/Enekoro/Icons/Minty-Peach/Tiny%20Icons%20Set%203/music-1.png);}

/* misc. */
a, a:link, a:visited {text-decoration:none;
color:#ccbbaa;}
a:hover {cursor:help;
color:#ffeeee;}

strong, strike {color:#ccccbb;}
u, em {color:#dddddd;}

code {display:block;
padding:5px;
color:#ddddaa;
font-size:8pt;}

textarea {width:300px;
height:75px;
padding:5px;
background:#transparent;
border:none;
font-size:8pt;
color:#ddddaa;}

blockquote {border-left:20px solid #ffeeee;
padding-left:10px;
color:#aaaa77;}

b {font-weight:normal;}

ol, ul {font-family:"Times",serif;
font-size:10pt;
color:#bbbbaa;}
ul {list-style-type:circle;}

/* tiny icons */
img[src*="img/userinfo.gif"] {width:0 !important;
vertical-align:middle !important;
margin:0 auto;
height:0 !important;
background:transparent url(http://i438.photobucket.com/albums/qq107/Enekoro/Icons/Minty-Peach/Tiny%20Icons%20Set%203/LM13.png) no-repeat;
padding:14px 0 0 13px !important;}
img[src*="img/community.gif"] {width:0 !important;
vertical-align:middle !important;
margin:0 auto;
height:0 !important;
background:transparent url(http://i438.photobucket.com/albums/qq107/Enekoro/Icons/Minty-Peach/Tiny%20Icons%20Set%203/LM14.png) no-repeat; padding: 15px 0 0 14px !important;}
img[src*="img/icon_protected.gif"] {width:0 !important;
vertical-align:middle !important;
margin: 0 auto;
height: 0 !important;
background:transparent url(http://i438.photobucket.com/albums/qq107/Enekoro/Icons/Minty-Peach/Tiny%20Icons%20Set%203/LM17.png) no-repeat; padding: 16px 0 0 16px !important;}
img[src*="img/icon_groups.gif"] {width:0 !important;
vertical-align:middle !important;
margin: 0 auto;
height: 0 !important;
background:transparent url(http://i438.photobucket.com/albums/qq107/Enekoro/Icons/Minty-Peach/Tiny%20Icons%20Set%203/LM17.png) no-repeat; padding: 16px 0 0 16px !important;}
img[src*="img/icon_private.gif"] {width:0 !important;
vertical-align:middle !important;
margin: 0 auto;
height: 0 !important;
background:transparent url(http://i438.photobucket.com/albums/qq107/Enekoro/Icons/Minty-Peach/Tiny%20Icons%20Set%203/LM17.png) no-repeat; padding: 16px 0 0 16px !important;}

/* extra codes */

♪Please upload these into your own image host and replace the links accordingly. If I run out of bandwidth, you will be affected too: [download].

4. Save changes.

Customization:
Adding a header. Fill in the codes below, then copy and paste them at the end of your CSS. The ideal width is 600 pixels.


.headerimage {position:relative;
width:XXXpx;
height:XXXpx;
margin:auto;
margin-bottom:XXpx;
background-image:url(XXX);
background-repeat:no-repeat;}

Notes:

Please be mindful of the rules.
Please let me know if my layout is too similar to a pre-established work, so that I can take this down immediately. I hate to plagiarize, even inadvertently.
The actual layout may vary slightly from the previews.
Watch this community?

Tiny Icons from minty_peach

Follow us:

Applications

COMPANY

PRODUCTS

COMMUNITY

CHOOSE LANGUAGE