Skip to content

Instantly share code, notes, and snippets.

@seedprod

seedprod/theme.html

Created April 19, 2010 00:22
Show Gist options
  • Save seedprod/370643 to your computer and use it in GitHub Desktop.
Save seedprod/370643 to your computer and use it in GitHub Desktop.
Download ZIP
Posterous Theme
Raw
theme.html
<!DOCTYPE HTML>
<html lang="en" xmlns:fb="http://www.facebook.com/2008/fbml">
<head>
<title>{PageTitle}</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="{Description}" />
<meta name="color:Background" content="#ffffff"/>
<meta name="color:Sidebar" content="#231F20"/>
<meta name="color:SidebarGradient" content="#666666"/>
<meta name="color:Accent" content="#ff0000"/>
<link rel="icon" href="{Favicon}" type="image/x-png"/>
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/combo?2.8.0r4/build/fonts/fonts-min.css&2.8.0r4/build/grids/grids-min.css">
<style type="text/css">
/*General Styles*/
* {
margin: 0;
padding: 0;
}
img {
border: 0;
}
.clear {
clear: both;
font-size: 0;
}
.left {
float: left;
}
.right {
float: right;
}
.text-right {
text-align: right;
}
.center {
text-align: center;
}
.xxsmall {
font-size: 10px;
}
.xsmall {
font-size: 11px;
}
.small {
font-size: 12px;
}
.normal {
font-size: 14px;
}
.big {
font-size: 16px;
}
.black {
color: #000;
}
.strong {
font-weight: bold;
}
.float {
float: left;
}
.right {
float: right;
}
.uppercase {
text-transform: uppercase;
}
.absolute-right {
position: absolute;
top: 0;
right: 0;
}
/*Global Styles*/
body {
background: {color:Background};
font-family: "Arial Narrow", Arial,Helvetica,sans-serif;
color: #7e7e7e;
font-size: 12px;
}
a {
color: {color:Accent};
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
a.reverse {
text-decoration: underline;
}
a.reverse:hover {
text-decoration: none;
}
.no-ul {
text-decoration: none
}
.no-ul:hover {
text-decoration: underline !important
}
h1,h2,.about-details {
font-family: "Arial Narrow","HelveticaNeue-Light","Helvetica Neue Light","Helvetica Neue", Arial,Helvetica,sans-serif;
line-height: 1.1em;
}
.container {
margin: 0 auto;
width: 720px;
}
h1 {
color: {color:Accent};
font-size: 30px;
line-height: 30px;
}
h1 a {
color: {color:Accent};
text-decoration: none;
}
h1 a:hover {
text-decoration: none;
}
h2 {
color: {color:Accent};
font-size: 22px;
font-weight: bold;
margin-bottom: 10px;
text-transform:uppercase;
}
h2 a {
color: {color:Accent};
text-decoration: none;
}
h2 a:hover {
color: {color:Accent};
text-decoration: none;
}
h4 {
color: #555;
}
h3{
font-family: Arial,Helvetica,sans-serif;
text-transform:uppercase;
font-weight:normal;
font-size:12px;
}
/* Sidebar */
#main-nav{
font-family: Arial,Helvetica,sans-serif;
text-transform:uppercase;
font-weight:normal;
font-size:12px;
}
#main-nav ul li{
list-style-type:none;
}
#main-nav a{
color:#fff !important;
padding:0;
display:block;
}
#iframe-div iframe{
border:medium none;
height:450px;
margin-left:-15px;
width:215px;
}
#site-title a {
color:#fff;
text-transform:uppercase;
}
.site-description{
font-family: Arial,Helvetica,sans-serif;
text-transform:uppercase;
font-size:9px;
margin:5px 0;
color:#C0C0C0;
}
#primary{
background:{color:Sidebar};
padding:30px;
color:#fff;
-moz-box-shadow: 0px 0px 7px #333; /* FF3.5+ */
-webkit-box-shadow: 0px 0px 7px #333; /* Saf3.0+, Chrome */
box-shadow: 0px 0px 7px #333; /* Opera 10.5, IE 9.0 */
background-image: -moz-linear-gradient(top, {color:Sidebar}, {color:SidebarGradient}); /* FF3.6 */
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, {color:Sidebar}), color-stop(1, {color:SidebarGradient})); /* Saf4+, Chrome */
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='{color:Sidebar}', EndColorStr='{color:SidebarGradient}'); /* IE6,IE7 */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='{color:Sidebar}', EndColorStr='{color:SidebarGradient}')"; /* IE8 */
}
.tagline {
color: #444;
line-height: 2em;
font-size: 14px;
padding-top: 10px;
}
.about-details {
margin: 5px 0 40px;
}
.search-section {
height: 50px;
padding-top: 10px;
text-align: right;
}
.searchbox_button{
display:none;
}
.search {
background: url(/themes/search-light.gif) no-repeat 3px 2px #fff;
border: solid 1px #e5e5e5;
color: #aaa;
font-size: 11px;
margin-bottom: 2px;
padding: 5px 7px 5px 23px;
width: 153px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
}
.search-results, .tag-results {
margin: 15px 0px 0px 0px;
}
.search-results h2, .tag-results h2 {
font-size: 16px;
}
.search:focus {
color: #333;
}
/* Post */
.Contact .posterous_retweet_widget,.Contact .infobar,.Contact .comment-area{
display:none;
}
#posts{
margin:0px auto;
width:500px;
padding-top:27px;
font-family: "HelveticaNeue-Light","Helvetica Neue Light","Helvetica Neue", Arial,Helvetica,sans-serif;
}
.twitterBox{
height:39px !important;
}
.postunit {
margin: 0px 0px;
padding: 15px 0px;
position: relative;
}
.date {
color: #fff;
font-size: 11px;
}
.date a {
color: #fff;
text-decoration: none;
}
.date a:hover {
text-decoration: underline;
}
.date img {
vertical-align: middle;
}
.post {
position: relative;
width: 500px;
border-bottom:1px dashed #231F20;
font-size:14px;
line-height:1.5em;
padding-bottom:20px;
color:#231F20;
}
.post p, .post pre, .post blockquote { margin: 15px 0px; color:#231F20;}
.post ol { margin: 15px 0px 15px 20px;}
.post ul { margin: 15px 0px 15px 15px;}
.galleryLabel {
color: #676767;
}
.infobar {
color: #aaa;
min-height: 15px;
height: auto !important;
height: 15px;
margin: 10px 0 0;
}
.tagsbar {
font-size: 11px;
line-height: 14px;
margin-top: 10px
}
.infobar .location {
display: block !important;
font-size: 12px;
float: right;
text-align: right;
background:#231F20;
padding:3px 5px;
font-family:"Arial Narrow",Arial,Helvetica,sans-serif;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
.infobar .loc {
margin-bottom: 5px;
}
a.location-name {
color: {color:Accent};
text-decoration: none;
}
a.location-name:hover {
text-decoration: underline;
}
.infobar .details {
float: left;
font-size: 10px;
}
.infobar .posted,.infobar .comments-name {
color: {color:Accent};
font-size: 12px;
}
.infobar a.timestamp,.infobar .comments-quantity {
color: #828282;
font-size: 10px;
}
/* Comments */
.comments-quantity {
position: relative;
top: -1px;
}
.comment-area {
clear: both;
}
.infobar .comment_list {
display: inline !important;
}
.comment {
color: #444;
}
.posterousAddNewComment .commentunit {
margin: 20px 0px;
}
.commentunit {
margin: 10px 0px;
}
.commentname a {
text-decoration: none !important;
}
.commentname a:hover {
text-decoration: underline !important;
}
.comment h4 {
margin: 0 !important;
}
.comment ul.mini_commands {
clear: both;
margin: 0;
padding: 0;
position: relative;
text-align: right;
top: 0;
}
.comment ul.mini_commands li {
margin: 0;
}
.comment_value label {
margin-right: 10px;
}
.comment_value input[type='submit'] {
margin: 5px 0px;
}
.comment_none_yet_msg {
color: #888;
font-size: 11px;
font-weight: normal;
margin-top: 5px;
}
.infobar .details a {
text-decoration: none;
}
.infobar .details a:hover {
text-decoration: underline;
}
.location-map {
background: #eaeaea;
margin-top: 5px;
padding: 8px;
}
.map {
float: left;
height: 150px;
width: 300px;
}
.location-details {
color: #676767;
float: right;
width: 175px
}
.private-post {
}
.private-post a.tooltip_link:hover span {
background: #eaeaea;
color: #555;
right: 0px;
width: 200px !important;
}
.private-post a.tooltip_link:hover span b {
color: #555;
}
.sidebar-block p { margin: 10px 0px; }
.sidebar-block {
border-bottom:1px dotted #666666;
margin-bottom:15px;
padding-bottom:15px;
}
#fan_hidden{
margin-top: 20px;"
}
.retweet-icon{
vertical-align: middle;
position: relative;
top: -1px;
}
/* Pagination */
.pagination {
color: #c5c5c5;
padding: 15px 0 50px;
font-size: 11px;
}
.pagination a, .pagination span {
color: {color:Accent};
display: inline-block;
display: -moz-inline-box;
font-weight: bold;
margin: 0 8px;
padding: 2px 2px;
}
.pagination span {
color: #333;
}
.pagination a:hover {
background: {color:Accent};
color: #fff;
text-decoration: none;
}
.pagination .disabled {
color: #c5c5c5;
}
.pagination .current {
color: #000;
font-weight: bold;
padding: 2px 2px 0;
}
h5 {
color: {color:Accent};
font-size: 11px;
font-weight: bold;
padding-bottom: 3px;
text-transform: uppercase;
}
/* Tags */
.tag {
margin: 0;
padding-top: 7px;
}
#more-tags-listing ul {
margin: 0;
}
.tag li,#more-tags-listing li,.taglist li {
color: {color:Accent};
font-size: 10px;
list-style: none;
margin: 0;
vertical-align: top;
}
.taglist ul {
margin: 0 !important;
}
.tag li a,#more-tags-listing li a,.taglist li a {
color: #fff;
display: inline-block;
font-size: 12px;
margin-bottom: 7px;
text-decoration: none;
}
.tag li a:hover,#more-tags-listing li a:hover,.taglist li a:hover {
text-decoration: underline;
}
a.more-tags {
color: {color:Accent} !important;
font-size: 10px !important;
text-decoration: none;
}
a.more-tags:hover {
text-decoration: underline;
}
li.tag_item_selected {
color: #ddd;
font-size: 12px;
padding-bottom: 7px;
}
/* Contributors */
.contributors {
margin: 10px 0;
}
ul.contribs li, ul.contribs li a, ul.fans li, ul.fans li a {
font-size: 11px;
color: #666;
list-style: none;
}
ul.contribs li img, ul.fans li img {
vertical-align: middle;
}
#subscribe_div {
margin-bottom: 3px;
}
.subscribe-link {
color: #fff;
font-size: 11px;
padding-left: 20px;
line-height: 20px;
position: relative;
top: -2px;
}
.subscribe-posterous {
background: url(/images/favicon.png) no-repeat -1px -1px;
height: 20px;
margin: 3px 0px;
}
.subscribe-rss {
background: url(/images/feed-icon-14x14.png) no-repeat;
height: 16px;
margin: 3px 0px;
}
.posterousHeader {
margin: 0px 0px;
}
.editbox { visibility: hidden; position: absolute; top: -10px; }
.postunit:hover .editbox { visibility: visible;}
.metricLabel { font-size: 10px; color: #fff; }
.metricValue { font-size: 10px; color: #fff; font-weight: bold; }
#posterous_bar { position: absolute; top: 0px; left: 50%; margin-left: -140px; }
div.posterous_quote_citation { margin: 5px 0px 15px;}
div.profile_ajax_reply { padding-left: 20px; }
</style>
</head>
<body>
<div id="doc2" class="yui-t3">
<div id="hd">
</div><!-- #hd -->
<div id="bd">
<div id="yui-main">
<div class="yui-b">
<div class="yui-g">
{block:PosterousBar direction="left" translucent="false"}{/block:PosterousBar}
<div id="posts">
{block:SearchPage}
<div class="search-results">
<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="searchbox searchbox_large" 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">
<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}">Search all of posterous for <b>{SearchQuery}</b> &raquo;</a>
</div>
{/block:SearchPage}
{block:Tag}
<div class="tag-results">
Filed under
<h2>{Tag}</h2>
<a href="{GlobalTagURL}" id="see_all_tags">
See all posts on posterous with this tag »
</a>
</div>
{/block:Tag}
{block:Posts}
<div id="postunit_{PostID}" class="postunit {TagsAsClasses}">
{block:EditBox}
<div class="editbox">{EditBoxContents}&nbsp;</div>
{/block:EditBox}
<div id="post_{PostID}" class="post">
{block:Private}
<div 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>
</div>
{/block:Private}
{block:Title}<h2 id="posttitle_{PostID}"><a href="{Permalink}">{Title}</a></h2>{/block:Title}
{block:SMS}
<div class="sms_notice">Posted from my mobile phone (SMS)</div>
{/block:SMS}
{block:List}
<p>{Body}</p>
{/block:List}
{block:Show}
<p>{Body}</p>
{/block:Show}
{block:Retweet}
<img class="retweet-icon" src="/images/icons/services/twitter11.png" />
<span id="retweet_count_{PostID}">
<a href="{RetweetLink}">
{NumRetweets}
<span id="retweet_count_label_{PostID}">mentions</span>
</a>
</span>
{RetweetButton}
{/block:Retweet}
<fb:like href="{Permalink}" layout="button_count"></fb:like>
{block:List}
{block:TagList}
<div class="infobar tagsbar">
Filed under &nbsp;//&nbsp;
{block:TagListing}
<a href="{TagLink}">{TagName}</a>&nbsp;&nbsp;
{/block:TagListing}
</div>
{/block:TagList}
{/block:List}
<div class="infobar">
<div class="details">
<div class="comment_list">
{block:Comments}
{block:CommentsList action_id='comment_link_{PostID}' target_element='post_commentarea_{PostID}'}
<span>
<a href="{Permalink}#comment" id='comment_link_{PostID}' class="comments-name">Comment{CommentCountPluralized}</a> <span class="comments-quantity">({CommentCount})</span>
</span>
{/block:CommentsList}
{/block:Comments}
<div class="clear"></div>
</div><!-- .comment_list -->
</div><!-- .details -->
{block:ShowOrList}
<div class="location">
<span class="date">{block:NewDayDate}{ShortMonth} {DayOfMonth}, {Year} - Posted <a href="{Permalink}">{TimeAgo}</a>{/block:NewDayDate}
{block:Author}
{block:AuthorUser}
by <a href="{AuthorURL}">{AuthorName}</a>&nbsp;
<a href="{AuthorURL}"><img src="{AuthorPortraitURL-35}" width='11' height='11' class='profile_border' /></a>
{/block:AuthorUser}
{block:AuthorEmail}
by email&nbsp;
{/block:AuthorEmail}
{/block:Author}
</span>
{block:PostLocations}
<br /><div id="location_collapsed_{PostID}" class="loc"><a href="#" id="post_location_expander_{PostID}" class="location-name">{LocationsSummary}</a></div>
{/block:PostLocations}
</div>
{/block:ShowOrList}
</div><!-- /.infobar -->
{block:Comments}
<div id="post_commentarea_{PostID}" class="comment-area">
{block:CommentsShow}
<a name="comment"></a>
<h4>{CommentCount} comment{CommentCountPluralized}</h4>
{CommentCode}
<h4 style="margin-top: 25px;">Leave a comment...</h4>
{NewCommentCode}
{/block:CommentsShow}
</div>
{/block:Comments}
<div class="clear"></div>
{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:ShowOnClick action_id='post_location_expander_{PostID}' hidden_div='post_location_expanded_{PostID}' to_hide_id='location_collapsed_{PostID}'/}
{/block:PostLocations}
{block:Favorite hover_id='postunit_{PostID}' position_id='postunit_{PostID}'/}
</div><!-- .post -->
<div class="clear"></div>
</div><!-- .postunit -->
{/block:Posts}
{block:Pagination/}
</div><!-- #posts -->
</div><!-- .yui-g -->
</div><!-- .yui-b -->
</div><!-- #yui-main -->
<div class="yui-b">
<div id="primary" class="widget-area">
<div id="branding" class="sidebar-block">
{block:HeaderImage}
<div id="header-image">
<a href="{SiteURL}">
<img src="{HeaderImageURL-500}" alt="{Title} - {Description}"/>
</a>
</div>
{Else}
<h1 id="site-title"><a href="{SiteURL}">{Title}</a></h1>
{block:Description}
<div class="site-description">
{Description}
</div>
{/block:Description}
{/block:HeaderImage}
</div>
{block:Show}
<div id="blog-back" class="sidebar-block">
<a href="{SiteURL}">&laquo;&nbsp;Back to blog</a>
</div>
<div id="metrics" class="sidebar-block">
<div>
<span class="metricLabel">Viewed </span>
<span class="metricValue">{PostViews} times</span>
</div>
<div id="favorite_fans">
<span class="metricLabel">Favorited </span>
<span class="metricValue"> <a href="#" id="favorite_fans_link" onClick="return false;">{FavoriteCount} times</a></span>
</div>
</div>
<div id="fan_hidden" style="display:none" class="sidebar-block">
{block:Fans}
<h3>Fans of this post</h3>
<ul class="fans">
{block:Fan}
<li>
<a href="{FanProfileLink}" rel='nofollow'>
<img src="{FanPortraitURL-20}" width="20" height="20" class='profile_border'/>
</a>
<a href="{FanProfileLink}" rel='nofollow'>
{FanName}
</a>
</li>
{/block:Fan}
</ul>
{/block:Fans}
</div>
{block:ShowOnClick action_id='favorite_fans_link' hidden_div='fan_hidden'/}
{/block:Show}
<div id="main-nav" class="sidebar-block">
<ul>
{block:Pages}
<li><a href="{URL}" class="{Current}">{Label}</a></li>
{/block:Pages}
</ul>
</div>
<div id="search" class="sidebar-block">
<form method='get' action="{SiteURL}">
<input type='hidden' name='sort' value="{SearchSort}"/>
<input type='text' name='search' value='{SearchQuery}' class="search" id="searchbox"/>
<input type='submit' value='Search' class="searchbox_button" id="searchbox_button"/>
</form>
</div>
{block:List}
<div id="my-sites" class="sidebar-block">
<h3>My Other Sites</h3>
{ProfileExternalLinks}
</div>
{block:Contributors}
<div id="contributors" class="sidebar-block">
<h3>Contributors</h3>
<ul class="contribs">
{block:Contributor}
<li>
<a href="{ContributorProfileLink}">
<img src="{ContributorPortraitURL-20}" class='profile_border' />
</a>
<a href="{ContributorProfileLink}">
{ContributorName}
</a>
</li>
{/block:Contributor}
</ul>
</div>
{/block:Contributors}
{block:TagList}
<div id="tags" class="sidebar-block">
<h3>Tags</h3>
<ul class="tag">
{block:TagListing collapsible='true' count='10' action_id='seemore_link'}
{block:TagListingMore}
<li><a href="#" id="seemore_link" class="more-tags">View all {NumTags} tags&nbsp;&raquo;</a></li>
{/block:TagListingMore}
{block:TagItem}
<li><a href="{TagLink}">{TagName}</a> ({TagCount})</li>
{/block:TagItem}
{block:TagItemSelected}
<li class="tag_item_selected"><strong>{TagName}</strong> ({TagCount})</li>
{/block:TagItemSelected}
{/block:TagListing}
</ul>
</div>
{/block:TagList}
{/block:List}
<div id="subscription" class="sidebar-block">
{block:Subscription}
<h3>Get Updates</h3>
{block:SubscriptionUnsubscribed action_id='subscribe_link' content_div='subscribe_div'}
<div id="subscribe-div" class="subscribe-posterous">
<a href="{SubscribeLink}" id="subscribe_link" class="subscribe-link">Subscribe to this posterous&nbsp;&raquo;</a>
</div>
{/block:SubscriptionUnsubscribed}
{block:SubscriptionSubscribed action_id='unsubscribe_link' content_div='unsubscribe_div'}
<div id="unsubscribe-div" class="subscribe-posterous">
<a href="{UnsubscribeLink}" id="unsubscribe_link" class="subscribe-link">Unsubscribe&nbsp;&raquo;</a>
</div>
{/block:SubscriptionSubscribed}
{block:SubscriptionLoading}
<img src="/images/loading.gif">
{/block:SubscriptionLoading}
{/block:Subscription}
{block:NotSearchOrTag}
<div class="subscribe-rss"><a href="{RSS}" class="subscribe-link">Subscribe via RSS</a></div>
{/block:NotSearchOrTag}
</div>
<div id="iframe-div" class="sidebar-block">
<h3>Twitter</h3>
<iframe src="http://static.johndturner.com/posterous.html"></iframe>
</div>
</div>
</div><!-- #sidebar -->
</div><!-- #bd -->
<div id="ft">
</div><!-- #ft -->
</div>
</body>
</html>
​
Raw
twitter-sidebar.html
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://static.johndturner.com/jquery-1.3.2.min.js"></script>
<script type="text/javascript">
jQuery.noConflict();
jQuery(document).ready(function(){
});
</script>
</head>
<body>
<script src="http://widgets.twimg.com/j/2/widget.js"></script>
<script>
new TWTR.Widget({
version: 2,
type: 'profile',
rpp: 4,
interval: 6000,
width: 200,
height: 300,
theme: {
shell: {
background: 'transparent',
color: '#ffffff'
},
tweets: {
background: 'transparent',
color: '#ffffff',
links: '#adadad'
}
},
features: {
scrollbar: false,
loop: false,
live: true,
hashtags: true,
timestamp: true,
avatars: false,
behavior: 'all'
}
}).render().setUser('johnturner').start();
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment