API tools faq
paste
Advertisement
princekoda

Theme #02 by Zacharie

princekoda
Jul 15th, 2015
1,912
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 13.37 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2.  
  3. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  4.  
  5. <head>
  6.  
  7.  
  8.  
  9. <title>{Title}</title>
  10. <link rel="shortcut icon" href="{Favicon}">
  11. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  12. {block:Description}<meta name="description" content="{MetaDescription}" />{/block:Description}
  13.  
  14. <!----
  15.  
  16. Código Base creado por Vanne en themesbyvanne.tumblr.com
  17.  
  18.  
  19. █▀▀█ █▀▀ █▀▀█ █░░ █▀▀ █░░█ 　
  20. █▄▄▀ █▀▀ █░░█ █░░ █░░ █▀▀█ 　
  21. ▀░▀▀ ▀▀▀ ▀▀▀▀ ▀▀▀ ▀▀▀ ▀░░▀ @tumblr
  22.  
  23. base code by themesbyvanne
  24. styled audio player by paddyluppet
  25.  
  26. ~DO NOT REMOVE ANY CREDIT, ESPECIALLY IN THE CODE
  27. ~DON'T TAKE PARTS OF THIS CODE
  28. ~DON'T REPOST, DON'T CLAIM AS YOUR OWN
  29.  
  30. Feel free to edit the code, just don't touch the credit.
  31.  
  32. ヾ(。◕ฺ∀◕ฺ)ノ
  33.  
  34. --->
  35.  
  36.  
  37. <meta name="image:Background Image" content=""/>
  38. <meta name="image:Sidebar" content=""/>
  39. <meta name="image:Corner Image" content=""/>
  40.  
  41. <meta name="color:Title" content=""/>
  42. <meta name="color:Background" content=""/>
  43. <meta name="color:Posts Background" content=""/>
  44. <meta name="color:Scrollbar" content=""/>
  45. <meta name="color:Scrollbar Background" content=""/>
  46. <meta name="color:Blockquote" content=""/>
  47. <meta name="color:Text" content=""/>
  48. <meta name="color:Bold" content=""/>
  49. <meta name="color:Italic" content=""/>
  50. <meta name="color:Link" content=""/>
  51. <meta name="color:Link Hover" content""/>
  52. <meta name="color:Border" content=""/>
  53. <meta name="color:Box Shadow" content=""/>
  54.  
  55.  
  56. <meta name="if:Maximized Background" content="1"/>
  57. <meta name="if:Image Fade" content="1"/>
  58. <meta name="if:Border" content="1"/>
  59. <meta name="if:Shadow" content="1"/>
  60. <meta name="if:Translucent Posts" content="1"/>
  61. <meta name="if:300px Posts" content="0"/>
  62. <meta name="if:400px Posts" content="1"/>
  63.  
  64.  
  65.  
  66.  
  67. <meta name="text:Link URL" content=""/>
  68. <meta name="text:Link Text" content=""/>
  69. <meta name="text:Link2 URL" content=""/>
  70. <meta name="text:Link2 Text" content=""/>
  71. <meta name="text:Link3 URL" content=""/>
  72. <meta name="text:Link3 Text" content=""/>
  73. <meta name="text:Link4 URL" content=""/>
  74. <meta name="text:Link4 Text" content=""/>
  75. <meta name="text:Link5 URL" content=""/>
  76. <meta name="text:Link5 Text" content=""/>
  77.  
  78.  
  79.  
  80.  
  81.  
  82.  
  83. <style type="text/css">
  84.  
  85.  
  86.  
  87.  
  88. ::-webkit-scrollbar {
  89. width: 9px;
  90. height: 3px;
  91. background:{color:Scrollbar Background};
  92.  
  93. }
  94.  
  95. ::-webkit-scrollbar-thumb {
  96. background-color:{color:Scrollbar};
  97. border: 1px solid black;
  98.  
  99. }
  100.  
  101.  
  102.  
  103. {block:IfImageFade}
  104. img{
  105. -webkit-transition: opacity 0.3s linear;
  106. opacity: 0.70;
  107.  
  108.  
  109. }
  110.  
  111. img:hover{
  112. -webkit-transition: opacity 0.3s linear;
  113. opacity: 1;
  114.  
  115.  
  116. }
  117. {/block:IfImageFade}
  118.  
  119.  
  120.  
  121.  
  122. .entry, #sidebar, #description, #title, #navlinks {
  123.  
  124. {block:ifnotBorder}
  125. border: 0px solid {color:Border};
  126. {block:ifnotBorder}
  127. {block:ifBorder}
  128. border: 1px solid {color:Border};
  129. {/block:ifBorder}
  130. {block:ifnotShadow}
  131. box-shadow: 0px 0px {color:Box Shadow};
  132. {/block:ifnotShadow}
  133. {block:ifShadow}
  134. box-shadow: 4px 4px {color:Box Shadow};
  135. {/block:ifShadow}
  136. {block:ifTranslucentPosts}
  137. background-color: {color:Posts Background};
  138. opacity: .9;
  139. {/block:ifTranslucentPosts}
  140. {block:ifnotTranslucentPosts}
  141. background-color: {color:Posts Background};
  142. opacity: 1.0;
  143. {/block:ifnotTranslucentPosts}
  144.  
  145. }
  146.  
  147. html, body, a, a:hover, .entry {
  148. cursor: url('https://38.media.tumblr.com/bdfa30e58ffa9396802626e0789dbc7b/tumblr_inline_n44pd6DXA71qgntrv.png'), auto;
  149.  
  150. }
  151.  
  152. b, strong {
  153. color: {color:Bold};
  154. font-weight:700;
  155.  
  156. }
  157.  
  158. i, em {
  159. color: {color:Italic};
  160.  
  161. }
  162.  
  163.  
  164. body {
  165. background-image:url('{image:Background Image}');
  166. background-color:{color:Background};
  167. {block:ifMaximizedBackground}
  168. width: 100%;
  169. height: 100%;
  170. background-size: cover;
  171. background-attachment:fixed;
  172. background-repeat: no-repeat;
  173. {/block:ifMaximizedBackground}
  174. {block:IfTileBackground}
  175. background-image: repeat;
  176. {/block:IfTileBackground}
  177. font-family: Calibri;
  178. font-size: 12px;
  179. color: {color:Text};
  180.  
  181.  
  182. }
  183.  
  184. blockquote {
  185. padding-left:8px;
  186. border-left:3px solid {color:Blockquote};
  187.  
  188. }
  189.  
  190. a {
  191. text-decoration: none;
  192. color: {color:Link};
  193. letter-spacing: 0px;
  194. transition:all 0.4s ease-in-out;
  195. -o-transition:all 0.4s ease-in-out;
  196. -moz-transition:all 0.4s ease-in-out;
  197. -webkit-transition:all 0.4s ease-in-out;
  198.  
  199. }
  200.  
  201. a:hover {
  202. color: {color:Link Hover};
  203. transition:all 0.2s ease-in-out;
  204. -o-transition:all 0.2s ease-in-out;
  205. -moz-transition:all 0.2s ease-in-out;
  206. -webkit-transition:all 0.2s ease-in-out;
  207.  
  208. }
  209.  
  210.  
  211.  
  212. #sidebar img {
  213. width: 142px;
  214. height: 142px;
  215. }
  216.  
  217. #title {
  218. position: fixed;
  219. margin-top: 420px;
  220. margin-left: 150px;
  221. font-size: 11px;
  222. width: 122px;
  223. height: 122px;
  224. text-align: center;
  225. color: {color:Title};
  226. padding: 10px;
  227. line-height: 180%;
  228.  
  229. }
  230.  
  231. #description {
  232. line-height: 130%;
  233. position: fixed;
  234. margin-left: 150px;
  235. margin-top: 590px;
  236. padding: 12px;
  237. text-align: center;
  238. width: 119px;
  239. height: 118px;
  240. overflow: auto;
  241. font-size: 12px;
  242.  
  243. }
  244.  
  245. #sidebar {
  246. position: fixed;
  247. margin-left: 325px;
  248. margin-top: 420px;
  249. width: 142px;
  250. height: 142px;
  251.  
  252. }
  253.  
  254. #pages {
  255. position: fixed;
  256. margin-top: 400px;
  257. margin-left: 380px;
  258. color:{color:Text};
  259.  
  260. }
  261.  
  262. #navlinks {
  263. line-height: 200%;
  264. text-transform: lowercase;
  265. font-size: 12px;
  266. text-decoration: none;
  267. position: fixed;
  268. margin-top: 590px;
  269. margin-left:325px;
  270. width: 122px;
  271. height: 122px;
  272. padding: 10px;
  273. text-align: center;
  274.  
  275.  
  276.  
  277. }
  278.  
  279.  
  280.  
  281.  
  282. #container {
  283. margin-top: 20px;
  284. margin-bottom: 20px;
  285. margin-left: 600px;
  286. width: 500px;
  287. }
  288.  
  289. .entry {
  290.  
  291. position:relative;
  292. {block:if300pxPosts}
  293. width: 300px;
  294. {/block:if300pxPosts}
  295. {block:if400pxPosts}
  296. width: 400px;
  297. {/block:if400pxPosts}
  298. padding: 16px;
  299. margin-bottom:20px;
  300. margin-left: 50px;
  301. color: {color:Text};
  302.  
  303.  
  304. }
  305.  
  306. /* AUDIO PLAYER */
  307.  
  308. .playerbuttonbg {
  309. position: absolute;
  310. left: 20px;
  311. top: 20px;
  312. width: 19px;
  313. height: 19px;
  314. background-color: #ffffff;
  315. padding: 10px;
  316. -webkit-border-radius: 40px;
  317. -moz-border-radius: 40px;
  318. border-radius: 40px;
  319. opacity: .85;
  320. filter: alpha(opacity=80);
  321. -moz-opacity: 0.7;
  322. -khtml-opacity: 0.7;
  323. transition: opacity .7s ease-in-out;
  324. -moz-transition: opacity .7s ease-in-out;
  325. -webkit-transition: opacity .7s ease-in-out;
  326.  
  327.  
  328. }
  329.  
  330. .playerbuttonbg:hover {
  331. opacity: 1;
  332. filter: alpha(opacity=100);
  333. -moz-opacity: 1;
  334. -khtml-opacity: 1;
  335.  
  336.  
  337. }
  338.  
  339. .newplayerbutton {
  340. position: relative;
  341. width: 20px;
  342. height:20px;
  343. overflow: hidden;
  344.  
  345.  
  346. }
  347.  
  348. .playerbuttonhug {
  349. position: absolute;
  350. top: -35px;
  351. left: -15px;
  352.  
  353.  
  354. }
  355.  
  356. .tumblr_audio_player {
  357. height: 90px;
  358. width: 270px;
  359. -moz-transform: scale(0.60, 0.60);
  360. -webkit-transform: scale(0.60, 0.60);
  361. -o-transform: scale(0.60, 0.60);
  362. -ms-transform: scale(0.60, 0.60);
  363. transform: scale(0.60, 0.60);
  364. -moz-transform-origin: top left;
  365. -webkit-transform-origin: top left;
  366. -o-transform-origin: top left;
  367. -ms-transform-origin: top left;
  368. transform-origin: top left;
  369.  
  370.  
  371. }
  372.  
  373. .audioimgwrapper {
  374. position: absolute;
  375. left: 0px;
  376. top: 0px;
  377. -webkit-border-radius: 40px;
  378. -moz-border-radius: 40px;
  379. border-radius: 40px;
  380. overflow: hidden;
  381. width: 79px;
  382. height: 79px;
  383.  
  384.  
  385. }
  386.  
  387. .audioimgwrapper img {
  388. width: 100%;
  389. height: auto;
  390. -webkit-border-radius: 40px;
  391. -moz-border-radius: 40px;
  392. border-radius: 40px;
  393.  
  394.  
  395. }
  396.  
  397. .trackdetails {
  398. width: auto;
  399. display:inline-block;
  400. margin-left: 90px;
  401. min-height: 85px;
  402. line-height:140%;
  403. margin-top:10px;
  404.  
  405.  
  406. }
  407.  
  408. .audiowrapper {
  409. position: relative;
  410. display:inline-block;
  411.  
  412. }
  413.  
  414. /* AUDIO CODE END */
  415.  
  416.  
  417. img {
  418. max-width: 100%;
  419. }
  420.  
  421. h1 {
  422. text-align: center;
  423. font-size: 15px;
  424. color: {color:Title};
  425. }
  426.  
  427.  
  428.  
  429. #portrait img {
  430. float: left;
  431. margin-right: 5px;
  432. }
  433.  
  434. #permalink {
  435. text-align: left;
  436. border-top: 1px solid #000;
  437. position: relative;
  438. margin-top: 5px;
  439. padding-top: 5px;
  440. }
  441.  
  442. #notes {
  443. display:inline;
  444. margin-right:5px;
  445. }
  446.  
  447. #links {
  448. line-height: 200%;
  449.  
  450. }
  451.  
  452. #photoset {
  453.  
  454. {block:if300pxPosts}
  455. width: 298px;
  456. {/block:if300pxPosts}
  457. {block:if400pxPosts}
  458. width: 398px;
  459. {/block:if400pxPosts}
  460.  
  461.  
  462. }
  463.  
  464. #photo {
  465.  
  466. {block:if300pxPosts}
  467. width: 298px;
  468. {/block:if300pxPosts}
  469. {block:if400pxPosts}
  470. width: 398px;
  471. {/block:if400pxPosts}
  472.  
  473.  
  474.  
  475. }
  476.  
  477.  
  478. #tags {
  479. display:inline;
  480. word-spacing: 2px;
  481.  
  482. }
  483.  
  484.  
  485. #credit {
  486. font-size: 11px;
  487. border: 1px dotted {color:Border};
  488. width: 25px;
  489. height: 10px;
  490. padding: 5px;
  491. background-color:{color:Posts Background};
  492. margin-left: 5px;
  493. bottom: 5px;
  494. position:fixed;
  495. transition:all 0.5s ease-in-out;
  496. -o-transition:all 0.5s ease-in-out;
  497. -moz-transition:all 0.5s ease-in-out;
  498. -webkit-transition:all 0.5s ease-in-out;
  499.  
  500. }
  501.  
  502.  
  503. </style>
  504.  
  505. </head>
  506.  
  507. <div style="position:fixed; bottom:-5px; right:0px; opacity: 1;">
  508. <img src="{image:Corner Image}"/>
  509. </div>
  510.  
  511. <body>
  512.  
  513. <div id="title">{Title}
  514.  
  515. <br>
  516. <div id="links">
  517. <a href="/">Home</a>
  518. <br>
  519. <a href="/ask">Message</a>
  520. <br>
  521.  
  522. <a href="/archive">Archive</a>
  523. <br>
  524.  
  525. <a href="http://iceharuka.tumblr.com">Theme</a>
  526. <br>
  527.  
  528.  
  529. </div>
  530.  
  531. </div>
  532.  
  533. <div id="sidebar">
  534.  
  535. <img src="{image:Sidebar}">
  536. </div>
  537.  
  538. <div id="description">
  539.  
  540. {Description} </div>
  541.  
  542.  
  543. <div id="navlinks">
  544.  
  545. {block:ifLinkText}
  546.  
  547. <a href="{text:Link URL}">{text:Link Text}</a>
  548. <br>
  549. <a href="{text:Link2 URL}">{text:Link2 Text}</a>
  550. <br>
  551. <a href="{text:Link3 URL}">{text:Link3 Text}</a>
  552. <br>
  553. <a href="{text:Link4 URL}">{text:Link4 Text}</a>
  554. <br>
  555. <a href="{text:Link5 URL}">{text:Link5 Text}</a>
  556. <br>
  557.  
  558.  
  559. {/block:ifLinkText}
  560. </div>
  561.  
  562. <div id="credit">
  563.  
  564. <a href="http://iceharuka.tumblr.com"> 春香 </a>
  565.  
  566. </div>
  567.  
  568.  
  569. <div id="pages">
  570.  
  571. {block:PreviousPage}
  572. <a href="{PreviousPage}">←</a>
  573. {/block:PreviousPage}
  574.  
  575. ( {CurrentPage} / {TotalPages} )
  576.  
  577. {block:NextPage}
  578. <a href="{NextPage}">→</a>
  579. {/block:NextPage}
  580.  
  581. </div>
  582.  
  583.  
  584.  
  585.  
  586.  
  587. <div id="container">
  588. {block:Posts}
  589. <div class="entry">
  590.  
  591.  
  592. {block:Text}
  593. <h1>{block:Title}{Title}{/block:Title}</h1>
  594. {Body}
  595. {/block:Text}
  596.  
  597. {block:Photo}
  598. <div id="photo">
  599. <a href="{Permalink}">
  600. <a href="{permalink}"><img src="{PhotoURL-500}"/></a>
  601. </div>
  602. {block:Caption}{Caption}{/block:Caption}
  603. {/block:Photo}
  604.  
  605. {block:Photoset}
  606. <div id="photoset">
  607. {Photoset}
  608. </div>
  609. {block:Caption}
  610.  
  611. {Caption}{/block:Caption}
  612. {/block:Photoset}
  613.  
  614.  
  615. {block:Quote}
  616. {Quote}
  617. {block:Source}<br>—{Source}{/block:Source}
  618. {/block:Quote}
  619.  
  620. {block:Link}
  621. <h1><a href="{URL}" {Target}>{Name}</a></h1>
  622. {block:Description}{Description}{/block:Description}
  623. {/block:Link}
  624.  
  625. {block:Chat}
  626. {block:Title}<h1>{Title}</h1>{/block:Title}
  627. {block:Lines}
  628. {block:Label}<b>{Label}</b>{/block:Label} {Line}<br>
  629. {/block:Lines}
  630. {/block:Chat}
  631.  
  632.  
  633. {block:Audio}
  634. {block:AudioPlayer}
  635. <div class="audiowrapper">
  636. {block:AlbumArt}
  637. <div class="audioimgwrapper"><img src="{AlbumArtURL}"></div>
  638. {/block:AlbumArt}
  639.  
  640. <div class="playerbuttonbg">
  641. <div class="newplayerbutton">
  642. <div class="playerbuttonhug">
  643.  
  644. {AudioPlayerWhite}
  645.  
  646. </div>
  647. </div>
  648. </div>
  649.  
  650. <div class="trackdetails">
  651.  
  652. {block:TrackName}{TrackName}{/block:TrackName}<br/>
  653. {block:Artist}Artist: {Artist}{/block:Artist}<br/>
  654. {block:Album}Album: {Album}{/block:Album}<br/>
  655. {PlayCountWithLabel}
  656.  
  657. </div>
  658. </div>
  659. {/block:AudioPlayer}
  660. {block:Caption}{Caption}{/block:Caption}
  661. {/block:Audio}
  662.  
  663. {block:Video}
  664. {Video-500}
  665. {block:Caption}{Caption}{/block:Caption}
  666. {/block:Video}
  667.  
  668. {block:Answer}
  669. <div id="portrait"><img src="{AskerPortraitURL-40}"></div>
  670. {Asker} said: <br>"{Question}"<p>
  671. <br>
  672. {Answer}
  673. {/block:Answer}
  674.  
  675.  
  676.  
  677. <div id="permalink">
  678.  
  679. <a href="{ReblogURL}" target="_blank" class="details"> reblog </a> |
  680.  
  681. <div id="notes">
  682. <a href="{Permalink}">
  683. {NoteCountWithLabel}</a>
  684. {block:PostNotes}<a name="notes1">{PostNotes}</a>{/block:PostNotes}
  685. </div>
  686.  
  687.  
  688. <div id="tags">
  689. <br>{block:HasTags}{block:Tags} +<a href="{TagURL}">{Tag}</a> {/block:Tags}{/block:HasTags}
  690. </div>
  691.  
  692.  
  693. </div>
  694.  
  695. {block:NoRebloggedFrom}
  696. {block:RebloggedFrom}{ReblogParentName}{/block:RebloggedFrom}
  697. {/block:NoRebloggedFrom}
  698.  
  699. {block:ContentSource}<!-- {SourceURL}
  700. {block:SourceLogo}<img src="{BlackLogoURL}"width="{LogoWidth}" height="{LogoHeight}" alt="{SourceTitle}" />{/block:SourceLogo}
  701. {block:NoSourceLogo}{SourceLink}{/block:NoSourceLogo} -->
  702. {/block:ContentSource}
  703.  
  704.  
  705.  
  706. </div> <!-- /div entry --->
  707.  
  708. {/block:Posts}
  709.  
  710. </div><!-- /div container --->
  711.  
  712.  
  713.  
  714.  
  715.  
  716. </body>
  717.  
  718. </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!