Meretricious layout & profile layout

[fuesch]

I know, there's no worse timing for posting a Christmas layout than right after Christmas, but this was made for the_sign_of_fun's Christmas/Winter Challenge and voting only just ended.

Meretricious

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 26, Google Chrome 31 and Internet Explorer 10.

You can change maincontent and sidebar width, if you want. But if you want to change content, you'll need to adjust padding in the header.

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

/* Meretricious
http://fuesch.livejournal.com/42374.html */

body {
margin: 0px;
padding: 0px;
text-align: center;
font-family: Georgia, "Times New Roman", Times, serif;
color: #FFC973;
font-size: 12px;
background: #20491F url(http://fatfrog.info/Ma/A/layout/meretricious/bg.png) center top;
}

body > div[style*="width"] {
margin: 0px auto!important;
padding: 0px!important;
background-color: none!important;
border: none!important;
}

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

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

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

a:active {
color: #FFFFFF;
text-decoration: underline;
}

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

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

q {
font-style: italic;
}

q i {
font-style: normal;
}

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

.clear {
display: none;
}

#content-outer {
padding-top: 230px;
background: url(http://fatfrog.info/Ma/A/layout/meretricious/header.png) center top no-repeat;
}

#content {
width: 900px;
margin: 0px auto;
}

#header {
margin: 0px 80px 25px 80px;
text-align: center;
}

ul.navheader {
margin: 0px;
padding: 0px;
}

ul.navheader li {
display: inline-block;
width: 60px;
height: 22px;
padding: 33px 23px 0px 50px;
font-size: 10px;
font-weight: bold;
text-transform: uppercase;
line-height: 8px;
vertical-align: top;
background: url(http://fatfrog.info/Ma/A/layout/meretricious/nav.png);
}

ul.navheader a {
color: #FFFFFF;
}

.title {
padding-top: 10px;
font-size: 24px;
font-style: italic;
text-shadow: 0px 0px 5px #FFC973;
}

.subtitle {
font-size: 14px;
font-style: italic;
text-shadow: 0px 0px 5px #FFC973;
}

#sidebar {
float: right;
width: 200px;
padding-top: 19px;
text-align: left;
}

#sidebar > div[style*="width"] {
position: relative;
top: -13px;
margin: 0px!important;
text-align: left;
}

.sbarbody {
margin: 0px 0px 25px 0px;
}

.sbarbody2 {
margin: -25px 0px 25px 0px;
padding: 10px 0px 0px 0px;
}

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

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

li.sbartitle {
padding: 6px 40px 7px 10px;
color: #20491F;
font-size: 14px;
font-weight: bold;
font-variant: small-caps;
background: url(http://fatfrog.info/Ma/A/layout/meretricious/sbartitle.png) right center;
}

li.sbaritem {
margin: 0px;
padding: 7px 0px 0px 0px;
}

table.calendar {
margin: 7px auto 0px 0px;
}

.sbarcalendar, .sbarcalendarposts {
padding: 3px 4px;
text-align: right;
border: 1px solid #123B11;
}

.sbarcalendarposts a {
display: block;
}

.defaultuserpic {
margin: -18px 0px 25px 0px;
text-align: left;
}

div + .defaultuserpic {
margin-top: 0px;
}

.defaultuserpic img {
padding: 25px;
background: url(http://fatfrog.info/Ma/A/layout/meretricious/icon.png);
}

.tagcloud {
padding-top: 7px;
list-style: none;
}

.tagcloud span {
margin-right: 5px;
vertical-align: middle;
}

#maincontent {
margin: 0px 225px 0px 0px;
text-align: left;
}

#maincontent > div[style*="margin"] {
position: relative;
top: -17px;
margin: 0px auto!important;
text-align: center;
}

#footer {
text-align: center;
clear: both;
}

#footer a {
color: #FFFFFF;
}

ul.navfooter{
margin: 0px;
padding: 0px;
}

ul.navfooter li {
display: inline-block;
width: 60px;
height: 45px;
margin: 0px 5px;
padding: 8px 23px 0px 50px;
font-size: 10px;
font-weight: bold;
text-transform: uppercase;
line-height: 8px;
vertical-align: top;
background: url(http://fatfrog.info/Ma/A/layout/meretricious/footer.png);
}

ul.navfooter li.viewing {
width: 100px;
background: url(http://fatfrog.info/Ma/A/layout/meretricious/footer-viewing.png);
}

.clearfoot {
display: none;
}

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

.subcontent {
margin-bottom: 35px;
}

.userpic {
position: relative;
float: right;
max-width: 100px;
margin: 1px 1px 5px 10px;
padding: 10px;
background: url(http://fatfrog.info/Ma/A/layout/meretricious/icon.png) right top;
z-index: 15;
}

.userpicfriends {
position: relative;
float: right;
max-width: 100px;
margin: 1px 1px 5px 10px;
padding: 10px 10px 5px 10px;
text-align: center;
font-size: 10px;
background: url(http://fatfrog.info/Ma/A/layout/meretricious/icon.png) right top;
text-shadow: 0px 0px 5px #9F050C;
z-index: 15;
}

.userpicfriends img {
padding-bottom: 3px;
}

.userpicfriends font {
color: #FFFFFF;
}

.datesubject {
position: relative;
padding-right: 121px;
background: url(http://fatfrog.info/Ma/A/layout/meretricious/iconribbon.png) right top no-repeat;
z-index: 20;
}

.date, .replytoposter {
padding: 0px 0px 5px 0px;
font-size: 11px;
font-style: italic;
}

.subject, .replytosubject {
margin-left: -15px;
padding: 6px 0px 7px 40px;
color: #20491F;
font-size: 16px;
font-weight: bold;
font-variant: small-caps;
background: url(http://fatfrog.info/Ma/A/layout/meretricious/subject.png) left center;
}

.subject a, .replytosubject a {
color: #9F050C;
}

.entry {
padding-top: 10px;
text-align: left;
}

.ljtags {
margin-top: 12px;
font-size: 11px;
font-variant: small-caps;
}

.currents {
margin-top: 12px;
font-size: 11px;
font-variant: small-caps;
}

.currents strong {
font-weight: normal;
}

.comments {
margin-top: 12px;
text-align: right;
color: #20491F;
font-weight: bold;
text-transform: uppercase;
}

.comments a {
display: inline-block;
height: 19px;
padding: 2px 0px 0px 76px;
background: url(http://fatfrog.info/Ma/A/layout/meretricious/comments.png) left top no-repeat;
}

.comments a + a {
padding-left: 0px;
background: none;
}

.separator {
display: none;
}

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

.skiplinks {
position: relative;
margin: 0px 126px -14px 0px;
padding-top: 2px;
text-align: right;
font-size: 9px;
color: #20491F;
text-transform: uppercase;
z-index: 25;
}

.box {
padding: 0px;
}

.box center {
margin-bottom: 35px;
}

.box + .box {
text-align: center;
}

.commentbox {
margin: 0px 0px 25px 0px;
}

.datesubjectcomment {
margin-left: -15px;
padding: 6px 0px 7px 40px;
color: #20491F;
font-weight: bold;
font-variant: small-caps;
background: url(http://fatfrog.info/Ma/A/layout/meretricious/subject.png) left center;
}

.datesubjectcomment a, .commentboxpartial a {
color: #9F050C;
}

.datesubjectcomment strong {
font-size: 16px;
}

.userpiccomment {
float: right;
margin: -6px 0px 5px 10px;
padding: 10px;
color: #FFC973;
background: url(http://fatfrog.info/Ma/A/layout/meretricious/icon.png) right top;
}

.commentreply {
margin: 12px 0px;
}

.commentreply + div {
text-align: right!important;
font-size: 0px!important;
color: #20491F;
font-weight: bold;
text-transform: uppercase;
}

.commentreply + div a {
display: inline-block;
height: 19px;
padding: 2px 0px 0px 76px;
font-size: 12px;
background: url(http://fatfrog.info/Ma/A/layout/meretricious/comments.png) left top no-repeat;
}

.commentreply + div a + a, .commentreply + div div a {
margin-left: 7px;
padding-left: 0px;
background: none;
}

.commentreply + div div {
padding: 0px!important;
text-align: right!important;
}

.commentreply + div div img {
vertical-align: text-bottom;
}

.commentboxpartial {
margin: 0px 0px 25px -15px;
padding: 6px 0px 7px 40px;
color: #20491F;
font-weight: bold;
font-variant: small-caps;
background: url(http://fatfrog.info/Ma/A/layout/meretricious/subject.png) left center;
}

#qrform {
margin-bottom: 25px;
}

#qrform table {
border: none!important;
}

.commentbox #qrform {
margin-bottom: 0px;
text-align: left!important;
color: #FFC973;
font-weight: normal;
text-transform: none;
}

input, textarea {
padding: 2px;
color: #FFC973;
background: none;
border: 2px solid #20491F;
border-top: 2px solid #123B11;
border-bottom: 2px solid #4A6C48;
}

input[type='radio'], input[type='checkbox'] {
padding: 0px;
background: none;
}

input[type='submit'], input[type='button'] {
padding: 3px 5px;
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 10px;
font-weight: bold;
font-variant: small-caps;
background: #20491F;
border: 1px solid #20491F;
border-top: 1px solid #4A6C48;
border-bottom: 2px solid #123B11;
}

input[type='submit']:active, input[type='button']:active {
position: relative;
top: 1px;
margin-top: 1px;
border-bottom: 1px solid #123B11;
}

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

.lj-view-reply .subcontent + .separator + .clear + div, .lj-view-reply .subcontent + .clear + div {
display: none;
}

#postform {
margin-bottom: 25px;
}

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

.lj-view-archive #maincontent br {
display: none;
}

ul.year {
margin: 0px;
padding: 0px;
text-align: left;
font-size: 11px;
font-style: italic;
}

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

ul.year li + li {
padding-left: 5px;
display: inline;
}

table.yeartable {
margin: 0px auto 21px 0px;
background: url(http://fatfrog.info/Ma/A/layout/meretricious/yeartable.png) center 2px no-repeat;
}

td.yearmonth {
padding: 6px 0px 7px 25px;
color: #20491F;
font-size: 16px;
font-weight: bold;
font-variant: small-caps;
background: url(http://fatfrog.info/Ma/A/layout/meretricious/subject.png) -15px center;
}

td.yearmonth + td {
padding: 6px 12px 7px 0px;
background: url(http://fatfrog.info/Ma/A/layout/meretricious/subject.png) right center;
}

td.yearmonth a {
font-size: 12px;
color: #9F050C;
}

table.yeartable td.yearday {
padding: 10px;
text-align: center;
font-size: 16px;
font-weight: bold;
font-variant: small-caps;
border: 1px solid #123B11;
}

table.yeartable td.yeardate {
padding: 0px;
}

table.yeartable td.yeardate a {
display: block;
}

td.yeardate div {
padding: 3px 5px 0px 5px;
border: 1px solid #123B11;
border-bottom: none;
}

td.yeardate div + div {
margin-top: -5px;
padding: 0px 5px 3px 5px;
font-size: 16px;
font-weight: bold;
border: 1px solid #123B11;
border-top: none;
}

.lj-view-month #maincontent form center {
text-align: left;
}

.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 {
padding-top: 0px;
font-size: 0px;
}

.lj-view-month dt {
margin-left: -15px;
padding: 6px 0px 7px 40px;
color: #20491F;
font-size: 16px;
font-weight: bold;
background: url(http://fatfrog.info/Ma/A/layout/meretricious/subject.png) left center;
}

.lj-view-month dt a {
color: #9F050C;
}

.lj-view-month dd {
margin: 10px 0px 35px 0px;
font-size: 12px;
}

.lj-view-day .separator + .clear + .clear + .skiplinks {
margin-top: -35px;
margin-bottom: 35px;
text-align: left;
}

/* ------- TAGS ------- */

.lj-view-tags h2 {
margin: 0px 0px 0px -15px;
padding: 6px 0px 7px 40px;
color: #20491F;
font-size: 16px;
font-weight: bold;
text-transform: uppercase;
background: url(http://fatfrog.info/Ma/A/layout/meretricious/subject.png) left center;
}

ul.ljtaglist {
margin: 0px;
padding: 3px 0px 35px 0px;
list-style: none;
}

ul.ljtaglist li {
padding: 7px 0px 0px 0px;
}



This profile layout's width is flexible, header and footer will tile. But I do suggest a minimum width of 420 pixels.

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/meretricious/bg.png" cellpadding="0" cellspacing="0">

http://fatfrog.info/Ma/A/layout/meretricious/profile-header.png" height="162">
	CONTENT GOES HERE
http://fatfrog.info/Ma/A/layout/meretricious/profile-footer.png" height="91">

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