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

Previous | Memories | Tell Someone | Next

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 )

kimonkey7.livejournal.com on October 5th, 2007 02:08 pm (UTC)

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