API tools faq
paste
Advertisement
annnna

slide v1 theme

annnna
Dec 18th, 2014
3,038
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 14.44 KB | None | 0 0
raw download clone embed print report
  1. <!--
  2. theme by http://sleaklayouts.tumblr.com
  3. please keep at least one form of visible credit intact
  4.  
  5. IMPORTANT: make sure your posts are set to "15 per page" (under advanced options) because otherwise there will be a massive gap at the end of your post, and make sure that your ask is enabled (tumblr.com/settings). if you dont want a link to show up then delete the link name.
  6. -->
  7.  
  8. <html lang="en">
  9. <head>
  10. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
  11. <script>
  12. $(document).ready(function() {
  13. $('a.poplight[href^=#]').click(function() {
  14. var popID = $(this).attr('rel');
  15. var popURL = $(this).attr('href');
  16. var query= popURL.split('?');
  17. var dim= query[1].split('&');
  18. var popWidth = dim[0].split('=')[1];
  19. $('#' + popID).fadeIn().css({ 'width': Number( popWidth ) })
  20. var popMargTop = ($('#' + popID).height() + 80) / 2;
  21. var popMargLeft = ($('#' + popID).width() + 80) / 2;
  22. $('#' + popID).css({
  23. 'margin-top' : -popMargTop,
  24. 'margin-left' : -popMargLeft
  25. });
  26. $('body').append('<div id="fade"></div>');
  27. $('#fade').css({'filter' : 'alpha(opacity=80)'}).fadeIn();
  28. return false;
  29. });
  30. $('a.close, #fade').live('click', function() {
  31. $('#fade , .popup_block').fadeOut(function() {
  32. $('#fade, a.close').remove();
  33. });
  34. return false;
  35. });
  36. });
  37. </script>
  38. <script type="text/javascript" src="http://static.tumblr.com/tiu5k68/xTkm8wqw2/tumblr-title-qtip.js"></script>
  39.  
  40. <title>{title}</title>
  41. <link rel="shortcut icon" href="{Favicon}"/>
  42.  
  43. <meta name="color:Background" content="#ffe6cc"/>
  44. <meta name="color:vertscrollbar" content="#000"/>
  45. <meta name="color:horizscrollbar" content="#000"/>
  46. <meta name="color:alllinks" content="blue"/>
  47. <meta name="color:00links" content="blue"/>
  48. <meta name="color:poplinks" content="#fff"/>
  49. <meta name="color:permalinks" content="#000"/>
  50. <meta name="color:tooltips" content="#000"/>
  51. <meta name="color:border" content="#000"/>
  52. <meta name="color:shadow" content="#111"/>
  53.  
  54. <meta name="font:body" content="Courier New"/>
  55. <meta name="font:tooltips" content="Courier New"/>
  56. <meta name="font:permalinks" content="Courier New"/>
  57. <meta name="font:navlinks" content="Courier New"/>
  58. <meta name="font:title" content="Courier New"/>
  59. <meta name="font:description" content="Courier New"/>
  60. <meta name="font:hoverask" content="Courier New"/>
  61. <meta name="font:customlinks" content="Courier New"/>
  62.  
  63. <meta name="text:hoverbox" content="*hover*"/>
  64. <meta name="text:scrollradi" content="10"/>
  65. <meta name="text:reblog" content="reblog"/>
  66. <meta name="text:notes" content="notes"/>
  67.  
  68. <meta name="text:link1name" content="link name"/>
  69. <meta name="text:link1link" content="link link"/>
  70. <meta name="text:link2name" content="link name"/>
  71. <meta name="text:link2link" content="link link"/>
  72. <meta name="text:link3name" content="link name"/>
  73. <meta name="text:link3link" content="link link"/>
  74. <meta name="text:link4name" content="link name"/>
  75. <meta name="text:link4link" content="link link"/>
  76. <meta name="text:link5name" content="link name"/>
  77. <meta name="text:link5link" content="link link"/>
  78. <meta name="text:link6name" content="link name"/>
  79. <meta name="text:link6link" content="link link"/>
  80.  
  81. <style type="text/css">
  82.  
  83. body{
  84. /*font-family: 'Courier New', Courier, monospace;*/
  85. font-family:{font:body};
  86. font-size:12px;
  87. color:black;
  88. background-color:{color:background};
  89. }
  90.  
  91. a{
  92. color:{color:alllinks};
  93. }
  94.  
  95. #wrapper{
  96. position:absolute;
  97. margin-left:50px;
  98. margin-top:50px;
  99. width:8700px;
  100. padding:5px;
  101. }
  102.  
  103. .entry{
  104. border:2px solid {color:border};
  105. box-shadow:4px 4px 0px 0px {color:shadow};
  106. padding:4px;
  107. margin:80px;
  108. margin-left:230px;
  109. background-color:#fff;
  110. float:left;
  111. {block:indexpage}
  112. width:250px;
  113. {/block:indexpage}
  114. {block:permalinkpage}
  115. margin-left:25px;
  116. margin-top:5px;
  117. width:500px;
  118. padding:10px;
  119. {/block:permalinkpage}
  120. }
  121. .entry img{
  122. display:block;
  123. max-width:100%;
  124. }
  125.  
  126. .entry .permas{
  127. position: absolute;
  128. overflow:hidden;
  129. margin-left:-5px;
  130. margin-top:20px;
  131. margin-bottom:30px;
  132. padding:5px;
  133. width:250px;
  134. height:20px;
  135. text-align:center;
  136. font-size: 13px;
  137. font-family:{font:permalinks};
  138. line-height: 21px;
  139. letter-spacing:1px;
  140. opacity: 0;
  141. -webkit-transition: all 1s ease;
  142. -moz-transition: all 1s ease;
  143. -o-transition: all 1s ease;
  144. transition: all 1s ease;
  145. }
  146.  
  147. .entry .permas a{
  148. color:#000}
  149.  
  150. .entry:hover .permas{
  151. overflow:visible;
  152. opacity:1;
  153. -webkit-transition: all 1s ease;
  154. -moz-transition: all 1s ease;
  155. -o-transition: all 1s ease;
  156. transition: all 1s ease;
  157. }
  158.  
  159. .playerbuttonbg {
  160. position: absolute;
  161. left: 20px;
  162. top: 20px;
  163. width: 19px;
  164. height: 19px;
  165. background-color: #ffffff;
  166. padding: 10px;
  167. -webkit-border-radius: 40px;
  168. -moz-border-radius: 40px;
  169. border-radius: 40px;
  170. opacity: .4;
  171. filter: alpha(opacity=40);
  172. -moz-opacity: 0.4;
  173. -khtml-opacity: 0.4;
  174. transition: opacity .7s ease-in-out;
  175. -moz-transition: opacity .7s ease-in-out;
  176. -webkit-transition: opacity .7s ease-in-out;}
  177. .playerbuttonbg:hover {
  178. opacity: 1;
  179. filter: alpha(opacity=100);
  180. -moz-opacity: 1;
  181. -khtml-opacity: 1;}
  182. .newplayerbutton {
  183. position: relative;
  184. width: 19px;
  185. height: 19px;
  186. overflow: hidden;}
  187. .playerbuttonhug {
  188. position: absolute;
  189. top: -18px;
  190. left: -7px;}
  191. .tumblr_audio_player {
  192. height: 90px;
  193. width: 270px;
  194. -moz-transform: scale(0.60, 0.60);
  195. -webkit-transform: scale(0.60, 0.60);
  196. -o-transform: scale(0.60, 0.60);
  197. -ms-transform: scale(0.60, 0.60);
  198. transform: scale(0.60, 0.60);
  199. -moz-transform-origin: top left;
  200. -webkit-transform-origin: top left;
  201. -o-transform-origin: top left;
  202. -ms-transform-origin: top left;
  203. transform-origin: top left;}
  204. .audioimgwrapper {
  205. position: absolute;
  206. left: 0px;
  207. top: 0px;
  208. -webkit-border-radius: 40px;
  209. -moz-border-radius: 40px;
  210. border-radius: 40px;
  211. overflow: hidden;
  212. width: 79px;
  213. height: 79px;}
  214. #jtlr{
  215. z-index:99;
  216. font-size:15px;
  217. position:fixed;
  218. text-decoration:none;
  219. right:24px;
  220. bottom:8px;}
  221. .audioimgwrapper img {
  222. width: 100%;
  223. height: auto;
  224. -webkit-border-radius: 40px;
  225. -moz-border-radius: 40px;
  226. border-radius: 40px;}
  227. .trackdetails {
  228. width: auto;
  229. display:inline-block;
  230. margin-left: 90px;
  231. min-height: 85px;}
  232. .audiowrapper {
  233. position: relative;
  234. display:inline-block;}
  235.  
  236. #linkrs{
  237. position:fixed;
  238. bottom:20px;
  239. margin-left:40px;
  240. padding:3px;
  241. font-size:30px;
  242. font-family:{font:navlinks};
  243. text-align:center;
  244. z-index:99999999999999;
  245. }
  246. #linkrs a{
  247. color:{color:00links};
  248. }
  249. /*transparent background layer of popup*/
  250. #fade {
  251. background: #000;
  252. background-image: url('');/*put an image behind the popup*/
  253. position: fixed;
  254. left: 0;
  255. top: 0;
  256. width: 100%;
  257. height: 100%;
  258. opacity: .8;
  259. z-index: 9999;
  260. display: none;
  261. }
  262. .popup_block{
  263. background:transparent;
  264. color:#fff;
  265. text-align:center;
  266. top: 50%;
  267. left: 50%;
  268. position: fixed;
  269. z-index: 99999;
  270. float: left;
  271. display: none;
  272. }
  273. img.btn_close {
  274. float: left;
  275. margin: 5px -5px 0 0;
  276. }
  277. *html #fade {
  278. position: absolute;
  279. }
  280. *html .popup_block {
  281. position: absolute;
  282. }
  283. .ttile{
  284. font-size:30px;
  285. font-family:{font:title};
  286. }
  287. .descr{
  288. font-family:{font:description};
  289. }
  290. /*customize hoverbox here*/
  291. #hovbox {
  292. font-family:{font:hoverask};
  293. text-align: center;
  294. font-size: 30px;
  295. line-height: 30px;
  296. color:#fff;
  297. width: 495px;
  298. height: 205px;
  299. padding: 3px;
  300. overflow: hidden;
  301. display: inline-block;
  302. transition: all 0.1s ease-out;
  303. -o-transition-transition: all 1s ease-out;
  304. -webkit-transition: all 1s ease-out;
  305. -moz-transition: all 1s ease-out;
  306. }
  307.  
  308. .herver {
  309. margin-top: 50px;
  310. opacity: 1;
  311. transition: all 1s ease-out;
  312. -o-transition-transition: all 1s ease-out;
  313. -webkit-transition: all 1s ease-out;
  314. -moz-transition: all 1s ease-out;
  315. }
  316.  
  317. #hovbox:hover .herver {
  318. margin-top: 10px;
  319. opacity: 0;
  320. -webkit-transition: all 1s ease-in-out;
  321. -moz-transition: all 1s ease-in-out;
  322. -o-transition: all 1s ease-in-out;
  323. -ms-transition: all 1s ease-in-out;
  324. transition: all 1s ease-in-out;
  325. }
  326.  
  327. .askbox{
  328. margin-top:-65px;
  329. opacity: 0;
  330. transition: all 1s ease-out;
  331. -o-transition-transition: all 1s ease-out;
  332. -webkit-transition: all 1s ease-out;
  333. -moz-transition: all 1s ease-out;
  334. }
  335.  
  336. #hovbox:hover .askbox{
  337. opacity: 1;
  338. -webkit-transition: all 1s ease-in-out;
  339. -moz-transition: all 1s ease-in-out;
  340. -o-transition: all 1s ease-in-out;
  341. -ms-transition: all 1s ease-in-out;
  342. transition: all 1s ease-in-out;
  343. }
  344.  
  345. .linkit a{
  346. color:{color:poplinks};
  347. font-family:{font:customlinks};
  348. }
  349.  
  350. #noeted{
  351. border:2px solid {color:border};
  352. box-shadow:-4px 4px 0px 0px {color:shadow};
  353. background-color:white;
  354. padding:10px;
  355. height:450px;
  356. width:350px;
  357. top:30px;
  358. left:750px;
  359. position:absolute;
  360. overflow-y:scroll;
  361. }
  362.  
  363. img.avatar {
  364. display:none;
  365. }
  366.  
  367. ol.notes {
  368. list-style-type: none;
  369. margin: 0;
  370. padding: 0;
  371. }
  372.  
  373. ::-webkit-scrollbar-thumb:vertical {
  374. background-color:{color:vertscrollbar};
  375. height:100px;
  376. -moz-border-radius: {text:scrollradi}px;
  377. border-radius: {text:scrollradi}px;
  378. }
  379.  
  380. ::-webkit-scrollbar-thumb:horizontal {
  381. background:{color:horizscrollbar};
  382. height:25px;
  383. width:auto;
  384. -moz-border-radius: {text:scrollradi}px;
  385. border-radius:{text:scrollradi}px;
  386. }
  387.  
  388. ::-webkit-scrollbar {
  389. height:10px;
  390. width:5px;
  391. background-color:transparent;
  392. }
  393.  
  394. div#qTip{
  395. position: absolute;
  396. margin:-35px 0px 0px 20px;
  397. padding: 3px;
  398. min-width:40px;
  399. max-width:120px;
  400. text-align: center;
  401. font-size: 13px;
  402. font-family:{font:tooltips};
  403. letter-spacing:1px;
  404. color:{color:tooltip};
  405. z-index: 99;
  406. display: none;
  407. }
  408.  
  409. {CustomCSS}
  410. </style>
  411.  
  412.  
  413. </head>
  414. <body>
  415.  
  416. <div id="linkrs">
  417. <a href="/" title="home">01</a>
  418. &nbsp;
  419. <a href="#?w=500" rel="02" class="poplight" title="about">02</a>
  420. &nbsp;
  421. <a href="#?w=500" rel="03" class="poplight" title="ask">03</a>
  422. &nbsp;
  423. <a href="#?w=500" rel="04" class="poplight" title="links">04</a>
  424. &nbsp;
  425. <a href="#?w=500" rel="05" class="poplight" title="archive">05</a>
  426. &nbsp;
  427. <a href="http://sleaklayouts.tumblr.com" title="theme">06</a>
  428. {block:Pagination}
  429. {block:PreviousPage}
  430. &nbsp;<a href="{PreviousPage}" title="last">←</a>
  431. {/block:PreviousPage}
  432. {block:NextPage}
  433. &nbsp;<a href="{NextPage}" id="next" title="next">→</a>
  434. {/block:NextPage}
  435. {/block:Pagination}
  436. </div>
  437.  
  438. <div id="wrapper">
  439. {block:Posts}
  440. <div class="entry">
  441.  
  442. {block:Title}{Title}{/block:Title}
  443.  
  444. {block:Photo}
  445. <img src="{PhotoURL-500}" width="500"/>
  446. {block:indexpage}
  447. <div class="permas"><a href="{ReblogURL}" target="_blank">{text:reblog}</a> ● <a href="{permalink}">{NoteCount} {text:notes}</a></div>
  448. {block:indexpage}
  449. {/block:Photo}
  450.  
  451. {block:Photoset}
  452. {block:IndexPage}{Photoset-250}{/block:IndexPage}
  453. {block:PermalinkPage}{Photoset-500}{/block:PermalinkPage}
  454. {block:indexpage}
  455. <div class="permas"><a href="{ReblogURL}" target="_blank"> reblog</a> ● <a href="{permalink}">{NoteCount} notes</a></div>
  456. {block:indexpage}
  457. {/block:Photoset}
  458.  
  459. {block:Answer}
  460. <b>{Question}</b>
  461. <div style="font-size:13px;line-height:13px; text-align:right;">- {Asker}</div>
  462. {Answer}
  463. {block:indexpage}
  464. <div class="permas"><a href="{ReblogURL}" target="_blank"> reblog</a> ● <a href="{permalink}">{NoteCount} notes</a></div>
  465. {block:indexpage}
  466. {/block:Answer}
  467.  
  468. {block:Text}{Body}
  469. {block:indexpage}
  470. <div class="permas"><a href="{ReblogURL}" target="_blank"> reblog</a> ● <a href="{permalink}">{NoteCount} notes</a></div>
  471. {block:indexpage}
  472. {/block:Text}
  473.  
  474. {block:Quote}
  475. {Quote}
  476. <div align="right">
  477. {block:Source}-{Source}{/block:Source}
  478. </div>
  479. {block:indexpage}
  480. <div class="permas"><a href="{ReblogURL}" target="_blank"> reblog</a> ● <a href="{permalink}">{NoteCount} notes</a></div>
  481. {block:indexpage}
  482. {/block:Quote}
  483.  
  484. {block:Link}
  485. <a href="{URL}" class="link" {Target}>{Name}</a><BR>
  486. {block:Description}{Description}{/block:Description}
  487. {block:indexpage}
  488. <div class="permas"><a href="{ReblogURL}" target="_blank"> reblog</a> ● <a href="{permalink}">{NoteCount} notes</a></div>
  489. {block:indexpage}
  490. {/block:Link}
  491.  
  492. {block:Video}
  493. {Video-250}
  494. {block:indexpage}
  495. <div class="permas">
  496. {PlayCountWithLabel}<br>
  497. <a href="{ReblogURL}" target="_blank"> reblog</a> ● <a href="{permalink}">{NoteCount} notes</a></div>
  498. {block:indexpage}
  499. {/block:Video}
  500.  
  501. {block:Audio}
  502. <div class="audiowrapper">
  503. {block:AlbumArt}
  504. <div class="audioimgwrapper"><img src="{AlbumArtURL}"></div>
  505. {/block:AlbumArt}
  506. <div class="playerbuttonbg">
  507. <div class="newplayerbutton">
  508. <div class="playerbuttonhug">
  509. {AudioPlayerWhite}
  510. </div></div></div>
  511. <div class="trackdetails">
  512. {block:TrackName}{TrackName}{/block:TrackName}<br><br>
  513. {block:Artist}Artist: {Artist}{/block:Artist}<br><br>
  514. {block:Album}Album: {Album}{/block:Album}<br><br>
  515. {PlayCountWithLabel}
  516. </div></div>
  517. {block:indexpage}
  518. <div class="permas"><a href="{ReblogURL}" target="_blank"> reblog</a> ● <a href="{permalink}">{NoteCount} notes</a></div>
  519. {block:indexpage}
  520. {/block:Audio}
  521.  
  522. {block:Chat}
  523. {block:Lines}
  524. {block:Label}
  525. <br>{Label}
  526. {/block:Label}
  527. {Line}
  528. {/block:Lines}
  529. {block:indexpage}
  530. <div class="permas"><a href="{ReblogURL}" target="_blank"> reblog</a> ● <a href="{permalink}">{NoteCount} notes</a></div>
  531. {block:indexpage}
  532. {/block:Chat}
  533.  
  534. {block:PermalinkPage}
  535. {block:PostNotes}
  536. <div id="noeted">
  537. {block:Caption}
  538. {Caption}
  539. {/block:Caption}
  540. <div style="padding:3px;"
  541. {block:HasTags}
  542. {block:Tags}
  543. <a href="{TagURL}"> #{Tag}</a>
  544. {/block:Tags}
  545. {/block:hasTags}
  546. </div>
  547. {block:NoteCount}
  548. {NoteCount} notes
  549. {/block:NoteCount}
  550. <br><br>
  551. {PostNotes}
  552. </div>
  553. {/block:PostNotes}
  554. {/block:PermalinkPage}
  555. </div>
  556.  
  557. {/block:Posts}
  558. </div>
  559. <div id="jtlr"><a href="http://sleaklayouts.tumblr.com/" target="_blank" title="sleaklayouts">©</a></div>
  560. </body>
  561.  
  562. <div id="02" class="popup_block">
  563. <div class="ttile">{title}</div><br><br>
  564. <div class="descr">{description}</div>
  565. </div></div>
  566.  
  567. <div id="03" class="popup_block">
  568. <!----><div id="hovbox"><div class="herver">
  569. <br>{text:hoverbox}<br></div>
  570. <div class="askbox">
  571. <iframe frameborder="0" width="485px" height="195px" src="http://www.tumblr.com/ask_form/{name}.tumblr.com" id="ask_form" seamless></iframe>
  572. </div></div><!---->
  573. </div></div>
  574.  
  575. <div id="04" class="popup_block" style="font-size:25px; line-height:30px;">
  576. <div class="linkit">
  577. <a href="{text:link1link}">{text:link1name}</a><br>
  578. <a href="{text:link2link}">{text:link2name}</a><br>
  579. <a href="{text:link3link}">{text:link3name}</a><br>
  580. <a href="{text:link4link}">{text:link4name}</a><br>
  581. <a href="{text:link5link}">{text:link5name}</a><br>
  582. <a href="{text:link6link}">{text:link6name}</a><br>
  583. </div>
  584. </div></div>
  585.  
  586. <div id="05" class="popup_block" style="left:30%;">
  587. <iframe frameborder="0" width="1100px" height="550px" src="http://{name}.tumblr.com/archive" seamless></iframe>
  588. </div></div>
  589.  
  590. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!