Layout: Death Cab for Cutie Cutie Colin Morgan

[thecheekydragon]

Layout: DCFC Colin Morgan
Style: S2 Flexible Squares
Credit: thecheekydragon or cheeky_layouts
Profile Layout: Included - 2 styles
Theme: Fandom
Fandom: Death Cab for Cutie / Colin Morgan

Layout Preview:






General Instructions:

(1) Go to "Journal Style"
(2) Select Flexible Squares (any stylesheet)
(3) Choose 2 column with sidebar on right
(4) Click on Customize Selected Theme
(5) Click on Custom CSS in sidebar
(6) Use layout's stylesheet - Yes
Use layout's stylesheet when including custom external stylesheet - No
Use external stylesheet - Yes
(7) Copy and paste the following code into Custom External Stylesheet URL box

/*----------------------------------------------------
Death Cab For Cutie Colin
S2 Flexible Squares
by thecheekydragon at cheeky_layouts
----------------------------------------------------*/

body {
background-color: #cdc1c5;
text-align: center;
color: #333333;
font-family: "Georgia", sans-serif;
font-size: 14px;
margin: 20px 0 20px 0;
background-image: url("http://img855.imageshack.us/img855/1653/grungewall2.jpg");
background-repeat: repeat;
}

a, a:link, a:visited {
color: #4a7023;
text-decoration: bold;
}

a:hover {
color: #596c56;
text-decoration: bold;
}

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

code, kbd, pre, tt {
font-family: monospace;
}

/*---------------------------------------------------------------------
General page alignment and width
------------------------------------------------------------------------*/

#content
{
width: 768px;
margin-left: auto; margin-right: auto;
background-color: #ffffff;
border-width: 4px;
border-style: solid;
border-color: #5c5c5c;
padding: 15px;
background-image: url("http://img38.imageshack.us/img38/5750/leatherk.jpg");
background-repeat: repeat;
}
#maincontent {
margin-top: 15px;
font-family: "Georgia", sans-serif;
font-size: 14px;
background-color: transparent;
color: #ffffff;
border-style: solid;
border-color: #5c5c5c;
border-width: 4px;
margin-right: 180px;
text-align: left;
}

#sidebar {

padding-top: 15px;
margin-top: 15px;
background-color: #ffffff;
border-color: #5c5c5c;
border-width: 4px;
border-style: solid;
font-size: 13px;
font-family: "Georgia", sans-serif;
color: #333333;
width: 180px;
float: right;
text-align: left;
}
/*-----------------------------------------------------------------------------
Header - you can add a header image with either #header or .headerimage
--------------------------------------------------------------------------------*/
#header {
width: 768px;
padding: 7px 0px 7px 0px;
margin: 0px;
text-align: center;
font-family: "Georgia", sans-serif;
font-size: 13px;
font-weight: bold;
letter-spacing: 3px;
border-style: solid;
border-color: transparent;
border-width: 10px;
background-color: transparent;
color: #ffffff;
}

.headerimage {
position: relative;
width: 800px;
height: 350px;
margin-left: auto;
margin-right: auto;
margin-bottom: 0px;
background-image: url("http://img687.imageshack.us/img687/9048/dcfcheader.png");
background-repeat: no-repeat;
}

/*look and color of links (also partly for footer)*/
div#header a, div#header a:link, div#header a:visited, div#footer a, div#footer a:link, div#footer a:visited {
color: #e8e8e8;
}

div#header a:hover, div#footer a:hover {
color: #596c56;
font-weight: bold;
}

/*title and subtitle*/
.title {
font-family: "Georgia", sans-serif;
font-size: 13px;
font-weight: bold;
line-height: 200%;
top: 16px;
color: #ffffff;
}

.subtitle{
font-family: "Georgia", sans-serif;
font-size: 11px;
font-weight: normal;
top: 12px;
color: #ffffff;
}

/*-----------------------------------------------------------------------------
Header - top navigation
--------------------------------------------------------------------------------*/

/* header -- links to views; title of journal; subtitle of journal */

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

ul.navheader li {
display: inline;
padding: 0 3px 0 3px;
}

/*-----------------------------------------------------------------------------
Entry stuff
------------------------------------------------------------------------*/

.subcontent {
}

.entry {
margin: 0px 10px 10px 30px;
padding: 10px;
background-color: #ffffff;
color: #333333;
font-family: "Georgia", sans-serif;
font-size: 13px;
text-align: left;
border-width: 2px;
border-color: #5c5c5c;
border-style: solid;
}

.userpic {
position: relative;
float: left;
background-color: transparent;
padding: 5px;
margin: 10px;
z-index: 15;
border-width: 2px;
border-color: #5c5c5c;
border-style: solid;
}

.date {
line-height: 200%;
top: 5px;
color: #ffffff;
font-family: "Georgia", sans-serif;
font-size: 11px;
background-color: transparent;
}

.subject {
font-weight: bold;
padding: 10px;
color: #e8e8e8;
font-family: "Georgia", sans-serif;
font-size: 20px;
letter-spacing: 2px;
background-color: transparent;
}

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

.subject a:hover {
color: #596c56;
}

.datesubject {
background-color: transparent;
padding: 5px;
background-image: url("http://img32.imageshack.us/img32/6030/urbancircles.jpg");
background-repeat: repeat;
}
.entry ul li
{
padding-left: 5px;
margin-left: 15px;
}

.entry ol li
{
padding-left: 5px;
margin-left: 15px;
}

/*---------------------------------------------------------------------
Entry Stuff - Current Mood, Music and Location
------------------------------------------------------------------------*/

.currents, .currentmood, .currentmusic {
font-family: "Georgia", sans-serif;
font-size: 13px;
}

/*---------------------------------------------------------------------
Entry Stuff - Comments
------------------------------------------------------------------------*/

.comments {
font-family: "Georgia", sans-serif;
font-size: 13px;
text-align: right;
background-color: transparent;
padding: 0px 5px 0px 5px;
position: relative;
top: 15px;
background-image: url("http://img32.imageshack.us/img32/6030/urbancircles.jpg");
background-repeat: repeat;
}

div.comments a, div.comments a:link, div.comments a:visited{
color: #e8e8e8;
font-weight: bold;
}

div.comments a:hover {
color: #596c56;
text-decoration: bold;
}

/*---------------------------------------------------------------------
Entry Stuff - Separator
------------------------------------------------------------------------*/

.separator{
/* for formatting separators between entries */
height: 35px;
}

/*------------------------------------------------------------
Special friends page customization
-------------------------------------------------------------------------------*/

.userpicfriends {
position: relative;
float: left;
background-color: #ffffff !important;
padding: 5px;
margin: 10px;
text-align: center;
border-style: solid;
border-width: 2px;
border-color: #5c5c5c;
font-family: "Georgia", sans-serif;
font-size: 11px;
z-index: 15;
}

/*------------------------------------------------------------
Sidebar
-------------------------------------------------------------------------------*/

.defaultuserpic {
text-align: center;
}

.sbarheader {
padding: 0px 5px 0px 5px;
}

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

.sbarbody2 {
padding: 0 15px 0 15px;
}

div#sidebar a, div#sidebar a:link, div#sidebar a:visited{
color: #3b5323;
}

div#sidebar a:hover {
color: #596c56;
font-weight: bold;
}

/*------------------------------------------------------------
Sidebar - Calendar
-------------------------------------------------------------------------------*/

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

.sbarcalendar {
border-color: #5c5c5c;
border-width: 1px;
border-style: solid;
text-align: center;
font-family: "Georgia", sans-serif;
font-size: 13px;
}

.sbarcalendarposts {
border-color: #5c5c5c;
border-width: 1px;
border-style: solid;
background-color: #ffffff;
text-align: center;
font-family: "Georgia", sans-serif;
font-size: 13px;
}

/*------------------------------------------------------------
Sidebar - link box contents and sidebar box titles
-------------------------------------------------------------------------------*/

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

li.sbaritem
{
padding-left: 15px;
list-style: none;
}

li.sbartitle
{
padding-left: 15px;
list-style: none;
border-style: solid;
border-width: 2px;
border-color: transparent;
background-image: url("http://img32.imageshack.us/img32/6030/urbancircles.jpg");
background-repeat: repeat;
background-color: transparent;
margin-bottom: 10px;
margin-top: 10px;
color: #e8e8e8;
font-weight: bold;
}

/*----------------------------------------------------
footer
----------------------------------------------------------------*/

#footer {
width: 768px;
text-align: center;
font-family: "Georgia", sans-serif;
font-size: 13px;
font-weight: bold;
letter-spacing: 1px;
background-color: transparent;
background-image: url("http://img32.imageshack.us/img32/6030/urbancircles.jpg");
background-repeat: repeat;
color: #e8e8e8;
border-color: #5c5c5c;
border-width: 2px;
border-style: solid;
z-index: 100;
clear: both;
padding: 7px 0px 7px 0px;}

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

ul.navfooter li {
display: inline;
margin: 0 5px 0 5px;
}

.clearfoot {
clear: both;
}

/*----------------------------------------------------
Archive Pages
----------------------------------------------------------------*/

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

ul.year li {
display: inline;
}

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

table.yeartable td.yeardate, table.yeartable td.yearday {
border-width: 1px;
border-style: solid;
border-color: #5c5c5c;
background-color: #ffffff;
}

table.yeartable td.yearday {
background-color: transparent;
text-align: center;
color: transparent;
color: #e8e8e8;
background-image: url("http://img32.imageshack.us/img32/6030/urbancircles.jpg");
background-repeat: repeat;
}

td.yearmonth {
border-style: none;
}

/*----------------------------------------------------
Comments pages
----------------------------------------------------------------*/

.datesubjectcomment {
background-color: transparent;
padding: 5px;
margin-top: 20px;
background-image: url("http://img32.imageshack.us/img32/6030/urbancircles.jpg");
background-repeat: repeat;
}

.userpiccomment {
position: relative;
border-width: 1px;
border-style: solid;
border-color: #5c5c5c;
background-color: transparent;
top: -30px;
left: 0px;
padding: 5px;
margin: 10px 10px -20px 10px;
z-index: 15;
float: left;
border-width: 2px;
border-color: #5c5c5c;
border-style: solid;
}

.box {
border-style: solid;
border-width: 1px 0px 0px 0px;
border-color: #5c5c5c;
padding: 10px;
clear: left;

}

input, textarea {
background-color: #ffffff;
color: #333333;
}

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

.reply {
position: relative;
margin: 20px 30px 10px 30px;
padding: 25px 10px 10px 10px;
text-align: left;
font-family: "Georgia", sans-serif;
font-size: 13px;
line-height: 125%;
background-color: #ffffff;
color: #333333;
}

.replytosubject {
font-weight: bold;
}

.commentreply {
position: relative;
margin: 10px;
font-size: 13px;
font-family: "Georgia", sans-serif;
color: #333333;
}

.commentbox {

border-color: #5c5c5c;
border-width: 2px;
border-style: solid;
padding: 10px;
margin: 10px;
background-color: #ffffff;
}

.datesubjectcomment a:link, .datesubjectcomment a:visited {
color: #ffffff;
}

.datesubjectcomment a:hover {
color: #e8e8e8;
}

.commentboxpartial {
border-color: #5c5c5c;
border-width: 2px;
border-style: solid;
padding: 10px;
margin: 10px;
background-color: #ffffff;
}

.commentinfo {
background-color: #ffffff;
margin-top: 10px;
width: 100%;
}

.skiplinks {
text-align: center;
}

/*--------------------------------------------
Misc
-----------------------------------------*/

.clear {

height: 15px;
}

.ljtags {
margin-top: 25px;
}

/* Generated by Malionette's Tiny Icon Generator */

.ljuser img[src*="img/userinfo.gif"] {width: 0 !important; height: 0 !important;
background: transparent url(http://img855.imageshack.us/img855/7682/colinuser20x20.gif) no-repeat !important; padding: 20px 0 0 20px !important; }
.ljuser img[src*="img/community.gif"] {width: 0 !important; height: 0 !important;
background: transparent url(http://img88.imageshack.us/img88/8702/tshirtprintgrayicon.png) no-repeat !important; padding: 16px 0 0 16px !important; }
img[src*="img/icon_protected.gif"] {width: 0 !important; height: 0 !important;
background: transparent url(http://img854.imageshack.us/img854/4975/dcfc.jpg) no-repeat !important; padding: 16px 0 0 16px !important; }

Header and Images:

Header
Background Grunge
Background Leather
Background Urban Circles

Note: Chibi Colin icon shown in layout preview is © dudufactory

It is recommended that you download images, host on your own image site, and replace url in code to maintain stability.

Colours Used:
#333333 (gray 20)
#5C5C5C (gray 36)
#E8E8E8 (gray 91)
#4A7023 (kakapo)
#596C56 (snake)
#3B5323 (romaine lettuce)

User/Comm/Lock Icons


Colin User (tiny icon by thecheekydragon with art by dudufactory)


T-Shirt Comm


DCFC Keys & Numbers Lock (tiny icon by thecheekydragon)

Profile Previews:

Profile 1








Profile Images

Colin
Urban Circles

Profile 2:

http://img32.imageshack.us/img32/6030/urbancircles.jpg">http://img809.imageshack.us/img809/4996/twittericon2.png"> twitter	http://img163.imageshack.us/img163/8928/dcfcprofilecenter.png">	http://img32.imageshack.us/img32/6030/urbancircles.jpg">http://img263.imageshack.us/img263/7986/tumblricon2.png"> tumblr
http://img32.imageshack.us/img32/6030/urbancircles.jpg">http://img716.imageshack.us/img716/5209/facebookiconxm.png"> facebook		http://img32.imageshack.us/img32/6030/urbancircles.jpg">http://img148.imageshack.us/img148/7150/skypeicon.png"> skype
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.		Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
http://img32.imageshack.us/img32/6030/urbancircles.jpg">link | layout | http://cheeky-layouts.livejournal.com">profile |link

http://img405.imageshack.us/img405/9715/dcfcprofile.png">

LINK 1 # LINK 2 # LINK 3

http://www.abload.de/img/linewv9f0.png"> http://lionguitarsolo.deviantart.com" style="text-decoration: none;">Pic by LionGuitarSolo http://www.abload.de/img/linewv9f0.png">

http://img233.imageshack.us/img233/6617/stripesqy.jpg">

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. http://img88.imageshack.us/img88/8702/tshirtprintgrayicon.png"/> http://img88.imageshack.us/img88/8702/tshirtprintgrayicon.png"/> http://img88.imageshack.us/img88/8702/tshirtprintgrayicon.png"/> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

http://www.abload.de/img/linewv9f0.png">
layout ∼ http://cheeky-layouts.livejournal.com/" style="text-decoration: none;">profile
http://www.abload.de/img/linewv9f0.png">

Profile Images

Death Cab for Cutie
Pic by LionGuitarSolo