Tropical Hell: One Journal Layout

Info:

Journal Style: Flexible Squares
Browser: Firefox 3.5, IE8, Opera 10, Safari 4, Chrome
Resolution: 1024x768 & 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. Choose a Page Setup. (For Plus accounts: choose your preferred ad placement.) Apply any of them except the layout without the topbar. 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:

/* Tropical Hell ~Layout by enekoro-sama@LJ */
/* Tiny Icons from http://p.yusukekamiyamane.com/ */

/* main */
body {background:#000011;
font-family:"Georgia",Palatino,serif;
font-size:8pt;
color:#455227;}

a, a:active, a:link, a:visited {text-decoration:none;
color:#d78f31;}
a:hover {color:#715b3e;}

strong, u, em, strike {color:#222222;}

b {font-weight:normal;}

/* journal content */
#content {padding:10px;
margin:0 auto;
width:850px;}

#maincontent {width:600px;
float:right;}
.subcontent {padding:15px;
background:#333333;
border:3px solid #222222;}
.entry {background:#ffffff;
width:450px;
padding:10px;
border:3px solid #555555;
line-height:20px;}

.date {font-family:"Courier New",monospace;
font-size:10pt;
color:#555555;}

.subject {font-family:"Courier New",monospace;
font-size:14pt;
font-weight:bold;
color:#f9e8f1;
text-align:center;
text-transform:lowercase;
padding:10px;}
.subject a, .subject a:active, .subject a:link, .subject a:visited {color:#13abeb;}
.subject a:hover {color:#f4f4d3;}

.userpic {float:right;}
.userpic img {width:75px;
height:75px;
border:3px solid #222222;}
.userpicfriends {float:right;
text-align:center;
width:75px;
height:75px;}
.userpicfriends img {border:3px solid #555555;
width:75px;
height:75px;}
.userpicfriends a font {color:#ffffff;}

.skiplinks {font-family:"Courier New",monospace;
font-size:9pt;
text-align:center;}
.skiplinks a, .skiplinks a:active, .skiplinks a:link, .skiplinks a:visited {color:#13abeb;}
.skiplinks a:hover {color:#f4f4d3;}

/* sidebar */
#sidebar {float:left;
width:160px;
padding:20px;
background:#333333;
border:3px solid #222222;
color:#222222;}

#sidebar a, #sidebar a:active, #sidebar a:link, #sidebar a:visited {color:#13abeb;}
#sidebar a:hover {color:#f4f4d3;}

.sbartitle {font-family:"Courier New",monospace;
font-size:12pt;
list-style-type:none;
color:#d83361;
text-align:center;
margin-left:-40px;
background:#222222;
padding:3px;}

.sbaritem {padding:3px;
list-style-type:none;
margin-left:-40px;
text-align:right;
padding-right:10px;
background:#ffffff;
border-bottom:1px solid #333333;}
.sbaritem:hover {background:#555555;}

.sbarbody2 {background:#ffffff;
padding:5px;}

.calendar {padding:5px;
margin-left:-45px;}
.sbarcalendar {background:#ffffff;
padding:4.5px;
text-align:center;}
.sbarcalendar:hover {background:#555555;}
.sbarcalendarposts {text-align:center;
font-size:9pt;}
.sbarcalendarposts:hover {background:#555555;}

.defaultuserpic {width:75px;
height:75px;
margin:0 auto;
border:3px solid #555555;}
.defaultuserpic img {width:75px;
height:75px;}

/* header */
#header {margin:0 auto;
width:850px;
padding-bottom:10px;
background:transparent;
font-size:12pt;
color:#d83361;}

.title {font-size:20pt;
font-weight:bold;
margin-top:-85px;}
.subtitle {font-family:"Courier New",monospace;
font-size:14pt;
color:#ffffff;
float:bottom;
text-align:right;
margin-top:35px;}

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

.navheader {background:#222222;
padding:10px;
text-align:center;
border:3px solid #333333;
margin-top:20px;
max-width:850px;}
.navheader li {display:inline;
padding:10px;}
.navheader li:hover {background:#555555;}
.navheader li a, .navheader li a:active, .navheader li a:link, .navheader li a:visited {color:#13abeb;}
.navheader li a:hover {color:#f4f4d3;}

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

.navfooter {background:#222222;
padding:10px;
text-align:center;
border:3px solid #333333;
width:850px;
font-family:"Arial",Helvetica,sans-serif;
font-size:12pt;
color:#d83361;}
.navfooter li {display:inline;
padding:10px;}
.navfooter li:hover {background:#555555;}
.navfooter li a, .navfooter li a:active, .navfooter li a:link, .navfooter li a:visited {color:#13abeb;}
.navfooter li a:hover {color:#f4f4d3;}

.viewing {cursor:default;}

/* comments */
.comments {text-align:center;
padding:5px;}

.box {padding:10px;}

.commentbox {font-size:9pt;}

.datesubjectcomment{color:#555555;
font-family:"Courier New",monospace;
border:3px solid #222222;
background:#333333;
padding:10px;}
.userpiccomment {float:right;
padding:5px;}
.commentreply {background:#ffffff;
padding:10px;}

/* archive */
.year {font-size:12pt;}

.yeartable {padding:10px;
font-size:10pt;
background:#ffffff;
border:3px solid #333333;}

.yeardate {border:1px solid #222222;
padding:5px;}

.yearday {text-align:center;
background:#555555;
color:#f4f4d3;}

.yearmonth {font-family:"Arial",Helvetica,sans-serif;}

/* tag list */
h2 {text-align:center;}

.ljtaglist li {padding:5px;}

/* metadata */
.currents {font-family:"Arial",Helvetica,sans-serif;}

.currentlocation strong, .currentgroups strong, .currentmood strong, .currentmusic strong {display:none;}

.currentlocation, .ljtags, .currentmood, .currentgroups, .currentmusic {padding:1px 0 3px 20px;
background:transparent none no-repeat scroll 0 50%;}

.ljtags {padding-top:10px;
font-family:"Arial",Helvetica,sans-serif;
background-image:url(http://i438.photobucket.com/albums/qq107/Enekoro/Icons/Pinvoke/Fugue/spectacle-sunglass.png);}
.currentlocation {background-image:url(http://i438.photobucket.com/albums/qq107/Enekoro/Icons/Pinvoke/Fugue/car-red.png);}
.currentmood{background-image:url(http://i438.photobucket.com/albums/qq107/Enekoro/Icons/Pinvoke/Fugue/rainbow.png);}
.currentgroups {background-image:url(http://i438.photobucket.com/albums/qq107/Enekoro/Icons/Pinvoke/Fugue/lifebuoy.png);}
.currentmusic {background-image:url(http://i438.photobucket.com/albums/qq107/Enekoro/Icons/Pinvoke/Fugue/guitar.png);}

/* misc. */
code {display:block;
font-family:"Arial",Helvetica,sans-serif;
font-size:8pt;
background:#333333;
padding:10px;
color:#f4f4d3;}

textarea {width:300px;
height:75px;
border:none;
background:#333333;
padding:10px;
color:#f4f4d3;
font-family:"Arial",Helvetica,sans-serif;
font-size:8pt;}

blockquote {font-family:"Arial",Helvetica,sans-serif;
font-size:8pt;
background:#333333;
padding:10px;
color:#f4f4d3;}

ol, ul {font-family:"Arial",Helvetica,sans-serif;
color:#555555;}
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/Pinvoke/Fugue/fruit-orange.png) no-repeat;
padding:16px 0 0 17px !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/Pinvoke/Fugue/fruit-lime.png) no-repeat;
padding:16px 0 0 17px !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/Pinvoke/Fugue/weather-cloudy.png) no-repeat;
padding:14px 0 0 20px !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/Pinvoke/Fugue/weather-cloudy.png) no-repeat;
padding:14px 0 0 20px !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/Pinvoke/Fugue/weather-cloudy.png) no-repeat;
padding:14px 0 0 20px !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 850 pixels. If you don't want the header to touch the title, then put at least 45px in the bottom margin.


.headerimage {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 Pinvoke.

Follow us:

Applications

COMPANY

PRODUCTS

COMMUNITY

CHOOSE LANGUAGE