The 11 Doctors layout

[fuesch]

Since it's just one week until the 50th anniversary, I thought I’d make this month's layout a Doctor Who one. With ALL the Doctors! Except of course the one the Doctor himself ignores.

Holy shit, finding fitting pictures in a limited space of time was hard! And then finding out who to put where. Some Doctors make more then one appearance, usually because they have a place that's not guaranteed to be shown in every journal. Say your sidebar doesn't display your default userpic, then there's still the possibility for Five (amusedly holding a stick of celery, because I couldn't find something more on topic) to turn up if you have your website in the navheader.

[Who is where]Fantastic Doctors and where to find them:
OneCurrent Music (entry)Page Summary (sidebar)

TwoEntries (navheader)

ThreeProfile (navheader)

FourCurrent Mood (entry)Calendar (sidebar)Linklist (sidebar)

Fiveextra link in the navheaderholder of the default icon (sidebar)

Sixfishing for the icon (entry)

SevenFriends (navheader)

Eightdate/subject (entry)Tags (sidebar)

NineCustom Friends Group (entry)Blurb (sidebar)

TenArchive (navheader)Comments (entry)

Elevenblockquote (entry)Tags (entry)Current Location (entry)

The 11 Doctors

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

Widths are flexible.

The image for the extra link in the navheader won't be Five, if the extra link ends with "livejournal.com". But that's fixable. Let me know if you need help.

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

/* The 11 Doctors
http://fuesch.livejournal.com/41595.html */

body {
margin: 0px;
padding: 0px;
text-align: center;
font-family: "Verdana", sans-serif;
color: #90A2B7;
font-size: 12px;
background: #EFEFEF url(http://fatfrog.info/Ma/A/layout/the11doctors/bg.png) center center;
}

body > div[style*="width"] {
width: 930px!important;
margin: 0px auto!important;
padding: 0px!important;
background: none!important;
border: none!important;
border-bottom: 1px solid #D8DFE2!important;
}

body > #content-outer + div[style*="width"] {
border-top: 1px solid #D8DFE2!important;
}

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

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

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

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

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

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

blockquote {
padding: 60px 5px 0px 0px;
background: url(http://fatfrog.info/Ma/A/layout/the11doctors/blockquote.png) top right no-repeat;
}

q {
font-style: italic;
}

q i {
font-style: normal;
}

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

.clear {
display: none;
}

#content {
width: 900px;
margin: 0px auto;
padding: 30px 15px;
text-align: left;
background: url(http://fatfrog.info/Ma/A/layout/the11doctors/content.png) center center;
border-left: 1px solid #D8DFE2;
border-right: 1px solid #D8DFE2;
}

#header {
left: 0px;
margin: 0px -30px 30px -30px;
padding: 10px;
text-align: center;
background: #FFFFFF;
border: 1px solid #D8DFE2;
}

ul.navheader {
padding: 0px 30px 5px 30px;
list-style: none;
font-family: Arial, Helvetica, sans-serif;
font-size: 0px;
font-weight: bold;
text-transform: uppercase;
letter-spacing: 2px;
}

ul.navheader li, ul.navheader li.view {
display: inline-block;
width: 19%;
padding: 0px;
font-size: 9px;
}

ul.navheader li + li {
margin-left: -2px;
}

ul.navheader a {
display: block;
margin: 0px auto;
width: 98px;
padding: 75px 0px 0px 2px;
color: #D8DFE2;
background: url(http://fatfrog.info/Ma/A/layout/the11doctors/nav-extralink.png) top no-repeat;
}

.view {
padding: 75px 0px 0px 2px!important;
}

ul.navheader li a[href$="livejournal.com"], .lj-view-recent .view {
background: url(http://fatfrog.info/Ma/A/layout/the11doctors/nav-entries.png) top no-repeat;
}

ul.navheader a[href$="calendar"], .lj-view-archive .view {
background: url(http://fatfrog.info/Ma/A/layout/the11doctors/nav-archive.png) top no-repeat;
}

ul.navheader a[href$="friends"], .lj-view-friends .view {
background: url(http://fatfrog.info/Ma/A/layout/the11doctors/nav-friends.png) top no-repeat;
}

ul.navheader a[href$="profile"] {
background: url(http://fatfrog.info/Ma/A/layout/the11doctors/nav-profile.png) top no-repeat;
}

ul.navheader a:hover {
color: #517098;
text-decoration: none;
}

.title {
display: table;
margin: 0px auto;
padding: 0px 5px;
font-size: 18px;
border-bottom: 1px solid #D8DFE2;
}

.subtitle {
display: table;
margin: -1px auto 0px auto;
padding: 0px 5px;
border-top: 1px solid #D8DFE2;
}

#sidebar {
position: relative;
display: inline-block;
width: 200px;
right: -696px;
text-align: left;
vertical-align: top;
}

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

.sbarbody {
position: relative;
margin: 0px 0px 30px 0px;
background: #FFFFFF;
z-index: 5;
}

.sbarbody2 {
margin: -30px 0px 30px 0px;
padding: 10px;
background: #FFFFFF;
border: 1px solid #D8DFE2;
border-top: none;
}

ul.sbarlist {
margin: 0px;
padding: 0px;
list-style: none;
border: 1px solid #D8DFE2;
border-bottom: none;
}

ul.sbarlist + .sbarlist {
margin: 0px 0px 15px 0px;
padding: 0px 10px 0px 0px;
list-style: none;
border: 1px solid #D8DFE2;
border-top: none;
}

li.sbartitle {
height: 30px;
margin: 0px 0px 0px 10px;
padding: 20px 100px 0px 0px;
text-align: right;
font-family: Arial, Helvetica, sans-serif;
font-size: 9px;
font-weight: bold;
text-transform: uppercase;
letter-spacing: 1px;
border-bottom: 1px solid #D8DFE2;
background: url(http://fatfrog.info/Ma/A/layout/the11doctors/sbar-blurb.png) right no-repeat;
}

#sidebar_calendar li.sbartitle {
background: url(http://fatfrog.info/Ma/A/layout/the11doctors/sbar-calendar.png) right no-repeat;
}

#sidebar_linklist li.sbartitle {
background: url(http://fatfrog.info/Ma/A/layout/the11doctors/sbar-links.png) right no-repeat;
}

#sidebar_tags li.sbartitle {
background: url(http://fatfrog.info/Ma/A/layout/the11doctors/sbar-tags.png) right no-repeat;
}

#sidebar_summary li.sbartitle {
background: url(http://fatfrog.info/Ma/A/layout/the11doctors/sbar-summary.png) right no-repeat;
}

li.sbaritem {
margin: 0px;
padding: 5px 0px 6px 10px;
}

li.sbaritem + li {
border-top: 1px solid #D8DFE2;
}

#sidebar_calendar ul.sbarlist + .sbarlist {
padding: 8px;
}

table.calendar {
margin: 0px auto;
}

.sbarcalendar {
padding: 2px;
text-align: center;
border: 1px solid #D8DFE2;
}

.sbarcalendarposts {
padding: 2px;
text-align: center;
border: 1px solid #517098;
}

.sbarcalendarposts a {
display: block;
}

.defaultuserpic {
position: relative;
height: 192px;
margin-bottom: -5px;
padding: 6px 1px 0px 0px;
text-align: center;
background: url(http://fatfrog.info/Ma/A/layout/the11doctors/sbar-userpic.png) center bottom no-repeat;
z-index: 15;
}

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

.tagcloud span {
vertical-align: middle;
}

#maincontent {
display: inline-block;
width: 681px;
margin-left: -204px;
text-align: left;
vertical-align: top;
}

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

#footer {
margin: 0px -30px;
padding: 10px 30px 8px 30px;
text-align: center;
background: #FFFFFF;
border: 1px solid #D8DFE2;
}

ul.navfooter{
padding: 0px;
font-family: Arial, Helvetica, sans-serif;
font-size: 0px;
font-weight: bold;
text-transform: uppercase;
letter-spacing: 2px;
}

ul.navfooter li {
display: inline-block;
width: 32%;
list-style: none;
padding: 0px;
font-size: 9px;
vertical-align: top;
}

ul.navfooter li + li {
margin-left: -2px;
}

ul.navfooter a {
display: block;
margin: 0px auto;
width: 98px;
padding: 75px 0px 0px 2px;
color: #D8DFE2;
background: url(http://fatfrog.info/Ma/A/layout/the11doctors/footer-earlier.png) top no-repeat;
}

.viewing {
padding: 37px 0px 0px 2px!important;
}

ul.navfooter li + li a {
background: url(http://fatfrog.info/Ma/A/layout/the11doctors/footer-later.png) top no-repeat;
}

ul.navfooter a:hover {
color: #517098;
text-decoration: none;
}

.clearfoot {
display: none;
}

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

#maincontent > a {
position: absolute;
display: block;
width: 74px;
height: 80px;
margin-top: -51px;
padding-left: 93px;
background: url(http://fatfrog.info/Ma/A/layout/the11doctors/iconholder.png) top right no-repeat;
z-index: 10;
}

.subcontent {
position: relative;
margin: 0px 0px 30px 120px;
padding: 0px 15px 0px 0px;
background: #FFFFFF;
border: 1px solid #D8DFE2;
z-index: 5;
}

.userpic {
float: left;
margin: 36px 0px 0px -112px;
-moz-transform: rotate(-15deg);
-webkit-transform: rotate(-15deg);
-o-transform: rotate(-15deg);
-ms-transform: rotate(-15deg);
transform: rotate(-15deg);
}

.userpicfriends {
float: left;
margin: 36px 0px 0px -109px;
padding-bottom: 2px;
text-align: center;
font-size: 10px;
background: none!important;
-moz-transform: rotate(-15deg);
-webkit-transform: rotate(-15deg);
-o-transform: rotate(-15deg);
-ms-transform: rotate(-15deg);
transform: rotate(-15deg);
}

.userpic img , .userpicfriends img {
background: #FFFFFF;
}

.userpicfriends font {
color: #517098;
}

.datesubject {
padding: 10px 0px 10px 100px;
background: url(http://fatfrog.info/Ma/A/layout/the11doctors/entry-date.png) top left no-repeat;
border-bottom: 1px solid #D8DFE2;
}

.date, .replytoposter {
padding-bottom: 1px;
font-family: Arial, Helvetica, sans-serif;
font-size: 9px;
font-weight: bold;
text-transform: uppercase;
letter-spacing: 1px;
}

.subject, .replytosubject {
font-size: 16px;
}

.entry {
padding: 12px 0px 12px 15px;
text-align: left;
}

.ljtags {
height: 45px;
margin-top: 12px;
padding: 5px 0px 0px 80px;
background: url(http://fatfrog.info/Ma/A/layout/the11doctors/entry-tags.png) top left no-repeat;
}

.currents {
margin-top: 12px;
}

.currents strong {
font-weight: normal;
}

.currents div {
min-height: 45px;
margin-top: 6px;
padding: 5px 0px 0px 80px;
}

.currentmood {
background: url(http://fatfrog.info/Ma/A/layout/the11doctors/entry-mood.png) top left no-repeat;
}

.currentmood img {
margin-top: -5px;
padding-right: 3px;
vertical-align: top;
}

.currentmusic {
background: url(http://fatfrog.info/Ma/A/layout/the11doctors/entry-music.png) top left no-repeat;
}

.currentlocation {
background: url(http://fatfrog.info/Ma/A/layout/the11doctors/entry-location.png) top left no-repeat;
}

.currentgroups {
background: url(http://fatfrog.info/Ma/A/layout/the11doctors/entry-groups.png) top left no-repeat;
}

.comments {
margin: 12px -15px -12px 0px;
height: 30px;
padding: 20px 100px 0px 0px;
text-align: right;
font-family: Arial, Helvetica, sans-serif;
font-size: 9px;
font-weight: bold;
text-transform: uppercase;
letter-spacing: 1px;
background: url(http://fatfrog.info/Ma/A/layout/the11doctors/entry-comments.png) right no-repeat;
border-top: 1px solid #D8DFE2;
}

.separator {
display: none;
}

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

.lj-view-entry #maincontent > a {
margin-top: -19px;
}

.skiplinks {
margin-left: 120px;
padding: 10px 10px 10px 50px;
text-align: left;
font-family: Arial, Helvetica, sans-serif;
font-size: 9px;
font-weight: bold;
text-transform: uppercase;
letter-spacing: 1px;
background: #FFFFFF;
border: 1px solid #D8DFE2;
border-bottom: none;
}

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

.box + .box center {
margin-top: 10px;
margin-bottom: 0px;
}

.commentbox {
margin: 0px 0px 30px 0px;
background: #FFFFFF;
border: 1px solid #D8DFE2;
}

.datesubjectcomment {
height: 40px;
margin: 0px 15px 0px 0px;
padding: 10px 10px 0px 60px;
font-family: Arial, Helvetica, sans-serif;
font-size: 9px;
font-weight: bold;
text-transform: uppercase;
letter-spacing: 1px;
border-bottom: 1px solid #D8DFE2;
}

.datesubjectcomment strong {
display: block;
padding-top: 1px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 16px;
text-transform: none;
letter-spacing: 0px;
font-weight: normal;
}

.datesubjectcomment strong + br {
display: none;
}

.userpiccomment {
float: left;
width: 50px;
height: 50px;
margin: -10px 10px 0px -60px;
background: #EFEFEF;
}

.commentreply {
position: relative;
margin: 15px;
}

.commentreply + div {
margin: 0px 0px 0px 15px;
padding: 10px 10px 8px 10px;
text-align: right!important;
font-family: Arial, Helvetica, sans-serif;
font-size: 9px;
font-weight: bold;
text-transform: uppercase;
letter-spacing: 1px;
border-top: 1px solid #D8DFE2;
}

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

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

.commentboxpartial {
margin: 0px 0px 30px 0px;
background: #FFFFFF;
padding: 10px;
font-family: Arial, Helvetica, sans-serif;
font-size: 9px;
font-weight: bold;
text-transform: uppercase;
letter-spacing: 1px;
border: 1px solid #D8DFE2;
}

#qrform {
margin: 0px 0px 30px 0px;
background: #FFFFFF;
border: 1px solid #D8DFE2;
}

#qrform table {
border: none!important;
}

.commentbox #qrform {
margin: 0px;
text-align: left;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: normal;
text-transform: none;
letter-spacing: 0px;
border: none;
}

input, textarea {
padding: 2px;
color: #517098;
background: url(http://fatfrog.info/Ma/A/layout/the11doctors/content.png);
border: 1px solid #D8DFE2;
box-shadow: inset 0px 3px 5px #D8DFE2;
}

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

input[type='submit'], input[type='button'] {
padding: 2px 3px;
vertical-align: bottom;
font-family: Arial, Helvetica, sans-serif;
font-size: 9px;
font-weight: bold;
text-transform: uppercase;
letter-spacing: 1px;
border-bottom: 2px solid #D8DFE2;
border-radius: 5px;
box-shadow: inset 0px 3px 5px #FFFFFF;
}

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

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

.lj-view-reply #maincontent > a {
background: none;
}

.lj-view-reply .skiplinks + .clear {
position: absolute;
display: block;
width: 74px;
height: 80px;
margin-top: -51px;
padding-left: 93px;
background: url(http://fatfrog.info/Ma/A/layout/the11doctors/iconholder.png) top right no-repeat;
z-index: 10;
}

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

#postform {
background: #FFFFFF;
border: 1px solid #D8DFE2;
}

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

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

ul.year {
margin: 0px 0px 30px 120px;
padding: 10px 7px;
background: #FFFFFF;
border: 1px solid #D8DFE2;
}

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

table.yeartable {
display: block;
margin: 0px 0px 30px 120px;
padding: 50px 10px 10px 10px;
background: #FFFFFF url(http://fatfrog.info/Ma/A/layout/the11doctors/sbar-calendar.png) right top no-repeat;
border: 1px solid #D8DFE2;
}

td.yearmonth {
position: absolute;
margin-top: -38px;
padding-top: 12px;
font-size: 16px;
}

td.yearmonth + td {
margin-top: -40px;
padding-top: 0px;
font-size: 9px;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
text-transform: uppercase;
letter-spacing: 1px;
}

table.yeartable td.yearday {
padding: 10px;
font-size: 16px;
text-align: center;
border: 1px solid #D8DFE2;
}

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

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

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

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

.lj-view-month #maincontent form {
margin: 0px 0px 30px 120px;
padding: 10px 7px;
background: #FFFFFF;
border: 1px solid #D8DFE2;
}

.lj-view-month #maincontent form br, .lj-view-month #maincontent form + br , .lj-view-month #maincontent form + br + br {
display: none;
}

.lj-view-month .subcontent {
margin: 0px;
padding: 0px;
background: none;
border: none;
}

.lj-view-month .entry {
font-size: 0px;
padding: 0px;
}

.lj-view-month dt {
position: relative;
margin: 0px 15px 0px 120px;
padding: 12px 15px;
font-size: 16px;
border-bottom: 1px solid #D8DFE2;
z-index: 10;
}

.lj-view-month dt b {
font-weight: normal;
}

.lj-view-month dt a {
display: inline-block;
height: 16px;
margin: -63px 0px 2px -45px;
padding: 64px 0px 0px 45px;
background: url(http://fatfrog.info/Ma/A/layout/the11doctors/iconholder.png) top left no-repeat;
}

.lj-view-month dd {
margin: -44px 0px 30px 120px;
padding: 55px 0px 12px 15px;
font-size: 12px;
background: #FFFFFF;
border: 1px solid #D8DFE2;
position: relative;
z-index: 5;
}

.lj-view-day .skiplinks {
margin-bottom: 30px;
padding-left: 45px;
border-bottom: 1px solid #D8DFE2;
}

.lj-view-day .separator + .clear + .clear + .skiplinks {
padding-left: 15px;
}

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

.lj-view-tags h2 {
position: relative;
margin: 0px 1px 0px 135px;
padding: 12px 100px 12px 0px;
font-size: 16px;
text-align: right;
font-weight: normal;
border-bottom: 1px solid #D8DFE2;
background: url(http://fatfrog.info/Ma/A/layout/the11doctors/sbar-tags.png) right center no-repeat;
z-index: 10;
}

ul.ljtaglist {
margin: -44px 0px 30px 120px;
padding: 46px 15px 6px 0px;
font-size: 12px;
list-style: none;
background: #FFFFFF;
border: 1px solid #D8DFE2;
position: relative;
z-index: 5;
}

ul.ljtaglist li {
padding: 5px 0px 6px 15px;
}

ul.ljtaglist li + li {
border-top: 1px solid #D8DFE2;
}