superfrown

Theme #16

Mar 31st, 2014
685
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 17.46 KB | None | 0 0
  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. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  4.  
  5. <title>{Title}</title>
  6. <link rel="shortcut icon" href="{Favicon}">
  7. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  8. {block:Description}
  9. <meta name="description" content="{MetaDescription}" />
  10. {/block:Description}
  11.  
  12. <head>
  13. <!----
  14.  
  15. Theme 16: Shadows and Echoes
  16. by: superfrown.tumblr.com
  17.  
  18. You may:
  19. Edit as much as you like
  20. Move the credit to a secondary page
  21.  
  22. You may not:
  23. Claim as your own
  24. Remove the credit
  25.  
  26. ---->
  27.  
  28.  
  29.  
  30.  
  31. <meta name="image:Background" content=""/>
  32. <meta name="image:Sidebar Image" content="" />
  33.  
  34. <meta name="color:Background" content="#ffffff" />
  35. <meta name="color:Text" content="#616161" />
  36. <meta name="color:Bold" content="#4b4b4b" />
  37. <meta name="color:Italic" content="#4b4b4b" />
  38. <meta name="color:Link" content="#adadad" />
  39. <meta name="color:Link hover" content="#dddddd" />
  40. <meta name="color:Borders" content="#606060" />
  41. <meta name="color:Blog Name" content="#e1e1e1" />
  42. <meta name="color:Topbar Background" content="#343434" />
  43. <meta name="color:Topbar Links" content="#f4f4f4" />
  44. <meta name="color:Topbar Links Hover" content="#afafaf" />
  45.  
  46.  
  47. <meta name="if:500px" content="1">
  48. <meta name="if:Infinite Scroll" content="0">
  49. <meta name="if:Show Tags" content="1">
  50. <meta name="if:Show Link1" content="1">
  51. <meta name="if:Show Link2" content="1">
  52. <meta name="if:Show Link3" content="1">
  53. <meta name="if:Show Link4" content="1">
  54. <meta name="if:Show Link5" content="1">
  55. <meta name="if:Show Link6" content="1">
  56.  
  57.  
  58. <meta name="text:Text Size" content="12px" />
  59.  
  60. <meta name="text:Link 1 URL" content="http://" />
  61. <meta name="text:Link 1" content="Link 1" />
  62. <meta name="text:Link 2 URL" content="http://" />
  63. <meta name="text:Link 2" content="Link 2" />
  64. <meta name="text:Link 3 URL" content="http://" />
  65. <meta name="text:Link 3" content="Link 3" />
  66. <meta name="text:Link 4 URL" content="http://" />
  67. <meta name="text:Link 4" content="Link 4" />
  68. <meta name="text:Link 5 URL" content="http://" />
  69. <meta name="text:Link 5" content="Link 5" />
  70. <meta name="text:Link 6 URL" content="http://" />
  71. <meta name="text:Link 6" content="Link 6" />
  72.  
  73.  
  74. <style type="text/css">
  75.  
  76. /* MAIN */
  77.  
  78. body {
  79. background-color:{color:Background};
  80. background-image: url('{image:Background}');
  81. background-attachment: fixed;
  82. background-repeat: repeat;
  83. color:{color:Text};
  84. font-family: calibri;
  85. font-size: {text:Text Size};
  86. margin: 0px;
  87. padding: 0px;}
  88.  
  89. a:link, a:active {
  90. text-decoration:none;
  91. color: {color:Link};
  92. -webkit-transition: all 0.4s ease-in-out;
  93. -moz-transition: all 0.4s ease-in-out;
  94. -o-transition: all 0.4s ease-in-out;
  95. transition: all 0.4s ease-in-out;}
  96.  
  97. a:visited {
  98. text-decoration:none;
  99. color: {color:Link};
  100. -webkit-transition: all 0.4s ease-in-out;
  101. -moz-transition: all 0.4s ease-in-out;
  102. -o-transition: all 0.4s ease-in-out;
  103. transition: all 0.4s ease-in-out;}
  104.  
  105. a:hover {
  106. text-decoration:none;
  107. color: {color:Link hover};
  108. -webkit-transition: all 0.4s ease-in-out;
  109. -moz-transition: all 0.4s ease-in-out;
  110. -o-transition: all 0.4s ease-in-out;
  111. transition: all 0.4s ease-in-out;}
  112.  
  113. b, strong, .strong {color:{color:Bold};}
  114.  
  115. blockquote {
  116. margin-left:18px;
  117. margin-bottom:18px;
  118. border-left:2px solid {color:Text};
  119. padding-left:8px; }
  120.  
  121. #tumblr_controls{ position:fixed!important; right: 0px; top:0px; z-index:9999999;}
  122.  
  123. i, em, .em {color:{color:Italic};}
  124.  
  125. ::-webkit-scrollbar {
  126. height:8px;
  127. width:8px;
  128. background-color: {color:Topbar Links};}
  129.  
  130. ::-webkit-scrollbar-thumb:vertical {
  131. background-color: {color:Topbar Background};}
  132.  
  133. ::-webkit-scrollbar-thumb:horizontal {
  134. background-color: {color:Topbar Background};}
  135.  
  136.  
  137. /* CONTENT */
  138.  
  139. .contentwhole {
  140. {block:if500px}width:500px;{/block:if500px}
  141. {block:ifnot500px}width:400px;{/block:ifnot500px}
  142. margin:0 auto;
  143. padding-top:80px;}
  144.  
  145. .content {
  146. {block:if500px}width:500px;{/block:if500px}
  147. {block:ifnot500px}width:400px;{/block:ifnot500px}
  148. margin-top:40px;
  149. padding-bottom:10px;}
  150.  
  151. .info {
  152. {block:if500px}width:496px;{/block:if500px}
  153. {block:ifnot500px}width:396px;{/block:ifnot500px}
  154. font-size:10px;
  155. text-align:right;
  156. letter-spacing:1px;
  157. padding:2px;
  158. margin-top:0px;
  159. border-bottom:1px solid {color:Borders};}
  160.  
  161.  
  162. .tags {
  163. {block:if500px}width:496px;{/block:if500px}
  164. {block:ifnot500px}width:396px;{/block:ifnot500px}
  165. font-size:10px;
  166. text-align:right;
  167. letter-spacing:1px;
  168. font-style:italic;
  169. padding:2px;
  170. margin-top:2px;
  171. margin-bottom:50px;}
  172.  
  173.  
  174.  
  175. .title {
  176. font-family:helvetica;
  177. font-size: 13px;
  178. font-weight:bold;
  179. letter-spacing:1px;
  180. text-align: center;}
  181.  
  182.  
  183. /* Asks */
  184. .questions {
  185. text-align:center;
  186. padding:8px 8px 12px 8px;
  187. background:transparent;
  188. border-bottom:1px solid {color:Borders};}
  189.  
  190. .reply {
  191. padding: 6px;}
  192.  
  193.  
  194. /* Quote */
  195. #quote {
  196. font-size: 14px;}
  197. #source {
  198. font-size: 12px;
  199. margin-top: 10px;}
  200.  
  201.  
  202. /* Audio */
  203. .playerbuttonbg {
  204. position: absolute;
  205. left: 14px;
  206. top: 14px;
  207. width: 30px;
  208. height: 30px;
  209. background-color: #ffffff;
  210. padding: 10px;
  211. opacity: .4;
  212. filter: alpha(opacity=40);
  213. -moz-opacity: 0.4;
  214. -khtml-opacity: 0.4;
  215. transition: opacity .7s ease-in-out;
  216. -moz-transition: opacity .7s ease-in-out;
  217. -webkit-transition: opacity .7s ease-in-out;
  218. }
  219.  
  220. .playerbuttonbg:hover {
  221. opacity: 1;
  222. filter: alpha(opacity=100);
  223. -moz-opacity: 1;
  224. -khtml-opacity: 1;
  225. }
  226.  
  227. .newplayerbutton {
  228. position: relative;
  229. width: 30px;
  230. height: 30px;
  231. overflow: hidden;
  232. }
  233.  
  234. .playerbuttonhug {
  235. position: absolute;
  236. top: -29px;
  237. left: -9px;
  238. }
  239.  
  240. .tumblr_audio_player {
  241. height: 90px;
  242. width: 270px;
  243. -moz-transform: scale(0.60, 0.60);
  244. -webkit-transform: scale(0.60, 0.60);
  245. -o-transform: scale(0.60, 0.60);
  246. -ms-transform: scale(0.60, 0.60);
  247. transform: scale(0.60, 0.60);
  248. -moz-transform-origin: top left;
  249. -webkit-transform-origin: top left;
  250. -o-transform-origin: top left;
  251. -ms-transform-origin: top left;
  252. transform-origin: top left;
  253. }
  254.  
  255. .audioimgwrapper {
  256. position: absolute;
  257. left: 0px;
  258. top: 0px;
  259. overflow: hidden;
  260. width: 79px;
  261. height: 79px;
  262. }
  263.  
  264. .audioimgwrapper img {
  265. width: 100%;
  266. height: auto;
  267. }
  268.  
  269. .trackdetails {
  270. width: auto;
  271. display:inline-block;
  272. margin-left: 90px;
  273. min-height: 85px;
  274. }
  275.  
  276. .audiowrapper {
  277. position: relative;
  278. display:inline-block;
  279. }
  280.  
  281.  
  282.  
  283. /* BLOGNAME */
  284.  
  285. #blogname {
  286. width:auto;
  287. margin-top:14px;
  288. text-align:center;}
  289.  
  290. #blogname a {
  291. font-size:18px;
  292. font-family:calibri;
  293. letter-spacing:2px;
  294. text-transform:uppercase;
  295. color: {color:Blog Name};
  296. -webkit-transition: all 0.4s ease-in-out;
  297. -moz-transition: all 0.4s ease-in-out;
  298. -o-transition: all 0.4s ease-in-out;
  299. transition: all 0.4s ease-in-out;}
  300.  
  301. #blogname a:hover {
  302. color: {color:Topbar Links Hover};
  303. -webkit-transition: all 0.4s ease-in-out;
  304. -moz-transition: all 0.4s ease-in-out;
  305. -o-transition: all 0.4s ease-in-out;
  306. transition: all 0.4s ease-in-out;}
  307.  
  308.  
  309.  
  310. /* TOPBAR */
  311.  
  312. .topbar {
  313. z-index:999999;
  314. width:100%;
  315. height:60px;
  316. left:0px;
  317. top:0px;
  318. position: fixed;
  319. border-bottom:2px solid {color:Borders};
  320. background-color:{color:Topbar Background};}
  321.  
  322.  
  323. /* SIDEBAR */
  324.  
  325. .sidebar {
  326. z-index:99;
  327. width:170px;
  328. left:70px;
  329. top:80px;
  330. position: fixed;
  331. text-align:center;
  332. background:transparent;}
  333.  
  334. .sidebarimage {
  335. height:auto;}
  336.  
  337. .sidebarimage img {
  338. padding:4px;
  339. width:160px;
  340. height:auto;
  341. border:1px solid {color:Borders};}
  342.  
  343. .description {
  344. margin-top:0px;
  345. text-align:center;
  346. padding:4px;
  347. width: 162px;
  348. font-size:11px;
  349. font-family: calibri;
  350. font-weight:normal;
  351. font-style:normal;
  352. letter-spacing:0px;
  353. color: {color:Text};}
  354.  
  355.  
  356. /* PAGINATION */
  357.  
  358. #pagination {
  359. margin-top:5px;
  360. width:160px;
  361. text-align:center;}
  362.  
  363. #pagination a {
  364. display:inline-block;
  365. width:auto;
  366. padding:2px;
  367. margin-left:4px;
  368. margin-right:4px;
  369. font-size:10px;
  370. font-family:helvetica;
  371. text-transform:lowercase;
  372. color: {color:Link};
  373. -webkit-transition: all 0.4s ease-in-out;
  374. -moz-transition: all 0.4s ease-in-out;
  375. -o-transition: all 0.4s ease-in-out;
  376. transition: all 0.4s ease-in-out;}
  377.  
  378. #pagination a:hover {
  379. color: {color:Link Hover};
  380. -webkit-transition: all 0.4s ease-in-out;
  381. -moz-transition: all 0.4s ease-in-out;
  382. -o-transition: all 0.4s ease-in-out;
  383. transition: all 0.4s ease-in-out;}
  384.  
  385.  
  386. /* NAVIGATION */
  387.  
  388. #navigation {
  389. margin:0 auto;
  390. padding-top:6px;
  391. text-align:center;
  392. width:700px;}
  393.  
  394. #navigation a {
  395. display:inline-block;
  396. width:auto;
  397. padding:2px;
  398. margin-left:12px;
  399. margin-right:12px;
  400. font-size:11px;
  401. letter-spacing:2px;
  402. text-transform:uppercase;
  403. color: {color:Topbar Links};
  404. background:transparent;
  405. -webkit-transition: all 0.4s ease-in-out;
  406. -moz-transition: all 0.4s ease-in-out;
  407. -o-transition: all 0.4s ease-in-out;
  408. transition: all 0.4s ease-in-out;}
  409.  
  410. #navigation a:hover {
  411. color: {color:Topbar Links Hover};
  412. -webkit-transition: all 0.4s ease-in-out;
  413. -moz-transition: all 0.4s ease-in-out;
  414. -o-transition: all 0.4s ease-in-out;
  415. transition: all 0.4s ease-in-out;}
  416.  
  417.  
  418. /* CREDIT */
  419.  
  420. #credit {
  421. bottom:8px;
  422. right:5px;
  423. text-align:center;
  424. position: fixed;}
  425.  
  426. #credit a {
  427. padding:3px;
  428. font-size:11px;
  429. color: {color:Topbar Links};
  430. background-color: {color:Topbar Background};
  431. -webkit-transition: all 0.4s ease-in-out;
  432. -moz-transition: all 0.4s ease-in-out;
  433. -o-transition: all 0.4s ease-in-out;
  434. transition: all 0.4s ease-in-out;}
  435.  
  436. #credit a:hover {
  437. color: {color:Topbar Links Hover};
  438. -webkit-transition: all 0.4s ease-in-out;
  439. -moz-transition: all 0.4s ease-in-out;
  440. -o-transition: all 0.4s ease-in-out;
  441. transition: all 0.4s ease-in-out;}
  442.  
  443.  
  444. </style>
  445.  
  446.  
  447. </head>
  448.  
  449. <body>
  450.  
  451. <div id="credit">
  452. <a href="http://superfrown.tumblr.com"> theme </a>
  453. </div>
  454.  
  455. <div class="topbar">
  456.  
  457. <div id="blogname">
  458. <a href="/">{title}</a>
  459. </div>
  460.  
  461. <div id="navigation">
  462. <a href="/"> Index </a>
  463. <a href="/ask"> Message </a>
  464. {block:IfShowLink1}<a href="{text:Link 1 url}">{text:Link 1} </a>{/block:IfShowLink1}
  465. {block:IfShowLink2}<a href="{text:Link 2 url}">{text:Link 2} </a>{/block:IfShowLink2}
  466. {block:IfShowLink3}<a href="{text:Link 3 url}">{text:Link 3} </a>{/block:IfShowLink3}
  467. {block:IfShowLink4}<a href="{text:Link 4 url}">{text:Link 4} </a>{/block:IfShowLink4}
  468. {block:IfShowLink5}<a href="{text:Link 5 url}">{text:Link 5} </a>{/block:IfShowLink5}
  469. {block:IfShowLink6}<a href="{text:Link 6 url}">{text:Link 6} </a>{/block:IfShowLink6}
  470. </div>
  471.  
  472. </div>
  473.  
  474.  
  475. <div class="sidebar">
  476. <div class="sidebarimage"><img src="{image:Sidebar Image}"></div>
  477. <div class="description">
  478. {description}
  479. </div>
  480.  
  481. {block:IfnotInfiniteScroll}
  482. <div id="pagination">
  483. {block:PreviousPage}<a href="{PreviousPage}"> ← back </a>{/block:PreviousPage}
  484. {block:NextPage}<a href="{NextPage}"> next → </a>{/block:NextPage}
  485. </div>
  486. {/block:IfnotInfiniteScroll}
  487. </div>
  488.  
  489.  
  490. {block:IfInfiniteScroll}<script type="text/javascript" src="http://codysherman.tumblr.com/tools/infinite-scrolling/code"></script>{/block:IfInfiniteScroll}
  491.  
  492.  
  493. <div class="contentwhole">
  494.  
  495. <div class = "autopagerize_page_element" >
  496.  
  497. {block:Posts}
  498.  
  499. <div class="content">
  500.  
  501. <div class="title">
  502. {block:Title}
  503. {Title}
  504. {/block:Title}
  505. </div>
  506. {block:Text}
  507. {Body}
  508. {/block:Text}
  509.  
  510. {block:Photo}
  511. {LinkOpenTag}{block:if500px}<img src="{PhotoURL-500}">{/block:if500px}
  512. {block:ifnot500px}<img src="{PhotoURL-400}">{/block:ifnot500px}{LinkCloseTag}
  513. {block:Caption}{Caption}{/block:Caption}
  514. {/block:Photo}
  515.  
  516. {block:Photoset}
  517. {block:if500px}{Photoset-500}{/block:if500px}
  518. {block:ifnot500px}{Photoset-400}{/block:ifnot500px}
  519. {block:Caption}{Caption}{/block:Caption}
  520. {/block:Photoset}
  521.  
  522. {block:Quote}
  523. <div id="quote">
  524.  
  525. <center>
  526. "{Quote}"
  527. </center>
  528.  
  529. </div>
  530. {block:Source}
  531. <div id="source">
  532. <center>
  533. - {Source}
  534. </center>
  535. </div>{/block:Source}
  536. {/block:Quote}
  537.  
  538. {block:Link}
  539. <a href="{URL}" target="{Target}" class="title"> {Name} → </a>
  540. {block:Description}{Description}{/block:Description}
  541. {/block:Link}
  542.  
  543. {block:Chat}
  544. {block:Lines}{block:Label}<b>{Label}</b>{/block:Label} {Line}<br>
  545.  
  546. {/block:Lines}
  547. {/block:Chat}
  548.  
  549.  
  550. {block:Audio}
  551. {block:AudioPlayer}
  552. <div class="audiowrapper">
  553. {block:AlbumArt}
  554. <div class="audioimgwrapper"><img src="{AlbumArtURL}"></div>
  555. {/block:AlbumArt}
  556.  
  557. <div class="playerbuttonbg">
  558. <div class="newplayerbutton">
  559. <div class="playerbuttonhug">
  560.  
  561. {AudioPlayerWhite}
  562.  
  563. </div>
  564. </div>
  565. </div>
  566.  
  567. <div class="trackdetails">
  568.  
  569. {block:TrackName}{TrackName}{/block:TrackName}<br/>
  570. {block:Artist} <b>Artist:</b> {Artist}{/block:Artist}<br/>
  571. {block:Album} <b>Album:</b> {Album}{/block:Album}<br/>
  572. <b>Played:</b> {PlayCount} times
  573.  
  574. </div>
  575. </div>
  576. {/block:AudioPlayer}
  577.  
  578. {block:Caption}{Caption}{/block:Caption}
  579. {/block:Audio}
  580.  
  581. {block:Video}
  582. {block:if500px}{Video-500}{/block:if500px}
  583. {block:ifnot500px}{Video-400}{/block:ifnot500px}
  584. {block:Caption}{Caption}{/block:Caption}
  585. {/block:Video}
  586.  
  587. {block:Answer}
  588. <div class="questions"><i><b>{Asker}</b> said:</i><br></span> {Question}
  589. </div>
  590. <div class="reply">{Answer}</div>
  591. {/block:Answer}
  592.  
  593.  
  594.  
  595.  
  596. </div>
  597.  
  598. <div class="info">
  599. {block:Date}<a href="{Permalink}">{TimeAgo}</a>{/block:Date}
  600. {block:NoteCount}&nbsp;/&nbsp;<a href="{Permalink}"> {NoteCount} notes</a>{/block:NoteCount}
  601. {block:RebloggedFrom}&nbsp;/&nbsp;<a href="{ReblogParentURL}"> via </a>{/block:RebloggedFrom}
  602. {block:ContentSource}&nbsp;/&nbsp;<a href="{SourceURL}"> source </a>{/block:ContentSource}
  603. </div>
  604.  
  605. <div class="tags">
  606. {block:IfShowTags}{block:HasTags}{block:Tags} #<a href="{TagURL}">{Tag} </a>{/block:Tags}{/block:HasTags}{/block:IfShowTags}
  607. </div>
  608.  
  609. {block:PostNotes}{PostNotes}{/block:PostNotes}
  610.  
  611. {/block:Posts}
  612.  
  613. </div>
  614.  
  615. </div>
  616.  
  617. </body>
  618. </html>
Advertisement
Add Comment
Please, Sign In to add comment