fuesch | I has made you a layout!

For the last day of 40 Days of Metallicar I made a layout! The first one I didn't make just for myself or a community.

Edit (May 16, 2015): improved the CSS for functionality (no big changes in how the layout looks).
Edit (October 13, 2017): I replaced the old Photobucket links, so images are back now.

Back In Black

Click here for live preview, then click on the layout's icon.

info

based on Flexible Squares
works for all account types
tested in Internet Explorer 6 11 and Fire Fox 2 38 and Chrome 42
~~If you're using IE6 you should use the gif CSS, because the browser can't show transparency of pngs.~~

If you change the width of the sidebar, you'll need to adjust the width of the navheader.

how to

Go to the Customize Journal page.

Make sure Style System is S2.

Choose the Flexible Squares layout.

Go to Custom CSS
» Use layout's stylesheet(s): No
» Use layout's stylesheet(s) when including custom external stylesheet: No
» Use external stylesheets: No
insert custom stylesheet

/* Back in Black
http://fuesch.livejournal.com/11592.html */

body {
background-color: #000000;
text-align: center;
color: #ffffff;
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 12px;
margin: 20px 0 20px 0;
}

a, a:link {
color: #ffffff;
text-decoration: none;
border-bottom:dashed 1px #ffffff;
}

a:hover {
color: #ffffff;
text-decoration: none;
border-bottom: solid 1px #ffffff;
}

a:visited {
color: #dddddd;
text-decoration: none;
border-bottom:dashed 1px #dddddd;
}

p, td, {
font-size: 12px;
}

q, i, b {
color:#ffffff;
}

blockquote {
background:url(http://fatfrog.info/Ma/A/layout/backinblack/quote.png) no-repeat top left;
padding-top:12px;
}

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

body > div[style*="width"] {
margin: 10px auto!important;
padding: 0px!important;
background-color: #111111!important;
border: none!important;
}

#content {
width: 860px;
margin-left: auto; margin-right: auto;
padding: 0px;
}

#maincontent {
margin-top: 15px;
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 12px;
background-color: #000000;
color: #dddddd;
margin-left: 220px;
text-align: left;
}

#maincontent > div[style*="margin"] {
margin: -20px auto 20px auto!important;
background: #111111!important;
}

#maincontent > div[style*="margin"] .allbanners-close {
text-align: left!important;
}

#maincontent > div[style*="margin"] + .separator, #maincontent > div[style*="margin"] + .separator + .clear {
display: none;
}

#sidebar {
padding-top: 15px;
margin-top: -200px;
background-color: #000000;
font-size: 12px;
font-family: Georgia, "Times New Roman", Times, serif;
color: #ffffff;
width: 200px;
float: left;
text-align: left;
}

#sidebar > div[style*="margin"] {
width: 190px!important;
margin: 0px 0px 15px 0px!important;
padding: 5px;
text-align: center;
background: #111111;
}

#header {
padding: 20px 0px;
margin: 0px;
text-align: left;
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 16px;
font-style:italic;
letter-spacing: 2px;
background:url(http://fatfrog.info/Ma/A/layout/backinblack/header.jpg) no-repeat 220px top;
color: #999999;
height: 400px;
}

.lj-view-recent #footer, .lj-view-friends #footer {
text-align: center;
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 12px;
font-weight: bold;
letter-spacing: 1px;
background-color: #111111;
color: #ffffff;
z-index: 100;
clear: both;
margin-left: 220px;
padding: 10px;
}

.ljuser img[src*="userinfo.gif"] {
width: 0px !important;
height: 0px !important;
padding: 15px 0px 0px 32px !important;
background: url(http://fatfrog.info/Ma/A/layout/backinblack/user.png) no-repeat !important;
}

.ljuser img[src*="community.gif"] {
width: 0px !important;
height: 0px !important;
padding: 15px 0px 0px 55px !important;
background: url(http://fatfrog.info/Ma/A/layout/backinblack/comm.png) no-repeat !important;
}

.ljuser a, .ljuser a:link, .ljuser a:hover {
color: #ffffff!important;
}

.ljuser a:visited {
color: #dddddd!important;
}

.userpicfriends, .userpicfriends font {
color: #dddddd;
}

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

div#header a, div#header a:link, div#header a:hover, div#footer a, div#footer a:link, div#footer a:hover {
color: #ffffff;
}

div#header a:visited, div#footer a:visited {
color: #dddddd;
text-decoration: none;
}

ul.navheader {
display: inline-block;
margin: 19px auto 0px 0px;
width: 160px;
text-align:right;
list-style-type:none;
}

ul.navheader li  {
padding: 20px 0px 0px 0px;
}

.title {
display:none;
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 12px;
font-weight: normal;
line-height: 200%;
top: 10px;
}

.subtitle{
display:none;
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 12px;
font-weight: normal;
top: 10px;
}

/* sidebar */

div#sidebar a, div#sidebar a:link, div#sidebar a:hover{
color: #ffffff;
}

div#sidebar a:visited {
color: #dddddd;
text-decoration: none;
}

.defaultuserpic {
text-align: center;
background-color:none;
}

.sbarheader {
padding: 0px;
}

.sbarbody {
padding-bottom: 1px;
}

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

#sidebar_summary li.sbaritem {
margin: 0px 10px;
padding: 3px 0;
line-height:150%;
border-bottom: 1px #777777 solid;
}

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

.sbarcalendar {
border-color: #cccccc;
border-width: 1px;
border-style: solid;
text-align: center;
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 12px;
}

.sbarcalendarposts {
border-color:  #cccccc;
border-width: 1px;
border-style: solid;
background-color: #444444;
text-align: center;
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 12px;
}

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

li.sbaritem, .tagcloud {
padding-left: 10px;
padding-top: 5px;
padding-bottom: 2px;
list-style: none;
}

li.sbartitle {
padding: 10px;
list-style: none;
text-align: center;
background-color: #333333;
margin-bottom: -10px;
margin-top: 10px;
}

/* maincontent */

.subcontent {
background:url(http://fatfrog.info/Ma/A/layout/backinblack/entrybg.jpg) no-repeat top left;
}

.entry {
margin: 0px;
padding: 10px;
background-color:none;
color: #dddddd;
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 12px;
text-align: left;
}

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

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

.userpic {
position: relative;
float: right;
background:none!important;
padding: 0px;
margin: 10px;
z-index: 15;
}

.userpicfriends {
position: relative;
float: right;
background:none!important;
padding: 5px;
margin: 10px;
text-align: center;
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 12px;
z-index: 15;
}

.date {
line-height: 200%;
top: 10px;
padding-left: 15px;
color: #cccccc;
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 12px;
}

.subject {
font-weight: bold;
font-style: italic;
padding: 10px;
color: #ffffff;
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 16px;
}

.subject a, .subject a:link, .subject a:hover {
color: #ffffff;
}

.subject a:visited {
color: #dddddd;
}

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

.currents {
font-family: Georgia, "Times New Roman", Times, serif;
background-color:#444444;
font-size: 10px;
padding: 10px;
margin-bottom: -30px;
}

.ljtags {
background-color:#333333;
padding: 10px;
margin-top: 20px;
font-size: 10px;
margin-bottom: -30px;
}

.comments {
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 12px;
text-align: center;
background-color: #666666;
padding: 10px;
position: relative;
top: 15px;
}

div.comments a, div.comments a:link, div.comments a:hover {
color: #ffffff;
}

div.comments a:visited {
color: #dddddd;
text-decoration: none;
}

/* maincontent --  entry, reply pages */

.datesubjectcomment {
background-color: #444444;
padding: 5px;
margin-top: 20px;
text-align: left;
}

.userpiccomment {
position: relative;
background-color: none!important;
left: 0px;
padding: 5px;
margin: -10px 0px 0px -10px;
z-index: 15;
float: left;
}

.box {
padding: 10px;
}

.box + .box {
text-align: center;
}

.box + .box center {
margin-top: 10px;
}

input, textarea, select {
background-color: #111111;
color: #dddddd;
font-family:Georgia, "Times New Roman", Times, serif;
font-size:12px;
}

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

.reply    {
position: relative;
margin: 20px 30px 10px 30px;
padding: 25px 10px 10px 10px;
text-align: left;
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 12px;
line-height: 125%;
background-color: #000000;
color: #dddddd;
}

.replytosubject {
font-weight: bold;
font-size:16px;
font-style:italic;
padding-left: 5px;
}

.replytoposter {
padding-left: 10px;
padding-top: 10px;
}
		
.commentreply {
position: relative;
margin: 0px;
padding-top: 5px;
font-size: 12px;
font-family: Georgia, "Times New Roman", Times, serif;
color: #dddddd;
text-align: left;
}

.commentbox {
padding: 0px;
margin-bottom: 20px;
background-color:#000000;
}

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

.datesubjectcomment a:visited {
color: #dddddd;
}

.commentboxpartial {
padding: 10px;
margin: 0px 0px 20px 0px;
background-color: #444444;
}

.commentreply + div {
padding: 5px;
background-color:#222222;
}

.commentreply + div div {
padding: 5px 0px 0px 0px!important;
}

.commentreply + div div img {
vertical-align: text-bottom;
}

/* maincontent -- year/achive 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: #cccccc;
}

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

td.yearmonth {
border-style: none;
}

/* footer */

.lj-view-recent #footer ul.navfooter li, .lj-view-friends #footer ul.navfooter{
padding: 0px;
margin: 0px;
}

.lj-view-recent #footer ul.navfooter li, .lj-view-friends #footer ul.navfooter li  {
display: inline;
margin: 0 5px 0 5px;
}

.clearfoot {
clear: both;
}

/* misc  */

.clear {
height: 15px;
}

.skiplinks {
text-align: center;
}

.headerimage {
/* for formatting header image */
}

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

* html div.subcontent {
/* fixes an IE reply page bug */
height: 1%;
clear: none;
}

* html div.box#commentform {
/* fixes an IE reply page bug */
position: absolute;
border-width: 1px;
border-style: solid;
border-color: #444444;
background-color: #000000;
}

Change the text. Custom Options > Text
Current Location -> on the highway to
Current Mood -> share your feelings
Current Music -> in the cassette deck
Leave a comment -> stick a note under the wiper
1 comment // # comments -> 1 note // # notes

Or you can just use the header. The text is one of

bardicvoice's haikus.

Flat | Top-Level Comments Only

Holy crap. That looks AWESOME. Nice job, baby!

OmFG I am so going to use that, that is just beautiful *drools on the keyboard*

I can't wait to test that one :P

This is a great layout! Might use for later; great job. :)

Squeee!! I'm loving it, I'm stealing it, I'm thanking you much! *HUGS*

Awesome! *HUGSback*

Gorgeous!

Cool! I might use it later. Thanks!!

snagged the layout! ^_^
Thank you so much for sharing!

I'm stealing this right NOW. This layout is made of awesome *bows* Thanks! =D

Is this shareable?

Of course.

Yay, thank you so much!

I'm using this right now and I put the other layout in my memories for later. ^_^ Thanks a lot!

Oh. My. God. I'm speechless, in shock even. Metallicar layout... It's fascinating and totally awesome.
Already snagged and using, credited in the userinfo (I've uploaded pics to my photobucket account and changed the font to Verdana, hope that's okay. if not, I'll change it back)
You own my soul. Really. Thanks for sharing. *is off to squee somewhere))*

Thank you :oD
Uploading the pics to your own photobucket is always good. But I it's not a rule because I guess for some people a CSS text is like a huge maze and it would be unfair to make them search for the picture URLs and change them.
Sure, minor changes - like the font - are okay. As long as my layouts aren't uglyfied I'm okay with it. :o)

I'm sorry, I didn't mean flooding here, but I just saw your "Hunter's Journal" layout and went all "omfg, amazing idea!!!". *tries that calming down thing* Ahem. Wanted you to know. Excellent work. Ahem. :D
I'm saving that to my memories... to be able to stare at it from time to time. *g*

I am seriously in *love* with this layout! Taking and will credit :) Beautiful work!

When I saw this is squeed in delight and I actually couldn't change my layout fast enough.

It's too damn beautiful.

ps: credit in user info

I love the layout but I am having one small issue.

When a journal entry is short and doesn't extend past my side bar the comments are pushed below it as evidenced here (http://red-handed.livejournal.com/90714.html).

I can tweak colors, fonts, images and such in CSS, but I'm not sure how to fix this (though maybe it's a matter of changing a width value?) and I don't really want to go mucking about in a layout of someone else's design.

Any ideas?

Sorry that I'm only replying now.
In my browsers (IE 6 and FF 2) the comments start right under the entry. Is the problem still there for you or did you solve it?

Yes I did fix it and I meant to let you know but I got side tracked.

This is what I did to fix it: in the section maincontent -- entry, reply pages

.box {
padding: 10px;
clear: left;
}

I changed 'clear: left;' to 'clear: none;'

Using, credit in user info. Thank you SO MUCH.

Love it! And using it!

Loved it...Used it!!

Credited of course! :D

♥♥

WONDERFUL!
*Steals and credits*

U're awesome! Just awesome! Took it... and was stupefied...

Great job, totally using it!

Love it. Changing my journal now.

I has made you a layout!

no subject

no subject

no subject

no subject

:oD

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject