API tools faq
paste
Advertisement
wantoup

Theme 18: Music Box

wantoup
Jun 15th, 2013
7,599
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 13.53 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. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  3. <head><title>{Title}</title>
  4. <link rel="shortcut icon" href="{Favicon}">
  5. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  6. {block:Description}<meta name="description" content="{MetaDescription}" />{/block:Description}
  7.  
  8. <!--
  9.  
  10. Theme #18: Music Box by viwan-th (http://viwan-th.tumblr.com)
  11.  
  12. Album art by げみ (http://www.pixiv.net/member_illust.php?mode=medium&illust_id=34790736)
  13. Music Icons by graphic design junction (http://graphicdesignjunction.com/2012/04/350-free-icons-pixel-perfect-glyphs-icons-psd/)
  14.  
  15. Please do not remove theme credit. You can move the credit to another page, as long as it remains on the blog.
  16.  
  17. -->
  18.  
  19. <meta name="color:Background" content="#222222">
  20. <meta name="color:Body Text" content="#888888">
  21. <meta name="color:Body Links" content="#ffffff">
  22. <meta name="color:Body Bold" content="#cccccc">
  23. <meta name="color:Headers" content="#ffffff">
  24. <meta name="color:Blockquote" content="#557799">
  25.  
  26. <meta name="color:Sidebar" content="#090914">
  27. <meta name="color:Sidebar Borders" content="#445566">
  28.  
  29. <meta name="color:Link 1" content="#8899aa">
  30. <meta name="color:Link 2" content="#222244">
  31. <meta name="color:Link 3" content="#336699">
  32. <meta name="color:Link 4" content="#7799bb">
  33. <meta name="color:Links Hover" content="#ffffff">
  34.  
  35. <meta name="color:Posts" content="#444444">
  36. <meta name="color:Audio Background" content="#ffffff">
  37. <meta name="color:Audio Bold" content="#669933">
  38. <meta name="color:Perma Background" content="#333333">
  39. <meta name="color:Permalink Borders" content="#cccccc">
  40. <meta name="color:Permalink Links" content="#8899cc">
  41.  
  42. <meta name="color:Audio 1" content="#555555">
  43. <meta name="color:Audio 2" content="#777777">
  44. <meta name="color:Audio 3" content="#999999">
  45. <meta name="color:Audio 4" content="#bbbbbb">
  46.  
  47. <meta name="color:Selection" content="#66cccc">
  48. <meta name="color:Scrollbar" content="#333333">
  49. <meta name="color:Scrollbar BG" content="#aaaaaa">
  50.  
  51. <meta name="if:3 Columns" content="1">
  52. <meta name="if:Infinite Scroll" content="1">
  53. <meta name="if:Full Background" content="1">
  54. <meta name="if:Hover Audio" content="1">
  55.  
  56. <meta name="image:Background" content="">
  57. <meta name="image:Sidebar" content="http://static.tumblr.com/mtdphun/rn2moeiu6/th18_side.jpg">
  58. <meta name="image:Album Art" content="http://24.media.tumblr.com/e13939af234b107555ea05a6b0941b58/tumblr_mlihv9IfoT1rpiipyo2_500.png">
  59.  
  60. <meta name="text:Background Position" content="bottom left">
  61. <meta name="text:Sidebar Position" content="0">
  62.  
  63. <meta name="text:Link 1" content="link one">
  64. <meta name="text:Link 1 URL" content="">
  65. <meta name="text:Link 2" content="link two">
  66. <meta name="text:Link 2 URL" content="">
  67. <meta name="text:Link 3" content="link three">
  68. <meta name="text:Link 3 URL" content="">
  69. <meta name="text:Link 4" content="link four">
  70. <meta name="text:Link 4 URL" content="">
  71.  
  72. <style type="text/css">
  73.  
  74. /* BODY */
  75.  
  76. body {
  77. font-family:calibri;
  78. font-size:11px;
  79. text-align:justify;
  80. background-attachment:fixed;
  81. background-image:url('{image:Background}');
  82. {block:ifFullBackground}background-size:cover;{/block:ifFullBackground}
  83. background-position:{text:Background Position};
  84. background-color:{color:Background};
  85. color:{color:Body Text};
  86. }
  87.  
  88. a {
  89. text-decoration:none;
  90. color:{color:Body Links};
  91. -webkit-transition:all 1s ease;
  92. -moz-transition:all 1s ease;
  93. -o-transition:all 1s ease;
  94. transition:all 1s ease-in-out;
  95. }
  96.  
  97. b, strong {
  98. color:{color:Body Bold};
  99. }
  100.  
  101. h1, h1 a, h1 a:hover {
  102. margin-top:0px;
  103. font-size:15px;
  104. color:{color:Body Links};
  105. }
  106.  
  107. blockquote {
  108. margin-left:10px;
  109. border-left:3px solid {color:Blockquote};
  110. padding-left:10px;
  111. }
  112.  
  113. img {
  114. max-width:100%;
  115. }
  116.  
  117. ul {
  118. list-style-type:square;
  119. }
  120.  
  121. /* SIDEBAR */
  122.  
  123. #sidebar {
  124. position:fixed;
  125. height:100%;
  126. width:250px;
  127. top:0px;
  128. left:0px;
  129. text-align:center;
  130. z-index:999;
  131. background:{color:Sidebar};
  132. border-left:10px solid {color:Sidebar Borders};
  133. border-right:10px solid {color:Sidebar Borders};
  134. }
  135.  
  136. #pagination {
  137. margin-top:-40px;
  138. font-size:30px;
  139. font-family:serif;
  140. padding:0 10px;
  141. box-sizing:border-box;
  142. width:250px;
  143. }
  144.  
  145. #image {
  146. display:block;
  147. margin-bottom:{text:Sidebar Position}px;
  148. }
  149.  
  150. #pagination {
  151. position:fixed;
  152. }
  153.  
  154. /* NAVIGATION */
  155.  
  156. #navigation {
  157. width:250px;
  158. text-align:center;
  159. height:10px;
  160. }
  161.  
  162. .nav {
  163. display:inline-block;
  164. float:left;
  165. width:25%;
  166. padding:10px 0;
  167. height:13px;
  168. }
  169.  
  170. #a {
  171. border-top:2px solid {color:Link 1};
  172. border-bottom:2px solid {color:Link 1};
  173. }
  174.  
  175. #b {
  176. border-top:2px solid {color:Link 2};
  177. border-bottom:2px solid {color:Link 2};
  178. }
  179.  
  180. #c {
  181. border-top:2px solid {color:Link 3};
  182. border-bottom:2px solid {color:Link 3};
  183. }
  184.  
  185. #d {
  186. border-top:2px solid {color:Link 4};
  187. border-bottom:2px solid {color:Link 4};
  188. }
  189.  
  190. #a:hover, #b:hover, #c:hover, #d:hover {
  191. border-top:2px solid {color:Links Hover};
  192. border-bottom:2px solid {color:Links Hover};
  193. }
  194.  
  195. #desc {
  196. margin-top:20px;
  197. padding:20px;
  198. }
  199.  
  200. /* TITLE */
  201.  
  202. #footer {
  203. position:fixed;
  204. bottom:0px;
  205. width:250px;
  206. padding:20px;
  207. box-sizing:border-box;
  208. }
  209.  
  210. #main {
  211. font-size:17px;
  212. font-family:courier new;
  213. text-transform:uppercase;
  214. }
  215.  
  216. /* POSTS */
  217.  
  218. #container {
  219. margin:20px 0 0 282px;
  220. {block:IndexPage}{block:ifNot3Columns}width:570px;{/block:ifNot3Columns}
  221. {block:if3Columns}width:855px;{/block:if3Columns}/{block:IndexPage}
  222. }
  223.  
  224. #posts {
  225. margin:0 20px 20px 0;
  226. overflow:hidden;
  227. padding:20px;
  228. background-color:{color:Posts};
  229. {block:IndexPage}float:left;
  230. width:225px;{/block:IndexPage}
  231. {block:PermalinkPage}margin-top:20px;width:500px;{/block:PermalinkPage}
  232. }
  233.  
  234. #posts pre {
  235. background:#333;
  236. padding:10px;
  237. color:#888;
  238. white-space:pre-wrap;
  239. }
  240.  
  241. #posts small, #posts big {
  242. font-size:11px;
  243. }
  244.  
  245. /* AUDIO */
  246.  
  247. #art, #alt {
  248. width:180px;
  249. height:180px;
  250. display:block;
  251. }
  252.  
  253. #art {
  254. position:absolute;
  255. }
  256.  
  257. #player {
  258. z-index:1;
  259. position:absolute;
  260. padding:10px;
  261. width:27px;
  262. background:rgba(0,0,0,0.3);
  263. margin:66px;
  264. {block:ifHoverAudio}opacity:0.3;
  265. -webkit-transition:all 1s ease;
  266. -moz-transition:all 1s ease;
  267. -o-transition:all 1s ease;
  268. transition:all 1s ease-in-out;
  269. }
  270.  
  271. #audio:hover #player {
  272. opacity:1;{/block:ifHoverAudio}
  273. }
  274.  
  275. /* AUDIOINFO */
  276.  
  277. #info {
  278. z-index:2;
  279. position:absolute;
  280. margin-left:180px;
  281. }
  282.  
  283. #ainfo {
  284. height:45px;
  285. overflow:hidden;
  286. line-height:45px;
  287. text-align:left;
  288. background:{color:Audio Background};
  289. {block:PermalinkPage}width:320px;{/block:PermalinkPage}
  290. {block:IndexPage}width:45px;
  291. overflow:hidden;
  292. -webkit-transition:all .5s ease;
  293. -moz-transition:all .5s ease;
  294. -o-transition:all .5s ease;
  295. transition:all .5s ease-in-out;
  296. }
  297.  
  298. #ainfo:hover {
  299. margin-left:-180px;
  300. width:225px;{/block:IndexPage}
  301. }
  302.  
  303. #info span {
  304. height:45px;
  305. width:45px;
  306. float:left;
  307. margin-right:5px;
  308. }
  309.  
  310. #info b {
  311. color:{color:Audio Bold};
  312. }
  313.  
  314. #info img {
  315. display:block;
  316. width:32px;
  317. margin:6px;
  318. }
  319.  
  320. /* PERMALINK */
  321.  
  322. #perma {
  323. padding:5px;
  324. text-align:center;
  325. text-transform:uppercase;
  326. font-size:10px;
  327. background:{color:Perma Background};
  328. }
  329.  
  330. #permalink {
  331. text-align:center;
  332. margin-top:20px;
  333. padding:10px 0;
  334. border-top:1px dashed {color:Permalink Borders};
  335. border-bottom:1px dashed {color:Permalink Borders};
  336. }
  337.  
  338. #permalink a {
  339. color:{color:Permalink Links};
  340. }
  341.  
  342. ol.notes {
  343. list-style-type:none;
  344. margin:20px 0 20px -40px;
  345. font-size:10px;
  346. text-transform:uppercase;
  347. }
  348.  
  349. ol.notes img {
  350. float:left;
  351. width:13px;
  352. margin-right:5px;
  353. }
  354.  
  355. .notes li {
  356. padding:5px;
  357. margin-bottom:2px;
  358. text-transform:uppercase;
  359. font-size:10px;
  360. width:530px;
  361. background-color:{color:Posts};
  362. }
  363.  
  364. /* MISC */
  365.  
  366. iframe#tumblr_controls {
  367. position:fixed !important;
  368. margin-top:5px !important;
  369. margin-right:5px !important;
  370. opacity:0.3;
  371. -webkit-transition:all 1s ease;
  372. -moz-transition:all 1s ease;
  373. -o-transition:all 1s ease;
  374. transition:all 1s ease-in-out;
  375. }
  376.  
  377. iframe#tumblr_controls:hover {
  378. opacity:1;
  379. }
  380.  
  381. ::selection {
  382. color:#fff;
  383. background:{color:Selection};
  384. }
  385.  
  386. ::-webkit-scrollbar-thumb:vertical, ::-webkit-scrollbar-thumb:horizontal {
  387. background-color:{color:Scrollbar};
  388. }
  389.  
  390. ::-webkit-scrollbar {
  391. height:5px;
  392. width:5px;
  393. background-color:{color:Scrollbar BG};
  394. }
  395.  
  396. </style>
  397.  
  398. {block:ifInfiniteScroll}
  399. <script type="text/javascript" src="http://codysherman.com/tools/infinite-scrolling/code"></script>
  400. {/block:ifInfiniteScroll}
  401.  
  402. </head><body>
  403.  
  404. <div id="sidebar">
  405.  
  406. <a href="/"><img src="{image:Sidebar}" id="image"></a>
  407.  
  408. {block:ifNotInfiniteScroll}{block:Pagination}<div id="pagination">
  409. {block:PreviousPage}
  410. <a href="{PreviousPage}" style="float:left;">&laquo;</a>
  411. {/block:PreviousPage}
  412. {block:NextPage}
  413. <a href="{NextPage}" style="float:right;">&raquo;</a>
  414. {/block:NextPage}
  415. </div>{/block:Pagination}{/block:ifNotInfiniteScroll}
  416.  
  417. <div id="navigation">
  418. <a class="nav" id="a" href="/">home</a>
  419. <a class="nav" id="b" href="/ask">ask</a>
  420. <a class="nav" id="c" href="/archive">archive</a>
  421. <!-- PLEASE DO NOT REMOVE CREDIT -->
  422. <a class="nav" id="d" href="http://viwan-th.tumblr.com" target="blank" title="music box theme">theme</a>
  423. <!-- PLEASE DO NOT REMOVE CREDIT -->
  424. </div>
  425.  
  426. <div id="desc"><center><p>{Description}</p></center></div>
  427.  
  428. {block:ifLink1}<div id="links">
  429. <a class="nav" id="d" href="{text:Link 1 URL}">{text:Link 1}</a>
  430. <a class="nav" id="c" href="{text:Link 2 URL}">{text:Link 2}</a>
  431. <a class="nav" id="b" href="{text:Link 3 URL}">{text:Link 3}</a>
  432. <a class="nav" id="a" href="{text:Link 4 URL}">{text:Link 4}</a>
  433. </div>{/block:ifLink1}
  434.  
  435. <div id="footer">
  436. <a id="main" href="/">{Title}</a>
  437. </div>
  438.  
  439. </div>
  440.  
  441. <div style="margin-bottom:10px;"><div id="container">
  442.  
  443. <!-- POSTS BLOCK -->
  444.  
  445. {block:ifInfiniteScroll}<div class="autopagerize_page_element">{/block:ifInfiniteScroll}{block:Posts}
  446.  
  447. {block:ContentSource}
  448. <!-- {SourceURL}{block:SourceLogo}<img src="{BlackLogoURL}"
  449. width="{LogoWidth}" height="{LogoHeight}" alt="{SourceTitle}">
  450. {/block:SourceLogo}
  451. {block:NoSourceLogo}{SourceLink}{/block:NoSourceLogo} -->
  452. {/block:ContentSource}
  453.  
  454. {block:Text}{block:PermalinkPage}
  455. <div id="posts">{block:Title}<h1>{Title}</h1>{/block:Title}
  456. {Body}</div>
  457. {/block:PermalinkPage}{/block:Text}
  458.  
  459. <!-- AUDIO -->
  460.  
  461. {block:Audio}
  462.  
  463. <div id="posts">
  464.  
  465. <div id="audio"><div id="info">
  466. <div id="ainfo"><span style="background:{color:Audio 1};"><img src="http://static.tumblr.com/mtdphun/qojmnsb8j/track.png"></span>
  467. {block:TrackName}<b>Track: </b>{TrackName}{/block:TrackName}</div>
  468. <div id="ainfo"><span style="background:{color:Audio 2};"><img src="http://static.tumblr.com/mtdphun/rwcmnsb9t/artist.png"></span>
  469. {block:Artist}<b>Artist: </b>{Artist}{/block:Artist}</div>
  470. <div id="ainfo"><span style="background:{color:Audio 3};"><img src="http://static.tumblr.com/mtdphun/TJCmnsba7/album_.png"></span>
  471. {block:Album}<b>Album: </b>{Album}{/block:Album}</div>
  472. <div id="ainfo"><span style="background:{color:Audio 4};"><img src="http://static.tumblr.com/mtdphun/BnWmnsbak/plays.png"></span>
  473. {block:PlayCount}<b>Plays: </b>{PlayCount}{/block:PlayCount}</div>
  474. </div>
  475.  
  476. <div id="player">
  477. <div style="width:27px;height:27px;overflow:hidden;">{AudioPlayerBlack}</div>
  478. </div>
  479.  
  480. {block:IndexPage}<a href="{Permalink}">{/block:IndexPage}
  481. {block:AlbumArt}<img src="{AlbumArtURL}" id="art">{/block:AlbumArt}
  482. <img src="{image:Album Art}" id="alt">
  483. {block:IndexPage}</a>{/block:IndexPage}</div>
  484.  
  485. {block:IndexPage}<div id="perma">
  486. Posted <a href="{Permalink}">{TimeAgo}</a> with <a href="{Permalink}">{NoteCountWithLabel}</a>
  487. </div>{/block:IndexPage}
  488.  
  489. {block:PermalinkPage}
  490. {block:Caption}{Caption}{/block:Caption}
  491.  
  492. <div id="permalink">
  493. {block:Date}Posted {TimeAgo}{/block:Date}{block:NoteCount} with {NoteCountWithLabel}</br>{/block:NoteCount}
  494. {block:HasTags}Tagged with: {block:Tags}<a href="{TagURL}">#{Tag} </a>{/block:Tags}</br>{/block:HasTags}
  495. {block:RebloggedFrom}Reblogged from: <a href="{ReblogParentURL}">{ReblogParentName}</a>, originally <a href="{ReblogRootURL}">{ReblogRootName}</a>{/block:RebloggedFrom}
  496. </div>
  497.  
  498. {/block:PermalinkPage}
  499.  
  500. </div><!-- posts -->
  501.  
  502. {block:PostNotes}{PostNotes}{/block:PostNotes}
  503.  
  504. {/block:Audio}
  505.  
  506. <!-- END ENTRIES -->
  507.  
  508. {/block:Posts}{block:ifInfiniteScroll}</div>{/block:ifInfiniteScroll}
  509.  
  510. <!-- END POSTS BLOCK -->
  511.  
  512. </div></div><!-- container -->
  513.  
  514. <!-- i honestly don't care if you get rid of this credit i just really wanted to use the umbrella -->
  515. <a style="position:fixed;bottom:5px;right:5px;color:#fff;text-shadow:2px 2px 2px #333;" href="http://viwan-th.tumblr.com" target="blank" title="music box theme">☂</a>
  516. <!-- but if you do get rid of this one then please keep the other one on the sidebar thanks :D -->
  517.  
  518. </body></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!