Fuesch's graphics & layouts - A Layout made for 41 Days of Metallicar

Previous | Memories | Tell Someone | Next

12 August 2008 @ 07:50 pm

A simple layout (Apart from the header it only contains 2 tiny pictures!), you could use it for anything, really - just change the header.

Because of problems with a couple of things on the comment page, I just gave up trying to make the CSS work for both Internet Explorer and Firefox (Once again IE isn't doing what it's supposed to. I swear, those browsers are trying to make me go crazy. I'm telling you people, it's a conspiracy! *ahem*), and just made a CSS for IE and one for FF. I don't know what it looks like in other browsers, but I guess the Firefox version should work.

Edit (October 13, 2017): I replaced the old Photobucket links, so images are back now. And I got rid of the IE version.

Beige is the New Black

info

based on Flexible Squares
works for all account types
tested in Internet Explorer 6 and Firefox 2

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

/* Beige is the New Black
http://fuesch.livejournal.com/17808.html */

body {
background: #E0CDA1;
text-align: center;
color: #562802;
font-family: "Verdana", sans-serif;
font-size: 12px;
margin: 0px 0 20px 0;
}

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

a:visited, a:active {
color: #7D7B44;
text-decoration: none;
}

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

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

code {
background: #D3B891;
}

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

blockquote {
border-left: 3px double #562802;
padding-left: 5px;
}

q {
font-style: italic;
}

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

.clear {
height: 15px;
}

.headerimage {
background: #BFA663 url(http://fatfrog.info/Ma/A/SN/Banner/header_1x01Impala-Tanke.jpg) bottom center no-repeat;
height: 340px;
}

#header {
padding: 6px 0px 25px 0px;
margin: 0px;
text-align: center;
font-family: Georgia, "Times New Roman", Times, serif;
text-transform: uppercase;
font-size: 20px;
color: #BFA663;
}

ul.navheader {
padding: 0px 0px 5px 0px;
margin: 0px;
background: #E0CDA1 url(http://fatfrog.info/Ma/A/layout/beigeisthenewblack/navi.gif) bottom repeat-x;
}

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

div#header a, div#header a:link, div#header a:visited, div#header a:hover {
color: #E0CDA1;
text-decoration: none;
}

.title {
display: none;
}

.subtitle {
display: none;
}

#sidebar {
padding-left: 15px;
margin-right: 50px;
border-left: #BFA663 1px solid;
font-size: 12px;
font-family: "Verdana", sans-serif;
width: 200px;
float: right;
text-align: left;
}

.sbarbody {
padding: 0px;
}

.sbarbody2 {
padding: 0px;
}

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

li.sbartitle {
background: url(http://fatfrog.info/Ma/A/layout/beigeisthenewblack/sidebar.gif) bottom repeat-x;
padding-bottom: 1px;
color: #E0CDA1;
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 14px;
text-transform: uppercase;
letter-spacing: 1px;
text-align: center;
list-style: none;
margin-bottom: -10px;
margin-top: 10px;
}

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

li.sbaritem {
margin: 0px;
padding: 5px 0;
border-bottom: 1px #BA794E solid;
}

.defaultuserpic {
text-align: center;
}

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

.sbarcalendar {
padding: 1px 3px 1px 3px;
background: #562802;
color: #E0CDA1;
text-align: center;
font-family: "Verdana", sans-serif;
font-size: 12px;
}

.sbarcalendarposts {
background: #716E22;
text-align: center;
font-family: "Verdana", sans-serif;
font-size: 12px;
font-weight: bold;
}

div#sidebar_calendar a, div#sidebar_calendar a:link, div#sidebar_calendar a:active, div#sidebar_calendar a:visited, div#sidebar_calendar a:hover {
color: #E0CDA1;
}

#maincontent {
margin: 0px 280px 0px 50px;
font-family: "Verdana", sans-serif;
font-size: 12px;
text-align: left;
}

#footer {
padding: 6px 0px 25px 0px;
margin: 0px;
text-align: center;
font-family: Georgia, "Times New Roman", Times, serif;
text-transform: uppercase;
font-size: 20px;
color: #BFA663;
z-index: 100;
clear: both;
}

ul.navfooter{
padding: 0px 0px 5px 0px;
margin: 0px;
background: #E0CDA1 url(http://fatfrog.info/Ma/A/layout/beigeisthenewblack/navi.gif) bottom repeat-x;
}

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

div#footer a, div#footer a:link, div#footer a:visited, div#footer a:hover {
color: #E0CDA1;
text-decoration: none;
}

.clearfoot {
clear: both;
}

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

.subcontent {
margin-top: 20px;
}

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

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

.userpicfriends {
position: relative;
float: left;
margin: 0px 10px 10px 0px;
z-index: 15;
text-align: right;
font-family: Georgia, "Times New Roman", Times, serif;
font-style: italic;
font-size: 10px;
background: #E0CDA1!important;
}

.userpicfriends, .userpicfriends font {
color: #716E22;
}

.datesubject {
margin-left: 110px;
border-left: 1px solid #BA794E;
}

.date {
color: #BA794E;
font-family: "Verdana", sans-serif;
font-size: 12px;
padding-left: 10px;
}

.subject {
padding: 10px 0px 10px 10px;
color: #9B2C02;
font-family: Georgia, "Times New Roman", Times, serif;
font-style: italic;
font-size: 20px;
}

.entry {
margin-left: 110px;
padding: 10px 0px 0px 10px;
font-family: "Verdana", sans-serif;
font-size: 12px;
text-align: left;
border-left: 1px solid #BA794E;
}

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

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

.ljtags {
margin-top: 16px;
border-top: 1px solid #BFA663;
padding: 3px;
}

.currents {
font-family: "Verdana", sans-serif;
font-size: 12px;
margin-top: -16px;
border-top: 1px solid #BFA663;
padding: 3px;
}

.comments {
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 14px;
text-transform: uppercase;
text-align: left;
}

div.comments a, div.comments a:link, div.comments a:visited, div.comments a:hover {
color: #9B2C02;
}

.separator {
height: 35px;
}

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

.skiplinks {
background: url(http://fatfrog.info/Ma/A/layout/beigeisthenewblack/sidebar.gif) bottom;
line-height: 14px;
padding-bottom: 3px;
color: #E0CDA1;
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 14px;
text-transform: uppercase;
letter-spacing: 1px;
text-align: center;
}

.skiplinks a, .skiplinks a:link, .skiplinks a:active, .skiplinks a:visited {
color: #E0CDA1;
}

.skiplinks a:hover {
color: #BA794E;
text-decoration: none;
}

.box {
clear: left;
padding-left: 0px;
}

.commentbox {
border-left: 1px solid #BA794E;
margin: 20px 0px 20px 110px;
}

.datesubjectcomment {
color: #9B2C02;
font-family: Georgia, "Times New Roman", Times, serif;
font-style: italic;
font-size: 16px;
padding: 0px 5px 0px 10px;
border-bottom: 1px solid #BA794E;
}

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

.commentreply {
position: relative;
margin: 10px 0px 10px 10px;
font-size: 12px;
font-family: "Verdana", sans-serif;
}

.commentboxpartial {
border: 1px solid #BA794E;
padding: 10px;
margin: 20px 0px 20px 0px;
font-family: Georgia, "Times New Roman", Times, serif;
font-style: italic;
font-size: 14px;
}

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

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

.replytoposter {
color: #BA794E;
font-family: "Verdana", sans-serif;
font-size: 12px;
padding-left: 10px;
}

.replytosubject {
padding: 10px 0px 10px 10px;
color: #9B2C02;
font-family: Georgia, "Times New Roman", Times, serif;
font-style: italic;
font-size: 20px;
}

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

input, textarea {
background-color: #EAE1CB;
color: #562802;
}

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

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

ul.year {
text-align: center;
padding-bottom: 40px;
}

ul.year li {
display: inline;
font-family: Georgia, "Times New Roman", Times, serif;
font-style: italic;
font-size: 20px;
}

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

td.yearmonth {
border-style: none;
}

table.yeartable td.yearday {
background: url(http://fatfrog.info/Ma/A/layout/beigeisthenewblack/sidebar.gif) bottom repeat-x;
padding-bottom: 1px;
color: #E0CDA1;
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 14px;
text-transform: uppercase;
letter-spacing: 1px;
text-align: center;
}

table.yeartable td.yeardate {
background: #562802;
color: #E0CDA1;
}

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

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 to #E0CDA1.

Tags: - layouts, supernatural

33 comments | Leave a comment

( Post a new comment )

ckll.livejournal.com on August 12th, 2008 06:15 pm (UTC)

Brilliant job! I'll use.