Fuesch's graphics & layouts - Back in Black & White & Orange layout & matching profile 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

agent-jl36.livejournal.com — (no subject) [+0]

October 2025

Previous | Memories | Tell Someone | Next

fuesch

16 September 2011 @ 04:18 pm

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

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. <lj-raw> <table border="0" cellpadding="0" cellspacing="0" width="666" background="http://fatfrog.info/Ma/A/layout/backinbworange/profile-bg.jpg"> <tr><td colspan="3" width="666" height="47"><img src="http://fatfrog.info/Ma/A/layout/backinbworange/profile-top.jpg"></td></tr> <tr><td width="255" valign="top"><img src="http://fatfrog.info/Ma/A/layout/backinbworange/profile-impala.jpg"></td> <td width="360" valign="top"><font face="Arial, Helvetica, sans-serif" size="3" color="#FFFFFF"><b> HEADLINE, IF YOU WANT </b></font><p> <font face="Arial, Helvetica, sans-serif" size="2" color="#FFFFFF"> Text goes here. </font><p></td> <td width="51"> </td></tr> </table> </lj-raw> You don't have to use the lj-raw tags. With them you can only make line breaks/new paragraphs with <br> and <p>. 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: `<a href="URL"><font color="#F5A42F">LINK TEXT</font></a>`