Skip to content

Instantly share code, notes, and snippets.

@rmetzler
Created February 6, 2011 11:56
Show Gist options
  • Save rmetzler/813321 to your computer and use it in GitHub Desktop.
Save rmetzler/813321 to your computer and use it in GitHub Desktop.
This is my version of the Slate theme from Posterous
<!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" xmlns:fb="http://www.facebook.com/2008/fbml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>{PageTitle}</title>
<link rel="icon" href="/images/favicon.png" type="image/x-png"/>
<style type="text/css">
* {border:0;padding:0;margin:0;}
img {border:0;}
.clear {clear:both;font-size:5px;}
.left {float:left;}
.right {float:right;}
.text-right {text-align:right;}
.center {text-align:center;}
.small {font-size:11px !important;}
.xsmall {font-size:10px;}
.xxsmall {font-size:9px;}
.normal {font-size:12px !important;}
.big {font-size:14px !important;}
.bigger {font-size:16px !important;}
.black {color:#000;}
.green1,.green1:hover {color:#7ba709;}
.green2,.green2:hover {color:#6f9904;}
.darkgray {color:#333;}
.strong {font-weight:bold;}
.absolute-right {position:absolute;top:0;right:0;}
.white {color:#fff;}
.red {color:#f00;}
body {
background:#f8f7f2;
color:#8e8e8e;
font-family:Helvetica,Arial,Sans-Serif;
font-size:11px;
}
a { color:#585858; text-decoration:none; }
a:hover { color:#2d2d2d; }
.no-bull li {list-style:none;}
.no-ul,.reverse {text-decoration:none}
.no-ul:hover,.reverse:hover {text-decoration:underline !important}
li {margin:0;}
.container {
margin:0 auto;
position:relative;
width:960px;
}
.post blockquote p {
font:inherit;
}
.post blockquote p strong{
font-family: Georgia, 'Times New Roman', Times, serif;
font-size: 20px;
font-style: normal;
font-variant: normal;
font-weight:bold;
}
.png {
background-image:url(http://posterous.com/themes/slate/global.png);
background-repeat:no-repeat;
}
h1,.subtitle,h2,h3,h4 {
font-family:"MyriadPro-Semibold","Myriad Pro","Helvetica Neue Light",Helvetica,Arial;
font-weight:normal;
letter-spacing:-0.5px;
}
.pages {
font-family:"Myriad Pro","Helvetica Neue Light",Helvetica,Arial;
font-weight:normal;
letter-spacing:-0.5px;
}
h1,.subtitle,h3 {
text-align:center;
}
h1 {
font-size:24px;
}
h1 a {
color:#eee;
display:inline-block;
padding:2px;
text-decoration:none;
}
h1 a:hover {
color:#fff;
}
.title {
background:url(http://posterous.com/themes/slate/bg-h1.gif) repeat-x top #383838;
min-height:35px;
height:auto !important;
height:35px;
}
.profile-block {
background:url(http://posterous.com/themes/slate/bg-about.gif) repeat-x bottom #f4f4f4;
min-height:198px;
height:auto !important;
height:198px;
}
{block:HasPages}
.profile-block {
min-height:210px;
height:auto !important;
height:210px;
}
{/block:HasPages}
.external {
margin-top:5px;
}
.block-link {
margin-top:10px;
}
.links {
}
.links li {
display:inline-block;
padding-right:15px;
list-style:none;
}
h3 {
border-bottom:solid 1px #dfdfdf;
color:#a4a4a4;
font-size:24px;
padding:10px 0;
margin:0 auto;
width:925px;
}
.pages {
border-top:solid 1px #fff;
border-bottom:solid 1px #dfdfdf;
padding:10px 0;
margin:0 auto;
text-align:center;
width:925px;
}
.pages li {
display:inline-block;
font-size:1.3em;
padding:0 10px;
}
.pages li a {
color:#555;
}
.pages li a:hover {
text-decoration:underline;
}
.pages li.current {
color:#111;
font-weight:bold;
}
.about-utilities {
border-top:solid 1px #fff;
margin:0 auto;
padding:15px 0;
width:925px;
}
.tag-dropdown {
left:100px;
position:absolute;
}
.subscribe-dropdown {
position:absolute;
left:0;
}
.contributors-dropdown {
position:absolute;
left:170px;
width:100px;
}
h4,h4 a {
color:#888888;
cursor:default;
font-size:14px;
position:relative;
text-decoration:none;
}
.tag-dropdown h4 {
z-index:6;
}
.subscribe-dropdown h4 {
z-index:3;
}
.contributors-dropdown h4 {
z-index:3;
}
.utilities h4 {
display:inline-block;
}
.dropdown-arrow {
background-position:0 -9px;
display:inline-block;
height:7px;
position:relative;
width:9px;
}
.tag-dropdown .dropdown-arrow {
z-index:6;
}
.subscribe-dropdown .dropdown-arrow {
z-index:3;
}
.contributors-dropdown .dropdown-arrow {
z-index:3;
}
.tag-dropdown span.tags-list,.subscribe-dropdown span.subscribe-list,.contributors-dropdown span.contributors-list {
display:none;
}
.tag-dropdown:hover span.tags-list {
background:#fff;
border:solid 1px #888;
display:block;
left:-5px;
padding:5px 7px 10px;
position:absolute;
top:21px;
width:120px;
}
.subscribe-dropdown:hover span.subscribe-list {
background:#fff;
border:solid 1px #888;
display:block;
left:-5px;
padding:5px 7px 10px;
position:absolute;
top:21px;
width:160px;
}
.contributors-dropdown:hover span.contributors-list {
background:#fff;
border:solid 1px #888;
display:block;
padding:5px 7px 10px;
position:absolute;
right:6px;
top:21px;
width:120px;
}
.tag-dropdown .h4-bg,.subscribe-dropdown .h4-bg,.contributors-dropdown .h4-bg {
display:none;
}
.tag-dropdown:hover .h4-bg,.subscribe-dropdown:hover .h4-bg {
background:#fff;
border-top:solid 1px #888;
border-right:solid 1px #888;
border-left:solid 1px #888;
display:block;
height:24px;
left:-1px;
position:absolute;
top:-25px;
}
.contributors-dropdown:hover .h4-bg {
background:#fff;
border-top:solid 1px #888;
border-right:solid 1px #888;
border-left:solid 1px #888;
display:block;
height:24px;
right:-1px;
position:absolute;
top:-25px;
}
.tag-dropdown:hover .h4-bg {
width:48px;
}
.subscribe-dropdown:hover .h4-bg {
width:78px;
}
.contributors-dropdown:hover .h4-bg {
width:98px;
}
.tag-dropdown:hover span.tags-list {
z-index:5;
}
.subscribe-dropdown:hover span.subscribe-list {
z-index:2;
}
.contributors-dropdown:hover span.contributors-list {
z-index:2;
}
.tag-dropdown span.tags-list a,.subscribe-dropdown span.subscribe-list a,.contributors-dropdown span.contributors-list a {
color:#888;
display:block;
text-decoration:none;
}
.tag-dropdown .tags-list a:hover,.subscribe-dropdown .subscribe-list a:hover,.contributors-dropdown .contributors-list a:hover {
color:#555;
}
.contributors-list a * {
display:inline-block;
vertical-align:middle;
}
.tags-list .tag-link {
margin-bottom:5px;
}
.tags-list strong {
display:block;
margin-bottom:2px;
}
.profile_ajax_reply {
background:url(/images/favicon.png) no-repeat -1px -1px;
margin-bottom:5px;
padding-left:18px;
}
.subscribe-posterous,.subscribe-rss {
padding-left:18px;
}
.subscribe-posterous {
background:url(/images/favicon.png) no-repeat -1px -1px;
margin-bottom:5px;
}
.subscribe-rss {
background:url(/images/feed-icon-14x14.png) no-repeat;
}
.about-block {
float:left;
font-family:"Myriad Pro","Helvetica Neue Light",Helvetica,Arial;
font-size:14px;
line-height:1.5em;
padding-bottom:15px;
width:650px;
}
.about-block .about-contents a {
color:#5a5a5a;
padding:1px 2px;
}
.about-block .about-contents a:hover {
color:#444;
}
.utilities {
float:right;
position:relative;
width:240px;
}
.search {
background-position:-20px 0;
color:#777;
font-size:11px;
height:17px;
margin:3px 0 25px;
padding:6px 5px 1px 25px;
width:209px;
}
.main-column {
margin:30px auto;
width:530px;
}
.search-section {
}
.search-section .search {
margin:3px 0;
}
.search-section .searchbox_button {
border:solid 1px #999;
font-family:"Myriad Pro","Helvetica Neue Light",Helvetica,Arial;
font-size:14px;
padding:2px 20px;
}
.postunit {
margin-bottom:50px;
position:relative;
}
.postunit .edit-post .mini_commands {
display:none;
}
.postunit:hover .edit-post .mini_commands {
display:block;
left:15px;
position:absolute;
top:-10px;
}
.fav_star {
margin-top:9px !important;
}
h2 {
margin-bottom:5px;
}
h2 a {
background:#f3f3f0;
border-bottom:solid 1px #e4e4e4;
color:#909090;
display:block;
font-size:24px;
padding:5px 15px;
text-decoration:none;
width:500px;
}
h2 a:hover {
border-bottom:solid 1px #d6d6d6;
color:#818181;
}
.post {
margin-bottom:15px;
padding:0 15px;
width:500px;
}
.post p,.post div,.post ol,.post ul {
padding:5px 0;
}
.post,.post * {
font-family:"Segoe UI","Myriad Pro",Helvetica,Arial;
font-size:14px;
line-height:1.5em;
}
.post ol,.post ul {
margin-left:20px;
}
.post a {
background:#e2e2e2;
color:#7c7c7c;
padding:1px 2px;
}
.post a:hover {
background:#c0c0c0;
color:#fff;
}
.post .posterousGalleryMainlink,.post a:hover.posterousGalleryMainlink {
background:none;
}
.post a img {
margin:0;
padding:0;
}
.post-padd {
padding:0 15px;
}
.post-brief {
border-top:solid 1px #e4e4e4;
margin:0 15px;
padding:5px 0;
}
.post-brief a {
color:#8E8E8E;
}
.post-brief a:hover {
color:#333;
}
.socialish {
float:right;
padding:0 0 5px 10px;
}
.posterous_retweet_widget {
display:inline-block;
margin:-2px 10px 0;
}
a.posterous_retweet {
color:#fff !important;
}
a.posterous_retweet:hover {
background:#36cdff;
color:#fff !important;
}
.taglist {
margin-top:5px;
}
.post-tag {
padding:0 3px;
}
div.commentunit {
margin:0 0 10px;
}
div.posterous_comments h4, div.spanningheader h4 {
font-size:14px;
font-weight:normal;
}
.comment {
background:#f3f3f0;
border-top:solid 1px #e4e4e4;
color:#8E8E8E;
margin:10px 0;
padding:15px;
}
.comment-by {
text-align:right;
}
.comment-by a {
color:#b8b8b8;
}
.comment-by a:hover {
color:#929292
}
.posterousAddNewComment {
background:#F3F3F0;
border-top:solid 1px #e4e4e4;
margin:15px;
padding:0 15px 15px;
}
.posterousAddNewComment .comment {
background:none;
border-top:0;
padding:0;
}
.posterousAddNewComment textarea {
width:430px !important;
}
div.commentunit input[type="submit"] {
border:solid 1px #999;
font-family:"Myriad Pro","Helvetica Neue Light",Helvetica,Arial;
font-size:16px;
padding:2px 20px;
}
.post-comment-area {
background:#F3F3F0;
border-top:solid 1px #e4e4e4;
margin-top:10px;
padding:15px;
}
.post-comment-area .comment_avatar {
margin:25px 15px 0 0;
}
.post-comment-area {
background:none;
border-top:0;
padding:0;
}
.post-comment-area .commentunit {
margin:5px auto 0;
width:500px;
}
.post-comment-area h4 {
background:#F3F3F0;
margin-top:25px;
padding:15px 15px 0;
{block:List}width:485px;{/block:List}
{block:Show}width:500px;{/block:Show}
}
.post-comment-area form {
background:#F3F3F0;
padding:0 15px 15px;
}
.location-map {
padding:10px 15px;
}
.pagination {
text-align:center;
}
.pagination span {
margin-right:3px;
}
.pagination .current {
font-weight:bold;
}
.pagination .disabled {
color:#aaa;
}
.pagination a {
border:solid 1px #eee;
padding:2px 5px;
}
.pagination a:hover {
border:solid 1px #ddd;
}
.by-line {
color:#bbb;
padding:50px 15px 20px;
text-align:right;
}
.by-line a {
color:#bbb;
text-decoration:underline;
}
.by-line a:hover {
text-decoration:none;
}
.back-to-blog {
padding-bottom:10px;
}
.posterousPrivateBox {
position:absolute;
left:0;
top:-10px;
}
.map {
height:250px;
}
</style>
<!--[if IE 8]>
<style type="text/css">
.tag-dropdown:hover .h4-bg {
width:44px;
}
.subscribe-dropdown:hover .h4-bg {
width:70px;
}
.contributors-dropdown:hover .h4-bg {
width:95px;
}
.contributors-dropdown:hover span.contributors-list {
right:12px;
}
</style>
<![endif]-->
<!--[if IE 7]>
<style type="text/css">
.utilities h4,.dropdown-arrow,.contributors-arrow {
float:left;
}
.dropdown-arrow {
margin:7px 0 0 2px;
}
.tag-dropdown:hover .h4-bg {
width:47px;
}
.subscribe-dropdown:hover .h4-bg {
width:78px;
}
.contributors-dropdown:hover .h4-bg {
width:96px;
}
</style>
<![endif]-->
<script src="http://platform.twitter.com/anywhere.js?id=GU9n1rtzutn76tC2ZbQ&amp;v=1">
</script>
<script type="text/javascript">
twttr.anywhere(function(twitter) {
twitter.hovercards();
});
</script>
</head>
<body>
{block:PosterousBar direction="left" translucent="false"}{/block:PosterousBar}
<div class="title">
{block:HeaderImage}
<div class="header_image">
<a href="{SiteURL}"><img src="{HeaderImageURL-500}" alt="{Title} - {Description}"/></a>
</div>
{Else}
<h1><a href="{SiteURL}">{Title}</a></h1>
{/block:HeaderImage}
</div>
{block:ListSidebar}
{block:Claimed}
<div class="profile-block">
{block:Description}<h3>{Description}</h3>{/block:Description}
{block:HasPages}
<div class="pages">
<ul>
{block:Pages}
<li class="{Current}"><a href="{URL}">{Label}</a></li>
{/block:Pages}
</ul>
</div>
{/block:HasPages}
<div class="about-utilities">
<div class="about-block">
<h4><a href="{ProfileLink}">{OwnerName}</a></h4>
<div class="about-contents">
{Profile}
</div>
<div class="external">
{ProfileExternalLinks}
</div>
{block:HasLinks}
{block:LinkCategories}
<div class="block-link">
<ul class="links">
<li><h4>{Label}:</h4></li>
{block:Links}
<li><a href="{URL}">{Label}</a></li>
{/block:Links}
</ul>
</div>
{/block:LinkCategories}
{/block:HasLinks}
</div><!-- /.about-block -->
<div class="utilities">
<h4>Search my Posterous</h4>
<form method='get'>
<input type='hidden' name='sort' value="{SearchSort}"/>
<input type='text' name='search' value='{SearchQuery}' class="png search" id="searchbox"/>
<input type='hidden' value='Search' class="searchbox_button" style="display:none;" id="searchbox_button"/>
</form>
{block:SearchBox searchbox_button='searchbox_button' searchbox='searchbox'/}
<div class="subscribe-dropdown">
<h4>Subscribe</h4>
<div class="png dropdown-arrow"></div>
<span class="subscribe-list">
<span class="h4-bg"></span>
{block:Subscription}
{block:SubscriptionUnsubscribed action_id='subscribe_link' content_div='subscribe_div'}
<span id="subscribe_div">
<a href="{SubscribeLink}" id="subscribe_link" class="subscribe-posterous">Subscribe to this posterous</a>
</span>
{/block:SubscriptionUnsubscribed}
{block:SubscriptionSubscribed action_id='unsubscribe_link' content_div='unsubscribe_div'}
<span id="unsubscribe_div">
<a href="{UnsubscribeLink}" id="unsubscribe_link" class="subscribe-posterous">Unsubscribe</a>
</span>
{/block:SubscriptionSubscribed}
{block:SubscriptionLoading}
<img src="/images/loading.gif">
{/block:SubscriptionLoading}
{/block:Subscription}
<a href="{RSS}" class="subscribe-rss">Subscribe via RSS</a>
</span>
</div><!-- /.subscribe-dropdown -->
{block:TagList}
<div class="tag-dropdown">
<h4>Tags</h4>
<div class="png dropdown-arrow"></div>
<span class="tags-list">
<span class="h4-bg"></span>
{block:TagListing collapsible='true' count='10' action_id='seemore_link'}
{block:TagListingMore}
<a href="#" id="seemore_link" class="more-tags">View all {NumTags} tags</a>
{/block:TagListingMore}
{block:TagItem}
<a href="{TagLink}" class="tag-link">{TagName} ({TagCount})</a>
{/block:TagItem}
{block:TagItemSelected}
<strong>{TagName} ({TagCount})</strong>
{/block:TagItemSelected}
{/block:TagListing}
</span>
</div><!-- /.tag-dropdown -->
{/block:TagList}
{block:Contributors}
<div class="contributors-dropdown">
<h4>Contributors</h4>
<div class="png dropdown-arrow"></div>
<span class="contributors-list">
<span class="h4-bg"></span>
{block:Contributor}
<a href="{ContributorProfileLink}">
<img src="{ContributorPortraitURL-20}" width='20' height='20' class='profile_border'/> {ContributorName}
</a>
{/block:Contributor}
</span>
</div><!-- /.subscribe-dropdown -->
{/block:Contributors}
</div><!-- /.utilities -->
</div><!-- /.about-utilities -->
<div class="clear"></div>
</div><!-- /.profile-block -->
{/block:Claimed}
{/block:ListSidebar}
<div class="main-column">
{block:ShowSidebar}
<div class="back-to-blog">
<a href="{SiteURL}">&laquo; Back to blog</a>
</div>
{/block:ShowSidebar}
{block:SearchPage}
<div class="search-section">
<h2>
{block:SearchResultOne}
One result found searching for
{/block:SearchResultOne}
{block:SearchResultMany}
{SearchResultCount} results found searching for
{/block:SearchResultMany}
{block:SearchResultNone}
No results found searching for
{/block:SearchResultNone}
</h2>
<form method='get'>
<input type='hidden' name='sort' value="{SearchSort}"/>
<input type='text' name='search' value='{SearchQuery}' class="png search" id="searchbox"/>
<input type='submit' value='Search' class="searchbox_button" id="searchbox_button"/>
&nbsp;&nbsp;<a href="{CurrentURL}" class="xsmall">clear</a>
</form>
<ul class="searchsort" style="color: #999; font-size: 10px;">
<li style="margin-left: 0px;">Sort by</li>
<li>{block:SearchSortBestmatch}<b>Best match</b>{Else}<a href="{CurrentURL}?search={SearchQuery}&sort=bestmatch">Best match</a>{/block:SearchSortBestmatch}</li>
<li>{block:SearchSortRecent}<b>Most recent</b>{Else}<a href="{CurrentURL}?search={SearchQuery}&sort=recent">Most recent</a>{/block:SearchSortRecent}</li>
<li>{block:SearchSortInteresting}<b>Most interesting</b>{Else}<a href="{CurrentURL}?search={SearchQuery}&sort=interesting">Most interesting</a>{/block:SearchSortInteresting}</li>
</ul>
<br/>
<a href="{PosterousURL}/explore/?search={SearchQuery}" style="font-size: 10px;">Search all of posterous for <b>{SearchQuery}</b> &raquo;</a>
</div>
<br style="clear: left;"/>
{/block:SearchPage}
{block:Posts}
<div id="postunit_{PostID}" class="postunit">
<div id="post_control_{PostID}"></div>
{block:Private}
<p class="private-post">
<a href="{Permalink}" class="tooltip_link"><img src="/images/icons/lock12.png" width='12' height='12' alt='Private'/>
<span>
<b>Private Post</b><br/>
This post has a secret URL and not linked on your public blog. Send the secret URL to share it with anyone.
</span>
</a>
</p>
{/block:Private}
{block:EditBox}
<div class="edit-post">
{EditBoxContents}&nbsp;
</div>
{/block:EditBox}
{block:SMS}
<div class="sms_notice">Posted from my mobile phone (SMS)</div>
{/block:SMS}
<div id="post_{PostID}">
{block:Title}<h2 id="posttitle_{PostID}"><a href="{Permalink}">{Title}</a></h2>{/block:Title}
<div class="post">
{Body}
</div><!-- /.post -->
{block:ShowOrList}
<div class="post-brief">
{block:Comments}
{block:CommentsList action_id='comment_link_{PostID}' target_element='post_commentarea_{PostID}'}
<div class="socialish">
{block:Retweet}
<img src="/images/icons/services/twitter11.png" style="vertical-align: middle; position: relative; top: -2px;" />
<span id="retweet_count_{PostID}">
<a href="{RetweetLink}">
{NumRetweets}
<span id="retweet_count_label_{PostID}">mentions</span>
</a>
</span>
{RetweetButton}
{/block:Retweet}
<a href="{Permalink}#comment" id='comment_link_{PostID}'>{CommentCount} Comment{CommentCountPluralized}</a> </div>
{/block:CommentsList}
{/block:Comments}
{block:NewDayDate}Posted <a href="{Permalink}">{TimeAgo}</a>{/block:NewDayDate}
{block:Author}{block:AuthorUser}by <a href="{AuthorURL}">{AuthorName}</a>{/block:AuthorUser}{/block:Author}
{block:PostLocations}
<span id="location_collapsed_{PostID}">from <a href="#" id="post_location_expander_{PostID}">{LocationsSummary}</a></span>
{/block:PostLocations}
{block:Show}
{block:TagList}
<div class="taglist">
Filed under:
{block:TagListing}
<a href="{TagLink}" class="post-tag">{TagName}</a>
{/block:TagListing}
</div>
{/block:TagList}
{/block:Show}
</div>
<div class="clear"></div>
{block:Comments}
<div id="post_commentarea_{PostID}" class="post-comment-area">
{block:CommentsShow}
<a name="comment" class="right" style="padding-right:15px;">{CommentCount} Comment{CommentCountPluralized}</a>
{CommentCode}
<h4>Leave a comment...</h4>
{NewCommentCode}
{/block:CommentsShow}
</div>
{/block:Comments}
{block:PostLocations}
<div class="location-map" style="display: none;" id="post_location_expanded_{PostID}">
<div class="map">
{MapIframe}
</div>
<div class="location-details">
<b>Posted from</b><br/>
{block:PostLocation uniq_by='summary'}
{LocationSummary}<br/>
{/block:PostLocation}
<div class="clear"></div>
</div>
<div class="clear"></div>
</div>
{/block:PostLocations}
{block:ShowOnClick action_id='post_location_expander_{PostID}' hidden_div='post_location_expanded_{PostID}' to_hide_id='location_collapsed_{PostID}'/}
{/block:ShowOrList}
</div><!-- /#post__ -->
{block:Favorite hover_id='postunit_{PostID}' position_id='post_{PostID}'/}
</div><!-- /.postunit -->
{/block:Posts}
{block:Pagination/}
<div class="by-line">
<a href="http://www.rechtsanwalt-metzler.de/" title="Rasch Hilfe gegen Waldorf Frommer Getty Abmahnung">Rechtsanwalt Jacob Metzler<br />Ihr Anwalt für Medienrecht, Internetrecht, Urheberrecht und gewerblichen Rechtsschutz.</a><br/>
<a href="http://www.rechtsanwalt-metzler.de/filesharing-abmahnung/" title="Rechtsanwalt gegen Waldorf Frommer Filesharing Abmahnung">Hilfe bei Filesharing Abmahnung von Waldorf Frommer</a>
</div>
<img src="http://c.statcounter.com/5410797/0/8f3b00c6/1/">
</div><!-- /.main-column -->
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment