fuesch | Seriousface Holmes and Dr. Watson layout & profile layout

I couldn't stand not having a Sherlock layout yet, so I made one instead of finishing old layouts.

Edit (April 7, 2015): improved the CSS (no big changes in how the layout looks).
Edit (May 13, 2015): Oops, had forgotten something.

Seriousface Holmes and Dr. Watson

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 6, Google Chrome 9 and Internet Explorer 8. (For some reason the layout doesn't display correctly in the livepreview entries page, but it does work on LJ.)

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

/* Seriousface Holmes and Dr. Watson
http://fuesch.livejournal.com/25648.html */

* {
margin: 0;
}

html, body {
height: 100%;
}

body {
margin: 0px;
background: #D2C5AD url(http://fatfrog.info/Ma/A/layout/seriousfaceandwatson/bg.jpg) top center repeat-y;
text-align: center;
color: #3B2821;
font-family: "Century Gothic", Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
}

body > div[style*="width"] {
margin: 0px auto!important;
padding: 0px!important;
background-color: transparent!important;
background-image: url(http://fatfrog.info/Ma/A/layout/seriousfaceandwatson/brown7percent.png);
border: none!important;
}

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

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

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

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

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

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

blockquote {
padding: 1px 0px 0px 14px;
background: url(http://fatfrog.info/Ma/A/layout/seriousfaceandwatson/quotes.png) no-repeat left top;
}

q {
font-style: italic;
}

q i {
font-style: normal;
}

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

.clear {
display: none;
}

.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
width: 976px;
margin: 0px auto;
background: url(http://fatfrog.info/Ma/A/layout/seriousfaceandwatson/footer.png) bottom no-repeat;
}

#content {
margin: 0px auto;
width: 976px;
padding-bottom: 199px;
text-align: left;
background: url(http://fatfrog.info/Ma/A/layout/seriousfaceandwatson/header.jpg) top center no-repeat;
}

#header {
height: 158px;
margin: 0px;
padding: 40px 0px 0px 0px;
text-align: left;
font-size: 12px;
font-weight: bold;
text-transform: uppercase;
}

.navheader {
width: 285px;
float: left;
text-align: right;
}

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

ul.navheader li {
display: inline;
margin: 0px;
padding: 3px 5px;
background: url(http://fatfrog.info/Ma/A/layout/seriousfaceandwatson/brown7percent.png);
line-height: 28px;
}

div#header a, div#header a:link, div#header a:visited {
color: #8C683B;
}

div#header a:hover {
color: #3B2821;
}

div#header a:active {
color: #8C683B;
}

.title {
margin: 0px 3px 0px 160px;
padding: 3px 5px;
background: url(http://fatfrog.info/Ma/A/layout/seriousfaceandwatson/brown7percent.png);
display: inline;
line-height: 28px;
}

.subtitle {
margin: 0px;
padding: 3px 5px;
background: url(http://fatfrog.info/Ma/A/layout/seriousfaceandwatson/brown7percent.png);
display: inline;
color: #8C683B;
line-height: 28px;
}

#sidebar {
display: inline-block;
width: 240px;
padding: 30px;
font-size: 12px;
text-align: left;
vertical-align: top;
}

#sidebar > div[style*="margin"] {
width: 190px!important;
margin: -10px auto 10px auto!important;
text-align: center;
background: url(http://fatfrog.info/Ma/A/layout/seriousfaceandwatson/brown7percent.png);
}

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

.sbarbody2 {
margin: 0px 0px 15px 0px;
padding: 5px 5px 0px 5px;
background: url(http://fatfrog.info/Ma/A/layout/seriousfaceandwatson/sbartitleshadow.png) top no-repeat;
}

li.sbartitle {
margin: 0px 0px 0px 0px;
padding: 10px 15px;
background: url(http://fatfrog.info/Ma/A/layout/seriousfaceandwatson/sbartitle.png);
list-style: none;
color: #71625D;
font-weight: bold;
text-transform: uppercase;
}

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

ul.sbarlist + .sbarlist {
margin: 0px 0px 15px 0px;
padding: 5px 0px 0px 0px;
background: url(http://fatfrog.info/Ma/A/layout/seriousfaceandwatson/sbartitleshadow.png) top no-repeat;
list-style: none;
}

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

li.sbaritem {
margin: 0px;
padding: 3px 5px 3px 15px;
background: url(http://fatfrog.info/Ma/A/layout/seriousfaceandwatson/listitem.png) 5px 7px no-repeat;
}

.defaultuserpic {
margin-bottom: 20px;
text-align: center;
}

.defaultuserpic img {
padding: 10px;
background: url(http://fatfrog.info/Ma/A/layout/seriousfaceandwatson/sbartitle.png) center;
}

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

.sbarcalendar {
padding: 3px 5px;
text-align: center;
}

.sbarcalendarposts {
padding: 3px 5px;
text-align: center;
font-weight: bold;
background: url(http://fatfrog.info/Ma/A/layout/seriousfaceandwatson/brown7percent.png);
}

#maincontent {
display: inline-block;
width: 490px;
margin-left: 123px;
padding: 30px 0px 30px 30px;
font-size: 12px;
color: #201108;
text-align: left;
vertical-align: top;
}

#maincontent > div[style*="margin"] {
margin: 18px auto -18px auto!important;
background: url(http://fatfrog.info/Ma/A/layout/seriousfaceandwatson/brown7percent.png);
}

#maincontent > div[style*="margin"] .allbanners-close {
text-align: left!important;
}

.lj-view-recent #footer, .lj-view-friends #footer {
height: 109px;
margin-bottom: -199px;
padding: 90px 295px 0px 235px;
text-align: right;
font-size: 12px;
font-weight: bold;
line-height: 24px;
text-transform: uppercase;
z-index: 100;
clear: both;
}

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

ul.navfooter li {
display: inline;
margin: 0px;
padding: 3px 5px;
background: url(http://fatfrog.info/Ma/A/layout/seriousfaceandwatson/brown7percent.png);
}

.lj-view-recent #footer a, .lj-view-friends #footer a, .lj-view-recent #footer a:link, .lj-view-friends #footer a:link, .lj-view-recent #footer a:visited, .lj-view-friends #footer a:visited {
color: #8C683B;
}

.lj-view-recent #footer a:hover, .lj-view-friends #footer a:hover {
color: #3B2821;
}

.lj-view-recent #footer a:active, .lj-view-friends #footer a:active {
color: #8C683B;
}

.clearfoot {
display: none;
clear: both;
}

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

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

.clear + a + .subcontent {
margin-top: 50px;
}

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

.userpicfriends {
margin: 10px;
position: relative;
float: right;
text-align: right;
font-size: 10px;
background: none!important;
z-index: 15;
}

.userpicfriends font {
color: #666600;
}

.datesubject {
padding: 0px 0px 8px 0px;
background: url(http://fatfrog.info/Ma/A/layout/seriousfaceandwatson/datesubject.png) bottom center no-repeat;
}

.date {
padding: 3px 7px;
background: url(http://fatfrog.info/Ma/A/layout/seriousfaceandwatson/subject.png);
text-align: right;
color: #8C683B;
font-size: 10px;
line-height: 200%;
}

.subject {
margin: 0px;
padding: 1px 15px 10px 15px;
background: url(http://fatfrog.info/Ma/A/layout/seriousfaceandwatson/subject.png);
color: #71625D;
font-weight: bold;
text-transform: uppercase;
}

.subject a, .subject a:link, .subject a:visited {
color: #71625D;
}

.subject a:hover, .subject a:active {
color: #3B2821;
}

.entry {
margin: 0px;
padding: 0px 5px;
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;
padding: 0px 0px 0px 10px;
font-size: 10px;
text-transform: uppercase;
background: url(http://fatfrog.info/Ma/A/layout/seriousfaceandwatson/listitem.png) 0px 3px no-repeat;
}

.currents {
font-size: 10px;
text-transform: uppercase;
}

.currentmood, .currentmusic, .currentlocation {
padding: 0px 0px 0px 10px;
background: url(http://fatfrog.info/Ma/A/layout/seriousfaceandwatson/listitem.png) 0px 3px no-repeat;
}

.comments {
margin: 15px -5px 0px -5px;
padding: 4px 5px 0px 0px;
text-align: right;
font-size: 4px;
color: #C5B496;
text-transform: uppercase;
font-weight: bold;
background: url(http://fatfrog.info/Ma/A/layout/seriousfaceandwatson/datesubject.png) top center no-repeat;
}

.comments a {
padding: 3px 5px;
font-size: 12px;
background: url(http://fatfrog.info/Ma/A/layout/seriousfaceandwatson/brown7percent.png);
}

.separator {
display: none;
}

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

.lj-view-entry #footer + .separator + .clear {
display: none;
}

.lj-view-entry #footer {
text-align: center;
}

.box {
margin-top: 35px;
}

.skiplinks {
margin-bottom: 15px;
text-align: center;
color: #C7B69B;
font-size: 4px;
text-transform: uppercase;
}

.skiplinks a {
padding: 3px 5px;
font-size: 12px;
font-weight: bold;
background: url(http://fatfrog.info/Ma/A/layout/seriousfaceandwatson/brown7percent.png);
}

.commentbox {
margin: 10px 0px;
padding: 0px;
}

.datesubjectcomment {
padding: 10px;
background: url(http://fatfrog.info/Ma/A/layout/seriousfaceandwatson/subject.png) right;
color: #8C683B;
font-size: 10px;
}

.datesubjectcomment strong {
color: #71625D;
font-weight: bold;
text-transform: uppercase;
}

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

.commentreply {
margin: 0px;
padding: 5px 0px;
position: relative;
background: url(http://fatfrog.info/Ma/A/layout/seriousfaceandwatson/datesubject.png) right top no-repeat;
}

.commentreply + div {
padding-top: 5px;
text-align: right!important;
background: url(http://fatfrog.info/Ma/A/layout/seriousfaceandwatson/datesubject.png) right bottom no-repeat;
}

.commentboxpartial {
margin: 10px 0px 18px 0px;
padding: 10px;
color: #8C683B;
font-size: 10px;
background: url(http://fatfrog.info/Ma/A/layout/seriousfaceandwatson/subject.png) right;
}

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

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

.replytoposter {
padding: 3px 7px;
background: url(http://fatfrog.info/Ma/A/layout/seriousfaceandwatson/subject.png);
text-align: right;
color: #8C683B;
font-size: 10px;
}

.replytosubject {
margin: 0px;
padding: 1px 15px 10px 15px;
background: url(http://fatfrog.info/Ma/A/layout/seriousfaceandwatson/subject.png);
color: #71625D;
font-weight: bold;
text-transform: uppercase;
}

input, textarea {
background: url(http://fatfrog.info/Ma/A/layout/seriousfaceandwatson/subject.png) center;
}

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

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

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

ul.year li {
display: inline;
padding: 3px 5px;
font-weight: bold;
text-transform: uppercase;
line-height: 28px;
background: url(http://fatfrog.info/Ma/A/layout/seriousfaceandwatson/brown7percent.png);
}

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

td.yearmonth {
font-size: 16px;
letter-spacing: 1px;
border-style: none;
}

td.yearmonth a {
font-size: 12px;
letter-spacing: normal;
border-style: none;
}

table.yeartable td.yearday {
padding: 5px;
text-align: center;
color: #71625D;
font-weight: bold;
text-transform: uppercase;
background: url(http://fatfrog.info/Ma/A/layout/seriousfaceandwatson/subject.png) center;
}

table.yeartable td.yeardate {
padding: 2px 4px;
border: 1px solid #BBA681;
}

table.yeartable td.yeardate > div + div {
margin: 0px -4px -2px -4px;
font-size: 16px;
font-weight: bold;
background: url(http://fatfrog.info/Ma/A/layout/seriousfaceandwatson/brown7percent.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 #maincontent form {
margin-bottom: 5px;
}

.lj-view-month dt {
margin: 10px 0px 0px 0px;
padding: 0px 0px 8px 7px;
background: url(http://fatfrog.info/Ma/A/layout/seriousfaceandwatson/datesubject.png) bottom no-repeat;
}

.lj-view-month dd {
padding: 0px 0px 2px 10px;
background: url(http://fatfrog.info/Ma/A/layout/seriousfaceandwatson/listitem.png) left 5px no-repeat;
}

.lj-view-day .clear + .clear + .skiplinks {
margin-top: 50px;
}

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

.lj-view-tags h2 {
padding: 0px 0px 10px 40px;
font-size: 16px;
background: url(http://fatfrog.info/Ma/A/layout/seriousfaceandwatson/datesubject.png) bottom no-repeat;
}

.ljtaglist {
margin-top: 0px;
}

ul.ljtaglist {
list-style: none;
}

ul.ljtaglist li {
margin-bottom: 5px;
padding: 0px 0px 2px 12px;
background: url(http://fatfrog.info/Ma/A/layout/seriousfaceandwatson/listitem.png) left 5px no-repeat;
}

/* ------- EXTRAS ------- */

.caption img {
margin-bottom: 2px;
padding: 5px;
background: url(http://fatfrog.info/Ma/A/layout/seriousfaceandwatson/brown7percent.png);
border: 1px solid #3B2821;
}

.caption {
margin: 0px auto;
text-align: left;
font-size: 10px;
}

.captionless {
margin: 0px auto;
padding: 5px;
background: url(http://fatfrog.info/Ma/A/layout/seriousfaceandwatson/brown7percent.png);
border: 1px solid #3B2821;
}

.spoiler {
padding: 2px;
color: #8C683B!important;
background: #8C683B!important;
}

.spoiler a, .spoiler a:link, .spoiler a:active, .spoiler a:visited, .spoiler a:hover, .spoiler a:active {
color: #8C683B!important;
text-decoration: underline;
}

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.


	PROFILE LAYOUT You can't make this layout wider without messing it up, but you can make it narrower. Look for `width="490"` and change the number, subtract the same number of pixels from `width="706"`. You can use sbartitleshadow.png (the shorter one) or datesubject.png as a divider with <center><img src="http://fatfrog.info/Ma/A/layout/seriousfaceandwatson/sbartitleshadow.png" /></center> or <img src="http://fatfrog.info/Ma/A/layout/seriousfaceandwatson/datesubject.png" /> 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="706" cellpadding="0" cellspacing="0" border="0"> <tr><td colspan="3" height="142" background="http://fatfrog.info/Ma/A/layout/seriousfaceandwatson/profile-top.jpg" /></td></tr> <tr><td width="186" height="233" background="http://fatfrog.info/Ma/A/layout/seriousfaceandwatson/profile-topleft.jpg" /></td> <td width="490" rowspan="2" background="http://fatfrog.info/Ma/A/layout/seriousfaceandwatson/profile-bg.jpg" valign="top"><font face="Century Gothic, Verdana, Arial, Helvetica, sans-serif" size="2" color="#3B2821"><b>HEADLINE (IF YOU WANT ONE)</b><p> TEXT GOES HERE <p> </font></td><td width="30" rowspan="2" background="http://fatfrog.info/Ma/A/layout/seriousfaceandwatson/profile-right.jpg"> </td></tr> <tr><td background="http://fatfrog.info/Ma/A/layout/seriousfaceandwatson/profile-left.jpg"> </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="#666600">LINK TEXT</font></a>`

Flat | Top-Level Comments Only

it's a shame i won't be using it (the cream background and small green font really lowers readability for me) but this is a wonderful layout

Thanks! :o)

This is a layout where changing the font size wouldn't screw with the layout. You could easily change the font size to something bigger than 12px (Or change the font to something not as thin as Century Gothic).

Oh that's so great!
Really love these, thank you for share to us :)

Oh well, I better use this then. I'll probably change some font colors but what a terrific layout. Mine is getting old already.
EDIT: I take it back, there is plenty of contrast for me...It's great!

Edited 2011-08-24 16:11 (UTC)

Thank you!
I'll be using this! :}

That is gorgeous, I have now changed my layout to this and can't ever see me changing it to anything else. Thank you.

This is really really pretty! ♥
Meming this for later use because I recently made a fancy banner myself and I don't find it annoying yet, so *lol*

But I really like your style, very unique and well-done ^_^

I love it, thanks so much!!

Whoa, this is one awesome layout. Snagged it for my writing journal.

My very first layout! Thank you!

I really love this layout <3
awesome work :D

Ooh, you here! And you're using the layout! :oD

I am, it is really awesome :D

Thanks so much for this layout! I'm using it for my new Sherlock community

sherbbc_cosplay

This is amazing. Using, crediting. GORGEOUS.

LOVE IT! Thank you so much. :-)

this layout is amazing and totally hitting all my sherlock kinks right now...i have a little problem though, nothing is showing up in my sidebar apart from my main icon and my calander...?Is it something im doing wrong? Thanks a bunch xx

I hope it's that on the Customize Journal Style: Sidebar page these two are the only things chosen to display - otherwise I have no idea what could cause it.

ah that has fixed it, lol, my own stupid fault there.Thank you so much for getting back to me, loving the layout!!!!

I just discovered this layout and couldn't resist using it immediately. You've done a beautiful job, thank you so much for sharing it! :-D

Thank you!!!!!!!!!!!!!!!!
I don't know how to credit you...

I'll try the userhead too but I'm hopeless...

Thank you so much this is awesome!!!

Using it, thanks!

I am absolutely loving your layouts, I want them all! I think I'm going to have to start a rota changing my layout every month or so.

Oh, I love this. I'm snagging it for my journal - will credit!

This layout is just pure brilliant! Using it already ^^ Thank you so much!!

Hi there, I've set up this lovely layout for a friend ages ago and we both really like it. Sadly one of the recent code pushes by LJ screwed up the footer on the comment page. Since I saw that you answered a related question last night at

s2flexisquares, I thought I'd let you know here. I'm a bit stumped as to how to fix this with the picture here. Well, basically that's what it looks like now.

Oh, LJ. Why can't they just make announcements about HTML changes?! But at least it's easy to fix and I won't have to change it back, if LJ changes the HTML back. And I've been wanting to polish my CSSes for a while, so I guess it's time to start!

I know, right? I've set up various layouts for friends over the years and every time LJ changes things around like this, I get quite busy fixing their layouts. Well, I think I figured out how to fix this one for now. Good Luck with polishing all your code. You've made a lot of wonderful layouts! :)

Seriousface Holmes and Dr. Watson layout & profile layout

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject

Thank you!!!!!!

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject