Fuesch's graphics & layouts - Seriousface Holmes and Dr. Watson layout & profile layout

Previous | Memories | Tell Someone | Next

24 August 2011 @ 02:22 pm

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>`

Tags: - layouts, sherlock

29 comments | Leave a comment

( Post a new comment )

wintersjuly.livejournal.com on August 24th, 2011 01:31 pm (UTC)

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

(Reply) (Thread) (Link)

fuesch on August 24th, 2011 01:46 pm (UTC)

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).

(Reply) (Parent) (Link)

lusaly.livejournal.com on August 24th, 2011 03:40 pm (UTC)

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

(Reply) (Link)

madrona-8.livejournal.com on August 24th, 2011 03:58 pm (UTC)

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 04:11 pm (UTC)

(Reply) (Link)

abyssauditore.livejournal.com on August 24th, 2011 05:02 pm (UTC)

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

(Reply) (Link)

ascendant-angel.livejournal.com on August 24th, 2011 08:57 pm (UTC)

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

(Reply) (Link)

ai-chi.livejournal.com on August 24th, 2011 09:48 pm (UTC)

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 ^_^

(Reply) (Link)

gabsy.livejournal.com on August 25th, 2011 01:25 am (UTC)

I love it, thanks so much!!

(Reply) (Link)

call-me-ishmael.livejournal.com on August 29th, 2011 02:44 am (UTC)

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

(Reply) (Link)

katrinavtassell.livejournal.com on September 3rd, 2011 12:18 pm (UTC)

My very first layout! Thank you!

(Reply) (Link)

tubby2747.livejournal.com on September 10th, 2011 09:57 am (UTC)

I really love this layout <3
awesome work :D

(Reply) (Thread) (Link)

fuesch on September 10th, 2011 06:05 pm (UTC)

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

(Reply) (Parent) (Thread) (Link)

tubby2747.livejournal.com on September 11th, 2011 06:07 am (UTC)

I am, it is really awesome :D

(Reply) (Parent) (Link)

bluetooth16.livejournal.com on January 11th, 2012 05:51 pm (UTC)

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

sherbbc_cosplay

(Reply) (Link)

dwell-ondreams.livejournal.com on January 19th, 2012 03:41 am (UTC)

This is amazing. Using, crediting. GORGEOUS.

(Reply) (Link)

call-me-ps.livejournal.com on January 29th, 2012 06:59 am (UTC)

LOVE IT! Thank you so much. :-)

(Reply) (Link)

sailorrabbit.livejournal.com on January 29th, 2012 09:14 pm (UTC)

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

(Reply) (Thread) (Link)

fuesch on January 29th, 2012 09:37 pm (UTC)

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.

(Reply) (Parent) (Thread) (Link)

sailorrabbit.livejournal.com on January 29th, 2012 09:47 pm (UTC)

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

(Reply) (Parent) (Link)

callmeri on February 5th, 2012 02:41 am (UTC)

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

(Reply) (Link)

grypas.livejournal.com on February 13th, 2012 10:40 am (UTC)
Thank you!!!!!!

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

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

(Reply) (Link)

mamasboo.livejournal.com on March 7th, 2012 11:40 pm (UTC)

Thank you so much this is awesome!!!

(Reply) (Link)

sam80853.livejournal.com on May 6th, 2012 09:15 pm (UTC)

Using it, thanks!

(Reply) (Link)

aloja.livejournal.com on July 28th, 2012 09:40 pm (UTC)

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.

(Reply) (Link)

kurainokoori.livejournal.com on September 23rd, 2012 01:52 pm (UTC)

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

(Reply) (Link)

rainy-etude.livejournal.com on May 20th, 2013 02:47 pm (UTC)

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

(Reply) (Link)

london_fan: Sherlock/John (Christmas is cancelled)

london_fan on April 3rd, 2015 04:06 pm (UTC)

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.

(Reply) (Thread) (Link)

fuesch on April 6th, 2015 12:26 am (UTC)

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!

(Reply) (Parent) (Thread) (Link)

london_fan on April 6th, 2015 01:29 pm (UTC)

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! :)

(Reply) (Parent) (Link)