Back in Black & White & Orange layout & matching profile layout

[fuesch]

Aaaand another Impala layout! I started it for 42 Days of Metallicar, but couldn’t finish it in time, so then it gathered dust for 2 years.

Back in Black & White & Orange



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



info

Based on Flexible Squares.
Works for all account types.
Tested in Firefox 6, Google Chrome 9 and Internet Explorer 8.

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 and White and Orange
http://fuesch.livejournal.com/26053.html */

body {
margin: 0px;
padding: 0px;
text-align: left;
font-family: Arial, Helvetica, sans-serif;
color: #FFFFFF;
font-size: 12px;
background: #FFFFFF url(http://fatfrog.info/Ma/A/layout/backinbworange/bg.jpg) repeat-y;;
}

a, a:link {
color: #F5A42F;
text-decoration: none;
}

a:visited {
color: #C8811B;
text-decoration: none;
}

a:hover {
color: #F5A42F;
text-decoration: underline;
}

a:active {
color:#FFD69A;
text-decoration: none;
}

code, kbd, pre, tt {
font-family: "Courier New", Courier, monospace;
font-size: 12px;
}

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

blockquote {
padding: 15px;
background: url(http://fatfrog.info/Ma/A/layout/backinbworange/white10percent.png);
border: 1px solid #312109;
}

q {
font-style: italic;
}

q i {
font-style: normal;
}

/* ------- GENERAL ------- */

.clear {
height: 15px;
}

#content-outer {
margin: 0px;
background: url(http://fatfrog.info/Ma/A/layout/backinbworange/bg.jpg) repeat-y;
}

#content {
min-height: 570px;
margin: 0px;
padding: 0px;
background: url(http://fatfrog.info/Ma/A/layout/backinbworange/impala.jpg) top left no-repeat;
}

#header {
width: 610px;
margin: 0px auto 0px 384px;
padding: 20px 0px 0px 0px;
font-size: 16px;
font-weight: bold;
text-transform: uppercase;
background: url(http://fatfrog.info/Ma/A/layout/backinbworange/header.jpg);
}

ul.navheader {
margin: 0px;
padding: 10px;
background: url(http://fatfrog.info/Ma/A/layout/backinbworange/black80percent.png);
}

div#header a, div#header a:link, div#header a:visited, div#header a:hover, div#header a:active {
color: #F5A42F;
}

ul.navheader li {
display: inline;
padding: 0px 10px;
}

.title {
color: #333333;
font-size: 20px;
}

.subtitle {
color: #333333;
}

#sidebar {
width: 200px;
margin: 500px auto 0px 77px;
padding: 15px 15px 0px 15px;
background: url(http://fatfrog.info/Ma/A/layout/backinbworange/black80percent.png);
float: left;
}

.sbarbody {
padding: 0px;
}

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

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

ul.sbarlist + .sbarlist {
margin: 0px 0px 15px 0px;
padding: 10px 0px 0px 0px;
list-style: none;
}

ul.sbarlist sbarcontent {
/* funktioniert nicht so gut wie ul.sbarlist + .sbarlist */
}

li.sbartitle {
padding: 5px;
list-style: none;
text-transform: uppercase;
font-weight: bold;
letter-spacing: 1px;
background: url(http://fatfrog.info/Ma/A/layout/backinbworange/white10percent.png);
}

.tagcloud {
padding: 0px;
list-style: none;
}

li.sbaritem {
margin: 0px 0px 0px 2px;
padding: 3px 0px;
list-style: disc inside;
}

.defaultuserpic {
margin-bottom: 15px;
text-align: center;
}

.defaultuserpic img {
padding: 15px;
background: url(http://fatfrog.info/Ma/A/layout/backinbworange/white10percent.png);
border: 1px solid #312109;
}

table.calendar {
margin: 0px auto;
}

.sbarcalendar {
padding: 1px 3px;
text-align: center;
border: #484848 1px solid;
}

.sbarcalendarposts {
text-align: center;
font-weight: bold;
background: url(http://fatfrog.info/Ma/A/layout/backinbworange/white10percent.png);
border: #484848 1px solid;
}

#maincontent {
width: 610px;
margin: 0px auto 0px 384px;
text-align: left;
}

#footer {
width: 370px;
padding: 0px 7px 10px 7px;
text-align: right;
font-size: 16px;
color: #484848;
font-weight: bold;
text-transform: uppercase;
z-index: 100;
clear: both;
}

ul.navfooter {
margin: 0px;
padding: 0px;
}

ul.navfooter li {
display: inline;
margin: 0px 0px 0px 10px;
}

div#footer a, div#footer a:link, div#footer a:visited, div#footer a:hover, div#footer a:active {
color: #000000;
}

.clearfoot {
display: none;
clear: both;
}

/* ------- ENTRIES & FRIENDS ------- */

.subcontent {
margin: 50px 50px 0px 50px;
}

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

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

.userpicfriends {
margin: 0px 0px 10px 10px;
padding: 0px;
position: relative;
float: right;
text-align: right;
font-size: 10px;
background: none!important;
z-index: 15;
}

.userpicfriends img {
padding-bottom: 3px;
}

.userpicfriends font {
color: #F5A42F;
}

.datesubject {
margin: 0px 0px 15px 0px;
}

.date {
padding-bottom: 3px;
font-size: 10px;
font-weight: bold;
text-transform: uppercase;
}

.subject {
font-size: 20px;
color: #FFFFFF;
font-weight: bold;
text-transform: uppercase;
}

.subject a, .subject a:link, .subject a:visited, .subject a:hover, .subject a:active {
color: #FFFFFF;
}

.entry {
margin: 0px;
padding: 0px;
text-align: left;
}

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

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

.entry_text {
}

.ljtags {
margin-top: 15px;
padding-left: 10px;
font-size: 10px;
text-transform: uppercase;
background: url(http://fatfrog.info/Ma/A/layout/backinbworange/dot.png) 0px 3px no-repeat;
}

.entry .clear {
height: 15px;
}

.currents {
margin-top: -18px;
font-size: 10px;
text-transform: uppercase;
}

.currents strong {
font-weight: normal;
}

.currentmood, .currentmusic, .currentlocation {
margin-top: 3px;
padding-left: 10px;
background: url(http://fatfrog.info/Ma/A/layout/backinbworange/dot.png) 0px 3px no-repeat;
}

.comments {
padding: 5px 0px 5px 5px;
text-align: right;
color: #333333;
font-weight: bold;
text-transform: uppercase;
background: url(http://fatfrog.info/Ma/A/layout/backinbworange/white10percent.png);
}

.comments a {
margin: 0px 5px;
}

.separator, .lj-view-recent #maincontent > .clear, .lj-view-friends #maincontent > .clear {
display: none;
}

/* ------- COMMENTS ------- */

.skiplinks {
margin: -15px 0px;
padding: 10px;
text-align: center;
color: #333333;
font-weight: bold;
text-transform: uppercase;
background: url(http://fatfrog.info/Ma/A/layout/backinbworange/white10percent.png);
}

.skiplinks a {
margin: 0px 5px;
}

.box {
padding: 50px 50px 0px 50px;
}

.commentbox {
margin: 10px 0px 20px 0px;
padding: 0px;
}

.datesubjectcomment {
margin: 0px;
padding: 5px 5px 5px 0px;
font-size: 10px;
font-weight: bold;
text-transform: uppercase;
background: url(http://fatfrog.info/Ma/A/layout/backinbworange/white10percent.png);
}

.datesubjectcomment strong {
font-size: 14px;
}

.userpiccomment {
position: relative;
margin: -5px 10px 5px 0px;
z-index: 15;
float: left;
}

.commentreply {
position: relative;
margin: 10px;
}

.commentreply + div {
padding: 5px 0px 0px 0px;
border-top: 1px solid #312109;
}

.commentboxpartial {
margin: 10px 0px 20px 0px;
padding: 5px;
font-size: 10px;
font-weight: bold;
text-transform: uppercase;
background: url(http://fatfrog.info/Ma/A/layout/backinbworange/white10percent.png);
}

.box + .separator {
display: none;
}

#content + div {
background-color: transparent!important;
border: none!important;
}

/* ------- COMMENTING ------- */

.replytoposter {
padding-bottom: 3px;
font-size: 10px;
font-weight: bold;
text-transform: uppercase;
}

.replytosubject {
font-size: 20px;
color: #FFFFFF;
font-weight: bold;
text-transform: uppercase;
}

* html div.box#commentform {
/* fixes an IE reply page bug */
position: absolute;
}

input, textarea {
background: none;
color: #FFFFFF;
}

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

/* ------- CALENDAR ------- */

ul.year {
margin: 0px 0px 50px 0px;
padding: 10px;
text-align: center;
font-weight: bold;
text-transform: uppercase;
background: url(http://fatfrog.info/Ma/A/layout/backinbworange/white10percent.png);
}

ul.year li {
display: inline;
padding: 0px 5px;
}

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

td.yearmonth {
font-size: 20px;
font-weight: bold;
text-transform: uppercase;
border-style: none;
}

td.yearmonth a {
font-size: 12px;
border-style: none;
}

table.yeartable td.yearday {
padding: 10px;
text-align: center;
font-weight: bold;
text-transform: uppercase;
background: url(http://fatfrog.info/Ma/A/layout/backinbworange/white10percent.png);
}

table.yeartable td.yeardate {
padding: 5px;
border: 1px solid #484848;
}

table.yeartable td.yeardate a {
font-weight: bold;
}

table.yeartable td.yeardate > div + div {
margin: 5px -5px -5px -5px;
padding: 5px;
background: url(http://fatfrog.info/Ma/A/layout/backinbworange/white10percent.png);
}

.lj-view-day .separator + .clear + .clear + .skiplinks {
margin-top: 30px;
}

.lj-view-month form {
padding: 0px 0px 15px 0px;
background: url(http://fatfrog.info/Ma/A/layout/backinbworange/white10percent.png);
}

.lj-view-month dt {
margin: 15px 0px 0px 0px;
padding: 5px;
background: url(http://fatfrog.info/Ma/A/layout/backinbworange/white10percent.png);
}

.lj-view-month dd {
margin-left: 30px;
padding: 5px 0px 0px 0px;
}

/* ------- TAGS ------- */

.lj-view-tags h2 {
margin: 0px 0px 50px 0px;
padding: 10px 10px 10px 50px;
font-size: 12px;
text-transform: uppercase;
background: url(http://fatfrog.info/Ma/A/layout/backinbworange/white10percent.png);
}

ul.ljtaglist {
margin: 50px 50px 0px 50px;
padding: 0px;
list-style: disc inside;
}

ul.ljtaglist li {
margin-bottom: 10px;
padding: 0px;
}

/* ------- EXTRAS ------- */

.caption img {
margin-bottom: 5px;
border: 1px solid #F5A42F;
}

.caption {
margin: 0px auto;
padding: 15px 15px 5px 15px;
font-size: 10px;
background: url(http://fatfrog.info/Ma/A/layout/backinbworange/white10percent.png);
border: 1px solid #312109;
}

.captionless img {
border: 1px solid #F5A42F;
}

.captionless {
margin: 0px auto;
padding: 15px;
background: url(http://fatfrog.info/Ma/A/layout/backinbworange/white10percent.png);
border: 1px solid #312109;
}

.spoiler {
padding: 2px;
background: #F5A42F!important;
color: #F5A42F!important;
}

.spoiler a, .spoiler a:link, .spoiler a:visited, .spoiler a:hover, .spoiler a:active {
color: #F5A42F!important;
}

The ads of a plus account take their color from the Custom Options. If you want to adjust the colors, go to Style and change Page - Background color of the outer table and Entries - Border color of the content and header/footer boxes.





PROFILE LAYOUT

This profile layout has a fixed width, changing the width would mess up the layout.

Go to Edit Profile and insert the code into the Bio part.

To copy the code, click in the text area and then press Ctrl+A and Ctrl+C.



http://fatfrog.info/Ma/A/layout/backinbworange/profile-bg.jpg">

http://fatfrog.info/Ma/A/layout/backinbworange/profile-top.jpg">
http://fatfrog.info/Ma/A/layout/backinbworange/profile-impala.jpg">	HEADLINE, IF YOU WANT Text goes here.

You don't have to use the lj-raw tags. With them you can only make line breaks/new paragraphs with
and
. Without the lj-raw tags you can also create line breaks and new paragraphs just by hitting the enter key.

If you want to change the link color, put a font tag with a different color in your link. Like so:
LINK TEXT