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

House Rules

~~Driver picks the music, shotgun shuts his cakehole.~~

Everything is snaggable - no need to ask.

Please credit.
<lj user=fuesch>

Comments are great.

Nominations are awesome.

If you find a typo, please let me know!

If you'd like a graphic customized, just ask - please don't edit it yourself.

I don't mind if you adjust layouts a bit.

Got a question? Don't be afraid to ask. But keep it on topic.

If your question/comment doesn't fit into any entry, please send me a message.

Tags

Page Summary

abyssauditore.livejournal.com — (no subject) [+0]

October 2025

Previous | Memories | Tell Someone | Next

fuesch

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 )

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

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

(Reply) (Link)