Fuesch's graphics & layouts - Back in Black & White & Orange layout & matching profile layout

Previous | Memories | Tell Someone | Next

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>`

Tags: - layouts, supernatural

11 comments | Leave a comment

( Post a new comment )

ckll.livejournal.com on September 16th, 2011 06:25 pm (UTC)

Amazing, i will def. use here.

(Reply) (Link)

mrsr58.livejournal.com on September 16th, 2011 06:32 pm (UTC)

that is awesome! thank you; i am SO going to use your profile layout, with credit of course. :D

(Reply) (Link)

later-tuesday.livejournal.com on September 17th, 2011 12:23 am (UTC)

Lovely! Already put it up on my journal.

(Reply) (Link)

miss-faith-hope.livejournal.com on September 17th, 2011 04:36 am (UTC)

This is made of win, impala love!

I'll definitely be using this!<3

(Reply) (Link)

agent-jl36.livejournal.com on September 17th, 2011 05:24 pm (UTC)

Awesome! I used the profile for my community

spn_favorites (with credit). Thanks!

(Reply) (Link)

chani-atreides.livejournal.com on September 17th, 2011 06:30 pm (UTC)

Linked by a friend, and glad: This is lovely!

If I get around to using this, would you mind terribly if I changed the colours? I'd credit you, of course ^^

(Reply) (Thread) (Link)

fuesch on September 17th, 2011 07:57 pm (UTC)

Weeeell, I wouldn't mind, but it depends on what you want to change. Sometimes my layouts aren't the most flexible. For example I've seen people use this profile layout with graphics in there that are too wide for it. Anyway, changing font colors shouldn't be a problem, but should you encounter any problems, you can ask me. I'm always happy to help.

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

chani-atreides.livejournal.com on September 18th, 2011 06:00 am (UTC)

Oh, nothing really invasive. I'd probably just change the text background colour. It's not like I can actually code and would try to change anything that actually matters *g*

Thank you ^^

(Reply) (Parent) (Link)

dawnintheforest.livejournal.com on October 1st, 2011 06:28 am (UTC)

This layout is the best I've seen in a long while, thank you! Using it on my journal now. I made the text a font-size bigger here and there, hope that's alright. Credited you.

(Reply) (Link)

alias_chick.livejournal.com on December 5th, 2011 08:44 am (UTC)

DUDE!! SOOOOO GOOD!!!!!!!!!!!

(Reply) (Link)

dwell-ondreams.livejournal.com on August 24th, 2012 12:19 am (UTC)

Snagged, will credit when used. (AWESOME!) :)

(Reply) (Link)