Austerity: One Journal Layout

Another high-contrast layout. This time I'm trying to be classy.

Info:

Journal Style: Flexible Squares
Browser: Firefox 3.5, 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:

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

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

/* journal content */
#content {max-width:850px;
padding:20px;
margin:0 auto;}
#maincontent {width:650px;
padding:5px;
float:right;}
.subcontent {padding:5px;}
.entry {width:475px;
padding:20px;
background:#111111;}

.date {color:#aee8fb;
text-transform:uppercase;
text-align:left;
padding-top:10px;}
.subject {font-size:16pt;
text-align:center;
text-transform:uppercase;
color:#a5f8c4;
padding:10px;}
.subject a, .subject a:link, .subject a:visited, .subject a:active {color:#c3f8da;}
.subject a:hover {color:#189671;}

.userpic {float:right;
background:transparent !important;
border:5px solid #222222;}

.userpicfriends {text-align:center;
background:transparent !important;
float:right;}
.userpicfriends img {border:5px solid #222222;}
.userpicfriends a font {color:#b7d9ff;}

.skiplinks {text-transform:uppercase;
text-align:center;}
.skiplinks a, .skiplinks a:link, .skiplinks a:visited, .skiplinks a:active {color:#c3f8da;}
.skiplinks a:hover {color:#189671;}

/* sidebar */
#sidebar {width:160px;
padding:15px;
float:left;
background:#111111;
color:#e3e8ab;}

#sidebar a, #sidebar a:link, #sidebar a:visited, #sidebar a:active {color:#b7d9ff}
#sidebar a:hover {color:#0bf99d;}

.sbartitle {list-style-type:none;
color:#738c50;
text-align:center;
background:#222222;
padding:5px;
width:160px;
margin-left:-20px;}

.sbaritem {list-style-type:none;
background:#222222;
padding:5px;
border:1px solid #111111;
width:160px;
margin-left:-20px;}
.sbaritem:hover {background:transparent;}

.calendar {margin-left:-25px;}
.sbarcalendar {border:1px solid #222222;
text-align:center;
padding:3px;}
.sbarcalendarposts {padding:3px;
background:#222222;
text-align:center;}
.sbarcalendarposts:hover {background:transparent;}

.sbarlist {margin-left:-25px;}

#sidebar_linklist, #sidebar_summary, #sidebar_tags {padding:5px;}

.sbarbody2 {padding:10px;}

.defaultuserpic {margin:0 auto;
width:60px;
border:5px solid #222222;}
.defaultuserpic img {width:60px;
height:60px;}
.defaultuserpic img:hover {opacity:0.6;}

/* header */
#header {text-align:center;
margin:0 auto;
padding:10px;
background:#111111;
max-width:850px;}

.title {padding:15px;
font-size:16pt;
text-transform:uppercase;
color:#f8f6b0;}
.subtitle {font-size:12pt;
font-style:italic;
font-family:"Trebuchet MS",Arial,sans-serif;
color:#8d8e4e;}

.view {cursor:default;}

.navheader {margin:0 auto;
padding:10px;}
.navheader li {display:inline;
padding:15px;
text-align:center;
text-transform:uppercase;
background:#333333;}
.navheader li a, .navheader li a:link, .navheader li a:visited, .navheader li a:active {color:#b7d9ff;}
.navheader li:hover {background:#222222;}
.navheader li a:hover {color:#0bf99d;}

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

.navfooter {padding:15px;
text-transform:uppercase;}
.navfooter li {display:inline;
background:#111111;
padding:15px;}
.navfooter li a, .navfooter li a:link, .navfooter li a:visited, .navfooter li a:active {color:#b7d9ff;}
.navfooter li a:hover {color:#0bf99d;}
.navfooter li:hover {background:#222222;}

.viewing {cursor:default;}

/* comments */
.comments {text-align:center;
text-transform:uppercase;
background:#111111;
padding:10px;}

.commentbox {padding:20px;}

.datesubjectcomment{padding:10px;
background:#111111;
color:#aee8fb;
text-transform:uppercase;}
.userpiccomment {float:right;
border:5px solid #111111;}
.commentreply {padding:10px;
color:#e3e8ab;}

.box {padding:20px;}

/* archive */
.year {list-style-type:none;
text-align:right;
font-size:12pt;}

.yeartable {padding:10px;
text-align:center;
color:#e3e8ab;
font-size:10pt;}

.yeardate {text-align:center;}

.yearday {background:#111111;
padding:10px;}

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

/* tag list */
h2 {font-weight:normal;
font-style:italic;
text-align:center;
color:#78c985}

.ljtaglist li {padding:10px;
background:#111111;
border:1px solid #000000;}
.ljtaglist li:hover {background:transparent;}
.ljtaglist {list-style-type:none;}

/* metadata */
.currentlocation strong, .currentgroups strong, .currentmood strong, .currentmusic strong {display:none;}
.ljtags {text-transform:uppercase;}
.currentlocation, .ljtags, .currentmood, .currentgroups, .currentmusic {padding:1px 0 2px 20px;
background:transparent none no-repeat scroll 0 50%;}
.ljtags {background-image:url(http://i438.photobucket.com/albums/qq107/Enekoro/Icons/Pinvoke/Fugue/cup-tea.png);}
.currentlocation {background-image:url(http://i438.photobucket.com/albums/qq107/Enekoro/Icons/Pinvoke/Fugue/direction.png);}
.currentmood{background-image:url(http://i438.photobucket.com/albums/qq107/Enekoro/Icons/Pinvoke/Fugue/yin-yang.png);}
.currentgroups {background-image:url(http://i438.photobucket.com/albums/qq107/Enekoro/Icons/Pinvoke/Fugue/leaf-wormhole.png);}
.currentmusic {background-image:url(http://i438.photobucket.com/albums/qq107/Enekoro/Icons/Pinvoke/Fugue/piano.png);}

/* misc. */
a, a:link, a:visited, a:active {text-decoration:none;
color:#ae9e35;}
a:hover {color:#fff18f;}

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

code {display:block;
font-size:9pt;
color:#07fa1b;
padding:10px;
background:#333333;}

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

blockquote {background:#222222;
padding:10px;
border:3px double #000000;
font-family:"Trebuchet MS",Arial,sans-serif;}

b {font-weight:normal;
font-size:9pt;}

ol, ul {color:#f5f8c3;
font-size:9pt;}
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/bamboo.png) no-repeat;
padding:16px 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/Pinvoke/Fugue/bamboos.png) no-repeat;
padding:16px 0 0 16px !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/leaf.png) no-repeat;
padding:16px 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/leaf.png) no-repeat;
padding:16px 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/leaf.png) no-repeat;
padding:16px 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.
.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