Advertisement
timbllr

TIDE THEME CREATED BY TIMBLLR

Jun 9th, 2013
7,960
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 14.84 KB | None | 0 0
  1. <html>
  2.  
  3. <!--
  4.  
  5. TIDE THEME CREATED BY TIMBLLR
  6.  
  7. by using this theme you agree to not do any of the following:
  8.  
  9. - remove or change the credit of this theme
  10. - edit this html and take all credit
  11. - steal any parts of this code or redistribute it
  12.  
  13. -> this theme is licensed under the creative commons attribution 3.0 unported license <-
  14.  
  15. -->
  16.  
  17. <title>{title}</title>
  18.  
  19. <link rel="shortcut icon" href="{Favicon}">
  20. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  21. <link href='http://fonts.googleapis.com/css?family=Didact+Gothic|Lato|Oxygen:700,400|Raleway' rel='stylesheet' type='text/css'>
  22.  
  23.  
  24. <meta name="color:background" content="#ffffff" />
  25. <meta name="color:blogtitle" content="#ebc0ec" />
  26. <meta name="color:body links" content="#aeaeae"/>
  27. <meta name="color:header" content="#fff" />
  28. <meta name="color:hover background" content="#ebc0ec" />
  29. <meta name="color:links" content="#aeaeae"/>
  30. <meta name="color:text" content="#000" />
  31. <meta name="color:description" content="#aeaeae" />
  32.  
  33. <meta name="if:Disable Right Click" content="0"/>
  34. <meta name="if:Font 1" content="0">
  35. <meta name="if:Font 2" content="1">
  36. <meta name="if:Font 3" content="0">
  37. <meta name="if:Show A Home Link" content="1"/>
  38. <meta name="if:Show Ask Link" content="1"/>
  39. <meta name="if:Show Archive Link" content="1"/>
  40. <meta name="if:Infinite scroll" content="1"/>
  41. <meta name="if:1 column" content="0"/>
  42. <meta name="if:2 columns" content="0"/>
  43. <meta name="if:3 columns" content="0"/>
  44. <meta name="if:4 columns" content="1"/>
  45. <meta name="if:5 columns" content="0"/>
  46.  
  47. <meta name="text:Ask Page" content="/ask" />
  48. <meta name="text:Reblog Word" content="REBLOG" />
  49. <meta name="text:Padding Top" content="150" />
  50.  
  51. <head>
  52.  
  53.  
  54. <style type="text/css">
  55.  
  56. iframe#tumblr_controls { white-space:nowrap; -webkit-filter: invert(100%); -moz-filter: invert(100%); -o-filter: invert(100%); -ms-filter: invert(100%); filter: invert(100%); opacity:.2;transition: .8s ease-in-out; -webkit-transition: .8s ease-in-out;-moz-transition: .8s ease-in-out;-o-transition: .8s ease-in-out;position:fixed;}
  57.  
  58. ::-moz-selection {background: #fdfdfd;color: {color:text};}::selection { background: #fdfdfd;color: {color:hover background};}
  59.  
  60. #content {margin:auto;{block:if1column}width:800px;left:13%;{/block:if1column}{block:if2columns}width:1000px;left:10%;{/block:if2columns} {block:ifnot1column} {block:ifnot2columns} width:1250px;{/block:ifnot2columns}{/block:ifnot1column}padding-top:{text:padding top}px;{block:PermalinkPage} width:1500px;left:34%{/block:PermalinkPage}}
  61.  
  62. body {background: {color:Background};{block:iffont1}font-family: 'Didact Gothic', sans-serif; {/block:iffont1}{block:iffont2}font-family:raleway;{/block:iffont2}{block:iffont3}font-family: 'Lato', sans-serif;{/block:iffont3}color: #1d1818;font-size: 0.8em;margin: 0;color:{color:text};}
  63.  
  64. a {text-decoration:none;color:{color:body links};-moz-transition: all 0.1s ease-in-out;-webkit-transition: all 0.1s ease-in-out;-o-transition: all 0.1s ease-in-out;-ms-transition: all 0.1s ease-in-out;transition: all 0.1s ease-in-out;}
  65.  
  66. a:link, a:active, a:visited{color: {color:body links};-moz-transition: all 0.1s ease-in-out;-webkit-transition: all 0.1s ease-in-out;-o-transition: all 0.1s ease-in-out;-ms-transition: all 0.1s ease-in-out;transition: all 0.1s ease-in-out;}
  67.  
  68. iframe, img, embed, object, video {max-width: 100%;}img {height: auto;width: auto;} nav li {display: inline;}
  69.  
  70. #menu {background:{color:header};opacity:.8;width:100%;height:auto;margin:auto;z-index:503;margin-left:-5px;text-align: center;padding: 1%;color: #070606;position: fixed;}
  71.  
  72. article {background: {color:background};{block:if1column}width: 44%;margin: 40px;{/block:if1column}{block:if2columns}width: 28%;margin: 40px;{/block:if2columns}{block:if3columns}width: 23%;margin: 42px;padding-left:40px;{/block:if3columns}{block:if4columns}width: 20%;padding-left:10px; margin: 25px;margin-left: 25px; {/block:if4columns}{block:if5columns}width: 16%; margin: 25px;margin-left: 25px; {/block:if5columns}}
  73.  
  74. .chat span {float: left;margin-right: 1%;} #tags, nav ul, .chat ul { list-style: none;list-style-image: none;margin: 0; padding: 0;} #tags li {
  75. float: left;margin-right: 1%;}
  76.  
  77. .links {font-family:oxygen;font-weight:200;font-size:11px;letter-spacing:2px;word-spacing:8px;text-align:center;text-transform:uppercase;}
  78.  
  79. .title {font-family:Helvetica;font-weight:800;font-size:16px;line-height:30px;letter-spacing:3px;text-transform:uppercase;color:{color:title}}
  80.  
  81. .blogtitle {font-family:Helvetica;font-weight:800; font-size:26px;line-height:50px;letter-spacing:5px;text-transform:uppercase;color:{text:blogtitle}}
  82.  
  83. .description {{block:iffont1}font-family: 'Didact Gothic', sans-serif; {/block:iffont1}{block:iffont2}font-family:raleway;{/block:iffont2}{block:iffont3}font-family: 'Lato', sans-serif;{/block:iffont3}font-size:14px;
  84. text-align:center;color:{color:description}}
  85.  
  86. .credit {opacity:0.7;font-size:24px;position:fixed;bottom:25px;left:5px;color:#000;}
  87.  
  88. .perma {position:absolute;font-family: 'Didact Gothic', sans-serif;padding:15px;opacity:0;-webkit-transition: 0.2s ease-in;}.photo:hover .perma {-webkit-transition: 0.2s ease-in;opacity:0.4;} .photo:hover .perma {
  89. -webkit-transition: 0.3s ease-in;position:absolute;margin:8px;padding:7px;
  90. background:#fff;opacity:0.7;}.photo:hover .perma:hover{background-color:{color:hover background};} .pset:hover .perma {-webkit-transition: 0.2s ease-in;opacity:0.4;} .pset:hover .perma {-webkit-transition: 0.3s ease-in;
  91. position:absolute;margin:8px;padding:7px;background:#fff;opacity:0.7;}.pset:hover .perma:hover{background-color:{color:hover background};} .link:hover .perma{margin-top: -20px; opacity:1}.text:hover .perma{margin-top: -20px; opacity:1}.quote:hover .perma{margin-top: -20px;opacity:1}.video:hover .perma{margin-top: -20px; opacity:1}.chat:hover .perma{margin-top: -20px; opacity:1}.video embed:hover .perma{margin-top: -20px; opacity:1}.video iframe:hover .perma{margin-top: -20px; opacity:1}.audio:hover .perma{margin-top: -20px; opacity:1}
  92.  
  93. #topDiv{position: fixed;bottom:4px;text-align:center; z-index:1000;display: none;cursor: pointer; right:20px;}
  94. .topDiv_links{font-size:10px; line-height:15px; }
  95. .topDiv_links a{font-size:10px; text-decoration:none;}
  96.  
  97. </style></head>
  98.  
  99. <body>
  100.  
  101. {block:ifdisablerightclick}
  102.  
  103. <script language=JavaScript>
  104. <!--
  105.  
  106. //Disable right mouse click Script
  107. //By Maximus (maximus@nsimail.com) w/ mods by DynamicDrive
  108. //For full source code, visit http://www.dynamicdrive.com
  109.  
  110. var message="";
  111.  
  112. ///////////////////////////////////
  113. function clickIE4(){
  114. if (event.button==2){
  115. alert(message);
  116. return false;
  117. }
  118. }
  119.  
  120. function clickNS4(e){
  121. if (document.layers||document.getElementById&&!document.all){
  122. if (e.which==2||e.which==3){
  123. alert(message);
  124. return false;
  125. }
  126. }
  127. }
  128.  
  129. if (document.layers){
  130. document.captureEvents(Event.MOUSEDOWN);
  131. document.onmousedown=clickNS4;
  132. }
  133. else if (document.all&&!document.getElementById){
  134. document.onmousedown=clickIE4;
  135. }
  136.  
  137. document.ontxtmenu=new Function("return false")
  138.  
  139. // -->
  140. </script>
  141.  
  142. {/block:ifdisablerightclick}
  143.  
  144. <header id="menu">
  145.  
  146. <span class="blogtitle"><a style="color:{color:blogtitle};" href="/">{Title}</a></span>
  147.  
  148. <span class="links">&nbsp;
  149. {block:ifShowAHomeLink}
  150. <a style="color:{color:links};" href="/">home</a>{/block:ifShowAHomeLink}
  151. {block:ifShowArchiveLink} <a style="color:{color:links};" href="/archive">history</a>{/block:ifShowArchiveLink}
  152. {block:ifShowAskLink}<a style="color:{color:links};" href="{text:ask page}">message</a>{/block:ifShowAskLink}
  153.  
  154. {block:HasPages}{block:Pages}
  155.  
  156. <a href="{URL}" style="color:{color:links};"><span class="links">{Label}</span></a> {/block:Pages}{/block:HasPages}
  157.  
  158. <!-- please don't remove this it's not fair --><a style="color:{color:links};" href="http://timbllr.tumblr.com">theme</a>
  159.  
  160.  
  161. </div></div>
  162.  
  163. </span><br>
  164.  
  165. <div class="description">
  166.  
  167. <description>{description}
  168.  
  169.  
  170. </description>
  171.  
  172. </div></div>
  173.  
  174.  
  175. </div> </header>
  176.  
  177. <div id="content">
  178.  
  179. {block:Posts}
  180.  
  181. <article>
  182.  
  183.  
  184. {block:Photo}
  185. {block:IndexPage}<div class="photo"><span class="perma"> <a href="{Permalink}">{Notecount} ✩</a> <a href="{ReblogURL}" target="_blank">{text:Reblog Word}</a></span><img src="{PhotoURL-500}" alt="{PhotoAlt}" /></div>{/block:IndexPage}
  186.  
  187. {block:permalinkpage}<div style="width:600px;"><img src="{PhotoURL-500}" alt="{PhotoAlt}" /></div>{/block:permalinkpage}
  188.  
  189. {/block:Photo}
  190.  
  191. {block:Photoset}
  192.  
  193. {block:IndexPage}<div class="pset"><span class="perma"><a href="{Permalink}">{Notecount}</a> ✩ <a href="{ReblogURL}" target="_blank">REBLOG</a></span>{/block:IndexPage}{block:Photos}<img src="{PhotoURL-HighRes}" alt="{PhotoAlt}">{/block:Photos}</div>{/block:IndexPage}
  194.  
  195. {block:permalinkpage}<div style="margin-left:500px;">{/block:permalinkpage}
  196.  
  197. {/block:Photoset}
  198.  
  199. {block:Text}
  200. <div class="text"><div style="padding:1px;">
  201. {block:indexpage} {block:Title}<div class="title"><a href="{Permalink}">{Title}</a></div>{/block:Title}
  202. {Body}
  203. <div class="perma" style="float:right;width:100%;text-align:right;"><a href="{Permalink}"style="color:gray;">{NoteCount}</a></div></div><div>{/block:indexpage}
  204. {block:permalinkpage} {block:Title}<div class="title"><a href="{Permalink}">{Title}</a></div>{/block:Title}
  205. {Body}
  206. {/block:permalinkpage}
  207. {/block:Text}
  208.  
  209. {block:Quote}
  210. <div class="quote">"{Quote}"<Br><Br><div style=" float:left;width:100%;text-align:right;"> ― <b>{Source}</b><div class="perma" style=" float:right;width:100%;text-align:right;"><a href="{Permalink}"style="color:gray;">{NoteCount}</a></div></div>
  211.  
  212. {/block:Quote}
  213.  
  214. {block:Chat}
  215. <div class="chat">
  216. {block:indexpage} <ul>
  217. {block:Lines}<li class="{Alt}"><b>{block:Label}<span class="label">{Label}</span>{/block:Label}</b><p> {Line} </p></li>{/block:Lines}
  218. </ul>
  219. <div class="perma" style=" float:right;width:100%;text-align:right;"><a href="{Permalink}"style="color:gray;">{NoteCount}</a></div></div>{/block:indexpage}
  220. {block:permalinkpage}<ul>
  221. {block:Lines}<li class="{Alt}">{block:Label}<span class="label">{Label}</span>{/block:Label}<p> {Line} </p></li>{/block:Lines}
  222. </ul>{/block:permalinkpage}
  223. {/block:Chat}
  224.  
  225. {block:Audio}
  226. <div class="audio">
  227. {block:TrackName}<div class="title"><a href="{Permalink}">{TrackName}</a></div>{/block:TrackName}
  228. <div class="albumart">{block:AlbumArt}<img src="{AlbumArtURL}" width="500" height="500"/>{/block:AlbumArt}</div>
  229. <div class="player">{AudioPlayerBlack}</div>
  230. {block:AudioEmbed}{AudioEmbed}{/block:AudioEmbed}
  231. <div class="perma" style=" float:right;width:100%;text-align:right;"><a href="{Permalink}"style="color:gray;">{NoteCount}</a></div></div>
  232. {/block:Audio}
  233.  
  234. {block:Video}
  235. <div class="video"><div class="video-player">{Video-500}</div>
  236. {/block:Video}
  237.  
  238. {block:Link}
  239. {block:IndexPage}<div class="link"><div class="title"><a href="{URL}" {Target}>{Name}</a></div><a href="{permalink}" {block:Description}{Description}{/block:Description}</a><div class="perma" style=" float:right;width:100%;text-align:right;"><a href="{Permalink}" style="color:gray;">{NoteCount}</a></div></div>{/block:IndexPage}
  240.  
  241. {block:Permalinkpage} <h1 class="title"><a href="{URL}">{Name}</a></h1>{block:Description}{Description}{/block:Description}{/block:Permalinkpage}
  242. {/block:Link}
  243.  
  244. {block:Answer}<div class="text"><img src="{AskerPortraitURL-24}" align="left" z-index: 1;/><b>{Asker} asked:</b> <br>{Question}<br><br><div class="answer">{Answer}</div>
  245. <div class="perma" style=" float:right;width:100%;text-align:right;"><a href="{Permalink}" style="color:gray;">{NoteCount}</a></div></div>
  246. {/block:Answer}
  247.  
  248.  
  249. {block:PermalinkPage}
  250. {block:Date}
  251. <div>
  252. <div style="font-size:14px;">this was posted {timeago} with {notecount} notes</div>
  253. {block:RebloggedFrom}
  254. <br>
  255. <b>reblogged from: <a href="{ReblogParentURL}" title="{ReblogParentTitle}">{ReblogParentName}</a> <br></b>
  256. <B>source: <a href="{ReblogRootURL}" title="{ReblogRootTitle}">{ReblogRootName}</a></b>
  257. {/block:RebloggedFrom}
  258. {block:HasTags}
  259. <br>
  260. {block:Tags}#<a href="{TagURL}" title="posts tagged as {Tag}">{Tag} </a>{/block:Tags}
  261. {/block:HasTags}
  262. <br>
  263. {PostNotes}
  264. </div>
  265. {/block:Date}
  266. {/block:PermalinkPage}
  267. </article>
  268. {/block:Posts}
  269.  
  270.  
  271. </div>
  272.  
  273. {block:Pagination}
  274. <div class="pagination">
  275. {block:PreviousPage}<a href="{PreviousPage}">Previous page</a>{/block:PreviousPage}
  276. {block:NextPage}<a href="{NextPage}">Next page</a>{/block:NextPage}
  277. </div>
  278. {/block:Pagination}
  279.  
  280. <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
  281. <script src="http://static.tumblr.com/wgijwsy/Ebfm2v4gy/jquery.masonry.min.js"></script>
  282. {block:IfInfiniteScroll}
  283. <script src="http://static.tumblr.com/wgijwsy/u2vm2hxv6/jquery.infinitescroll.min.js"></script>
  284. <script src="http://static.tumblr.com/iwtk77u/Yhym2yygt/jquery.imagesloaded.min.js"></script>
  285. {/block:IfInfiniteScroll}
  286.  
  287. <script>
  288. (function() {
  289. var $tumblelog = $('#content');
  290. {block:IfInfiniteScroll}
  291. $tumblelog.infinitescroll({
  292. navSelector : ".pagination",
  293. nextSelector : ".pagination a:first",
  294. itemSelector : "article",
  295. bufferPx : 50,
  296. done : "",
  297. loading: {
  298. finishedMsg: "<p> </p>",
  299. img : " ",
  300. msg: null,
  301. msgText: "<p> </p>"
  302. },
  303. },
  304. function( newElements ) {
  305. var $newElems = $( newElements ).css({ opacity: 0 });
  306. $newElems.imagesLoaded(function(){
  307. $newElems.animate({ opacity: 1 });
  308. $tumblelog.masonry( 'appended', $newElems);
  309. });
  310. }
  311. );
  312. {/block:IfInfiniteScroll}
  313. $tumblelog.imagesLoaded( function(){
  314. $tumblelog.masonry({
  315. columnWidth: function( containerWidth ) {
  316. return containerWidth / 100;
  317. }
  318. });
  319. });
  320. })();
  321. </script>
  322. <div id="topDiv">
  323. <br><a href="javascript:void(0);" id="topDivA"><img src="http://static.tumblr.com/luj2trt/UKJmcltav/totop_1.png" width="50" height="32" style="-webkit-box-shadow: 0px 0px 0px rgba(0,0,0,0.33);
  324. -moz-box-shadow: 0px 0px 0px rgba(0,0,0,0.33);
  325. box-shadow: 0px 0px 0px rgba(0,0,0,0.33);"></a></div>
  326. <script type="text/javascript">
  327. $(function() {
  328. $("#topDivA").click(function(){
  329. var target = $("html");
  330. $('html, body').animate({
  331. scrollTop: target.offset().top
  332. }, 1000);
  333. });
  334.  
  335. var topDiv = $("#topDiv");
  336. var topDivTop = "1000";
  337. var view = $( window );
  338. view.bind("scroll resize", function(){
  339. var viewTop = view.scrollTop();
  340. if (viewTop > topDivTop){
  341. topDiv.fadeIn(300);
  342. }
  343. else if (viewTop <= topDivTop){
  344. topDiv.fadeOut(200);
  345. }
  346. });
  347. });
  348. </script>
  349. </body>
  350. <div class="credit"><a href="http://timbllr-themes.tumblr.com/">ⓣ</a></div>
  351. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement