Odd Man Out layout & matching profile layout
Odd Man Out
preview
Click here for live preview, then click on the layout's icon.
layout info
Based on Flexible Squares.
Works for all account types.
Tested in Firefox 22, Google Chrome 28 and Internet Explorer 10.
This layout's widths are flexible.
how to implement this layout
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
/* Odd Man Out
http://fuesch.livejournal.com/40812.html */
@font-face {
font-family: 'Oswald';
font-style: normal;
font-weight: 700;
src: local('Oswald Bold'), local('Oswald-Bold'), url(http://themes.googleusercontent.com/static/fonts/oswald/v7/bH7276GfdCjMjApa_dkG6T8E0i7KZn-EPnyo3HZu7kw.woff) format('woff');
}
body {
margin: 0px;
padding: 0px;
text-align: center;
font-family: "Verdana", sans-serif;
color: #53786D;
font-size: 12px;
background: #D9DDD1 url(http://fatfrog.info/Ma/A/layout/oddmanout/bg.png);
;){kind=link}
}
body > div[style*="width"] {
margin: 0px auto!important;
padding: 0px!important;
background-color: none!important;
border: none!important;
}
a, a:link {
color: #AC8E55;
text-decoration: none;
}
a:visited {
color: #C3AC77;
text-decoration: none;
}
a:hover {
color: #AC8E55;
text-decoration: underline;
}
a:active {
color: #DDAD52;
text-decoration: none;
}
code, kbd, pre, tt {
font-family: "Courier New", Courier, monospace;
font-size: 12px;
}
p, td, blockquote {
font-size: 12px;
}
blockquote {
padding: 10px;
background: url(http://fatfrog.info/Ma/A/layout/oddmanout/bg.png);
}
q {
padding: 0px 2px;
background: url(http://fatfrog.info/Ma/A/layout/oddmanout/bg.png);
}
/* ------- GENERAL ------- */
.clear {
display: none;
}
#content-outer {
background: url(http://fatfrog.info/Ma/A/layout/oddmanout/headerbg.png) top repeat-x;
}
#content {
width: 900px;
margin: 0px auto;
}
#header {
height: 440px;
margin-bottom: 20px;
padding: 0px;
text-align: center;
font-family: "Impact", 'Oswald';
color: #00252A;
background: url(http://fatfrog.info/Ma/A/layout/oddmanout/header.png) center no-repeat;
}
ul.navheader {
margin: 0px;
padding: 407px 0px 0px 0px;
font-size: 18px;
color: #3B5E5C;
text-transform: uppercase;
letter-spacing: 4px;
}
ul.navheader a {
color: #DFE8D8;
}
ul.navheader li {
display: inline;
padding: 0px;
}
ul.navheader li + li {
padding: 0px 0px 0px 50px;
}
.title {
position: absolute;
top: 34px;
left: 50%;
margin-left: -400px;
width: 800px;
font-size: 24px;
font-weight: normal;
opacity: 0.5;
filter: alpha(opacity=50);
}
.subtitle {
position: absolute;
top: 65px;
left: 50%;
margin-left: -400px;
width: 800px;
font-size: 20px;
font-weight: normal;
opacity: 0.5;
filter: alpha(opacity=50);
}
body #lj_controlstrip_new + .headerimage + #content-outer #content #header .title {
top: 84px;
}
body #lj_controlstrip_new + .headerimage + #content-outer #content #header .subtitle {
top: 115px;
}
body > div[style*="width"] + .headerimage + #content-outer #content #header .title {
top: 124px;
}
body > div[style*="width"] + .headerimage + #content-outer #content #header .subtitle {
top: 155px;
}
#sidebar {
float: right;
width: 200px;
text-align: left;
}
#sidebar > div[style*="width"] {
width: 190px!important;
margin: 0px 0px 20px 0px!important;
padding: 5px;
text-align: center;
background: url(http://fatfrog.info/Ma/A/layout/oddmanout/subcontent.png);
;){kind=link}
box-shadow: inset 0px 0px 50px #21443B;
}
.sbarbody {
margin-bottom: 20px;
padding: 1px 0px 1px 5px;
list-style: none;
background: url(http://fatfrog.info/Ma/A/layout/oddmanout/subcontent.png);
box-shadow: inset 0px 0px 50px #21443B;
}
.sbarbody2 {
margin: -20px 0px 20px 0px;
padding: 5px;
background: #E9ECE6;
border-right: 5px solid #294B44;
border-bottom: 5px solid #294B44;
border-left: 13px solid #294B44;
}
ul.sbarlist {
margin: 0px;
padding: 0px;
}
ul.sbarlist + .sbarlist {
margin: 0px 5px 4px 8px;
padding: 0px 5px 5px 0px;
list-style: square;
background: #E9ECE6;
box-shadow: none;
}
li.sbartitle {
padding: 0px 0px 2px 8px;
list-style: none;
font-family: "Impact", 'Oswald';
color: #E9ECE6;
text-transform: uppercase;
}
li.sbaritem {
margin: 0px 0px 0px 4px;
padding: 5px 0px 0px 0px;
}
.defaultuserpic {
padding: 19px 5px 5px 5px!important;
text-align: right!important;
background: url(http://fatfrog.info/Ma/A/layout/oddmanout/subcontent.png)!important;
!important;){kind=link}
box-shadow: inset 0px 0px 50px #21443B;
}
.defaultuserpic img {
padding: 5px 41px;
background: #E9ECE6;
}
table.calendar {
margin: 0px -2px -2px 3px;
padding: 3px 0px 0px 0px;
}
.sbarcalendar {
width: 21px;
padding: 1px 0px 2px 0px;
text-align: center;
border: 1px solid #53786D;
}
.sbarcalendarposts {
width: 21px;
padding: 1px 0px 2px 0px;
text-align: center;
border: 1px solid #AC8E55;
}
.sbarcalendarposts a {
display: block;
}
.defaultuserpic {
margin: 0px 0px 15px 0px;
padding: 10px;
text-align: center;
background: #EEEEEE;
}
.tagcloud {
padding: 5px;
list-style: none;
}
.tagcloud span {
margin-right: 5px;
vertical-align: middle;
}
#maincontent {
margin: 0px 220px 0px 0px;
text-align: left;
}
#maincontent > div[style*="margin"] {
margin: 0px auto 20px auto!important;
text-align: center;
}
#footer {
position: absolute;
width: 100%;
height: 35px;
left: 0px;
padding: 14px 0px 0px 0px;
text-align: center;
font-family: "Impact", 'Oswald';
font-size: 18px;
color: #3B5E5C;
text-transform: uppercase;
letter-spacing: 4px;
background: url(http://fatfrog.info/Ma/A/layout/oddmanout/headerbg.png) bottom;
clear: both;
}
ul.navfooter {
margin: 0px;
padding: 0px;
}
ul.navfooter a {
color: #DFE8D8;
}
ul.navfooter li {
display: inline;
padding: 0px;
}
ul.navfooter li + li {
padding: 0px 0px 0px 50px;
}
.clearfoot {
display: none;
}
/* ------- ENTRIES & FRIENDS ------- */
.subcontent {
margin-bottom: 20px;
padding: 5px;
background: url(http://fatfrog.info/Ma/A/layout/oddmanout/subcontent.png);
box-shadow: inset 0px 0px 50px #21443B;
}
.userpic {
position: relative;
float: right;
padding-left: 10px;
background: none!important;
z-index: 15;
}
.userpicfriends {
position: relative;
float: right;
padding-left: 10px;
text-align: right;
font-size: 10px;
background: none!important;
z-index: 15;
}
.userpicfriends img {
padding-bottom: 2px;
}
.userpicfriends font {
color: #AC8E55;
}
.userpicfriends font:hover {
color: #AC8E55;
}
.datesubject {
height: 100px;
font-family: "Impact", 'Oswald';
}
.date, .replytoposter {
font-size: 20px;
color: #47706A;
}
.subject .ljuser b, .replytoposter .ljuser b {
font-weight: normal;
}
.subject, .replytosubject {
font-size: 24px;
color: #E9ECE6;
}
.subject a, .replytosubject a {
color: #E9ECE6;
}
.entry {
margin-right: 100px;
padding: 10px;
text-align: left;
background: #E9ECE6;
}
.ljtags {
margin: 12px 0px 0px 13px;
display: list-item;
list-style: square;
}
.currents {
margin-top: 12px;
}
.currents strong {
font-weight: normal;
}
.currentmood, .currentmusic, .currentlocation {
margin-left: 13px;
display: list-item;
list-style: square;
}
.currentmood img {
margin-right: 2px;
vertical-align: middle;
}
.comments {
float: right;
width: 100px;
margin: -19px -115px 0px auto;
vertical-align: bottom;
font-size: 0px;
font-family: "Impact", 'Oswald';
text-transform: uppercase;
}
.comments a {
display: block;
font-size: 12px;
color: #E9ECE6;
}
.separator {
display: none;
}
/* ------- COMMENTS ------- */
.skiplinks {
margin-top: -14px;
text-align: left;
}
.box {
padding: 0px;
}
.box center {
margin-bottom: 20px;
}
.box + .box center {
margin-top: 10px;
}
.commentbox {
margin-bottom: 20px;
padding: 5px;
background: url(http://fatfrog.info/Ma/A/layout/oddmanout/subcontent.png);
box-shadow: inset 0px 0px 50px #21443B;
}
.datesubjectcomment {
margin-bottom: 7px;
font-size: 16px;
font-family: "Impact", 'Oswald';
}
.datesubjectcomment .ljuser b {
font-weight: normal;
}
.datesubjectcomment strong {
color: #E9ECE6;
font-weight: normal;
}
.userpiccomment {
position: relative;
float: right;
margin: 0px 0px 5px 10px;
background: none;
z-index: 15;
}
.commentreply {
padding: 10px;
background: #E9ECE6;
}
.commentreply + div {
margin-top: 0px!important;
padding: 0px 10px 10px 10px;
text-align: left!important;
font-size: 0px!important;
background: #E9ECE6;
}
.commentreply + div a {
padding-left: 13px;
font-size: 12px;
background: url(http://fatfrog.info/Ma/A/layout/oddmanout/square.gif) left 5px no-repeat;
}
.commentreply + div a + a, .commentreply + div a + span, .commentreply + div span + a, .commentreply + div span + span {
margin-left: 10px;
}
.commentreply + div div {
padding: 5px 0px 0px 0px!important;
text-align: left!important;
font-size: 12px;
}
.commentreply + div div img {
height: 14px;
width: 14px;
vertical-align: baseline;
}
.commentreply + div div a {
padding-left: 0px;
background: none;
}
.commentreply + div div a + a {
margin-left: 0px;
}
.commentboxpartial {
margin-bottom: 20px;
padding: 5px 5px 7px 5px;
font-size: 16px;
font-family: "Impact", 'Oswald';
background: url(http://fatfrog.info/Ma/A/layout/oddmanout/subcontent.png);
}
.commentboxpartial b {
font-weight: normal;
}
#qrform {
margin: 0px 0px 20px 0px;
padding: 17px 105px 5px 5px;
background: url(http://fatfrog.info/Ma/A/layout/oddmanout/subcontent.png);
box-shadow: inset 0px 0px 50px #21443B;
}
#qrform table {
padding: 10px;
background: #E9ECE6;
border: none!important;
}
.commentbox #qrform {
margin: 0px;
padding: 0px;
background: none;
box-shadow: none;
}
.commentbox #qrform table {
padding: 0px;
}
input, textarea {
padding: 2px;
color: #53786D;
background: url(http://fatfrog.info/Ma/A/layout/oddmanout/textarea.png);
;){kind=link}
}
input[type='radio'], input[type='checkbox'] {
padding: 0px;
background: none;
}
input[type='submit'], input[type='button'] {
padding: 3px 5px;
color: #E9ECE6;
background: url(http://fatfrog.info/Ma/A/layout/oddmanout/subcontent.png);
}
input[type='submit']:active, input[type='button']:active {
position: relative;
top: 1px;
left: 1px;
}
textarea.textbox {
width: 95% !important;
}
.lj-view-reply .subcontent + .separator + .clear + div, .lj-view-reply .subcontent + .clear + div {
display: none;
}
#postform {
margin: -15px 0px 20px 0px;
padding: 17px 105px 5px 5px;
background: url(http://fatfrog.info/Ma/A/layout/oddmanout/subcontent.png);
box-shadow: inset 0px 0px 50px #21443B;
}
#postform table {
padding: 10px;
background: #E9ECE6;
}
#postform table table {
padding: 0px;
}
/* ------- CALENDAR ------- */
.lj-view-archive #maincontent br {
display: none;
}
.lj-view-archive #maincontent {
margin-bottom: 20px;
padding: 5px 100px 5px 5px;
background: url(http://fatfrog.info/Ma/A/layout/oddmanout/subcontent.png);
box-shadow: inset 0px 0px 50px #21443B;
}
ul.year {
margin: 0px;
padding: 0px 0px 5px 0px;
color: #E9ECE6;
font-size: 20px;
font-family: "Impact", 'Oswald';
text-align: left;
}
ul.year li {
display: inline;
padding: 0px;
}
ul.year li + li {
padding-left: 10px;
}
table.yeartable {
width: 100%;
margin: 0px;
padding: 10px;
background: #E9ECE6;
}
td.yearmonth {
border-style: none;
}
table.yeartable td.yearday {
padding: 10px;
text-align: center;
font-size: 16px;
font-family: "Impact", 'Oswald';
text-transform: uppercase;
background: url(http://fatfrog.info/Ma/A/layout/oddmanout/bg.png);
}
table.yeartable td.yeardate {
padding: 0px;
}
table.yeartable td.yeardate a {
display: block;
}
td.yeardate div {
padding: 3px 5px 0px 5px;
background: url(http://fatfrog.info/Ma/A/layout/oddmanout/bg.png);
}
td.yeardate div + div {
padding: 0px 5px 3px 5px;
font-size: 16px;
font-family: "Impact", 'Oswald';
background: url(http://fatfrog.info/Ma/A/layout/oddmanout/bg.png);
}
.lj-view-month #maincontent form {
height: 35px;
padding: 5px 0px 0px 5px;
font-size: 24px;
font-family: "Impact", 'Oswald';
}
.lj-view-month #maincontent form center {
text-align: left!important;
}
.lj-view-month .subcontent {
margin-top: -40px;
padding-top: 40px;
}
.lj-view-month #maincontent form select, .lj-view-month #maincontent form input {
vertical-align: middle;
}
.lj-view-month #maincontent form br, .lj-view-month #maincontent form + br , .lj-view-month #maincontent form + br + br {
display: none;
}
.lj-view-month .entry {
font-size: 0px;
}
.lj-view-month dt {
margin: 0px;
padding: 0px;
font-size: 12px;
}
.lj-view-month dt b {
font-weight: normal;
}
.lj-view-month dd {
margin: 0px;
padding: 10px;
font-size: 12px;
background: url(http://fatfrog.info/Ma/A/layout/oddmanout/bg.png);
}
.lj-view-month dd + dt {
margin-top: 20px;
}
.lj-view-day .separator + .clear + .clear + .skiplinks {
margin: -20px 0px 20px 0px;
}
/* ------- TAGS ------- */
.lj-view-tags #maincontent {
margin-bottom: 20px;
padding: 5px 100px 5px 5px;
background: url(http://fatfrog.info/Ma/A/layout/oddmanout/subcontent.png);
box-shadow: inset 0px 0px 50px #21443B;
}
.lj-view-tags h2 {
margin: 0px;
padding: 0px 0px 5px 0px;
font-size: 24px;
font-family: "Impact", 'Oswald';
color: #E9ECE6;
font-weight: normal;
}
ul.ljtaglist {
margin: 0px;
padding: 10px 10px 10px 23px;
list-style: square;
background: #E9ECE6;
}
ul.ljtaglist li {
padding: 0px;
}
ul.ljtaglist li + li {
padding-top: 5px;
}
This profile layout is flexible in width and height.
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/oddmanout/profile-headerbg.png"> | http://fatfrog.info/Ma/A/layout/oddmanout/profile-headerbg.png"> | http://fatfrog.info/Ma/A/layout/oddmanout/profile-header.png"> | http://fatfrog.info/Ma/A/layout/oddmanout/profile-headerbg.png"> | http://fatfrog.info/Ma/A/layout/oddmanout/profile-headerbg.png"> |
| CONTENT 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