Fuesch's graphics & layouts - Layout on Mars & 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

August 2024

Previous | Memories | Tell Someone | Next

fuesch

26 July 2011 @ 10:16 pm

Layout on Mars & profile layout

I liked the BBC’s Life on Mars page, so I turned their layout into an LJ layout. First time I'm using a different font (in the navheader). Should be one that’s on every computer, I hope.

Edit (May 22, 2016): Profile layout edited, because cellpadding & -spacing aren't supported in HTML5.

Layout on Mars

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 3, 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

/* Life on Mars
http://fuesch.livejournal.com/25422.html */

body {
background: #ffffff;
text-align: center;
color: #5E2A12;
font-family: "Arial", sans-serif;
font-size: 12px;
margin: 0px 0px 20px 0px;
}

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

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

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

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

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

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

blockquote {
background: #F8F1C5;
padding: 7px;
}

q {
font-style: italic;
}

/* GENERAL */

.clear {
height: 15px;
}

.headerimage {
margin-bottom: 20px;
height: 262px;
background: #3A1604 url(http://fatfrog.info/Ma/A/layout/layoutonmars/header.jpg) center no-repeat;
border-bottom: 10px solid #E58C47;
}

#content {
margin: 0px 50px;
}

#header {
margin: 0px;
padding: 0px;
height: 150px;
text-align: left;
font-family: "Impact", sans-serif;
font-size: 24px;
text-transform: uppercase;
background: url(http://fatfrog.info/Ma/A/layout/layoutonmars/headercross.gif) top center no-repeat;
}

ul.navheader {
position: relative;
right: 50%;
top: 40px;
text-align: right;
}

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

.view {
color: #5E2A12;
}

.title {
position: relative;
margin: 0px;
width: 50%;
left: 50%;
top: -13px;
padding-left: 10px;
}

.subtitle {
position: absolute;
margin: 0px;
left: 50%;
padding-left: 10px;
}

#sidebar {
margin-top: 15px;
width: 250px;
font-family: "Arial", sans-serif;
color: #C15D1E;
font-size: 12px;
float: right;
text-align: left;
}

div#sidebar a, div#sidebar a:link {
color: #E58C47;
}

div#sidebar a:visited {
color: #D86922;
}

div#sidebar a:hover {
color: #ECAD6F;
}

div#sidebar a:active {
color: #F8F1C5;
}

.sbarbody {
padding: 0px;
}

.sbarbody2 {
padding: 10px;
background: #321203 url(http://fatfrog.info/Ma/A/layout/layoutonmars/sbarcalendarposts.gif) repeat-y;
border-top: 1px solid #ffffff;
border-bottom: 1px solid #ffffff;
}

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

li.sbartitle {
margin-top: 10px;
padding: 10px;
background: url(http://fatfrog.info/Ma/A/layout/layoutonmars/comments.gif) center;
list-style: none;
color: #5E2A12;
font-weight: bold;
text-transform: uppercase;
}

.tagcloud {
list-style: none;
padding: 10px;
background: #321203 url(http://fatfrog.info/Ma/A/layout/layoutonmars/sbarcalendarposts.gif) repeat-y;
border-top: 1px solid #ffffff;
border-bottom: 1px solid #ffffff;
}

li.sbaritem {
padding: 10px;
background: #321203 url(http://fatfrog.info/Ma/A/layout/layoutonmars/sbarcalendarposts.gif) repeat-y;
border-top: 1px solid #ffffff;
border-bottom: 1px solid #ffffff;
}

.defaultuserpic {
text-align: center;
}

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

.sbarcalendar {
padding: 7px;
background: url(http://fatfrog.info/Ma/A/layout/layoutonmars/sbarcalendar.gif);
text-align: center;
font-family: "Arial", sans-serif;
color: #5E2A12;
font-size: 14px;
font-weight: bold;
}

.sbarcalendarposts {
padding: 7px;
background: url(http://fatfrog.info/Ma/A/layout/layoutonmars/sbarcalendarposts.gif);
text-align: center;
font-family: "Arial", sans-serif;
font-size: 14px;
font-weight: bold;
}

#maincontent {
margin-top: 15px;
font-family: "Arial", sans-serif;
font-size: 12px;
margin-right: 300px;
text-align: left;
}

#footer {
margin: 0px;
padding: 0px;
height: 150px;
text-align: left;
font-family: "Impact", sans-serif;
font-size: 24px;
text-transform: uppercase;
background: url(http://fatfrog.info/Ma/A/layout/layoutonmars/headercross.gif) top center no-repeat;
z-index: 100;
clear: both;
}

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

ul.navfooter li {
top: 40px;
position: relative;
right: 50%;
padding-right: 10px;
text-align: right;
}

ul.navfooter li + li {
margin: 0px;
padding: 0px 0px 0px 10px;
width: 50%;
position: relative;
top: 11px;
left: 50%;
text-align: left;
}

ul.navfooter li + li + li {
margin: 0px;
padding: 0px 0px 0px 10px;
position: relative;
top: 23px;
left: 50%;
text-align: left;
}

.viewing {
color: #5E2A12;
}

.clearfoot {
clear: both;
}

/* ENTRIES & FRIENDS */

.subcontent {
}

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

.userpic {
position: relative;
float: left;
background: #FFFFFF url(http://fatfrog.info/Ma/A/layout/layoutonmars/iconbg.gif) top left no-repeat;
padding: 40px 2px 2px 40px;
margin: 18px 10px 10px 0px;
min-height: 100px;
z-index: 15;
}

.userpicfriends {
position: relative;
float: left;
background: #FFFFFF url(http://fatfrog.info/Ma/A/layout/layoutonmars/iconbg.gif) top left no-repeat!important;
padding: 40px 2px 2px 40px;
margin: 18px 10px 10px 0px;
min-height: 100px;
text-align: center;
font-family: "Arial", sans-serif;
font-size: 12px;
z-index: 15;
}

.userpicfriends font {
color: #D86922;
}

.date {
color: #5E2A12;
font-family: "Arial", sans-serif;
font-size: 12px;
text-align: right;
padding-bottom: 3px;
}

.subject {
padding: 9px 10px;
font-family: "Arial", sans-serif;
color: #ffffff;
font-size: 16px;
font-weight: bold;
background: #5E2A12;
}

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

.entry {
margin-left: 40px;
padding-top: 5px;
color: #5E2A12;
font-family: "Arial", sans-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;
}

.ljtags {
margin-top: 20px;
border-left: 5px solid #F2CF9A;
padding-left: 5px;
}

.currents {
margin-top: -15px;
font-family: "Arial", sans-serif;
font-size: 12px;
border-left: 5px solid #F2CF9A;
padding-left: 5px;
}

.comments {
margin-left: -40px;
font-family: "Arial", sans-serif;
font-size: 12px;
color: #F2CD98;
text-align: right;
text-transform: uppercase;
font-weight: bold;
background: #733619 url(http://fatfrog.info/Ma/A/layout/layoutonmars/comments.gif) right repeat-y;
padding: 11px 12px 12px 0px;
position: relative;
top: 15px;
}

div.comments a, div.comments a:link {
color: #ffffff;
background: #733619;
padding: 3px 10px;
border: 1px solid #ffffff;
}

div.comments a:visited {
color: #F7EEC3;
background: #733619;
padding: 3px 10px;
border: 1px solid #ffffff;
}

div.comments a:hover {
color: #733619;
background: #ffffff;
padding: 3px 10px;
border: 1px solid #D86922;
text-decoration: none;
}

.separator {
height: 35px;
}

/* COMMENTS */

.skiplinks {
margin-top: 30px;
text-align: center;
color: #ffffff;
font-weight: bold;
text-transform: uppercase;
}

.skiplinks a, .skiplinks a:link, .skiplinks a:visited {
color: #733619;
background: #F8F1C5;
padding: 3px 10px;
border: 1px solid #D86922;
text-decoration: none;
}

.skiplinks a:hover {
color: #ffffff;
background: #733619;
padding: 3px 10px;
border: 1px solid #ffffff;
}

.box {
clear: left;
}

.commentbox {
margin: 40px 0px;
}

.datesubjectcomment {
background: #D86922;
padding: 10px 10px 11px 10px;
font-family: "Arial", sans-serif;
color: #ffffff;
}

.datesubjectcomment a, .datesubjectcomment a:link {
color: #321203;
}

.datesubjectcomment a:visited {
color: #5E2A12;
}

.datesubjectcomment a:hover {
color: #321203;
}

.userpiccomment {
position: relative;
background: url(http://fatfrog.info/Ma/A/layout/layoutonmars/commenticonbg.gif) top right;
padding: 40px 40px 18px 2px;
margin: -10px -10px 10px 10px;
height: 100px;
z-index: 15;
float: right;
}

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

.commentboxpartial {
border: #D86922 1px solid;
padding: 10px;
margin: 10px;
}

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

/* COMMENTING */

.replytoposter {
color: #5E2A12;
font-family: "Arial", sans-serif;
font-size: 12px;
text-align: right;
padding-bottom: 3px;
}

.replytosubject {
margin-top: -2px;
padding: 9px 10px;
font-family: "Arial", sans-serif;
color: #ffffff;
font-size: 16px;
font-weight: bold;
background: #5E2A12;
}

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

input, textarea {
background-color: #ffffff;
color: #5E2A12;
}

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

/* CALENDAR */

ul.year {
padding: 10px;
font-family: "Arial", sans-serif;
color: #ffffff;
font-size: 16px;
font-weight: bold;
background: #5E2A12;
text-align: center;
margin-bottom: 40px;
}

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

.active {
font-size: 20px;
}

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

td.yearmonth {
border-style: none;
font-weight: bold;
}

td.yearmonth a {
font-weight: normal;
}

table.yeartable td.yearday {
padding: 10px 5px;
background: #AB511A url(http://fatfrog.info/Ma/A/layout/layoutonmars/sbarcalendar.gif) left repeat-y;
text-align: center;
font-weight: bold;
text-transform: uppercase;
}

table.yeartable td.yeardate {
padding: 4px 5px 3px 3px;
background: #331203 url(http://fatfrog.info/Ma/A/layout/layoutonmars/sbarcalendarposts.gif) left repeat-y;
font-weight: bold;
color: #C15D1E;
}

table.yeartable td.yeardate a, table.yeartable td.yeardate a:link {
color: #E58C47;
font-size: 16px;
}

table.yeartable td.yeardate a:visited {
color: #D86922;
font-size: 16px;
}

table.yeartable td.yeardate a:hover {
color: #ECAD6F;
font-size: 16px;
}

table.yeartable td.yeardate a:active {
color: #F8F1C5;
font-size: 16px;
}

.lj-view-month .entry {
width: 500px;
margin: 0px auto;
}

/* TAGS */

.lj-view-tags h2 {
width: 500px;
margin-left: auto;
margin-right: auto;
}

.ljtaglist {
width: 500px;
margin: 0px auto;
}

ul.ljtaglist {
list-style: none;
}

ul.ljtaglist li {
padding: 10px;
border-top: 1px solid #ffffff;
border-bottom: 1px solid #ffffff;
}

ul.ljtaglist li a {
padding: 10px;
background: #321203 url(http://fatfrog.info/Ma/A/layout/layoutonmars/sbarcalendarposts.gif) repeat-y;
border-top: 1px solid #ffffff;
border-bottom: 1px solid #ffffff;
}

/* EXTRAS */

.caption img {
margin-bottom: 10px;
}

.caption, .captionless {
margin: 0px auto;
padding: 10px;
background: #F8F1C5;
font-size: 11px;
text-align: left;
border: 4px solid #D86922;
}

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.


		And a profile 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><center> <table width="598" cellspacing="0" cellpadding="0" border="0"> <tr><td colspan="3" height="160" background="http://fatfrog.info/Ma/A/layout/layoutonmars/profile-header.jpg"></td></tr> <tr><td height="40" width="40" background="http://fatfrog.info/Ma/A/layout/layoutonmars/profile-left.gif"> </td><td width="80" background="http://fatfrog.info/Ma/A/layout/layoutonmars/profile-center.gif"></td><td width="478" background="http://fatfrog.info/Ma/A/layout/layoutonmars/profile-subject.gif">  <font face="Arial, Helvetica, sans-serif" size="3" color="#FFFFFF"><b> HEADLINE HERE </b></font></td></tr> <tr><td height="78" valign="top"><img src="http://fatfrog.info/Ma/A/layout/layoutonmars/profile-left.gif"></td><td colspan="2"><font face="Arial, Helvetica, sans-serif" size="2" color="#5E2A12"> CONTENT HERE </font></td></tr> </table> </center></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="#D86922">LINK TEXT</font></a>`

Tags: - layouts, life on mars