API tools faq
paste
Guest User

Theme 01: Quiet {screech-themes}

a guest
May 1st, 2015
4,170
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 14.86 KB | None | 0 0
raw download clone embed print report
  1. <!-- This is my first theme! If there are any bugs, let me know!!
  2.  
  3. Base code from http://deanandhispie.tumblr.com -->
  4.  
  5. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  6.  
  7. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  8. <head>
  9. <title>{Title}</title>
  10. <link rel="shortcut icon" href="{image:Favicon}">
  11.  
  12.  
  13. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  14. {block:Description}<meta name="description" content="{MetaDescription}" />{/block:Description}
  15.  
  16. <meta name="color:background" content="#a997c1">
  17. <meta name="color:border" content="#5e4c76">
  18. <meta name="color:info bg" content="#dfd3f0">
  19. <meta name="color:links hover" content="#f3eaff">
  20. <meta name="color:links" content="#528939">
  21. <meta name="color:title" content="#5e4c76">
  22. <meta name="color:scrollbar" content="#8d7ba2">
  23. <meta name="color:scrollbar bg" content="#dcd5e5">
  24. <meta name="color:tags" content="#5e4c76">
  25. <meta name="color:text" content="#5e4c76">
  26. <meta name="color:blockquote" content="#1890bb">
  27. <meta name="color:boxes" content="#ccbcdf">
  28.  
  29. <meta name="image:sidebar" content=""/>
  30. <meta name="image:background" content=""/>
  31. <meta name="image:favicon" content=""/>
  32. <meta name="image:extra" content=""/>
  33. <meta name="image:extra box bottom" content=""/>
  34.  
  35. <meta name="if:background cover" content="0"/>
  36. <meta name="if:post borders" content="1"/>
  37. <meta name="if:post background" content="1"/>
  38. <meta name="if:desc bg" content="1"/>
  39. <meta name="if:extra" content="1"/>
  40. <meta name="if:extra image top" content="0"/>
  41.  
  42. <meta name="text:extra box contents" content=""/>
  43. <meta name="text:extra box horizontal" content="80"/>
  44. <meta name="text:extra box vertical" content="200"/>
  45. <meta name="text:image border width" content="1"/>
  46. <meta name="text:border width" content="1"/>
  47. <meta name="text:image position h" content="20"/>
  48. <meta name="text:image position v" content="20"/>
  49.  
  50. <meta name="text:linkA" content="">
  51. <meta name="text:linkA url" content="/">
  52. <meta name="text:linkB" content="">
  53. <meta name="text:linkB url" content="/">
  54.  
  55. <style type="text/css">
  56.  
  57. ::-webkit-scrollbar {background-color:{color:scrollbar bg}; height:8px; width:5px}
  58. ::-webkit-scrollbar-thumb:vertical {background-color:{color:scrollbar}; height:50px}
  59. ::-webkit-scrollbar-thumb:horizontal {background-color:{color:scrollbar}; height:10px!important}
  60.  
  61.  
  62. body {
  63. background:{color:background};
  64. background-image: url('{image:background}');
  65. background-attachment: fixed; {block:ifbackgroundcover}-webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;
  66.  
  67. {/block:ifbackgroundcover}
  68. color:{color:text};
  69. font-family:Verdana;
  70. font-size:10px;
  71. }
  72.  
  73. a {
  74. color:{color:links};
  75. text-decoration:none
  76. }
  77.  
  78. a:hover {
  79. color:{color:links hover};
  80. }
  81.  
  82.  
  83. #boop {
  84. background-color:transparent;
  85. border-color:transparent;
  86. width:auto;
  87. height:auto;
  88. left:{text:image position h}px;
  89. {block:ifextraimagetop}top:{text:image position v}px;
  90. {/block:ifextraimagetop}
  91. bottom: {text:image position v}px;
  92. position:fixed;
  93. }
  94.  
  95. #boop img {
  96. border:none;
  97. }
  98.  
  99.  
  100.  
  101. img {
  102. border: {text:image border width}px solid;
  103. }
  104.  
  105.  
  106. h1 {
  107. font-weight:normal;
  108. font-size:10px;
  109. text-align:center;
  110. font-style:normal;
  111. line-height:80%;
  112. letter-spacing:1px;
  113. text-transform:uppercase;
  114. color:{color:text};
  115. }
  116.  
  117.  
  118. blockquote {
  119. border-left:3px solid {color:blockquote};
  120. padding-left:5px;
  121. margin:5px;
  122. }
  123.  
  124. #theme {
  125. background-color:{color:bg};
  126. width:700px;
  127. margin: 0 auto -12px auto;
  128. text-align: center;
  129. }
  130.  
  131.  
  132. h2 {
  133. font-size:15px;
  134. text-align:center;
  135. line-height:100%;
  136. letter-spacing:-0.5px;
  137. color:{color:text};
  138. font-weight:normal;
  139. padding:5px;
  140. padding-bottom:2px;
  141. }
  142.  
  143.  
  144.  
  145.  
  146.  
  147.  
  148.  
  149.  
  150.  
  151.  
  152. #sidebar {
  153. color:{color:text};
  154. position:fixed;
  155. width:150px;
  156. height:auto;
  157. margin-top:200px;
  158. margin-left:-180px;
  159. text-align:center;
  160. }
  161.  
  162.  
  163.  
  164. #extra {{block:ifextra}
  165. color:{color:text};
  166. background-image: url('{image:extra box bottom}');
  167.  
  168. background-color: {color:boxes};
  169. background-repeat: no-repeat;
  170. background-position: bottom right;
  171. padding-left:5px; padding-right:5px; padding-top:10px; padding-bottom:5px;
  172. {block:ifpostborders}border: {text:border width}px solid;
  173. border-color:{color:border};{/block:ifpostborders}
  174. position:fixed;
  175. width:150px;
  176. height:auto;
  177. min-height: 100px;
  178. right: {text:extra box horizontal}px;
  179. bottom: {text:extra box vertical}px;
  180. text-align:center;{/block:ifextra}
  181. }
  182.  
  183.  
  184.  
  185. #sidebar img {
  186. background-color:{color:boxes};
  187. width:150px;
  188. height:150px;
  189. margin-left:130px;
  190. margin-top:-180px;
  191. padding:3px;
  192. border: {text:border width}px solid {color:border};
  193. position:fixed;
  194. }
  195.  
  196. #linkbuttons a {
  197. background-color:{color:boxes};
  198. height:auto;
  199. width:auto;
  200. border:{text:border width}px solid;
  201. border-color:{color:border};
  202. padding:3px;
  203. text-align:center;
  204. }
  205.  
  206.  
  207.  
  208. .links {
  209. position:fixed;
  210. margin-top:0px;
  211. margin-left:0px;
  212. width:175px;
  213. padding: 8px;
  214. word-spacing:0px;
  215. text-align:center;
  216. text-transform:uppercase;
  217. color:{color:links};
  218. }
  219.  
  220. .links a {
  221. font-size: 10px;
  222. color:{color:links};
  223. }
  224.  
  225. .links a:hover {
  226. color:{color:links hover};
  227. letter-spacing:1px;
  228. }
  229.  
  230. .description {
  231. margin-top:180px;
  232. margin-left:25px;
  233. padding:3px;
  234. text-align:center;
  235. font-size:9px;
  236. width:150px;
  237. color:{color:text};
  238. letter-spacing:0px;
  239. line-height:120%;
  240. {block:ifdescbg}background-color:{color:boxes};{block:ifpostborders}border:{text:border width}px solid;{/block:ifpostborders}{/block:ifdescbg}
  241. }
  242.  
  243. .description a {
  244. color:{color:text};
  245. }
  246.  
  247. .pagination {
  248. width:180px;
  249. height:20px;
  250. text-transform:lowercase;
  251. letter-spacing:0px;
  252. text-align:right;
  253. margin-left:30px;
  254. margin-top:0px;
  255. font-family:verdana;
  256. font-size:10px;
  257. padding-top:5px;
  258. padding-bottom:3px;
  259. opacity:1;
  260. position:fixed;
  261. -moz-transition-duration:0.7s;
  262. -webkit-transition-duration:0.7s;
  263. -o-transition-duration:0.7s;
  264. }
  265.  
  266. .pagination a {
  267. color:{color:text};
  268. }
  269.  
  270. .pagination a:hover{
  271. color:{color:link};
  272. }
  273.  
  274.  
  275.  
  276. #entries {
  277. float:left;
  278. margin-left:150px;
  279. margin-top:40px;
  280. text-align:justify;
  281. background-color:{color:bg};
  282. color:{color:text};
  283. margin-bottom: 30px;
  284. }
  285.  
  286.  
  287.  
  288.  
  289. #posts {
  290. width:500px;
  291. {block:ifpostborders}border:{text:border width}px solid;
  292. border-color: {color:border};{/block:ifpostborders}
  293. {block:ifpostbackground}background-color:{color:boxes};{/block:ifpostbackground}
  294. margin-top:75px;
  295. text-align:justify;
  296. font-size:10px;
  297. line-height:100%;
  298. letter-spacing:0x;
  299. color:{color:text};
  300. padding:10px;
  301. }
  302.  
  303. .caption {
  304. width:500px;
  305. text-align:justify;
  306. line-height:120%;
  307. }
  308.  
  309.  
  310.  
  311.  
  312. #ask {
  313. background-color:{color:infobg};
  314. text-align:justify;
  315. line-height:160%;
  316. color:{color:text};
  317. padding:5px;
  318. padding-bottom:10px;
  319. padding-top:3px;
  320. }
  321.  
  322.  
  323. #asker img {
  324. margin-left:-2px;
  325. margin-bottom:-15px;
  326. padding:3px;
  327. padding-bottom:5px;
  328. }
  329.  
  330. #ans {
  331. text-align:right;
  332. padding:2px;
  333. color:{color:text};
  334. }
  335.  
  336.  
  337.  
  338.  
  339.  
  340. .playerbuttonbg {
  341. position: absolute;
  342. left: 20px;
  343. top: 20px;
  344. width: 19px;
  345. height: 19px;
  346. background-color: {color:boxes};
  347. padding: 10px;
  348. -webkit-border-radius: 40px;
  349. -moz-border-radius: 40px;
  350. border-radius: 40px;
  351. opacity: .4;
  352. filter: alpha(opacity=40);
  353. opacity: 0.4;
  354. -khtml-opacity: 0.4;
  355. transition: opacity .7s ease-in-out;
  356. -moz-transition: opacity .7s ease-in-out;
  357. -webkit-transition: opacity .7s ease-in-out;
  358. }
  359.  
  360. .playerbuttonbg:hover {
  361. opacity: 1;
  362. filter: alpha(opacity=100);
  363. -moz-opacity: 1;
  364. -khtml-opacity: 1;
  365. }
  366.  
  367. .newplayerbutton {
  368. position: relative;
  369. width: 19px;
  370. height: 19px;
  371. overflow: hidden;
  372. }
  373.  
  374. .playerbuttonhug {
  375. position: absolute;
  376. top: -18px;
  377. left: -7px;
  378. }
  379.  
  380. .tumblr_audio_player {
  381. height: 90px;
  382. width: 270px;
  383. -moz-transform: scale(0.60, 0.60);
  384. -webkit-transform: scale(0.60, 0.60);
  385. -o-transform: scale(0.60, 0.60);
  386. -ms-transform: scale(0.60, 0.60);
  387. transform: scale(0.60, 0.60);
  388. -moz-transform-origin: top left;
  389. -webkit-transform-origin: top left;
  390. -o-transform-origin: top left;
  391. -ms-transform-origin: top left;
  392. transform-origin: top left;
  393. }
  394.  
  395. .audioimgwrapper {
  396. position: absolute;
  397. left: 0px;
  398. top: 0px;
  399. -webkit-border-radius: 40px;
  400. -moz-border-radius: 40px;
  401. border-radius: 40px;
  402. overflow: hidden;
  403. width: 79px;
  404. height: 79px;
  405. }
  406.  
  407. .audioimgwrapper img {
  408. width: 100%;
  409. height: auto;
  410. -webkit-border-radius: 40px;
  411. -moz-border-radius: 40px;
  412. border-radius: 40px;
  413. }
  414.  
  415. .trackdetails {
  416. width: auto;
  417. display:inline-block;
  418. margin-left: 90px;
  419. min-height: 85px;
  420. }
  421.  
  422. .audiowrapper {
  423. position: relative;
  424. display:inline-block;
  425. }
  426.  
  427.  
  428. #postinfo {
  429. padding:2px;
  430. margin-top:12px;
  431. font-size:10px;
  432. color:{color:link};
  433. text-transform:lowercase;
  434. text-align:right;
  435. border-top:1px solid {color:border};
  436. -moz-transition-duration:0.5s;
  437. -webkit-transition-duration:0.5s;
  438. -o-transition-duration:0.5s;
  439. }
  440.  
  441. #postinfo a {
  442. color:{color:link};
  443. font-style:italic;
  444. letter-spacing:1px;
  445. }
  446.  
  447. #postinfo a:hover {
  448. color:{color:hover};
  449. }
  450.  
  451.  
  452. .tags {
  453. font-style:normal;
  454. width:500px;
  455. text-transform:uppercase;
  456. font-style:normal;
  457. color:{color:tags};
  458. line-height:120%;
  459. font-size:8px;
  460. text-align:left;
  461. padding:2px;
  462. -moz-transition-duration:0.5s;
  463. -webkit-transition-duration:0.5s;
  464. -o-transition-duration:0.5s;
  465. }
  466.  
  467. .tags a {
  468. color:{color:tags};
  469. letter-spacing:0px;
  470. padding:1px;
  471. }
  472.  
  473. .tags a:hover {
  474. color:{color:link};
  475. }
  476.  
  477. /* --- EDIT CHAT STUFF HERE ---*/
  478.  
  479. ul.chat, .chat ol, .chat li {
  480. list-style:none;
  481. margin:0px;
  482. padding:3px;
  483. }
  484.  
  485. .label {
  486. text-decoration:underline;
  487. font-weight:700;
  488. margin-right:5px;
  489. }
  490.  
  491.  
  492. #credit{
  493. font-size: 10px;
  494. font-style:none;
  495. letter-spacing: 0px;
  496. float: center;
  497. position: fixed;
  498. bottom: 10px;
  499. right: 30px;
  500. text-transform:none;
  501. font-family:verdana;
  502. border:{text:border width}px solid;
  503. border-color:{color:border};
  504. padding:2px;
  505. background:{color:boxes}
  506. }
  507.  
  508. #credit img {
  509. border:none;
  510. }
  511.  
  512.  
  513.  
  514.  
  515.  
  516.  
  517. {CustomCSS}
  518.  
  519. </style></head>
  520.  
  521. <body>
  522. <div id="theme">
  523. <div id="boop"><img src="{image:extra}"></div>
  524. <div id="sidebar">
  525. <div id="sidebar">
  526. <img src="{image:sidebar}"></div>
  527. <div id="extra">{text:extra box contents}</div>
  528.  
  529. <div id="linkbuttons">
  530. <div class="links">
  531. <a href="/">home</a>
  532. <a href="/ask">ask</a>
  533. {block:IfLinkA}
  534. <a href="{text:linkA url}">{text:linkA}</a>
  535. {/block:IfLinkA}
  536. {block:IfLinkB}
  537. <a href="{text:linkB url}">{text:linkB}</a>
  538. {/block:IfLinkB}
  539. </div></div>
  540. <div class="description">
  541. {Description}
  542. </div>
  543. {block:Pagination}
  544. <div class="pagination">
  545. {block:PreviousPage}
  546. <a href="{PreviousPage}">prev</a>
  547. {/block:PreviousPage}
  548. {block:NextPage} -
  549. <a href="{NextPage}">next</a>
  550. {/block:NextPage}
  551. </div>
  552. {/block:Pagination}
  553. </div>
  554.  
  555. <div id="entries">
  556.  
  557. {block:Posts}
  558.  
  559. <div id="posts">
  560.  
  561. {block:Text}{block:Title}<h2>{Title}</h2>{/block:Title}{Body}{/block:Text}
  562.  
  563. {block:Quote}<h2>“{Quote}”</h2><h1>{Source}</h1>{/block:Quote}
  564.  
  565. {block:Link}<a href="{URL}"><h2>{Name}</h2></a>
  566. {block:Description}<p>{Description}</p>{/block:Description}{/block:Link}
  567.  
  568. {block:Photo}<center><img src="{PhotoURL-500}"/></center>{block:Caption}{Caption}{/block:Caption}{/block:Photo}
  569.  
  570. {block:Photoset}<center>{Photoset-500}</center>
  571. {block:Caption}{Caption}{/block:Caption}{/block:Photoset}
  572.  
  573. {block:Chat}<ul class="chat">{block:Title}<h2>{Title}</h2>{/block:Title}{block:Lines}<li>{block:Label}<span class="label">{Label}</span>{/block:Label}&nbsp;{Line}</li>
  574.  
  575. {/block:Lines}</ul>{/block:Chat}
  576.  
  577. {block:Video}{Video-500}{block:Caption}{Caption}{/block:Caption}{/block:Video}
  578.  
  579. {block:Answer}<div id="ask"><div id="asker"><img src="{AskerPortraitURL-24}"> {Asker}asked: {Question}</div></div><div id="ans">{Answer}</div>{/block:answer}
  580.  
  581. {block:Audio}{block:AudioPlayer}
  582. <div class="audiowrapper">
  583. {block:AlbumArt}
  584. <div class="audioimgwrapper"><img src="{AlbumArtURL}"></div>
  585. {/block:AlbumArt}
  586.  
  587. <div class="playerbuttonbg">
  588. <div class="newplayerbutton">
  589. <div class="playerbuttonhug">
  590.  
  591. {AudioPlayerWhite}
  592.  
  593. </div>
  594. </div>
  595. </div>
  596.  
  597. <div class="trackdetails">
  598.  
  599. {block:TrackName}{TrackName}{/block:TrackName}<br/>
  600. {block:Artist}Artist: {Artist}{/block:Artist}<br/>
  601. {block:Album}Album: {Album}{/block:Album}<br/>
  602. {PlayCountWithLabel}
  603.  
  604. </div>
  605. </div>
  606. {/block:AudioPlayer}
  607.  
  608. {block:Caption}{Caption}{/block:Caption}{/block:Audio}
  609.  
  610.  
  611. {block:Date}<div id="postinfo"><a href="{Permalink}">{TimeAgo}</a>{block:NoteCount} with <a href="{Permalink}">{NoteCountWithLabel}</a>{/block:NoteCount}
  612.  
  613. {block:RebloggedFrom} via <a href="{ReblogParentURL}">{ReblogParentName}</a>{/block:RebloggedFrom}
  614. {block:ContentSource} from <a href="{SourceURL}">{SourceTitle}</a>{/block:ContentSource}</div>{/block:Date}
  615. {block:HasTags}
  616. <div class="tags">
  617. {block:Tags}<a href="{TagURL}">#&nbsp;{Tag}</a>{/block:Tags}</div>
  618. {/block:HasTags}
  619. <div class="note">
  620. {block:PostNotes}{PostNotes}{/block:PostNotes}
  621. </div>
  622. </div>
  623. {/block:Posts}
  624.  
  625.  
  626. </div>
  627.  
  628. <div id="credit"><a href="http://screech-themes.tumblr.com"><img src="http://static.tumblr.com/ktlzjhb/kVznnnmus/mini1.gif"></a></div>
  629.  
  630. </div>
  631. </div>
  632. </div>
  633. </body>
  634. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Public Pastes
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!