Dark Kubrick

Designer's Comments

Look carefully for specific instructions

A Dark/custom version of the popular Kubrick theme. You may customize the header by downloading the background image in the heading section.

**UPDATE**
Blogger moved to a new "widget" system, however, you can still use the old templates.

STEP 1: Click the Template Tab in your Blogger interface.
STEP 2: Click "Edit HTML".
STEP 3: Below the large text area is a link titled "Revert to Classic Template", click this link.

STEP 4: Copy and Paste the Dark Kubrick layout code into the space provided, edit to your liking, save and enjoy!

Using This Layout

For specific instructions read designer's comments

1. Log into blogger.com
2. Click on Template
3. Copy (ctrl c) and paste (ctrl v) code to EDIT HTML

Layout Code

Copy and paste to Template

Help

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
  <title><$BlogPageTitle$></title>
  <$BlogMetaData$>
  <meta http-equiv="imagetoolbar" content="no" />

/* Begin Typography & Colors */
body {
	font-size: 62.5%; /* Resets 1em to 10px */
	font-family: 'Lucida Grande', Verdana, Arial, Sans-Serif;
background-color: #EFEFEF;
	
	color: #333;
	text-align: center;
	}

#page {
    background: url("http://layouts.cbimg6.com/22/11024c.jpg") repeat-y top white;
    border: none;
	border: 0px solid #959596;
	text-align: left;
	}

#kheader {
    background: url("http://layouts.cbimg6.com/22/11024d.jpg") no-repeat bottom center #73a0c5;
	}

#kcontent {
	font-size: 1.1em
	}

.widecolumn .entry p {
	font-size: 1.05em;
	}

.narrowcolumn .entry, .widecolumn .entry {
	line-height: 1.4em;
	}

.widecolumn {
	line-height: 1.6em;
	}
	
.narrowcolumn .postmetadata {
	text-align: center;
	}

.graybox {
	background-color: #f8f8f8;
	border-top: 1px solid #ddd;
	border-bottom: 1px solid #ddd;
	}

#footer {
    background: url("http://layouts.cbimg6.com/22/11024e.jpg") no-repeat bottom; border: none #eee;
	}

small {
	font-family: Arial, Helvetica, Sans-Serif;
	font-size: 0.9em;
	line-height: 1.5em;
	}

h1, h2, h3 {
	font-family: 'Trebuchet MS', 'Lucida Grande', Verdana, Arial, Sans-Serif;
	font-weight: bold;
	}

h1 {
	font-size: 4em;
	text-align: center;
	}

.description {
	font-size: 1.2em;
	text-align: center;
	}

h2 {
	font-size: 1.6em;
	}

h2.pagetitle {
	font-size: 1.6em;
	}

#sidebar h2 {
	font-family: 'Lucida Grande', Verdana, Sans-Serif;
	font-size: 1.2em;
	}

h3 {
	font-size: 1.3em;
	}

h1, h1 a, h1 a:hover, h1 a:visited, .description {
	text-decoration: none;
	color: white;
	}

h2, h2 a, h2 a:visited, h3, h3 a, h3 a:visited {
	color: #333;
	}

h2, h2 a, h2 a:hover, h2 a:visited, h3, h3 a, h3 a:hover, h3 a:visited, #sidebar h2, #wp-calendar caption, cite {

text-decoration: none;
	}

.entry p a:visited {
	color: #b85b5a;
	}

#sidebar {
	font: 1em 'Lucida Grande', Verdana, Arial, Sans-Serif;
	}

small, #sidebar ul ul li, #sidebar ul ol li, .postmetadata, blockquote, strike {
	color: #777;
	}
	
code {
	font: 1.1em 'Courier New', Courier, Fixed;
	}

acronym, abbr, span.caps
{
	font-size: 0.9em;
	letter-spacing: .07em;
	}

a, h2 a:hover, h3 a:hover {
	color: #06c;
	text-decoration: none;
	}

a:hover {
	color: #147;
	text-decoration: underline;
	}
/* End Typography & Colors */

/* Begin Structure */
body {
	margin: 0;
	padding: 0; 
	}

#page {
	background-color: white;
	margin: 20px auto 0;
	padding: 0;
	width: 760px;
	border: 0px solid #959596;
	}
	
#kheader {
	padding: 0;
	margin: 0 auto;
	height: 121px;
	width: 100%;
	background-color: #EFEFEF;
	}

#headerimg {
	margin: 0;
	height: 121px;
	width: 100%;

}

.narrowcolumn {
	float: left;
	padding: 0 0 20px 45px;
	margin: 0px 0 0;
	width: 450px;
	}

.widecolumn {
	padding: 10px 0 20px 0;
	margin: 5px 0 0 150px;
	width: 450px;
	}
	
.post {
	margin: 0 0 40px;
	text-align: justify;
	}

.widecolumn .post {
	margin: 0;
	}

.narrowcolumn .postmetadata {
	padding-top: 5px;
	}

.widecolumn .postmetadata {
	margin: 30px 0;
	}
	
#footer {
	padding: 0;
	margin: 0 auto;
	width: 760px;
	clear: both;
	}

#footer p {
	margin: 0;
	padding: 20px 0;
	text-align: center;
	}
/* End Structure */

/*	Begin Headers */
h1 {
	padding-top: 40px;
	margin: 0;
	}

.description {
	text-align: center;
	}

h2 {
	margin: 30px 0 0;
	}

h2.pagetitle {
	margin-top: 30px;
	text-align: center;
}

#sidebar h2 {
	margin: 5px 0 0;
	padding: 0;
	}

h3 {
	padding: 0;
	margin: 30px 0 0;
	}

h3.comments {
	padding: 0;
	margin: 40px auto 20px ;
	}
/* End Headers */

/* Begin Images */
img {
    padding:10px;
    margin: 10px 0;
    border:1px solid #ccc;
    }
  
p img {
	padding: 0;
	max-width: 100%;
	}

/*	Using 'class="alignright"' on an image will (who would've
	thought?!) align the image to the right. And using 'class="centered',
	will of course center the image. This is much better than using
	align="center", being much more futureproof (and valid) */
	
img.centered {
	display: block;
	margin-left: auto;
	margin-right: auto;
	}
	
img.alignright {
	padding: 4px;
	margin: 0 0 2px 7px;
	display: inline;
	}

img.alignleft {
	padding: 4px;
	margin: 0 7px 2px 0;
	display: inline;
	}

.alignright {
	float: right;
	}
	
.alignleft {
	float: left
	}
/* End Images */

/* Begin Lists

Special stylized non-IE bullets
	Do not work in Internet Explorer, which merely default to normal bullets. */

html>body .entry ul {
	margin-left: 0px;
	padding: 0 0 0 30px;
	list-style: none;
	padding-left: 10px;
	text-indent: -10px;
	}

html>body .entry li {
	margin: 7px 0 8px 10px;
list-style: none;
	}

.entry ul li:before, #sidebar ul ul li:before {
	content: "�0BB �020";
	}

.entry ol {
	padding: 0 0 0 35px;
	margin: 0;
list-style: none;
	}

.entry ol li {
	margin: 0;
	padding: 0;
list-style: none;
	}

.postmetadata ul, .postmetadata li {
	display: inline;
	list-style-type: none;
	list-style-image: none;
	}
	
#sidebar ul, #sidebar ul ol {
	margin: 0;
	padding: 0;
list-style: none;
	}

#sidebar ul li {
	list-style-type: none;
	list-style-image: none;
	margin-bottom: 15px;
	}

#sidebar ul p, #sidebar ul select {
	margin: 5px 0 8px;
list-style: none;
	}

#sidebar ul ul, #sidebar ul ol {
	margin: 5px 0 0 10px;
list-style: none;
	}

#sidebar ul ul ul, #sidebar ul ol {
	margin: 0 0 0 10px;
list-style: none;
	}

ol li, #sidebar ul ol li {
	list-style: none;
	}

#sidebar ul ul li, #sidebar ul ol li {
	margin: 3px 0 0;
	padding: 0;
list-style: none;
	}
/* End Entry Lists */

/* Begin Comments*/

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

.commentmetadata {
	margin: 0;
	display: block;
	}
/* End Comments */

/* Begin Sidebar */
#sidebar
{
	padding: 20px 0 10px 0;
	margin-left: 545px;
	width: 190px;
	}

#sidebar form {
	margin: 0;
	}
/* End Sidebar */

/* Begin Various Tags & Classes */
acronym, abbr, span.caps {
	cursor: help;
	}

acronym, abbr {
	border-bottom: 1px dashed #999;
	}

blockquote {
	margin: 15px 30px 0 10px;
	padding-left: 20px;
	border-left: 5px solid #ddd;
	}

blockquote cite {
	margin: 5px 0 0;
	display: block;
	}

.center {
	text-align: center;
	}

hr {
	display: none;
	}

a img {
	border: none;
	}

.navigation {
	display: block;
	text-align: center;
	margin-top: 10px;
	margin-bottom: 60px;
	}
      
	</style>
	
	<link rel="alternate" type="application/atom+xml" title="Atom 0.3" href="<$BlogURL$>/atom.xml" />
    
</head>
<noembed><body></noembed>
<div id="page">

<div id="kheader">
	<div id="headerimg">
		<h1><a href="<$BlogURL$>" title="<$BlogTitle$>"><$BlogTitle$></a></h1>
		
	</div>
</div>
<hr />

<h2 id="post-<$BlogItemNumber$>"><a href="<$BlogItemPermalinkUrl$>" rel="bookmark" title="Permanent Link to <$BlogItemTitle$>"><$BlogItemTitle$></a></h2>
				<small><BlogDateHeader><$BlogDateHeaderDate$></BlogDateHeader></small>
				
				<div class="entry">
					<$BlogItemBody$>
				</div>
		
				<p class="postmetadata"><$BlogItemControl$>
     
     
     <BlogItemCommentsEnabled>
         <a href="<$BlogItemPermalinkURL$>#comments"><script type="text/javascript">var a = <$BlogItemCommentCount$>; if(a == 0) {document.write('No comment');} else if(a == 1) {document.write('1 comment');}else{document.write(a+' comments');}</script></a>
  </BlogItemCommentsEnabled>

</p></div>

</Blogger>
		</div>
</MainOrArchivePage>
	
<ItemPage>

<p class="postmetadata graybox">
					<small>
						This entry was posted
						on <BlogDateHeader><$BlogDateHeaderDate$></BlogDateHeader> at <$BlogItemDateTime$>.

<BlogItemCommentsEnabled>
							You can skip to the end and leave a response.
</BlogItemCommentsEnabled>		
						
						<$BlogItemControl$>
						
					</small>
				</p>
	
	
               </Blogger><div class="center">� <a href="<$BlogURL$>">Home</a><BloggerPreviousItems> | <a href="<$BlogItemPermalinkURL$>">Next</a> �</div><div style="display:none"></BloggerPreviousItems></div><Blogger>
           
           
			</div>
		</div>
		
  <div id="comments">

<BlogItemCommentsEnabled><a name="comments"></a>
        <h4>
 
 
 
            <script type="text/javascript">var a = <$BlogItemCommentCount$>; if(a == 0) {document.write('No comment');} else if(a == 1) {document.write('1 comment:');}else{document.write(a+' comments:');}</script>

</h4>
        <BlogItemComments>
        <a name="c<$BlogCommentNumber$>"></a>
        <a href="#<$BlogCommentNumber$>" title="comment permalink"><$BlogCommentDateTime$></a>
        <br />
        <p style="padding-left:15px"><$BlogCommentBody$>   <$BlogCommentDeleteIcon$></p>
        <br /><br />
        </BlogItemComments>
		
        
        
        � <$BlogItemCreate$>
       </BlogItemCommentsEnabled>
    </div>
	
	</div>

</Blogger>
</ItemPage>

<li><h2>Author</h2>
			 <p><$BlogOwnerAboutMe$></p>
					<ul>
						<li><a href="<$BlogOwnerProfileUrl$>">View my complete profile</a></li>
					</ul>
			</li>

<li><h2>Archives</h2>
					<ul>
						<BloggerArchives>
						<li><a href="<$BlogArchiveURL$>"><$BlogArchiveName$></a></li>
						</BloggerArchives>

</ul>
				</li>
	
				<li><h2>Links</h2>
					<ul>

<li><a href="http://www.thefutureofblog.com">Jeremiah Hoyet</a></li>
                    <li><a href="http://binarybonsai.com">Kubrick</a></li>

</ul>
				</li>

</ul>
	</div>
</MainOrArchivePage>

<hr />
<div id="footer">
	<p>
		� <a href="<$BlogURL$>" title="<$BlogTitle$>"><$BlogTitle$></a> 2005 - Powered by <a href="http://www.blogger.com/">Blogger</a> and <a href="http://www.facebook.com/Jeremiah.Hoyet">Dark Kubrick</a> & based on <a href="http://binarybonsai.com/wordpress/kubrick/">Kubrick</a>.<br />

</p>
</div>
</div>

<br />

</body>
</html>

Layout Comments

Showing latest 10 of 13 comments

Well, over a year before I remembered I wrote this template, again. Updated some links, should probably overhaul it for "new blogger", but you can still use the old template system in blogger to use this theme. Thanks for all those who still use this theme!

By jerhoyet on Jul 29, 2009 1:30 pm

i like it. used it. :)

By alyssaduh on Apr 10, 2009 6:10 pm

i love it

By xhugerific on Oct 19, 2008 6:17 pm

Does anybody know a version of it for new blogger?

By igorfalc on Jul 17, 2008 4:28 am

I was sitting around today and remembered I had created this nearly two years ago, so I updated the instructions. See you all two years from now lol.

By jerhoyet on May 23, 2008 4:03 pm

how the fuck do u do it

By SNKRZ on Feb 10, 2008 12:54 am

never mind, it is.

By lkajsfklajskds on Jan 1, 2008 12:42 pm

this is old blogger, right?

By lkajsfklajskds on Jan 1, 2008 12:40 pm

"Your template could not be parsed as it is not well-formed. Please make sure all XML elements are closed properly.
XML error message: The content of elements must consist of well-formed character data or markup."

???

By hacked on Jun 29, 2007 10:51 am

eh its a bit too simple for me.

By hypnotique on Nov 15, 2006 2:11 am

View all »

Layout Details

Designer	jerhoyet
Submitted on	May 17, 2006
Page views	63,116
Favorites	29
Comments	13

Dark Kubrick

Designer's Comments

Using This Layout

Layout Code

Layout Comments

Layout Details

Layout Colors

Layout Tags

Layout Tools

Layout Affiliates