Advertisement
timbllr

SMOKE THEME CREATED BY TIMBLLR

Apr 6th, 2013
7,774
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 13.97 KB | None | 0 0
  1. <html>
  2.  
  3. <!--
  4.  
  5. SMOKE 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' rel='stylesheet' type='text/css'>
  22.  
  23. <meta name="color:background" content="#ffffff" />
  24. <meta name="color:body links" content="#000"/>
  25. <meta name="color:hover background" content="#d4ff00" />
  26. <meta name="color:links" content="#d4ff00"/>
  27. <meta name="color:text" content="#000" />
  28. <meta name="color:title" content="#000" />
  29.  
  30. <meta name="if:Disable Right Click" content="0"/>
  31. <meta name="if:Show A Home Link" content="1"/>
  32. <meta name="if:Show Ask Link" content="1"/>
  33. <meta name="if:Show Archive Link" content="1"/>
  34. <meta name="if:Show Two Custom Links" content="0"/>
  35. <meta name="if:Show Three Custom Links" content="0"/>
  36. <meta name="if:Show Four Custom Links" content="0"/>
  37. <meta name="if:Infinite scroll" content="1"/>
  38. <meta name="if:Use Banner" content="0">
  39.  
  40. <meta name="text:Ask Page" content="/ask" />
  41. <meta name="text:Reblog Word" content="REBLOG" />
  42. <meta name="text:Custom Link One Title" content="" />
  43. <meta name="text:Custom Link One" content="" />
  44. <meta name="text:Custom Link Two Title" content="" />
  45. <meta name="text:Custom Link Two" content="" />
  46. <meta name="text:Custom Link Three Title" content="" />
  47. <meta name="text:Custom Link Three" content="" />
  48. <meta name="text:Custom Link Four Title" content"" />
  49. <meta name="text:Custom Link Four" content="" />
  50.  
  51. <meta name="image:Banner" content="">
  52.  
  53. <head>
  54.  
  55.  
  56. <style type="text/css">
  57.  
  58. 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;}
  59.  
  60. .headertext {text-transform:uppercase;}
  61.  
  62. ::-moz-selection {
  63. background: #fdfdfd;
  64. color: {color:text};
  65. }
  66. ::selection {
  67. background: #fdfdfd;
  68. color: {color:hover background};
  69. }
  70.  
  71. #content {
  72. margin: 1%;
  73. padding-left:210px;
  74.  
  75.  
  76. {block:PermalinkPage} width:3000px;
  77. margin-left:fixed; padding-left:435px{/block:PermalinkPage}
  78.  
  79. }
  80. body {
  81. background: {color:Background};
  82. background-size: cover;
  83. color: #1d1818;
  84. font-family: 'Didact Gothic', sans-serif;
  85. font-size: 0.8em;
  86. margin: 0;
  87. color:{color:text};
  88. }
  89.  
  90. a {
  91. color: {color:body links};
  92. text-decoration: none;
  93. }
  94.  
  95. iframe, img, embed, object, video {
  96. max-width: 100%;
  97. }
  98. img {
  99. height: auto;
  100. width: auto;
  101. }
  102.  
  103. #menu {
  104. background: {color:background} url('{image:menu}');
  105. width:12%;
  106. height:auto;
  107. z-index:503;
  108. text-align: left;
  109. padding: 1%;
  110. color: #070606;
  111. margin-left:10px;
  112. margin-top:20px;
  113. position: fixed;
  114. }
  115. }
  116.  
  117. nav li {
  118. display: inline;
  119. }
  120.  
  121. article {
  122. background: {color:background};
  123. margin: 20px;
  124. margin-left: 25px;
  125. padding: 0%;
  126. width: 16%;
  127. }
  128.  
  129.  
  130. .chat span {
  131. float: left;
  132. margin-right: 1%;
  133. }
  134.  
  135. #tags, nav ul, .chat ul {
  136. list-style: none;
  137. list-style-image: none;
  138. margin: 0;
  139. padding: 0;
  140. }
  141. #tags li {
  142. float: left;
  143. margin-right: 1%;
  144. }
  145.  
  146. .links {
  147. font-family: 'Lato', sans-serif;
  148. font-size:18px;
  149. }
  150.  
  151. .blogtitle {
  152. font-family: 'Lato', sans-serif;
  153. font-size:30px;
  154. letter-spacing:2px;
  155. text-transform:uppercase;
  156.  
  157. }
  158.  
  159. .description {
  160. font-family: 'Didact Gothic', sans-serif;
  161. font-size:14px;
  162.  
  163. text-align:left;
  164. color:{color:text}
  165. }
  166.  
  167. .credit {opacity:0.7;font-size:24px;position:fixed;bottom:25px;left:5px;color:#000;}
  168.  
  169. .perma {position:absolute;
  170. padding:15px;
  171. opacity:0;
  172. -webkit-transition: 0.2s ease-in;}
  173. .photo:hover .perma {-webkit-transition: 0.2s ease-in;
  174. opacity:0.4;}
  175.  
  176. .photo:hover .perma {
  177. -webkit-transition: 0.3s ease-in;
  178. position:absolute;
  179. margin:8px;
  180. padding:7px;
  181. background:#fff;
  182. opacity:0.7;
  183. }
  184.  
  185. .photo:hover .perma:hover{
  186. background-color:{color:hover background};
  187. }
  188.  
  189. .pset:hover .perma {-webkit-transition: 0.2s ease-in;
  190. opacity:0.4;}
  191.  
  192. .pset:hover .perma {
  193. -webkit-transition: 0.3s ease-in;
  194. position:absolute;
  195. margin:8px;
  196. padding:7px;
  197. background:#fff;
  198. opacity:0.7;
  199. }
  200.  
  201. .pset:hover .perma:hover{
  202. background-color:{color:hover background};
  203. }
  204.  
  205. .link:hover .perma{margin-top: -20px; opacity:1}
  206. .text:hover .perma{margin-top: -20px; opacity:1}
  207. .quote:hover .perma{margin-top: -20px;opacity:1}
  208. .video:hover .perma{margin-top: -20px; opacity:1}
  209. .chat:hover .perma{margin-top: -20px; opacity:1}
  210. .video embed:hover .perma{margin-top: -20px; opacity:1}
  211. .video iframe:hover .perma{margin-top: -20px; opacity:1}
  212. .audio:hover .perma{margin-top: -20px; opacity:1}
  213.  
  214.  
  215. </style>
  216.  
  217. </head>
  218.  
  219. <body>
  220.  
  221. {block:ifdisablerightclick}
  222.  
  223. <script language=JavaScript>
  224. <!--
  225.  
  226. //Disable right mouse click Script
  227. //By Maximus (maximus@nsimail.com) w/ mods by DynamicDrive
  228. //For full source code, visit http://www.dynamicdrive.com
  229.  
  230. var message="";
  231.  
  232. ///////////////////////////////////
  233. function clickIE4(){
  234. if (event.button==2){
  235. alert(message);
  236. return false;
  237. }
  238. }
  239.  
  240. function clickNS4(e){
  241. if (document.layers||document.getElementById&&!document.all){
  242. if (e.which==2||e.which==3){
  243. alert(message);
  244. return false;
  245. }
  246. }
  247. }
  248.  
  249. if (document.layers){
  250. document.captureEvents(Event.MOUSEDOWN);
  251. document.onmousedown=clickNS4;
  252. }
  253. else if (document.all&&!document.getElementById){
  254. document.onmousedown=clickIE4;
  255. }
  256.  
  257. document.oncontextmenu=new Function("return false")
  258.  
  259. // -->
  260. </script>
  261.  
  262. {/block:ifdisablerightclick}
  263.  
  264. <header id="menu">
  265.  
  266.  
  267. {block:ifnotusebanner}<div class="blogtitle"><a style="color:{color:title};" href="/">{Title}</a> </div>{/block:ifnotusebanner}
  268.  
  269. {block:ifusebanner}<div style="margin-left:-20px;"><img style="max-width:175px; max-height:125px" src="{image:banner}"/></div>{/block:ifusebanner}
  270.  
  271. <div style="text-align: left;margin-left:40px;">
  272. <span class="headertext"> <div class="links" style="margin-left:-40px;margin-top:5px">
  273. {block:ifShowAHomeLink}
  274. <a style="color:{color:links};" href="/">home</a><BR>{/block:ifShowAHomeLink}
  275. {block:ifShowArchiveLink} <a style="color:{color:links};" href="/archive">history</a><BR> {/block:ifShowArchiveLink}
  276. {block:ifShowAskLink}<a style="color:{color:links};" href="{text:ask page}">message</a><BR>{/block:ifShowAskLink}
  277.  
  278. {block:ifShowTwoCustomLinks}
  279. <a style="color:{color:links};" href="{text:Custom Link One}">{text:Custom Link One Title}</a><BR>
  280. <a style="color:{color:links};" href="{text:Custom Link Two}">{text:Custom Link Two Title}</a><BR>
  281. {/block:ifShowTwoCustomLinks}
  282.  
  283. {block:ifShowThreeCustomLinks}
  284. <a style="color:{color:links};" href="{text:Custom Link One}">{text:Custom Link One Title}</a><BR>
  285. <a style="color:{color:links};" href="{text:Custom Link Two}">{text:Custom Link Two Title}</a><BR>
  286. <a style="color:{color:links};" href="{text:Custom Link Three}">{text:Custom Link Three Title}</a><BR>
  287. {/block:ifShowThreeCustomLinks}
  288.  
  289. {block:ifShowFourCustomLinks}
  290. <a style="color:{color:links};" href="{text:Custom Link One}">{text:Custom Link One Title}</a><BR>
  291. <a style="color:{color:links};" href="{text:Custom Link Two}">{text:Custom Link Two Title}</a><BR>
  292. <a style="color:{color:links};" href="{text:Custom Link Three}">{text:Custom Link Three Title}</a><BR>
  293. <a style="color:{color:links};" href="{text:Custom Link Four}">{text:Custom Link Four Title}</a><BR>
  294.  
  295. {/block:ifShowFourCustomLinks}
  296.  
  297. <a style="color:{color:links};" href="http://timbllr.tumblr.com">theme</a>
  298.  
  299. </div></div>
  300.  
  301. </span><br>
  302.  
  303. <div class="description">
  304.  
  305. <description>{description}
  306.  
  307.  
  308.  
  309. </description>
  310.  
  311. </div></div>
  312.  
  313.  
  314. </div> </header>
  315.  
  316. <div id="content">
  317.  
  318. {block:Posts}
  319.  
  320. <article>
  321.  
  322.  
  323. {block:Photo}
  324. {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}
  325.  
  326. {block:permalinkpage}<div style="width:600px;"><img src="{PhotoURL-500}" alt="{PhotoAlt}" /></div>{/block:permalinkpage}
  327.  
  328. {/block:Photo}
  329.  
  330. {block:Photoset}
  331.  
  332. {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}
  333.  
  334. {block:permalinkpage}<div style="margin-left:500px;">{/block:permalinkpage}
  335.  
  336. {/block:Photoset}
  337.  
  338. {block:Text}
  339. <div class="text"><div style="padding:1px;">
  340. {block:indexpage} {block:Title}<h1 class="title"><a href="{Permalink}">{Title}</a></h1>{/block:Title}
  341. {Body}
  342. <div class="perma" style="float:right;width:100%;text-align:right;"><a href="{Permalink}"style="color:gray;">{NoteCount}</a></div></div><div>{/block:indexpage}
  343. {block:permalinkpage} {block:Title}<h1 class="title"><a href="{Permalink}">{Title}</a></h1>{/block:Title}
  344. {Body}
  345. {/block:permalinkpage}
  346. {/block:Text}
  347.  
  348. {block:Quote}
  349. <div class="quote">"{Quote}"<Br><Br><div style=" float:left;width:100%;text-align:right;"> ― <b><i>{Source}</b></i><div class="perma" style=" float:right;width:100%;text-align:right;"><a href="{Permalink}"style="color:gray;">{NoteCount}</a></div></div>
  350.  
  351. {/block:Quote}
  352.  
  353. {block:Chat}
  354. <div class="chat">
  355. {block:indexpage} <ul>
  356. {block:Lines}<li class="{Alt}"><b>{block:Label}<span class="label">{Label}</span>{/block:Label}</b><p> {Line} </p></li>{/block:Lines}
  357. </ul>
  358. <div class="perma" style=" float:right;width:100%;text-align:right;"><a href="{Permalink}"style="color:gray;">{NoteCount}</a></div></div>{/block:indexpage}
  359. {block:permalinkpage}<ul>
  360. {block:Lines}<li class="{Alt}">{block:Label}<span class="label">{Label}</span>{/block:Label}<p> {Line} </p></li>{/block:Lines}
  361. </ul>{/block:permalinkpage}
  362. {/block:Chat}
  363.  
  364. {block:Audio}
  365. <div class="audio">
  366. {block:TrackName}<h1 class="title"><a href="{Permalink}">{TrackName}</a></h1>{/block:TrackName}
  367. <div class="albumart">{block:AlbumArt}<img src="{AlbumArtURL}" width="500" height="500"/>{/block:AlbumArt}</div>
  368. <div class="player">{AudioPlayerBlack}</div>
  369. {block:AudioEmbed}{AudioEmbed}{/block:AudioEmbed}
  370. <div class="perma" style=" float:right;width:100%;text-align:right;"><a href="{Permalink}"style="color:gray;">{NoteCount}</a></div></div>
  371. {/block:Audio}
  372.  
  373. {block:Video}
  374. <div class="video"><div class="video-player">{Video-500}</div>
  375. {/block:Video}
  376.  
  377. {block:Link}
  378. {block:IndexPage}<div class="link"><h1><a href="{URL}" {Target}>{Name}</a></h1><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}
  379.  
  380. {block:Permalinkpage} <h1 class="title"><a href="{URL}">{Name}</a></h1>{block:Description}{Description}{/block:Description}{/block:Permalinkpage}
  381. {/block:Link}
  382.  
  383. {block:Answer}
  384. {block:IndexPage}<div class="text"><div style="padding:15px;">{Question}<br><b>asked by {Asker}</b><br>{Answer}<div class="perma" style=" float:right;width:100%;text-align:right;"><a href="{Permalink}"style="color:gray;">{NoteCount}</a></div></div>{/block:IndexPage}
  385. {block:PermalinkPage}<div style="width:500px">{Question}<br><b>asked by {Asker}</b><br>{Answer}</div>{/block:PermalinkPage}
  386. {/block:Answer}
  387.  
  388. {block:PermalinkPage}
  389. {block:Date}
  390. <div>
  391. <div style="font-size:14px;">this was posted {timeago} with {notecount} notes</div>
  392. {block:RebloggedFrom}
  393. <br>
  394. <b>reblogged from: <a href="{ReblogParentURL}" title="{ReblogParentTitle}">{ReblogParentName}</a> <br></b>
  395. <B>source: <a href="{ReblogRootURL}" title="{ReblogRootTitle}">{ReblogRootName}</a></b>
  396. {/block:RebloggedFrom}
  397. {block:HasTags}
  398. <br>
  399. {block:Tags}#<a href="{TagURL}" title="posts tagged as {Tag}">{Tag} </a>{/block:Tags}
  400. {/block:HasTags}
  401. <br>
  402. {PostNotes}
  403. </div>
  404. {/block:Date}
  405. {/block:PermalinkPage}
  406. </article>
  407. {/block:Posts}
  408.  
  409.  
  410. </div>
  411.  
  412. {block:Pagination}
  413. <div class="pagination">
  414. {block:PreviousPage}<a href="{PreviousPage}">Previous page</a>{/block:PreviousPage}
  415. {block:NextPage}<a href="{NextPage}">Next page</a>{/block:NextPage}
  416. </div>
  417. {/block:Pagination}
  418.  
  419. <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
  420. <script src="http://static.tumblr.com/wgijwsy/Ebfm2v4gy/jquery.masonry.min.js"></script>
  421. {block:IfInfiniteScroll}
  422. <script src="http://static.tumblr.com/wgijwsy/u2vm2hxv6/jquery.infinitescroll.min.js"></script>
  423. <script src="http://static.tumblr.com/iwtk77u/Yhym2yygt/jquery.imagesloaded.min.js"></script>
  424. {/block:IfInfiniteScroll}
  425.  
  426. <script>
  427. (function() {
  428. var $tumblelog = $('#content');
  429. {block:IfInfiniteScroll}
  430. $tumblelog.infinitescroll({
  431. navSelector : ".pagination",
  432. nextSelector : ".pagination a:first",
  433. itemSelector : "article",
  434. bufferPx : 50,
  435. done : "",
  436. loading: {
  437. finishedMsg: "<p> </p>",
  438. img : " ",
  439. msg: null,
  440. msgText: "<p> </p>"
  441. },
  442. },
  443. function( newElements ) {
  444. var $newElems = $( newElements ).css({ opacity: 0 });
  445. $newElems.imagesLoaded(function(){
  446. $newElems.animate({ opacity: 1 });
  447. $tumblelog.masonry( 'appended', $newElems);
  448. });
  449. }
  450. );
  451. {/block:IfInfiniteScroll}
  452. $tumblelog.imagesLoaded( function(){
  453. $tumblelog.masonry({
  454. columnWidth: function( containerWidth ) {
  455. return containerWidth / 100;
  456. }
  457. });
  458. });
  459. })();
  460. </script>
  461. </body>
  462. <div class="credit"><a href="http://timbllr-themes.tumblr.com/">ⓣ</a></div>
  463. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement