Fuesch's graphics & layouts - I has made you a layout!

House Rules

~~Driver picks the music, shotgun shuts his cakehole.~~

Everything is snaggable - no need to ask.

Please credit.
<lj user=fuesch>

Comments are great.

Nominations are awesome.

If you find a typo, please let me know!

If you'd like a graphic customized, just ask - please don't edit it yourself.

I don't mind if you adjust layouts a bit.

Got a question? Don't be afraid to ask. But keep it on topic.

If your question/comment doesn't fit into any entry, please send me a message.

Tags

Page Summary

red-handed.livejournal.com — (no subject) [+2]

October 2025

Previous | Memories | Tell Someone | Next

fuesch

05 October 2007 @ 12:52 pm

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.

Tags: - headers, - layouts, supernatural

28 comments | Leave a comment

( Post a new comment )

red-handed.livejournal.com on April 14th, 2008 05:25 pm (UTC)

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?

(Reply) (Parent) (Thread) (Link)

fuesch on April 16th, 2008 10:59 pm (UTC)

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?

(Reply) (Parent) (Thread) (Link)

red-handed.livejournal.com on April 17th, 2008 01:28 am (UTC)

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;'

(Reply) (Parent) (Link)