Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!--
- THEME: HIDDEN
- by Phil (spirkism/spirkthemes)
- Originally made for i-always-pictured-you-as-watson :)
- 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! :)
- -->
- <!DOCTYPE html>
- <head>
- <title>{Title}</title>
- <link rel="shortcut icon" href="{Favicon}" />
- <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.11.1/jquery.min.js"></script>
- <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>
- <link href='http://fonts.googleapis.com/css?family=Josefin+Sans:400,600|Julius+Sans+One' rel='stylesheet' type='text/css'>
- <link href='http://fonts.googleapis.com/css?family=Shadows+Into+Light|Open+Sans+Condensed:300|Iceland|Roboto+Slab|Amatic+SC|Courgette|Prata' rel='stylesheet' type='text/css'>
- <script>
- $(document).ready(function(){
- var clickCount = 0;
- $('#nav').click(function(){
- if(clickCount%2==0) {
- $('#sidebarright').fadeIn(1000);
- }
- if(clickCount%2==1) {
- $('#sidebarright').fadeOut(1000);
- }
- clickCount++;
- });
- });
- </script>
- <meta name="color:background" content="#fff" />
- <meta name="color:text" content="#2E2E2E" />
- <meta name="color:links" content="#220146" />
- <meta name="color:linkshover" content="#5104A4" />
- <meta name="color:sblinkbg" content="#A34DFF" />
- <meta name="color:sblinktext" content="#303030" />
- <meta name="color:sblinkbghover" content="5104A4" />
- <meta name="color:sblinktexthover" content="#ffffff" />
- <meta name="color:posts" content="#DBDBDB" />
- <meta name="color:border" content="#E6E6E6" />
- <meta name="color:postinside" content="#ffffff" />
- <meta name="color:title" content="7A1BDF" />
- <meta name="color:titlehover" content=#"B670FF" />
- <meta name="color:desc" content="#fff" />
- <meta name="image:sidebarimg01" content=""/>
- <meta name="image:sidebarimg02" content=""/>
- <meta name="text:titlequote" content="hello I am a random title quote" />
- <meta name="text:headerlink1url" content="/" />
- <meta name="text:headerlink1text" content="home" />
- <meta name="text:headerlink2url" content="/ask" />
- <meta name="text:headerlink2text" content="ask" />
- <meta name="text:headerlink3url" content="/" />
- <meta name="text:headerlink3text" content="link" />
- <meta name="text:navigation" content="more" />
- <meta name="text:link1url" content="/" />
- <meta name="text:link1text" content="link" />
- <meta name="text:link2url" content="/" />
- <meta name="text:link2text" content="link" />
- <meta name="text:link3url" content="/" />
- <meta name="text:link3text" content="link" />
- <meta name="text:link4url" content="/" />
- <meta name="text:link4text" content="link" />
- <meta name="text:link5url" content="/" />
- <meta name="text:link5text" content="link" />
- <meta name="text:link6url" content="/" />
- <meta name="text:link6text" content="link" />
- <meta name="select:TitleFont" content="opensanscondensed" title="Open Sans Condensed">
- <meta name="select:TitleFont" content="robotoslab" title="Roboto Slab">
- <meta name="select:TitleFont" content="shadowsintolight" title="Shadows Into Light">
- <meta name="select:TitleFont" content="amaticsc" title="Amatic SC">
- <meta name="select:TitleFont" content="courgette" title="Courgette">
- <meta name="select:TitleFont" content="prata" title="Prata">
- <style type="text/css">
- ::-webkit-scrollbar-thumb{
- background-color: {color:title};
- border-left: 2px solid;
- border-right: 2px solid;
- border-color: {color:background};
- height:auto;
- }
- ::-webkit-scrollbar {
- height:auto;
- width:11px;
- background-color:{color:title};
- border-left: 5px solid;
- border-right: 5px solid;
- border-color: {color:background};
- }
- 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: 10px;
- font-family: 'Iceland', sans-serif;
- line-height: 12px;
- display: none;
- text-align: center;
- position: absolute;
- z-index: 99999999999999999999999999999999999999999999999;
- background-color: {color:background};
- padding: 2px 3px;
- color: {color:text};
- max-width: 200px;
- height: auto;
- border: 1.5px solid {color:title};
- -webkit-transition: all 0.1s ease-out;
- -moz-transition: all 0.1s ease-out;
- -o-transition: all 0.1s ease-out;
- }
- body {
- background-color: {color:background};
- margin: 0 auto;
- font-family: 'Calibri', sans-serif;
- word-wrap:break-word;
- }
- 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:links};
- }
- a:hover {
- color:{color:linkshover};
- -webkit-transition: 0.5s ease;transition: 0.5s ease;
- -o-transition: 0.5s ease;
- -moz-transition: 0.5s ease;
- }
- :focus, :active {
- outline: 0;
- }
- /* HEADER */
- #header {
- top: 0;
- position: fixed;
- width: 800px;
- height: 110px;
- background-color: {color:background};
- z-index: 999;
- left: 50%;
- margin-left: -400px;
- }
- #titlequote {
- font-size: 20px;
- position: absolute;
- text-align: center;
- width: 800px;
- color: {color:title};
- top: 20px;
- font-size: 30px;
- }
- #titlequote:hover {
- color: {color:titlehover};
- }
- .opensanscondensed {
- font-family: 'Open Sans Condensed', serif;
- }
- .shadowsintolight {
- font-family: 'Shadows Into Light', serif;
- }
- .prata {
- font-family: 'Prata', serif;
- }
- .robotoslab {
- font-family: 'Roboto Slab', serif;
- }
- .amaticsc {
- font-family: 'Amatic SC', serif;
- }
- .courgette {
- font-family: 'Courgette', serif;
- }
- #headerlinks {
- position: absolute;
- width: 600px;
- left: 147px;
- top: 70px;
- }
- .headerlink {
- float: left;
- background-color: {color:sblinkbg};
- color: {color:sblinktext};
- margin-left: 5px;
- padding: 3px 10px;
- text-align: center;
- font-size: 12px;
- font-family: 'Calibri', sans-serif;
- width: 100px;
- -webkit-transition: 0.5s ease;transition: 0.5s ease;
- -o-transition: 0.5s ease;
- -moz-transition: 0.5s ease;
- }
- .headerlink:hover {
- background-color: {color:sblinkbghover};
- color: {color:sblinktexthover};
- -webkit-transition: 0.5s ease;transition: 0.5s ease;
- -o-transition: 0.5s ease;
- -moz-transition: 0.5s ease;
- }
- #nav {
- cursor: help;
- }
- /* SIDEBAR LEFT */
- #sidebar {
- position: fixed;
- left: 6%;
- top: 35%;
- }
- #sidebarleft {
- position: absolute;
- height: 200px;
- width: 200px;
- border-radius: 200px;
- border: 10px solid {color:border};
- }
- #sbimg01 {
- position: absolute;
- top:0;
- left: 0;
- width: 200px;
- height: 200px;
- border-radius: 200px;
- z-index: 9;
- }
- #sbimg01 img {
- border-radius: 200px;
- }
- #sbimg02 {
- position: absolute;
- top:0;
- left: 0;
- width: 200px;
- height: 200px;
- border-radius: 200px;
- z-index: 10;
- opacity: 0;
- -webkit-transition: 1s ease;transition: 1s ease;
- -o-transition: 1s ease;
- -moz-transition: 1s ease;
- }
- #sbimg02 img {
- border-radius: 200px;
- }
- #sidebarleft:hover #sbimg02 {
- opacity: 1;
- -webkit-transition: 1s ease;transition: 1s ease;
- -o-transition: 1s ease;
- -moz-transition: 1s ease;
- }
- #prevpage {
- position: absolute;
- top: 210px;
- color: {color:link};
- font-size: 40px;
- left: 30px;
- z-index: 999999;
- }
- #prevpage:hover {
- color: {color:linkhover};
- }
- #nextpage {
- position: absolute;
- top: 210px;
- left: 175px;
- color: {color:link};
- font-size: 40px;
- z-index: 999999;
- }
- #nextpage:hover {
- color: {color:linkhover};
- }
- /* SIDEBAR RIGHT */
- #sidebarright {
- position: fixed;
- right: 6%;
- top: 30%;
- height: 300px;
- width: 200px;
- display: none;
- z-index: 999999999999999;
- }
- #desc {
- color: {color:text};
- position: relative;
- border: 3px solid {color:border};
- font-size: 11px;
- padding: 10px;
- text-align: center;
- background-color: {color:desc};
- margin-bottom: 10px;
- }
- #sblinks {
- position: relative;
- left: 15px;
- }
- .sidebarlink {
- background-color: {color:sblinkbg};
- color: {color:sblinktext};
- padding: 3px 10px;
- margin-bottom: 3px;
- font-size: 12px;
- width: 150px;
- text-align: center;
- -webkit-transition: 0.5s ease;transition: 0.5s ease;
- -o-transition: 0.5s ease;
- -moz-transition: 0.5s ease;
- }
- .sidebarlink:hover {
- background-color: {color:sblinkbghover};
- color: {color:sblinktexthover};
- -webkit-transition: 0.5s ease;transition: 0.5s ease;
- -o-transition: 0.5s ease;
- -moz-transition: 0.5s ease;
- }
- /*CONTENT THINGS */
- #content {
- width: 560px;
- background-color: none;
- padding: 20px 0;
- color: {color:text};
- overflow: hidden;
- left: 50%;
- margin-top: 120px;
- margin-left: -260px;
- 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 {
- background-color: {color:posts};
- width: 500px;
- height: auto;
- margin: 0 0 80px 0;
- padding: 10px 10px 10px 10px;
- font-size: 14px;
- position: relative;
- }
- #content #posts .title {
- font-size: 16px;
- }
- #content #posts .text {
- font-size: 12px;
- }
- /* PERMALINK STUFF */
- #permalink {
- font-size: 9px;
- margin-top: 2px;
- }
- #tags {
- font-size:9px;
- width: 500px;
- text-align: center;
- margin-top: 15px;
- 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 {
- padding: 1px 4px 3px 4px;
- margin-top: 15px;
- background-color: {color:postinside};
- text-align: center;
- }
- /* POST STUFF */
- .linkpost {
- background-color: #ececec;
- padding: 5px;
- }
- .linktitle {
- margin-left: 7px;
- margin-bottom: 3px;
- padding: 10px 2px;
- font-size: 15px;
- font-family: 'Julius Sans One', sans-serif;
- }
- .askericon {
- width: auto;
- margin-left:228px;
- margin-top: -20px;
- overflow: visible;
- border-radius: 100px;
- }
- .askericon img {
- border-radius: 100px;
- border: 1px solid {color:border};
- }
- .askericon img:hover{
- }
- .askicon img {
- z-index: 9;
- height: 40px;
- width: 40px;
- position: relative;
- }
- .askicon img{
- z-index: 9;
- width: 40px;
- }
- .question {
- overflow: hidden;
- width: 477px;
- height: auto;
- margin-top: -14px;
- padding: 2px 10px 5px 10px;
- color: {color:text color};
- background-color: {color:postinside};
- font-size: 12px;
- text-decoration: italic;
- z-index:-9;
- text-align: center;
- }
- .asker {
- font-size: 13px;
- text-transform:uppercase;
- color: {color:link};
- text-align: center;
- margin-top: 10px;
- margin-bottom: 3px;
- font-family: 'Iceland', sans-serif;
- }
- .answer {
- font-size: 12px;
- padding: 5px 10px 0 10px;
- width: 477px;
- margin-top:-12px;
- overflow: hidden;
- background-color: {color:postinside};
- text-align: center;
- }
- .textpost {
- font-size: 12px;
- margin-top: -12px;
- }
- .caption {
- font-size: 12px;
- }
- .quote {
- font-size: 23px;
- font-family: 'Iceland', sans-serif;
- }
- .audiopost {
- padding: 0 10px;
- width: 477px;
- font-size: 10px;
- margin-top: -20px;
- }
- .audio {
- border: 1px solid {color:border};
- text-align: center;
- box-shadow: inset 1px 1px 3px gray;
- padding: 5px 10px;
- width: 478px;
- font-size: 15px;
- font-family: 'Iceland', sans-serif;
- margin-bottom: 7px;
- background-color: {color:postinside};
- }
- .chattitle {
- font-size: 16px;
- font-family: 'Iceland', serif;
- }
- /* PLEASE DO NOT REMOVE THE CREDIT OR MOVE IT */
- #credit {
- bottom: 8px;
- right: 8px;
- border: 1px solid #BABABA;
- font-size: 10px;
- color: #5A5A5A;
- height: 12px;
- width: 12px;
- line-height: 12px;
- position: fixed;
- text-align: center;
- -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;
- }
- </style>
- </head>
- <body>
- <div id="header">
- <div id="titlequote" class="{select:TitleFont}">{text:titlequote}</div>
- <div id="headerlinks">
- <a href="{text:headerlink1url}"><div class="headerlink">{text:headerlink1text}</div></a>
- <a href="{text:headerlink2url}"><div class="headerlink">{text:headerlink2text}</div></a>
- <a href="{text:headerlink3url}"><div class="headerlink">{text:headerlink3text}</div></a>
- <div id="nav" class="headerlink">{text:navigation}</div>
- </div>
- </div>
- <div id="sidebar">
- <div id="sidebarleft">
- <div id="sbimg01"><img src="{image:sidebarimg01}"></div>
- <div id="sbimg02"><img src="{image:sidebarimg02}"></div>
- </div>
- {block:Pagination}
- {block:PreviousPage}
- <a href="{PreviousPage}"><div id="prevpage">«</div></a>
- {/block:PreviousPage}
- {block:NextPage}
- <a href="{NextPage}"> <div id="nextpage"> »</div></a>
- {/block:NextPage}
- {/block:Pagination}
- </div>
- <div id="sidebarright">
- <div id="desc">{Description}</div>
- <div id="sblinks">
- <a href="{text:link1url}"><div class="sidebarlink">{text:link1text}</div></a>
- <a href="{text:link2url}"><div class="sidebarlink">{text:link2text}</div></a>
- <a href="{text:link3url}"><div class="sidebarlink">{text:link3text}</div></a>
- <a href="{text:link4url}"><div class="sidebarlink">{text:link4text}</div></a>
- <a href="{text:link5url}"><div class="sidebarlink">{text:link5text}</div></a>
- <a href="{text:link6url}"><div class="sidebarlink">{text:link6text}</div></a>
- </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">
- {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">“{Quote}”</div>
- {block:Source}<div class="text">~ {Source}</div>{/block:Source}
- {/block:Quote}
- {block:Text}
- {block:Title}<div id="title">{Title}</div><br/>{/block:Title}<div class="textpost">{Body}</div>
- {/block:Text}
- {block:Answer}
- <div class="askericon"><div class="askicon"><img src="{AskerPortraitURL-64}" /></div></div>
- <div class="question"><div class="asker">{Asker}:</div><em>{Question}</em></div><br />
- <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">{Title}</div>{/block:Title}
- {block:Lines}
- {block:Label}<strong>{Label}</strong>{/block:Label} <em>{Line}</em><br />
- {/block:Lines}
- {/block:Chat}
- {block:Link}
- <div class="linkpost"><div class="linktitle"><a href="{URL}" >{Name}</a></div></div>
- {block:Description}<div class="caption">{Description}</div>{/block:Description}
- {/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-->
- <!-- credit, please do not remove! -->
- <a href="http://spirkthemes.tumblr.com"><div id="credit">P</div></a>
- </body>
- </html>
Advertisement
Add Comment
Please, Sign In to add comment