API tools faq
paste
Advertisement
vickkyu

theme #01 by vickkyu

vickkyu
Aug 17th, 2013
448
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 14.63 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  2. <html>
  3.  
  4. <!--theme 01 'become him' by vickkyu.tumblr.com (you can customize as much as you want to, but please, leave the credits where it is).-->
  5.  
  6. <head>
  7. <meta http-equiv="content-type" content="text/html; charset=utf-8">
  8. <title>{Title}</title>
  9. <link rel="shortcut icon" href="{Favicon}">
  10. {block:Description}<meta name="description" content="{MetaDescription}" />{/block:Description}
  11. <link rel="alternate" type="application/rss+xml" href="{RSS}" />
  12.  
  13. <meta name="color:background" content="#faf8f8">
  14. <meta name="color:blockquote" content="#3c504e">
  15. <meta name="color:description" content="#838282">
  16. <meta name="color:scrollbar" content="#4b7773">
  17. <meta name="color:scrollbar bg" content="#faf8f8">
  18. <meta name="color:text" content="#807a7a">
  19. <meta name="color:link" content="#442d36">
  20. <meta name="color:link hover" content="#3c504e">
  21. <meta name="color:header" content="">
  22. <meta name="color:question background" content="#d1d1d1">
  23. <meta name="color:header links bg" content="#442d36">
  24. <meta name="color:pagination" content="#454545">
  25. <meta name="color:navi links" content="#ffffff">
  26. <meta name="color:navi links hover" content="#3c504e">
  27. <meta name="color:navi links bg" content="#442d36">
  28. <meta name="color:post border" content="#3c504e">
  29. <meta name="color:post title" content="#3c504e">
  30.  
  31. <meta name="image:background" content="">
  32. <meta name="image:sidebar" content="http://static.tumblr.com/ctnjtyx/UHymrpf3t/sidebar.gif">
  33. <meta name="image:header 2" content="http://static.tumblr.com/ctnjtyx/uoImrpf3i/head2.png">
  34. <meta name="image:header 1" content="http://static.tumblr.com/ctnjtyx/TRImrpf38/head1.png">
  35.  
  36. <meta name="if:Captions" content="1">
  37.  
  38. <meta name="text:Link 1" content="">
  39. <meta name="text:Link 1 url" content="">
  40. <meta name="text:Link 2" content="">
  41. <meta name="text:Link 2 url" content="">
  42. <meta name="text:Link 3" content="">
  43. <meta name="text:Link 3 url" content="">
  44. <meta name="text:Link 4" content="">
  45. <meta name="text:Link 4 url" content="">
  46. <meta name="text:Link 5" content="">
  47. <meta name="text:Link 5 url" content="">
  48. <meta name="text:Link 6" content="">
  49. <meta name="text:Link 6 url" content="">
  50. <meta name="text:Link 7" content="">
  51. <meta name="text:Link 7 url" content="">
  52. <meta name="text:Link 8" content="">
  53. <meta name="text:Link 8 url" content="">
  54. <meta name="text:Link 9" content="">
  55. <meta name="text:Link 9 url" content="">
  56.  
  57. <link href='http://fonts.googleapis.com/css?family=Tulpen+One' rel='stylesheet' type='text/css'>
  58.  
  59. <style type="text/css">
  60.  
  61. body{
  62. background-color:{color:background};
  63. background-image: url('{image:background}');
  64. background-repeat:repeat;
  65. font-family:'cambria';
  66. margin:0px;
  67. padding:0px;
  68. }
  69.  
  70. ::-webkit-scrollbar {
  71. height: 0px;
  72. width: 2px;
  73. }
  74.  
  75. ::-webkit-scrollbar-thumb {
  76. background-color:{color:scrollbar};
  77. -webkit-border-radius: 50px;
  78. border-radius: 50px;
  79. }
  80.  
  81. ::-webkit-scrollbar-track{
  82. background-color:{color:scrollbar bg};
  83. -webkit-border-radius: 50px;
  84. border-radius: 50px;
  85. }
  86. ::-webkit-scrollbar-buttom{
  87. background-color:{color:scrollbar bg};
  88. }
  89.  
  90.  
  91. a {
  92. text-decoration:none;
  93. outline:none;
  94. -moz-outline-style:none;
  95. color:{color:link};
  96. -webkit-transition: all 0.7s ease;
  97. -moz-transition: all 0.7s ease;
  98. -o-transition: all 0.7s ease;
  99. }
  100.  
  101. a:hover {
  102. -webkit-transition: all 0.5s ease-out;
  103. -moz-transition: all 0.5s ease-out;
  104. transition: all 0.5s ease-out;
  105. color: {color:link hover};
  106. -webkit-transition: all 0.7s ease;
  107. -moz-transition: all 0.7s ease;
  108. -o-transition: all 0.7s ease;
  109. }
  110.  
  111. blockquote {
  112. border-left:2px solid {color:blockquote};
  113. padding-left:5px;
  114. margin-left:2px;
  115. width:500px;
  116. }
  117.  
  118. #bumbumheader{
  119. width:100%;
  120. height:184px;
  121. background-color:{color:header};
  122. position:fixed;
  123. top:0px;
  124. left:0px;
  125. z-index:9999
  126. }
  127.  
  128. #bumbumheader img{
  129. height:184px;
  130. }
  131.  
  132. #cf {
  133. position:relative;
  134. height:184px;
  135. width:450px;
  136. }
  137.  
  138. #cf img {
  139. position:absolute;
  140. -webkit-transition: opacity 1s ease-in-out;
  141. -moz-transition: opacity 1s ease-in-out;
  142. -o-transition: opacity 1s ease-in-out;
  143. transition: opacity 1s ease-in-out;
  144. }
  145.  
  146. #cf img.top:hover {
  147. opacity:0;
  148. }
  149.  
  150. #bumbumlinks{
  151. font-family: cambria;
  152. font-size: 10px;
  153. text-align: center;
  154. width:280px;
  155. height:14px;
  156. text-transform:uppercase;
  157. padding:7px;
  158. background-color:{color:header links bg};
  159. letter-spacing:1px;
  160. margin-top:0px;
  161. width:100%;
  162. margin-left:auto;
  163. margin-right:auto;
  164. left:0px;
  165. position:fixed;
  166. color:{color:title};
  167. z-index:9999
  168. }
  169.  
  170.  
  171. #bumbumlinks a{
  172. display:inline-block;
  173. font-family:cambria;
  174. margin-top:-15px;
  175. text-transform:uppercase;
  176. font-size:8px;
  177. padding:9px;
  178. text-decoration:none;
  179. background-color:{color:navi links bg};
  180. opacity:.5;
  181. color:{color:navi links};
  182. transition:0.6s; -o-transition-transition:0.6s; -webkit-transition-duration:0.6s; -moz-transition-duration:0.6s
  183. }
  184.  
  185. #bumbumlinks a:hover{
  186. opacity:1;
  187. text-decoration:none;
  188. background-color:{color:navi links hover};
  189. color:{color:navi links};
  190. transition:0.6s; -o-transition-transition:0.6s; -webkit-transition-duration:0.6s; -moz-transition-duration:0.6s
  191. }
  192.  
  193. #sidebar{
  194. width:90px;
  195. height:114px;
  196. position:fixed;
  197. padding:10px;
  198. margin-left:560px;
  199. top:230px
  200. }
  201.  
  202. #sidebar h1 {
  203. padding-left: 5px;
  204. font-family: 'Tulpen One', cursive;
  205. font-size: 16px;
  206. color: {color:post title};
  207. font-weight: normal;
  208. text-transform: uppercase;
  209. letter-spacing: 4px;
  210. margin: 0;
  211. margin-bottom:6px;
  212. }
  213.  
  214. #sidebar h1 a{
  215. color: {color:post title};
  216. text-decoration: none;
  217. }
  218.  
  219. .sideimage {text-align:center;}
  220. .sideimage img {
  221. width:90px;
  222. height:90px;
  223. margin-bottom:0px;
  224. -webkit-border-radius:200px;
  225. border-radius:200px;
  226. -moz-border-radius:200px;
  227. z-index:99;
  228. }
  229.  
  230. #pagination{
  231. letter-spacing:2px;
  232. padding:9px;
  233. width:90;
  234. background-color:transparent;
  235. text-align:center;
  236. position:fixed;
  237.  
  238. }
  239.  
  240. #pagination a{
  241. font-size:10px;
  242. color:{color:pagination};
  243. }
  244.  
  245. #desc{
  246. width:90px;
  247. color:{color:description};
  248. padding:10px;
  249. font-family:cambria;
  250. font-size:9px;
  251. font-style:italic;
  252. text-align:center;
  253. text-transform:lowercase;
  254. margin-left:-10px
  255. }
  256.  
  257. .bumbumpost {
  258. width:670px;
  259. position:relative;
  260. margin-top:160px;
  261. bottom:5px;
  262. margin-left:auto!important;
  263. margin-right:auto!important;
  264. z-index:999
  265. }
  266.  
  267. .bumbumposts {
  268. background-color:#fff;
  269. width:500px;
  270. padding:15px 15px 15px 15px;
  271. margin:10px!important;
  272. top:193px;
  273. margin-top:5px;
  274. margin-bottom:5px;
  275. display:block;
  276. font-family:cambria;
  277. font-weight:normal;
  278. font-size:11px;
  279. color:{color:text};
  280. text-align:justify;
  281. z-index:9999!important;
  282. float:left;
  283. }
  284.  
  285. .bumbumposts h1 {
  286. border-left: 20px solid {color:post title};
  287. padding-left: 5px;
  288. font-family: 'Tulpen One', cursive;
  289. font-size: 18px;
  290. color: {color:post title};
  291. font-weight: normal;
  292. text-transform: uppercase;
  293. letter-spacing: 4px;
  294. margin: 0;
  295. }
  296.  
  297. .bumbumposts h1 a{
  298. color: {color:post title};
  299. text-decoration: none;
  300. }
  301.  
  302. .bumbumposts img{
  303. max-width:500px;
  304. -webkit-transition: all 0.7s ease-in-out;
  305. -moz-transition: all 0.7s ease-in-out;
  306. -o-transition: all 0.7s ease-in-out;
  307. -ms-transition: all 0.7s ease-in-out;
  308. transition: all 0.7s ease-in-out;
  309. background-color:transparent!important;
  310. }
  311.  
  312. .photo{
  313. max-width:500px;
  314. display:block;
  315. background-color:transparent!important;
  316. padding:0px 0px 5px 0px;
  317. }
  318.  
  319.  
  320. .bumbumposts h2{
  321. font-family: calibri;
  322. font-size: 11px;
  323. color: {color:Entry Titles};
  324. font-weight: normal;
  325. text-transform: uppercase;
  326. letter-spacing: 2px;
  327. }
  328.  
  329.  
  330. #date{
  331. width:500px;
  332. text-align:left;
  333. color:{color:info};
  334. text-transform:uppercase;
  335. font-family:cambria;
  336. font-size:8px;
  337. margin-top:5px;
  338. z-index:99999
  339. }
  340.  
  341. .date a{
  342. text-decoration:none;opacity:1;
  343. transition:0.6s; -o-transition-transition:0.6s; -webkit-transition-duration:0.6s; -moz-transition-duration:0.6s
  344. }
  345.  
  346. .date a:hover{
  347. color:{color:info hover};
  348. text-decoration:none;
  349. opacity:1
  350. transition:0.6s; -o-transition-transition:0.6s; -webkit-transition-duration:0.6s; -moz-transition-duration:0.6s
  351. }
  352.  
  353. #borderinfo{
  354. border-bottom:1px solid {color:post border};
  355. width:500px;
  356. margin-top:10px
  357. }
  358.  
  359.  
  360. iframe#tumblr_controls {
  361. z-index:999999999 !important;
  362. right:3px !important;
  363. position: fixed !important;
  364. -webkit-transition: opacity 0.7s linear;
  365. opacity: 0.8;
  366. -webkit-transition: all 0.8s ease-out;
  367. -moz-transition: all 0.8s ease-out;
  368. transition: all 0.8s ease-out;
  369. z-index:999999999
  370. }
  371.  
  372. iframe#tumblr_controls:hover {
  373. -webkit-transition: opacity 0.7s linear;
  374. opacity: 1;
  375. -webkit-transition: all 0.4s ease-out;
  376. -moz-transition: all 0.4s ease-out;
  377. transition: all 0.4s ease-out;
  378. }
  379.  
  380. #s-m-t-tooltip{
  381. max-width:300px;
  382. z-index:10;
  383. margin:14px 10px 5px 15px;
  384. padding:3px;
  385. background-color:#ffffff;
  386. text-transform:uppercase;
  387. font-family:calibri;
  388. font-size:10px;
  389. line-height:13px;
  390. color:#888888;
  391. z-index:99999;
  392. }
  393.  
  394. .pagination {
  395. display: none;
  396. }
  397.  
  398. .audioplay {
  399. height: 30px;
  400. margin-top: 38px;
  401. margin-left: 38px;
  402. height: 28px;
  403. width: 28px;
  404. opacity: 0.7;
  405. overflow:hidden;
  406. float:left;
  407. position: absolute;
  408. z-index: 1002;
  409. }
  410.  
  411.  
  412. .audiodesc {
  413. color: {color:text};
  414. overflow: hidden;
  415. margin-left: 100px;
  416. margin-top: 6px;
  417. display: block;
  418. position: absolute;
  419. line-height: 20px;
  420. padding: 5px;
  421. }
  422.  
  423. .albumart {
  424. z-index: 1001;
  425. width: 80px;
  426. height: 80px;
  427. border: 10px solid {color:background};
  428. overflow: hidden;
  429. text-align: left;
  430. position: absolute;
  431. }
  432.  
  433. .track {
  434. text-align: right;
  435. display: block;
  436. font-family: 'roboto condensed';
  437. font-size: 16px;
  438. border-bottom: 1px solid #000;
  439. color: {color:Accent};
  440. margin-top: 0px;
  441. text-transform: uppercase;
  442. font-style: italic;
  443. }
  444.  
  445. .albumart2 {
  446. z-index: 1000;
  447. width: 100px;
  448. height: 100px;
  449. overflow: hidden;
  450. }
  451.  
  452. #credit {
  453. position:fixed;
  454. right:0px;
  455. bottom:0px;
  456. padding:5px;
  457. text-transform:uppercase;
  458. letter-spacing:1px;
  459. font-size:8px;
  460. }
  461.  
  462. .quote {
  463. font-family: georgia;
  464. font-size: 24px;
  465. color: {color:Entry Bold};
  466. float: left;
  467. margin-top: 2px;
  468. }
  469. {CustomCSS}
  470.  
  471. </style>
  472.  
  473.  
  474. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
  475.  
  476. <script src="http://static.tumblr.com/taiol9r/FKKmcv180/jquery.style-my-tooltips.js"></script>
  477.  
  478. <script>
  479. (function($){
  480. $(document).ready(function(){
  481. $("[title]").style_my_tooltips({
  482. tip_follows_cursor:true,
  483. tip_delay_time:100,
  484. tip_fade_speed:500,
  485. });
  486. });
  487. })(jQuery);
  488. </script>
  489.  
  490. </head>
  491.  
  492. <body>
  493.  
  494. <div id="bumbumheader">
  495. <div id="cf">
  496. <img class="bottom" src="{image:header 2}" />
  497. <img class="top" src="{image:header 1}" />
  498. </div><div id="bumbumlinks">
  499. <a href="/">index</a>
  500. <a href="/ask">message</a>
  501. <a href="/archive">archive</a>
  502. {block:IfLink1}<a href="{text:Link 1 url}">{text:Link 1}</a>{/block:IfLink1}
  503. {block:IfLink2}<a href="{text:Link 2 url}">{text:Link 2}</a>{/block:IfLink2}
  504. {block:IfLink3}<a href="{text:Link 3 url}">{text:Link 3}</a>{/block:IfLink3}
  505. {block:IfLink4}<a href="{text:Link 4 url}">{text:Link 4}</a>{/block:IfLink4}
  506. {block:IfLink5}<a href="{text:Link 5 url}">{text:Link 5}</a>{/block:IfLink5}
  507. {block:IfLink6}<a href="{text:Link 6 url}">{text:Link 6}</a>{/block:IfLink6}
  508. {block:IfLink7}<a href="{text:Link 7 url}">{text:Link 7}</a>{/block:IfLink7}
  509. {block:IfLink8}<a href="{text:Link 8 url}">{text:Link 8}</a>{/block:IfLink8}
  510. {block:IfLink9}<a href="{text:Link 9 url}">{text:Link 9}</a>{/block:IfLink9}
  511. </div></div>
  512. <br><br><br>
  513.  
  514.  
  515. <div class="bumbumpost">
  516.  
  517. <div id="sidebar">
  518. <h1>{Title}</h1>
  519. <div class="sideimage"><a href="/"><img src="{image:sidebar}" align="center"/></a></div>
  520. <div id="desc">{Description}</div>
  521. <div id="pagination">{block:Pagination}{block:PreviousPage}<a href="{PreviousPage}">< </a> -{/block:PreviousPage}{block:NextPage} <a href="{NextPage}">></a>{/block:NextPage}{/block:Pagination}</div>
  522. </div>
  523.  
  524.  
  525.  
  526. {block:Posts}
  527. <div class="bumbumposts">
  528.  
  529. {block:Text}
  530. {block:Title}<h1>{Title}</h1>{/block:Title}
  531. {Body}
  532. {/block:Text}
  533.  
  534. {block:Photo}
  535. <center><div class="photo">
  536. {LinkOpenTag}<img src="{PhotoURL-500}">{LinkCloseTag}</div></center>
  537. {block:IfCaptions}{block:Caption}
  538. {Caption}
  539. {/block:Caption}{/block:IfCaptions}
  540. {block:IfNotCaptions}{block:PermalinkPage}{block:Caption}
  541. {Caption}
  542. {/block:Caption}{/block:PermalinkPage}{block:IfNotCaptions}
  543. {/block:Photo}
  544.  
  545. {block:Photoset}
  546. <div class="photo">
  547. {Photoset-500}
  548. </div>
  549. {block:IfCaptions}{block:Caption}
  550. {Caption}
  551. {/block:Caption}{/block:IfCaptions}
  552. {block:IfNotCaptions}{block:PermalinkPage}{block:Caption}
  553. {Caption}
  554. {/block:Caption}{/block:PermalinkPage}{block:IfNotCaptions}
  555. {/block:Photoset}
  556.  
  557. {block:Quote}
  558. <div class="quote">&#10077;</div>
  559. <h2>{Quote}</h2>
  560. {block:Source}<p align="right">{Source} <b>&mdash;</b></p>{/block:Source}
  561. {/block:Quote}
  562.  
  563. {block:Link}
  564. <h1><a href="{URL}" target="{Target}">{Name}</a></h1>
  565. {block:Description}{Description}{/block:Description}
  566. {/block:Link}
  567.  
  568. {block:Chat}
  569. {block:Title}<h1>{Title}</h1>{/block:Title}
  570. {block:Lines}
  571. {block:Label}
  572. <b>{Label}</b>
  573. {/block:Label}
  574. {Line}<br />
  575. {/block:Lines}
  576. {/block:Chat}
  577.  
  578. {block:Audio}
  579. <div class="audiodesc">
  580. <div class="track">{block:TrackName}{TrackName}{/block:TrackName}</div>
  581. {block:Artist}
  582. <b>Artist:</b> {Artist}<br>
  583. {/block:Artist}
  584. {block:Album}
  585. <b>Album:</b> {Album}<br>
  586. {/block:Album}
  587. {block:PlayCount}
  588. <b>Plays:</b> {PlayCount} </div>
  589. {/block:PlayCount}
  590. <div class="audioplay">{AudioPlayerBlack}</div>
  591. {block:AlbumArt}
  592. <div class="albumart"><img src="{AlbumArtURL}" width="80" height="80"></div>
  593. {/block:AlbumArt}
  594. <div class="albumart2"><img src="http://24.media.tumblr.com/tumblr_md46tfaw9F1rfymxfo1_400.jpg" width="80" height="80"></div>
  595. {/block:Audio}
  596.  
  597.  
  598. {block:Video}
  599. {Video-500}
  600. {block:IfCaptions}{block:Caption}
  601. {Caption}
  602. {/block:Caption}{/block:IfCaptions}
  603. {block:IfNotCaptions}{block:PermalinkPage}{block:Caption}
  604. {Caption}
  605. {/block:Caption}{/block:PermalinkPage}{block:IfNotCaptions}
  606. {/block:Video}
  607.  
  608. {block:Answer}
  609. <table>
  610. <tr><td colspan="3" width="500px" style="padding:9px; text-align:center; background-color:{color:question background};">{Asker} asked: {Question}</td> <img src="{AskerPortraitURL-30}" style="padding:2px;" align="right"></tr>
  611. </table>
  612. {Answer}
  613. {/block:Answer}
  614.  
  615.  
  616. <div id="borderinfo"></div>
  617.  
  618. <div id="date">
  619. <a href="{Permalink}">{block:Date} {TimeAgo} {/block:Date}</a> with {NoteCountWithLabel}{/block:NoteCount} {block:Tags}{block:HasTags} / <a href="{TagURL}">#{Tag}</a> {/block:HasTags}{/block:Tags}
  620. </div>
  621. </div>
  622.  
  623. {/block:Posts}
  624.  
  625. </div></div>
  626.  
  627. <div id="credit"><a href="http://www.vickkyu.tumblr.com" title="vickkyu" target="_blank">♔</a></div>
  628.  
  629.  
  630. </body>
  631.  
  632. </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!