Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!--
- THEME: Forgive the Sinner
- by Phil (spirkism/spirkthemes)
- Rules:
- - please do not steal/redistribute, I spent quite a bit of time coding this
- - also don't remove the credit please, that would make me very sad :(
- - don't use as a base code, there are plenty of those out there
- - you are allowed to edit as much as you like though, have fun playing around with code, that's how you learn! :)
- - tell me if there are any bugs or if you have any questions, need help with the theme or want a detail differently - I'll see what I can do for you ;)
- And now: enjoy! :)
- Originally created per request for forgivethesinnersammy
- -->
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <title>{Title}</title>
- {block:Description}
- <meta name="description" content="{MetaDescription}" />
- {/block:Description}
- <link rel="shortcut icon" href="{Favicon}" />
- <link rel="alternate" type="application/rss+xml" title="{Title} RSS" href="{RSS}"/>
- <link href='http://fonts.googleapis.com/css?family=Playball' rel='stylesheet' type='text/css'>
- <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
- <script type="text/javascript" src="http://static.tumblr.com/tiu5k68/xTkm8wqw2/tumblr-title-qtip.js"></script>
- <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
- <meta name="color:background" content="#ffffff" />
- <meta name="color:header" content="#ffdc90" />
- <meta name="color:title" content="#ff8e25" />
- <meta name="color:titlehover" content="#ffae00" />
- <meta name="color:sblinkbg" content="#ff8e25" />
- <meta name="color:sblinkbghover" content="#ffae00" />
- <meta name="color:navcolor" content="#3b3b3b" />
- <meta name="color:navcolorhover" content="#ffffff" />
- <meta name="color:text color" content="#373737" />
- <meta name="color:link color" content="#ef790b" />
- <meta name="color:link hover color" content="#ffa024" />
- <meta name="color:border" content="#e3c3a1" />
- <meta name="color:postinside" content="#fff6d6" />
- <!-- image metas -->
- <meta name="image:sbimg" content="" />
- <!-- text metas -->
- <meta name="text:link1url" content="/" />
- <meta name="text:link1hover" content="home" />
- <meta name="text:link2url" content="/ask" />
- <meta name="text:link2hover" content="ask" />
- <meta name="text:link3url" content="/" />
- <meta name="text:link3hover" content="link" />
- <meta name="text:link4url" content="/" />
- <meta name="text:link4hover" content="link" />
- <meta name="text:link5url" content="/" />
- <meta name="text:link5hover" content="link" />
- <meta name="text:link6url" content="/" />
- <meta name="text:link6hover" content="link" />
- <meta name="text:link7url" content="/" />
- <meta name="text:link7hover" content="link" />
- <meta name="text:link8url" content="/" />
- <meta name="text:link8hover" content="link" />
- <meta name="if:Wideheader" content="1" />
- <meta name="if:HoverDesc" content="1" />
- <style type="text/css">
- iframe#tumblr_controls {
- position:fixed;-webkit-filter:invert(100%);opacity:0.5;
- -webkit-transition: 0.7s ease;transition: 0.7s ease;
- -o-transition: 0.7s ease;-moz-transition: 0.7s ease;}
- div#qTip {
- margin-left: 5px;
- margin-top: -5px;
- text-transform: lowercase;
- font-size: 9px;
- line-height: 13px;
- display: none;
- text-align: center;
- position: absolute;
- z-index: 9999999999999999;
- background: {color:background};
- padding: 2px 3px;
- color: {color:text color};
- max-width: 100px;
- height: auto;
- border: 2px double {color:border};
- font-family: 'Calibri', sans-serif;
- -webkit-transition: all 0.1s ease-out;
- -moz-transition: all 0.1s ease-out;
- -o-transition: all 0.1s ease-out;
- }
- /* GENERAL STUFF */
- ::-webkit-scrollbar {
- width:5px;height: 5px;background: {color:border};
- }
- ::-webkit-scrollbar-thumb {
- background: {color:title};
- }
- body {
- background-color: {color:background};
- font-family: 'Calibri', sans-serif;
- margin: 0;
- word-wrap: break-word;
- background-attachment: fixed;
- background-repeat: no-repeat;
- color: {color:text color};
- }
- a:link, a:active, a:visited {
- text-decoration: none;
- -webkit-transition: 0.5s ease;transition: 0.5s ease;
- -o-transition: 0.5s ease;
- -moz-transition: 0.5s ease;
- color:{color:link color};
- }
- a:hover {
- color:{color:link hover color};
- -webkit-transition: 0.5s ease;transition: 0.5s ease;
- -o-transition: 0.5s ease;
- -moz-transition: 0.5s ease;
- }
- /* SIDEBAR THINGS */
- #header {
- position: fixed;
- width: 500px;
- top: 0;
- left: 525px;
- height: 50px;
- background-color: {color:header};
- z-index: 99999;
- }
- #wideheader {
- position: fixed;
- width: 100%;
- top: 0;
- height: 50px;
- background-color: {color:header};
- z-index: 9999;
- }
- #title {
- position: absolute;
- text-align: center;
- width: 400px;
- left: 50px;
- top: 12px;
- font-family: 'Playball', serif;
- font-size: 20px;
- }
- #title a {
- color: {color:title};
- -webkit-transition: 0.5s ease;transition: 0.5s ease;
- -o-transition: 0.5s ease;
- -moz-transition: 0.5s ease;
- }
- #title a:hover {
- color: {color:titlehover};
- -webkit-transition: 0.5s ease;transition: 0.5s ease;
- -o-transition: 0.5s ease;
- -moz-transition: 0.5s ease;
- }
- #sidebar {
- position: fixed;
- left: 150px;
- top: 150px;
- width: 170px;
- height: auto;
- }
- #sbimg {
- position: relative;
- width: 170px;
- height: auto;
- margin-bottom: 10px;
- }
- #sbimg img {
- width: 170px;
- height: auto;
- }
- #sidebarlinks {
- position: relative;
- width: 170px;
- height: 35px;
- margin-bottom: 10px;
- }
- #sblinks {
- position: absolute;
- width: 80px;
- left: 43px;
- height: 60px;
- }
- .sblink {
- width: 10px;
- height: 10px;
- border-radius: 50%;
- background-color: {color:sblinkbg};
- float: left;
- margin-left: 5px;
- margin-bottom: 5px;
- border:2px solid {color:border};
- -webkit-transition: 0.5s ease;transition: 0.5s ease;
- -o-transition: 0.5s ease;
- -moz-transition: 0.5s ease;
- }
- .sblink:hover {
- background-color: {color:sblinkbghover};
- -webkit-transition: 0.5s ease;transition: 0.5s ease;
- -o-transition: 0.5s ease;
- -moz-transition: 0.5s ease;
- }
- #prevpage {
- position: absolute;
- width: 15px;
- height: 15px;
- border-radius: 50%;
- background-color: {color:sblinkbg};
- color: {color:navcolor};
- top: 7px;
- left: 23px;
- text-align: center;
- line-height: 13px;
- font-size: 15px;
- border:2px solid {color:border};
- -webkit-transition: 0.5s ease;transition: 0.5s ease;
- -o-transition: 0.5s ease;
- -moz-transition: 0.5s ease;
- }
- #prevpage:hover {
- background-color: {color:sblinkbghover};
- color: {color:navcolorhover};
- -webkit-transition: 0.5s ease;transition: 0.5s ease;
- -o-transition: 0.5s ease;
- -moz-transition: 0.5s ease;
- }
- #nextpage {
- position: absolute;
- width: 15px;
- height: 15px;
- border-radius: 50%;
- background-color: {color:sblinkbg};
- color: {color:navcolor};
- top: 7px;
- left: 125px;
- text-align: center;
- font-size: 15px;
- line-height: 13px;
- border:2px solid {color:border};
- -webkit-transition: 0.5s ease;transition: 0.5s ease;
- -o-transition: 0.5s ease;
- -moz-transition: 0.5s ease;
- }
- #nextpage:hover {
- background-color: {color:sblinkbghover};
- color: {color:navcolorhover};
- -webkit-transition: 0.5s ease;transition: 0.5s ease;
- -o-transition: 0.5s ease;
- -moz-transition: 0.5s ease;
- }
- {block:IfHoverDesc}
- #desc {
- position: absolute;
- width: 170px;
- height: auto;
- color: {color:text color};
- font-size: 11px;
- font-family: 'Calibri', sans-serif;
- text-align: center;
- opacity: 0;
- margin-top: -60px;
- -webkit-transition: 1s ease;transition: 1s ease;
- -o-transition: 1s ease;
- -moz-transition: 1s ease;
- }
- #sidebar:hover #desc {
- margin-top: 1px;
- opacity: 1;
- -webkit-transition: 1s ease;transition: 1s ease;
- -o-transition: 1s ease;
- -moz-transition: 1s ease;
- }
- {/block:IfHoverDesc}
- {block:IfNotHoverDesc}
- #desc {
- position: absolute;
- width: 170px;
- height: auto;
- color: {color:text color};
- font-size: 11px;
- font-family: 'Calibri', sans-serif;
- text-align: center;
- margin-top: 1px;
- -webkit-transition: 1s ease;transition: 1s ease;
- -o-transition: 1s ease;
- -moz-transition: 1s ease;
- }
- {/block:IfNotHoverDesc}
- /*CONTENT THINGS */
- #content {
- width: 600px;
- background-color: none;
- padding: 20px 0;
- color: {color:text};
- overflow: hidden;
- margin-left: 515px;
- margin-top: 70px;
- position: relative;
- }
- #content a {
- color: {color:link color};
- text-decoration: none;
- }
- #content a:hover {
- color: {color:link hover color};
- }
- #content blockquote {
- border-left: solid 2px #505050;
- margin: 0;
- padding-left: 10px;
- }
- img {
- border: 0;
- max-width: 100%;
- }
- #content #posts {
- width: 500px;
- height: auto;
- margin: 0 0 80px 0;
- padding: 10px 10px 20px 10px;
- font-size: 14px;
- position: relative;
- border-bottom: 3px double {color:border};
- }
- #content #posts .title {
- font-size: 16px;
- }
- #content #posts .text {
- font-size: 12px;
- }
- /* PERMALINK STUFF */
- #permalink {
- font-size: 9px;
- margin-top: 2px;
- }
- #posts:hover #tags {
- opacity: 1;
- -webkit-transition: 0.7s ease;transition: 0.7s ease;
- -o-transition: 0.7s ease;
- -moz-transition: 0.7s ease;
- }
- #tags {
- font-size:9px;
- width: 500px;
- text-align: center;
- margin-top: 35px;
- opacity:0;
- position: absolute;
- -webkit-transition: 0.7s ease;transition: 0.7s ease;
- -o-transition: 0.7s ease;
- -moz-transition: 0.7s ease;
- }
- #tags .comma:last-child {
- display: none;
- }
- #reblogged {
- position: relative;
- font-size: 9px;
- overflow: hidden;
- }
- /* PERMALINK PAGE THINGS */
- #content #notecontainer {
- margin-left: 30px;
- margin-top: -10px;
- width: 460px;
- font-size: 11px;
- }
- #content #notecontainer ol.notes {
- list-style-type: none;
- margin: 1px 1px 1px 1px;
- padding: 1px;
- line-height: 16px;
- }
- #content #notecontainer img.avatar {
- width: 16px;
- height: 16px;
- margin: 1px 5px 1px 1px;
- padding: 1px;
- }
- #content #posts #tagsbox {
- position: absolute;
- padding: 1px 4px 3px 4px;
- margin-top: 11px;
- background-color: {color:postinside};
- text-align: center;
- width: 450px;
- margin-left: 19px;
- border: 2px double {color:border};
- }
- /* POST STUFF */
- .linkpost {
- padding: 5px;
- }
- .linktitle {
- margin-bottom: 3px;
- font-size: 18px;
- background-color: {color:postinside};
- border: 2px double {color:border};
- padding: 10px;
- text-align: center;
- font-family: 'Playball', sans-serif;
- -webkit-transition: 0.5s ease;transition: 0.5s ease;
- -o-transition: 0.5s ease;
- -moz-transition: 0.5s ease;
- }
- .linktitle:hover {
- background-color: {color:caption};
- -webkit-transition: 0.5s ease;transition: 0.5s ease;
- -o-transition: 0.5s ease;
- -moz-transition: 0.5s ease;
- }
- .askicon img {
- z-index: 9;
- height: 40px;
- width: 40px;
- position: relative;
- border: 5px solid {color:border};
- }
- .askicon img{
- z-index: 9;
- width: 40px;
- }
- .arrow-left {
- width: 0;
- height: 0;
- border-top: 15px solid transparent;
- border-bottom: 15px solid transparent;
- border-right:25px solid {color:border};
- position: relative;
- margin-left: 50px;
- margin-top: -47px;
- }
- .question {
- width: 403px;
- height: auto;
- padding: 2px 10px 7px 10px;
- color: {color:text color};
- background-color: {color:border};
- font-size: 12px;
- text-align: left;
- margin-left: 74px;
- margin-top: -35px;
- margin-bottom: 15px;
- }
- .asker {
- font-size: 17px;
- color: {color:link color};
- text-align: left;
- margin-top: 5px;
- margin-bottom: 3px;
- font-family: 'Playball', sans-serif;
- }
- .answer {
- font-size: 12px;
- padding: 1px 10px 5px 10px;
- width: 477px;
- margin-top:-12px;
- overflow: hidden;
- margin-left: 10px;
- }
- .textpost {
- font-size: 12px;
- margin-top: -12px;
- }
- .posttitle {
- margin-bottom: 3px;
- font-size: 18px;
- background-color: {color:postinside};
- padding: 10px;
- text-align: center;
- font-family: 'Playball', sans-serif;
- }
- .caption {
- font-size: 12px;
- background-color: {color:caption};
- padding: 5px;
- }
- .quote {
- font-size: 18px;
- font-family: 'Playball';
- text-align: center;
- margin-bottom: 5px;
- }
- .quotesource {
- text-align: center;
- font-family: 'Calibri', sans-serif;
- font-size: 12px;
- }
- .audiopost {
- padding: 0 10px;
- width: 477px;
- font-size: 10px;
- margin-top: -20px;
- }
- .audio {
- border: 2px double {color:border};
- text-align: center;
- padding: 5px 10px;
- width: 478px;
- font-size: 15px;
- margin-bottom: 7px;
- font-family: 'Playball';
- background-color: {color:postinside};
- }
- .chattitle {
- font-size: 18px;
- font-family: 'Playball', sans-serif;
- background-color: {color:postinside};
- border: 2px double {color:border};
- padding: 2px;
- text-align: center;
- margin-bottom: 10px;
- }
- .chat {
- font-size: 12px;
- font-family: 'Calibri', sans-serif;
- margin-left: 20px;
- }
- #credit {
- bottom: 8px;
- right: 8px;
- border: 1px solid #BABABA;
- font-size: 10px;
- color: #5A5A5A;
- height: 13px;
- width: 13px;
- line-height: 13px;
- position: fixed;
- text-align: center;
- background-color: white;
- -webkit-transition: 0.5s ease;transition: 0.5s ease;
- -o-transition: 0.5s ease;
- -moz-transition: 0.5s ease;
- }
- #credit:hover {
- background-color: #2E2E2E;
- color: #fff;
- -webkit-transition: 0.5s ease;transition: 0.5s ease;
- -o-transition: 0.5s ease;
- -moz-transition: 0.5s ease;
- }
- {CustomCSS}
- </style>
- </head>
- <body>
- <div id="header"><div id="title"><a href="/">{Title}</a></div></div>
- {block:IfWideheader}
- <div id="wideheader"></div>
- {/block:IfWideheader}
- <div id="sidebar">
- <div id="sbimg"><img src="{image:sbimg}"></div>
- <div id="sidebarlinks">
- <div id="sblinks">
- <a href="{text:link1url}" title="{text:link1hover}"><div class="sblink"></div></a>
- <a href="{text:link2url}" title="{text:link2hover}"><div class="sblink"></div></a>
- <a href="{text:link3url}" title="{text:link3hover}"><div class="sblink"></div></a>
- <a href="{text:link4url}" title="{text:link4hover}"><div class="sblink"></div></a>
- <a href="{text:link5url}" title="{text:link5hover}"><div class="sblink"></div></a>
- <a href="{text:link6url}" title="{text:link6hover}"><div class="sblink"></div></a>
- <a href="{text:link7url}" title="{text:link7hover}"><div class="sblink"></div></a>
- <a href="{text:link8url}" title="{text:link8hover}"><div class="sblink"></div></a>
- </div>
- {block:PreviousPage}
- <a href="{PreviousPage}"><div id="prevpage">«</div></a>
- {/block:PreviousPage}
- {block:NextPage}
- <a href="{NextPage}"><div id="nextpage">»</div></a>
- {/block:NextPage}
- </div>
- <div id="desc">{Description}</div>
- </div>
- <!-- boring post stuff - you don't really need to edit there I'd say -->
- <div id="content">
- {block:Posts}
- <div id="posts">
- {block:ContentSource}
- <!-- {SourceURL}{block:SourceLogo}<img src="{BlackLogoURL}"
- width="{LogoWidth}" height="{LogoHeight}" alt="{SourceTitle}" />
- {/block:SourceLogo}
- {block:NoSourceLogo}{SourceLink}{/block:NoSourceLogo} -->
- {/block:ContentSource}
- {block:Photo}
- {LinkOpenTag}<img src="{PhotoURL-500}" />{LinkCloseTag}
- {block:Caption}<div class="caption">{Caption}</div>{/block:Caption}
- {/block:Photo}
- {block:Photoset}
- {Photoset-500}
- {block:Caption}<div class="caption">{Caption}</div>{/block:Caption}
- {/block:Photoset}
- {block:Video}
- {Video-500}
- {block:Caption}<div class="caption">{Caption}</div>{/block:Caption}
- {/block:Video}
- {block:Audio}
- <div class="audio {select:Font}">
- {block:TrackName}
- {TrackName}
- {/block:TrackName}
- {block:Artist}
- ···
- {Artist}
- {/block:Artist}
- </div>
- {AudioPlayerWhite}
- {block:Caption}<br /><div class="audiopost">{Caption}</div>{/block:Caption}
- {/block:Audio}
- {block:Quote}
- <div class="quote {select:Font}">“{Quote}”</div>
- {block:Source}<div class="quotesource">- {Source}</div>{/block:Source}
- {/block:Quote}
- {block:Text}
- {block:Title}<div class="{select:Font}" id="posttitle">{Title}</div><br/>{/block:Title}<div class="textpost">{Body}</div>
- {/block:Text}
- {block:Answer}
- <div class="askicon"><img src="{AskerPortraitURL-64}" /></div><div class="arrow-left"></div>
- <div class="question"><div class="asker">{Asker}:</div>{Question}</div>
- <div class="answer">{block:Answerer}<div class="answerer">{Answerer}:</div>{/block:Answerer}<div class="answerer-answer">{Answer}</div></div>
- {block:Caption}<div class="caption">{Caption}</div>{/block:Caption}
- {/block:Answer}
- {block:Chat}
- {block:Title}<div class="chattitle {select:Font}">{Title}</div>{/block:Title}
- {block:Lines}<div class="chat">
- {block:Label}<strong>{Label} </strong>{/block:Label}{Line}<br />
- </div>{/block:Lines}
- {/block:Chat}
- {block:Link}
- <div class="linkpost">
- <a href="{URL}" ><div class="{select:Font} linktitle">{Name}</div></a>
- {block:Description}<div class="caption">{Description}</div>{/block:Description}</div>
- {/block:Link}
- <div id="tagsbox">
- <div id="permalink">
- <a href="{Permalink}">
- {block:Date}{lang:Posted TimeAgo}{/block:Date}
- {block:NoteCount} with {NoteCountWithLabel}{/block:NoteCount}</a>
- {block:RebloggedFrom} · via: <a href="{ReblogParentURL}">{ReblogParentName}</a> -
- originally: <a href="{ReblogRootURL}">{ReblogRootName}</a>
- {/block:RebloggedFrom}
- ·
- <a href="{ReblogURL}" target="_blank">reblog</a>
- </div>
- </div>
- {block:HasTags}<div id="tags">
- {block:Tags}
- <a href="{TagURL}">{Tag}</a><span class="comma"> · </span>
- {/block:Tags}
- </div>
- {/block:HasTags}
- </div> <!-- posts div -->
- {block:PostNotes}
- <div id="notecontainer">{PostNotes}</div>
- {/block:PostNotes}
- {/block:Posts}
- </div> <!-- content div-->
- <a href="http://spirkthemes.tumblr.com"><div id="credit">P</div></a>
- </body>
- </html>
Advertisement
Add Comment
Please, Sign In to add comment