Musilhouette layout & profile layout
I haven't made any progress in fixing my old layouts and I've just noticed I need to fix profile layouts too (because the cellpadding attribute isn't supported in HTML5), but I've finally finished a layout again!
Musilhouette
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 41, Google Chrome 46 and Internet Explorer 11.
The background colors alternate for an uneven number of entries. If you have set an even number of posts per page, you can make the footer blue by inserting
.lj-view-recent .pagewide-wrapper + .wrapper #footer, .lj-view-friends .pagewide-wrapper + .wrapper #footer {
background: #A0C5C9 url(http://fatfrog.info/Ma/A/layout/musilhouette/bg-dark.png) center -90px fixed no-repeat;
}
into the CSS and adding the following to .lj-view-recent #footer, .lj-view-friends #footer:
background: #A0C5C9 url(http://fatfrog.info/Ma/A/layout/musilhouette/bg-dark.png) center -200px fixed no-repeat;
If you want to change the width, you need to change it in 3 places:
- #sidebar (needs to be 12px wider than the others)
- right above #sidebar, where I put together all the elements for your convenience
- and ul.year (10px less)
If you're looking for your navigation strip, it's on the left and rolls in on hover. I put it there so it doesn't cover part of the header (or ad).
If you have ads on your journal (even blocked ones), you'll see a yellow gap above the header. Long story, short: The point of it is to always have the blue and yellow backgrounds match in position.
For some reason the ad in the sidebar loads and then becomes invisible. It doesn't just go away, it leaves a gap. Sorry, I don't know how to fix this.
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
/* Musilhouette
http://fuesch.livejournal.com/48209.html */
* {
margin: 0;
}
html, body {
height: 100%;
}
@font-face {
font-family: 'Montserrat';
font-style: normal;
font-weight: 400;
src: local('Montserrat-Regular'), url(https://themes.googleusercontent.com/static/fonts/montserrat/v3/zhcz-_WihjSQC0oHJ9TCYBsxEYwM7FgeyaSgU71cLG0.woff) format('woff');
}
body {
margin: 0px;
padding: 0px!important;
text-align: center;
font-family: 'Montserrat', "Verdana", sans-serif;
color: #674B76;
font-size: 12px;
word-wrap: break-word;
background: #E6EAD5 url(http://fatfrog.info/Ma/A/layout/musilhouette/bg-light.png) center -90px fixed no-repeat;
}
.pagewide-wrapper {
height: 110px;
}
body > .wrapper + .allbanners {
width: 100%!important;
background: #A0C5C9 url(http://fatfrog.info/Ma/A/layout/musilhouette/bg-dark.png) center -90px fixed no-repeat!important;
}
a, a:link {
color: #A25674;
text-decoration: none;
}
a:visited {
color: #A47A80;
text-decoration: none;
}
a:hover {
color: #A25674;
text-decoration: underline;
}
a:active {
color: #A47A80;
text-decoration: underline;
}
code, kbd, pre, tt {
font-family: "Courier New", Courier, monospace;
font-size: 12px;
}
p, td, blockquote {
font-size: 12px;
}
blockquote {
border: 5px solid transparent;
padding: 5px 8px;
border-image: url(http://fatfrog.info/Ma/A/layout/musilhouette/75percent.png) 10% round;
}
q {
font-style: italic;
}
q i {
font-style: normal;
}
/* ------- GENERAL ------- */
header {
left: -99%;
-webkit-transition: left 2s;
transition: left 2s;
}
header:hover {
left: 0px;
}
.clear {
display: none;
}
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0px auto;
background: #E6EAD5 url(http://fatfrog.info/Ma/A/layout/musilhouette/bg-light.png) center -200px fixed no-repeat;
}
.pagewide-wrapper + .wrapper {
background-position: center -90px;
}
.headerimage {
}
#content-outer {
}
#content {
margin: 0px;
}
#header {
padding: 200px 0px 20px 0px;
text-align: center;
background: #A0C5C9 url(http://fatfrog.info/Ma/A/layout/musilhouette/header.png) center -200px fixed no-repeat;
}
.pagewide-wrapper + .wrapper #header {
background-position: center -90px;
}
#header a:visited {
color: #A25674;
}
#header a:hover {
color: #A25674;
}
#header a:active {
color: #A47A80;
}
ul.navheader {
padding: 0px;
font-size: 0px;
font-weight: bold;
text-transform: uppercase;
letter-spacing: 3px;
}
ul.navheader li {
display: inline;
padding: 5px 8px;
font-size: 12px;
background: url(http://fatfrog.info/Ma/A/layout/musilhouette/75percent.png);
}
ul.navheader li + li {
margin-left: -3px;
}
.view {
}
.title {
padding-top: 5px;
font-size: 22px;
}
.subtitle {
}
ul.navheader, .title, .subtitle, ul.navfooter, .userpic, .userpicfriends, .datesubject, .entry, .box, .lj-view-month #maincontent form, ul.ljtaglist {
width: 900px;
margin: 0px auto;
}
#sidebar {
width: 912px;
margin: 0px auto;
padding: 15px 0px 10px 12px;
text-align: left;
font-size: 0px;
}
#sidebar > div {
font-size: 12px;
}
#sidebar > div[class*="after-first-widget"] {
display: inline-table;
min-width: 0px!important;
}
#sidebar > div[class*="after-first-widget"] div[class*="after-first-widget"] {
display: inline-block;
width: 216px!important;
max-height: 148px;
margin: 25px 12px 10px 0px!important;
text-align: left;
background: url(http://fatfrog.info/Ma/A/layout/musilhouette/75percent.png);
overflow-y: auto;
}
#sidebar > div[class*="after-first-widget"] div:empty {
display: none;
}
.sbarbody {
display: inline-block;
width: 216px;
vertical-align: top;
margin: 0px 12px 10px 0px;
}
.sbarbody2 {
display: inline-block;
width: 200px;
max-height: 137px;
margin: 25px 12px 10px -228px;
padding: 5px 8px;
background: url(http://fatfrog.info/Ma/A/layout/musilhouette/75percent.png);
vertical-align: top;
overflow-y: auto;
}
ul.sbarlist {
margin: 0px;
padding: 0px;
list-style: none;
}
ul.sbarlist + .sbarlist {
max-height: 150px;
margin: 0px;
padding: 0px;
list-style: none;
overflow-y: auto;
}
li.sbartitle {
list-style: none;
font-size: 18px;
}
li.sbaritem {
margin: 2px 0px 0px 0px;
padding: 5px 8px;
background: url(http://fatfrog.info/Ma/A/layout/musilhouette/75percent.png);
}
.count {
}
table.calendar {
margin: 0px auto;
}
.sbarcalendar {
width: 29px;
padding: 5px 0px;
text-align: center;
background: url(http://fatfrog.info/Ma/A/layout/musilhouette/75percent.png);
}
.sbarcalendarposts {
width: 29px;
text-align: center;
background: url(http://fatfrog.info/Ma/A/layout/musilhouette/75percent.png);
}
.sbarcalendarposts a {
display: block;
padding: 4px 0px;
}
.defaultuserpic {
display: inline-block;
width: 216px;
vertical-align: top;
margin: 25px 12px 10px 0px;
text-align: center;
background: url(http://fatfrog.info/Ma/A/layout/musilhouette/75percent.png);
}
.defaultuserpic img {
padding: 24px 0px;
}
.tagcloud {
padding: 0px;
list-style: none;
}
.tagcloud span {
padding: 0px 3px;
vertical-align: middle;
background: url(http://fatfrog.info/Ma/A/layout/musilhouette/75percent.png);
}
#sidebar_tags {
}
#sidebar_summary {
}
#sidebar_calendar {
}
#sidebar_linklist {
}
#maincontent {
margin: 0px;
text-align: left;
}
#maincontent > div[style*="margin"] {
width: 900px;
margin: 0px auto!important;
text-align: center;
background: none!important;
}
.clearfoot {
display: none;
}
.lj-view-recent #footer, .lj-view-friends #footer {
padding: 20px 0px;
text-align: center;
clear: both;
}
ul.navfooter {
padding: 0px;
font-size: 0px;
font-weight: bold;
text-transform: uppercase;
letter-spacing: 3px;
}
ul.navfooter li {
display: inline;
padding: 5px 8px;
font-size: 12px;
background: url(http://fatfrog.info/Ma/A/layout/musilhouette/75percent.png);
}
ul.navfooter li + li {
margin-left: -3px;
}
.viewing {
}
/* ------- ENTRIES & FRIENDS ------- */
.lj-view-friends {
padding: 0px!important;
}
.lj-view-recent #maincontent > div:nth-of-type(2n+1),
.lj-view-friends #maincontent > div:nth-of-type(2n+1) {
background: #A0C5C9 url(http://fatfrog.info/Ma/A/layout/musilhouette/bg-dark.png) center -200px fixed no-repeat;
}
.lj-view-recent .pagewide-wrapper + .wrapper #maincontent > div,
.lj-view-friends .pagewide-wrapper + .wrapper #maincontent > div {
background: none;
}
.lj-view-recent .pagewide-wrapper + .wrapper #maincontent > div:nth-of-type(4n-3),
.lj-view-friends .pagewide-wrapper + .wrapper #maincontent > div:nth-of-type(4n-3) {
background: #A0C5C9 url(http://fatfrog.info/Ma/A/layout/musilhouette/bg-dark.png) center -90px fixed no-repeat;
}
.subcontent {
padding: 20px 0px;
background: none;
}
.userpic, .userpicfriends {
height: 100px;
font-size: 10px;
background: url(http://fatfrog.info/Ma/A/layout/musilhouette/75percent.png)!important;
}
.userpic img, .userpicfriends img {
float: left;
padding: 0px 10px 0px 0px;
text-align: right;
}
.userpicfriends font {
color: #A25674;
}
.userpicfriends br {
margin-top: -7px;
}
.userpicfriends a + br {
display: none;
}
.userpicfriends a {
margin-right: 4px;
}
.userpicfriends a + br + a {
margin-right: 0px;
}
.datesubject {
height: 81px;
margin: -81px auto 19px auto;
}
.date, .replytoposter {
padding: 0px 0px 10px 0px;
font-size: 10px;
}
.subject, .replytosubject {
font-size: 16px;
font-weight: bold;
}
.entry {
text-align: left;
}
.entry_text {
}
.ljtags, .currents {
margin-top: 16px;
font-size: 11px;
font-variant: small-caps;
}
.currents strong {
font-weight: normal;
}
.currentmood, .currentmusic, .currentlocation, .currentgroups {
}
.comments {
margin-top: 19px;
padding: 5px 8px;
text-align: center;
text-transform: uppercase;
letter-spacing: 3px;
background: url(http://fatfrog.info/Ma/A/layout/musilhouette/75percent.png);
}
.separator {
display: none;
}
/* ------- COMMENTS ------- */
.lj-view-entry .subcontent {
background: #A0C5C9 url(http://fatfrog.info/Ma/A/layout/musilhouette/bg-dark.png) center -200px fixed no-repeat;
}
.lj-view-entry .pagewide-wrapper + .wrapper .subcontent {
background-position: center -90px;
}
.skiplinks {
padding: 20px 0px 0px 0px;
text-align: center;
background: #A0C5C9 url(http://fatfrog.info/Ma/A/layout/musilhouette/bg-dark.png) center -200px fixed no-repeat;
}
.pagewide-wrapper + .wrapper .skiplinks {
background: #A0C5C9 url(http://fatfrog.info/Ma/A/layout/musilhouette/bg-dark.png) center -90px fixed no-repeat;
}
.box {
padding: 20px 0px 0px 0px;
}
.box center {
margin-bottom: 20px;
}
.box + .box {
padding: 0px;
text-align: center;
}
.commentbox {
margin: 0px 0px 20px 0px;
padding: 0px;
}
.datesubjectcomment {
height: 92px;
padding: 4px 8px;
font-size: 10px;
background: url(http://fatfrog.info/Ma/A/layout/musilhouette/75percent.png);
}
.datesubjectcomment .ljuser {
display: block;
}
.datesubjectcomment .ljuser b {
font-weight: normal;
}
.datesubjectcomment br {
display: none;
}
.datesubjectcomment strong {
display: block;
padding-top: 10px;
font-size: 16px;
}
.userpiccomment {
float: left;
margin: -4px 10px 0px -8px;
}
.commentreply {
margin: 17px 0px 13px 0px;
}
.commentreply + div {
padding: 0px;
text-align: left!important;
font-size: 12px!important;
text-transform: uppercase;
letter-spacing: 3px;
}
.commentreply + div div {
padding: 0px!important;
text-align: left!important;
}
.commentreply + div div img {
width: 18px;
height: 18px;
vertical-align: baseline;
}
.commentboxpartial {
margin: 0px 0px 20px 0px;
padding: 5px 8px;
background: url(http://fatfrog.info/Ma/A/layout/musilhouette/75percent.png);
}
#qrform {
text-align: left;
text-transform: none;
letter-spacing: normal;
}
#qrform table {
border: none!important;
}
.commentbox #qrform {
}
#content input[type='text'], #content input.textbox, #content textarea {
padding: 2px;
color: #674B76;
background: url(http://fatfrog.info/Ma/A/layout/musilhouette/75percent.png);
}
#content input[type='submit'], #content input[type='button'] {
font-size: 12px;
font-family: 'Montserrat', "Verdana", sans-serif;
}
textarea.textbox {
width: 95% !important;
}
.lj-view-reply .subcontent + .separator + .clear + div, .lj-view-reply .subcontent + .clear + div {
display: none;
}
.lj-view-reply .subcontent {
background: #A0C5C9 url(http://fatfrog.info/Ma/A/layout/musilhouette/bg-dark.png) center -200px fixed no-repeat;
}
.lj-view-reply .pagewide-wrapper + .wrapper .subcontent {
background-position: center -90px;
}
#postform {
margin-bottom: 20px;
}
/* ------- CALENDAR ------- */
.lj-view-archive #maincontent {
padding: 20px 0px;
text-align: center;
background: #A0C5C9 url(http://fatfrog.info/Ma/A/layout/musilhouette/bg-dark.png) center -200px fixed no-repeat;
}
.lj-view-archive .pagewide-wrapper + .wrapper #maincontent {
background-position: center -90px;
}
.lj-view-archive #maincontent br {
display: none;
}
ul.year {
width: 890px;
margin: 0px auto;
padding: 5px 8px;
text-align: center;
background: url(http://fatfrog.info/Ma/A/layout/musilhouette/75percent.png);
}
ul.year li {
display: inline;
}
ul.year li + li {
padding-left: 8px;
}
.active {
font-size: 16px;
vertical-align: middle;
}
table.yeartable {
margin: 20px auto 0px auto;
}
td.yearmonth {
font-size: 16px;
border-style: none;
}
td.yearmonth a {
font-size: 10px;
}
table.yeartable td.yearday {
padding: 5px 8px;
font-size: 16px;
text-align: center;
background: url(http://fatfrog.info/Ma/A/layout/musilhouette/75percent.png);
}
table.yeartable td.yeardate {
padding: 0px;
}
table.yeartable td.yeardate a {
display: block;
}
td.yeardate div {
padding: 5px 8px 0px 8px;
text-align: center;
background: url(http://fatfrog.info/Ma/A/layout/musilhouette/75percent.png);
}
td.yeardate div + div {
padding: 0px 8px 5px 8px;
background: url(http://fatfrog.info/Ma/A/layout/musilhouette/75percent.png);
}
.lj-view-month #maincontent {
padding: 20px 0px 0px 0px;
text-align: center;
background: #A0C5C9 url(http://fatfrog.info/Ma/A/layout/musilhouette/bg-dark.png) center -200px fixed no-repeat;
}
.lj-view-month .pagewide-wrapper + .wrapper #maincontent {
background-position: center -90px;
}
.lj-view-month #maincontent form {
padding: 5px 0px;
text-align: center;
background: url(http://fatfrog.info/Ma/A/layout/musilhouette/75percent.png);
}
.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: 16px;
}
.lj-view-month dt b {
font-weight: normal;
}
.lj-view-month dd {
margin: 0px;
font-size: 12px;
}
.lj-view-month dd + dt {
margin-top: 20px;
}
.lj-view-day #maincontent > div:nth-of-type(2n-1) {
background: #A0C5C9 url(http://fatfrog.info/Ma/A/layout/musilhouette/bg-dark.png) center -200px fixed no-repeat;
}
.lj-view-day .pagewide-wrapper + .wrapper #maincontent > div:nth-of-type(4n-2) {
background: #A0C5C9 url(http://fatfrog.info/Ma/A/layout/musilhouette/bg-dark.png) center -90px fixed no-repeat;
}
.lj-view-day .skiplinks {
padding: 20px 0px;
font-size: 0px;
}
.lj-view-day .skiplinks a {
padding: 0px 8px;
font-size: 12px;
font-weight: bold;
text-transform: uppercase;
letter-spacing: 3px;
}
/* ------- TAGS ------- */
.lj-view-tags #maincontent {
padding: 20px 0px;
text-align: center;
background: #A0C5C9 url(http://fatfrog.info/Ma/A/layout/musilhouette/bg-dark.png) center -200px fixed no-repeat;
}
.lj-view-tags .pagewide-wrapper + .wrapper #maincontent {
background-position: center -90px;
}
.lj-view-tags h2 {
width: 884px;
margin: 0px auto;
padding: 5px 8px;
text-align: left;
font-size: 16px;
font-weight: normal;
background: url(http://fatfrog.info/Ma/A/layout/musilhouette/75percent.png)!important;
}
ul.ljtaglist {
padding: 0px;
list-style: none;
text-align: left;
}
ul.ljtaglist li {
padding: 5px 0px 0px 0px;
}
/* ------- in case of mysterious gaps ------- */
.pagewide-wrapper div div[style*="width"], #sidebar > div[class*="after-first-widget"] div div div div, #maincontent > div[style*="margin"] div div {
background: url(http://fatfrog.info/Ma/A/layout/blockedad.png);
}
#maincontent > div[style*="margin"] div div + div {
background: none;
}
This profile layout has a fixed width, changing the width would somewhat mess up the layout.
Because I can only use HMTL here and you can't position background images with that, the blue background is only color, no picture.
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/musilhouette/profile-bg.png">
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
To add a blue part to the table, insert
TEXT GOES HERE
before .
For a yellow one, insert
TEXT GOES HERE
Musilhouette
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 41, Google Chrome 46 and Internet Explorer 11.
The background colors alternate for an uneven number of entries. If you have set an even number of posts per page, you can make the footer blue by inserting
.lj-view-recent .pagewide-wrapper + .wrapper #footer, .lj-view-friends .pagewide-wrapper + .wrapper #footer {
background: #A0C5C9 url(http://fatfrog.info/Ma/A/layout/musilhouette/bg-dark.png) center -90px fixed no-repeat;
}
into the CSS and adding the following to .lj-view-recent #footer, .lj-view-friends #footer:
background: #A0C5C9 url(http://fatfrog.info/Ma/A/layout/musilhouette/bg-dark.png) center -200px fixed no-repeat;
If you want to change the width, you need to change it in 3 places:
- #sidebar (needs to be 12px wider than the others)
- right above #sidebar, where I put together all the elements for your convenience
- and ul.year (10px less)
If you're looking for your navigation strip, it's on the left and rolls in on hover. I put it there so it doesn't cover part of the header (or ad).
If you have ads on your journal (even blocked ones), you'll see a yellow gap above the header. Long story, short: The point of it is to always have the blue and yellow backgrounds match in position.
For some reason the ad in the sidebar loads and then becomes invisible. It doesn't just go away, it leaves a gap. Sorry, I don't know how to fix this.
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
/* Musilhouette
http://fuesch.livejournal.com/48209.html */
* {
margin: 0;
}
html, body {
height: 100%;
}
@font-face {
font-family: 'Montserrat';
font-style: normal;
font-weight: 400;
src: local('Montserrat-Regular'), url(https://themes.googleusercontent.com/static/fonts/montserrat/v3/zhcz-_WihjSQC0oHJ9TCYBsxEYwM7FgeyaSgU71cLG0.woff) format('woff');
}
body {
margin: 0px;
padding: 0px!important;
text-align: center;
font-family: 'Montserrat', "Verdana", sans-serif;
color: #674B76;
font-size: 12px;
word-wrap: break-word;
background: #E6EAD5 url(http://fatfrog.info/Ma/A/layout/musilhouette/bg-light.png) center -90px fixed no-repeat;
}
.pagewide-wrapper {
height: 110px;
}
body > .wrapper + .allbanners {
width: 100%!important;
background: #A0C5C9 url(http://fatfrog.info/Ma/A/layout/musilhouette/bg-dark.png) center -90px fixed no-repeat!important;
}
a, a:link {
color: #A25674;
text-decoration: none;
}
a:visited {
color: #A47A80;
text-decoration: none;
}
a:hover {
color: #A25674;
text-decoration: underline;
}
a:active {
color: #A47A80;
text-decoration: underline;
}
code, kbd, pre, tt {
font-family: "Courier New", Courier, monospace;
font-size: 12px;
}
p, td, blockquote {
font-size: 12px;
}
blockquote {
border: 5px solid transparent;
padding: 5px 8px;
border-image: url(http://fatfrog.info/Ma/A/layout/musilhouette/75percent.png) 10% round;
}
q {
font-style: italic;
}
q i {
font-style: normal;
}
/* ------- GENERAL ------- */
header {
left: -99%;
-webkit-transition: left 2s;
transition: left 2s;
}
header:hover {
left: 0px;
}
.clear {
display: none;
}
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0px auto;
background: #E6EAD5 url(http://fatfrog.info/Ma/A/layout/musilhouette/bg-light.png) center -200px fixed no-repeat;
}
.pagewide-wrapper + .wrapper {
background-position: center -90px;
}
.headerimage {
}
#content-outer {
}
#content {
margin: 0px;
}
#header {
padding: 200px 0px 20px 0px;
text-align: center;
background: #A0C5C9 url(http://fatfrog.info/Ma/A/layout/musilhouette/header.png) center -200px fixed no-repeat;
}
.pagewide-wrapper + .wrapper #header {
background-position: center -90px;
}
#header a:visited {
color: #A25674;
}
#header a:hover {
color: #A25674;
}
#header a:active {
color: #A47A80;
}
ul.navheader {
padding: 0px;
font-size: 0px;
font-weight: bold;
text-transform: uppercase;
letter-spacing: 3px;
}
ul.navheader li {
display: inline;
padding: 5px 8px;
font-size: 12px;
background: url(http://fatfrog.info/Ma/A/layout/musilhouette/75percent.png);
;){kind=link}
}
ul.navheader li + li {
margin-left: -3px;
}
.view {
}
.title {
padding-top: 5px;
font-size: 22px;
}
.subtitle {
}
ul.navheader, .title, .subtitle, ul.navfooter, .userpic, .userpicfriends, .datesubject, .entry, .box, .lj-view-month #maincontent form, ul.ljtaglist {
width: 900px;
margin: 0px auto;
}
#sidebar {
width: 912px;
margin: 0px auto;
padding: 15px 0px 10px 12px;
text-align: left;
font-size: 0px;
}
#sidebar > div {
font-size: 12px;
}
#sidebar > div[class*="after-first-widget"] {
display: inline-table;
min-width: 0px!important;
}
#sidebar > div[class*="after-first-widget"] div[class*="after-first-widget"] {
display: inline-block;
width: 216px!important;
max-height: 148px;
margin: 25px 12px 10px 0px!important;
text-align: left;
background: url(http://fatfrog.info/Ma/A/layout/musilhouette/75percent.png);
overflow-y: auto;
}
#sidebar > div[class*="after-first-widget"] div:empty {
display: none;
}
.sbarbody {
display: inline-block;
width: 216px;
vertical-align: top;
margin: 0px 12px 10px 0px;
}
.sbarbody2 {
display: inline-block;
width: 200px;
max-height: 137px;
margin: 25px 12px 10px -228px;
padding: 5px 8px;
background: url(http://fatfrog.info/Ma/A/layout/musilhouette/75percent.png);
vertical-align: top;
overflow-y: auto;
}
ul.sbarlist {
margin: 0px;
padding: 0px;
list-style: none;
}
ul.sbarlist + .sbarlist {
max-height: 150px;
margin: 0px;
padding: 0px;
list-style: none;
overflow-y: auto;
}
li.sbartitle {
list-style: none;
font-size: 18px;
}
li.sbaritem {
margin: 2px 0px 0px 0px;
padding: 5px 8px;
background: url(http://fatfrog.info/Ma/A/layout/musilhouette/75percent.png);
}
.count {
}
table.calendar {
margin: 0px auto;
}
.sbarcalendar {
width: 29px;
padding: 5px 0px;
text-align: center;
background: url(http://fatfrog.info/Ma/A/layout/musilhouette/75percent.png);
}
.sbarcalendarposts {
width: 29px;
text-align: center;
background: url(http://fatfrog.info/Ma/A/layout/musilhouette/75percent.png);
}
.sbarcalendarposts a {
display: block;
padding: 4px 0px;
}
.defaultuserpic {
display: inline-block;
width: 216px;
vertical-align: top;
margin: 25px 12px 10px 0px;
text-align: center;
background: url(http://fatfrog.info/Ma/A/layout/musilhouette/75percent.png);
}
.defaultuserpic img {
padding: 24px 0px;
}
.tagcloud {
padding: 0px;
list-style: none;
}
.tagcloud span {
padding: 0px 3px;
vertical-align: middle;
background: url(http://fatfrog.info/Ma/A/layout/musilhouette/75percent.png);
}
#sidebar_tags {
}
#sidebar_summary {
}
#sidebar_calendar {
}
#sidebar_linklist {
}
#maincontent {
margin: 0px;
text-align: left;
}
#maincontent > div[style*="margin"] {
width: 900px;
margin: 0px auto!important;
text-align: center;
background: none!important;
}
.clearfoot {
display: none;
}
.lj-view-recent #footer, .lj-view-friends #footer {
padding: 20px 0px;
text-align: center;
clear: both;
}
ul.navfooter {
padding: 0px;
font-size: 0px;
font-weight: bold;
text-transform: uppercase;
letter-spacing: 3px;
}
ul.navfooter li {
display: inline;
padding: 5px 8px;
font-size: 12px;
background: url(http://fatfrog.info/Ma/A/layout/musilhouette/75percent.png);
}
ul.navfooter li + li {
margin-left: -3px;
}
.viewing {
}
/* ------- ENTRIES & FRIENDS ------- */
.lj-view-friends {
padding: 0px!important;
}
.lj-view-recent #maincontent > div:nth-of-type(2n+1),
.lj-view-friends #maincontent > div:nth-of-type(2n+1) {
background: #A0C5C9 url(http://fatfrog.info/Ma/A/layout/musilhouette/bg-dark.png) center -200px fixed no-repeat;
}
.lj-view-recent .pagewide-wrapper + .wrapper #maincontent > div,
.lj-view-friends .pagewide-wrapper + .wrapper #maincontent > div {
background: none;
}
.lj-view-recent .pagewide-wrapper + .wrapper #maincontent > div:nth-of-type(4n-3),
.lj-view-friends .pagewide-wrapper + .wrapper #maincontent > div:nth-of-type(4n-3) {
background: #A0C5C9 url(http://fatfrog.info/Ma/A/layout/musilhouette/bg-dark.png) center -90px fixed no-repeat;
}
.subcontent {
padding: 20px 0px;
background: none;
}
.userpic, .userpicfriends {
height: 100px;
font-size: 10px;
background: url(http://fatfrog.info/Ma/A/layout/musilhouette/75percent.png)!important;
!important;){kind=link}
}
.userpic img, .userpicfriends img {
float: left;
padding: 0px 10px 0px 0px;
text-align: right;
}
.userpicfriends font {
color: #A25674;
}
.userpicfriends br {
margin-top: -7px;
}
.userpicfriends a + br {
display: none;
}
.userpicfriends a {
margin-right: 4px;
}
.userpicfriends a + br + a {
margin-right: 0px;
}
.datesubject {
height: 81px;
margin: -81px auto 19px auto;
}
.date, .replytoposter {
padding: 0px 0px 10px 0px;
font-size: 10px;
}
.subject, .replytosubject {
font-size: 16px;
font-weight: bold;
}
.entry {
text-align: left;
}
.entry_text {
}
.ljtags, .currents {
margin-top: 16px;
font-size: 11px;
font-variant: small-caps;
}
.currents strong {
font-weight: normal;
}
.currentmood, .currentmusic, .currentlocation, .currentgroups {
}
.comments {
margin-top: 19px;
padding: 5px 8px;
text-align: center;
text-transform: uppercase;
letter-spacing: 3px;
background: url(http://fatfrog.info/Ma/A/layout/musilhouette/75percent.png);
}
.separator {
display: none;
}
/* ------- COMMENTS ------- */
.lj-view-entry .subcontent {
background: #A0C5C9 url(http://fatfrog.info/Ma/A/layout/musilhouette/bg-dark.png) center -200px fixed no-repeat;
}
.lj-view-entry .pagewide-wrapper + .wrapper .subcontent {
background-position: center -90px;
}
.skiplinks {
padding: 20px 0px 0px 0px;
text-align: center;
background: #A0C5C9 url(http://fatfrog.info/Ma/A/layout/musilhouette/bg-dark.png) center -200px fixed no-repeat;
}
.pagewide-wrapper + .wrapper .skiplinks {
background: #A0C5C9 url(http://fatfrog.info/Ma/A/layout/musilhouette/bg-dark.png) center -90px fixed no-repeat;
}
.box {
padding: 20px 0px 0px 0px;
}
.box center {
margin-bottom: 20px;
}
.box + .box {
padding: 0px;
text-align: center;
}
.commentbox {
margin: 0px 0px 20px 0px;
padding: 0px;
}
.datesubjectcomment {
height: 92px;
padding: 4px 8px;
font-size: 10px;
background: url(http://fatfrog.info/Ma/A/layout/musilhouette/75percent.png);
}
.datesubjectcomment .ljuser {
display: block;
}
.datesubjectcomment .ljuser b {
font-weight: normal;
}
.datesubjectcomment br {
display: none;
}
.datesubjectcomment strong {
display: block;
padding-top: 10px;
font-size: 16px;
}
.userpiccomment {
float: left;
margin: -4px 10px 0px -8px;
}
.commentreply {
margin: 17px 0px 13px 0px;
}
.commentreply + div {
padding: 0px;
text-align: left!important;
font-size: 12px!important;
text-transform: uppercase;
letter-spacing: 3px;
}
.commentreply + div div {
padding: 0px!important;
text-align: left!important;
}
.commentreply + div div img {
width: 18px;
height: 18px;
vertical-align: baseline;
}
.commentboxpartial {
margin: 0px 0px 20px 0px;
padding: 5px 8px;
background: url(http://fatfrog.info/Ma/A/layout/musilhouette/75percent.png);
}
#qrform {
text-align: left;
text-transform: none;
letter-spacing: normal;
}
#qrform table {
border: none!important;
}
.commentbox #qrform {
}
#content input[type='text'], #content input.textbox, #content textarea {
padding: 2px;
color: #674B76;
background: url(http://fatfrog.info/Ma/A/layout/musilhouette/75percent.png);
}
#content input[type='submit'], #content input[type='button'] {
font-size: 12px;
font-family: 'Montserrat', "Verdana", sans-serif;
}
textarea.textbox {
width: 95% !important;
}
.lj-view-reply .subcontent + .separator + .clear + div, .lj-view-reply .subcontent + .clear + div {
display: none;
}
.lj-view-reply .subcontent {
background: #A0C5C9 url(http://fatfrog.info/Ma/A/layout/musilhouette/bg-dark.png) center -200px fixed no-repeat;
}
.lj-view-reply .pagewide-wrapper + .wrapper .subcontent {
background-position: center -90px;
}
#postform {
margin-bottom: 20px;
}
/* ------- CALENDAR ------- */
.lj-view-archive #maincontent {
padding: 20px 0px;
text-align: center;
background: #A0C5C9 url(http://fatfrog.info/Ma/A/layout/musilhouette/bg-dark.png) center -200px fixed no-repeat;
}
.lj-view-archive .pagewide-wrapper + .wrapper #maincontent {
background-position: center -90px;
}
.lj-view-archive #maincontent br {
display: none;
}
ul.year {
width: 890px;
margin: 0px auto;
padding: 5px 8px;
text-align: center;
background: url(http://fatfrog.info/Ma/A/layout/musilhouette/75percent.png);
}
ul.year li {
display: inline;
}
ul.year li + li {
padding-left: 8px;
}
.active {
font-size: 16px;
vertical-align: middle;
}
table.yeartable {
margin: 20px auto 0px auto;
}
td.yearmonth {
font-size: 16px;
border-style: none;
}
td.yearmonth a {
font-size: 10px;
}
table.yeartable td.yearday {
padding: 5px 8px;
font-size: 16px;
text-align: center;
background: url(http://fatfrog.info/Ma/A/layout/musilhouette/75percent.png);
}
table.yeartable td.yeardate {
padding: 0px;
}
table.yeartable td.yeardate a {
display: block;
}
td.yeardate div {
padding: 5px 8px 0px 8px;
text-align: center;
background: url(http://fatfrog.info/Ma/A/layout/musilhouette/75percent.png);
}
td.yeardate div + div {
padding: 0px 8px 5px 8px;
background: url(http://fatfrog.info/Ma/A/layout/musilhouette/75percent.png);
}
.lj-view-month #maincontent {
padding: 20px 0px 0px 0px;
text-align: center;
background: #A0C5C9 url(http://fatfrog.info/Ma/A/layout/musilhouette/bg-dark.png) center -200px fixed no-repeat;
}
.lj-view-month .pagewide-wrapper + .wrapper #maincontent {
background-position: center -90px;
}
.lj-view-month #maincontent form {
padding: 5px 0px;
text-align: center;
background: url(http://fatfrog.info/Ma/A/layout/musilhouette/75percent.png);
}
.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: 16px;
}
.lj-view-month dt b {
font-weight: normal;
}
.lj-view-month dd {
margin: 0px;
font-size: 12px;
}
.lj-view-month dd + dt {
margin-top: 20px;
}
.lj-view-day #maincontent > div:nth-of-type(2n-1) {
background: #A0C5C9 url(http://fatfrog.info/Ma/A/layout/musilhouette/bg-dark.png) center -200px fixed no-repeat;
}
.lj-view-day .pagewide-wrapper + .wrapper #maincontent > div:nth-of-type(4n-2) {
background: #A0C5C9 url(http://fatfrog.info/Ma/A/layout/musilhouette/bg-dark.png) center -90px fixed no-repeat;
}
.lj-view-day .skiplinks {
padding: 20px 0px;
font-size: 0px;
}
.lj-view-day .skiplinks a {
padding: 0px 8px;
font-size: 12px;
font-weight: bold;
text-transform: uppercase;
letter-spacing: 3px;
}
/* ------- TAGS ------- */
.lj-view-tags #maincontent {
padding: 20px 0px;
text-align: center;
background: #A0C5C9 url(http://fatfrog.info/Ma/A/layout/musilhouette/bg-dark.png) center -200px fixed no-repeat;
}
.lj-view-tags .pagewide-wrapper + .wrapper #maincontent {
background-position: center -90px;
}
.lj-view-tags h2 {
width: 884px;
margin: 0px auto;
padding: 5px 8px;
text-align: left;
font-size: 16px;
font-weight: normal;
background: url(http://fatfrog.info/Ma/A/layout/musilhouette/75percent.png)!important;
}
ul.ljtaglist {
padding: 0px;
list-style: none;
text-align: left;
}
ul.ljtaglist li {
padding: 5px 0px 0px 0px;
}
/* ------- in case of mysterious gaps ------- */
.pagewide-wrapper div div[style*="width"], #sidebar > div[class*="after-first-widget"] div div div div, #maincontent > div[style*="margin"] div div {
background: url(http://fatfrog.info/Ma/A/layout/blockedad.png);
;){kind=link}
}
#maincontent > div[style*="margin"] div div + div {
background: none;
}
This profile layout has a fixed width, changing the width would somewhat mess up the layout.
Because I can only use HMTL here and you can't position background images with that, the blue background is only color, no picture.
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/musilhouette/profile-header.png"> | ||
| TEXT 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
To add a blue part to the table, insert
TEXT GOES HERE
before .
For a yellow one, insert
TEXT GOES HERE