Advertisement
Belgrravia

A Lack of Color

Aug 9th, 2015
419
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 15.95 KB | None | 0 0
  1. <!--
  2. a lack of color
  3. theme by kalopsiathemes
  4. Please do not
  5. -remove the credit
  6. -steal parts of code
  7. -use as a base
  8.  
  9. Feel free to
  10. -edit parts of the theme
  11. -ask me any questions
  12. -->
  13. <!DOCTYPE html>
  14. <head>
  15. <link href='http://fonts.googleapis.com/css?family=Droid+Sans:400,700|Lato:400,700|Merriweather+Sans:400,700' rel='stylesheet' type='text/css'>
  16. <title>{Title}</title>
  17. <link rel="shortcut icon" href="{Favicon}">
  18. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  19. {block:Description}<meta name="description" content="{MetaDescription}" />{/block:Description}
  20.  
  21.  
  22.  
  23. <meta name="color:Background" content="#bbbaba"/>
  24. <meta name="color:link" content="#090909"/>
  25. <meta name="color:link hover" content="#a8a8a8"/>
  26. <meta name="color:borders" content="#eaeaea"/>
  27. <meta name="color:title" content="#848383"/>
  28. <meta name="color:text" content="#bbbaba"/>
  29. <meta name="image:Background" content=""/>
  30. <meta name="image:sidebar" content=""/>
  31.  
  32. <meta name="if:InfiniteScroll" content="1"/>
  33.  
  34. <meta name="if:500px posts" content="0"/>
  35. <meta name="if:400px posts" content="1"/>
  36. <meta name="if:250px posts" content="0"/>
  37.  
  38.  
  39. <meta name="text:link1" content="">
  40. <meta name="text:link1url" content="" />
  41. <meta name="text:link2" content="">
  42. <meta name="text:link2url" content="" />
  43. <meta name="text:link3" content="">
  44. <meta name="text:link3url" content="" />
  45. <meta name="text:link4" content="">
  46. <meta name="text:link4url" content="" />
  47. <meta name="text:link5" content="">
  48. <meta name="text:link5url" content="" />
  49.  
  50. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
  51. <script src="http://static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js"></script>
  52.  
  53. <script>
  54.  
  55. (function($){
  56.  
  57. $(document).ready(function(){
  58.  
  59. $("a[title]").style_my_tooltips({
  60.  
  61. tip_follows_cursor:true,
  62.  
  63. tip_delay_time:30,
  64.  
  65. tip_fade_speed:300,
  66.  
  67. attribute:"title"
  68.  
  69. });
  70.  
  71. });
  72.  
  73. })(jQuery);
  74.  
  75. </script>
  76.  
  77.  
  78.  
  79. <style type="text/css">
  80.  
  81. #s-m-t-tooltip {max-width:400px;
  82. padding:2px;
  83. margin:10px 0px 0px 10px;
  84. padding:2px 4px;
  85. background-color:{color:text};
  86. text-transform:uppercase;
  87. font-size:7px;
  88. letter-spacing:3px;
  89. color:{color:background};
  90. font-weight:700;
  91. z-index:999999999;
  92. }
  93.  
  94. ::-webkit-scrollbar {height: 0px;
  95. width: 3px;
  96. -webkit-border-radius: 0px;
  97. background-color:{color:background}}
  98. ::-webkit-scrollbar-thumb{background-color:{color:text};
  99. }
  100.  
  101. html, body {margin:0;padding:0;height:100%;}
  102.  
  103. body {
  104. background-color:{color:background};
  105. color:{color:text};
  106. font-size:9px;
  107. margin:0;
  108. font-family: 'Droid Sans', sans-serif;
  109. background-image: url("{image:background}");
  110. background-repeat:repeat;
  111. background-position: bottom;
  112. background-attachment: fixed;
  113. }
  114.  
  115. #posts {
  116. {block:If500pxposts}
  117. width:500px;
  118. {/block:If500pxposts}
  119. {block:If400pxposts}
  120. width:400px;
  121. {/block:If400pxposts}
  122. {block:If250pxposts}
  123. width:250px;
  124. {/block:If250pxposts}
  125. margin-top:100px;
  126. }
  127.  
  128. #posts img {
  129. {block:If500pxposts}
  130. max-width:500px;
  131. {/block:If500pxposts}
  132. {block:If400pxposts}
  133. max-width:400px;
  134. {/block:If400pxposts}
  135. {block:If250pxposts}
  136. max-width:250px;
  137. {/block:If250pxposts}
  138. }
  139.  
  140.  
  141. #posts, #posts img, #posts blockquote {
  142. font-size:11px;
  143. color:{color:text};
  144. }
  145.  
  146.  
  147. .entries {
  148. {block:If500pxposts}
  149. width:500px;
  150. {/block:If500pxposts}
  151. {block:If400pxposts}
  152. width:400px;
  153. {/block:If400pxposts}
  154. {block:If250pxposts}
  155. width:250px;
  156. {/block:If250pxposts}
  157. padding:10px;
  158.  
  159. }
  160.  
  161. small {
  162. font-size:10px;
  163. }
  164.  
  165. big {
  166. font-size:12px;
  167. }
  168.  
  169.  
  170. h2 {
  171. font-size:14px;
  172. color:{color:title};
  173. text-align:center;
  174. text-transform:lowercase;
  175. }
  176.  
  177. h1 {
  178. font-size:10px;
  179. Text-align:center;
  180. letter-spacing:1px;
  181. color:{color:text};
  182. }
  183.  
  184. h3 {
  185. font-size:11px;
  186. color:{color:text};
  187. letter-spacing:1px;
  188.  
  189. }
  190.  
  191.  
  192. #content {
  193. width:100%;
  194. margin:auto;
  195. height:100%;
  196. {block:If500pxposts}
  197. width:500px;
  198. {/block:If500pxposts}
  199. {block:If400pxposts}
  200. width:400px;
  201. {/block:If400pxposts}
  202. {block:If250pxposts}
  203. width:250px;
  204. {/block:If250pxposts}
  205. }
  206.  
  207. #top {
  208. {block:If500pxposts}
  209. width:500px;
  210. {/block:If500pxposts}
  211. {block:If400pxposts}
  212. width:400px;
  213. {/block:If400pxposts}
  214. {block:If250pxposts}
  215. width:250px;
  216. {/block:If250pxposts}
  217. margin-top:40px;
  218. border-bottom:1px solid {color:borders};
  219. }
  220.  
  221.  
  222. #container {
  223. margin:auto;
  224. {block:If500pxposts}
  225. width:500px;
  226. {/block:If500pxposts}
  227. {block:If400pxposts}
  228. width:400px;
  229. {/block:If400pxposts}
  230. {block:If250pxposts}
  231. width:250px;
  232. {/block:If250pxposts}
  233. padding:50px;
  234. border-left:1px solid {color:borders};
  235. border-right:1px solid {color:borders};
  236. }
  237.  
  238.  
  239.  
  240. #nav {
  241. text-transform:lowercase;
  242. word-wrap:break-word;
  243. font-size:9px;
  244. margin-bottom:10px;
  245. text-align:right;
  246. letter-spacing:.2px;
  247. word-spacing:.5px;
  248. line-height:125%;
  249. }
  250.  
  251. .link {
  252. width:100px;
  253. padding-top:4px;
  254. border-bottom:1px solid {color:borders};
  255. }
  256.  
  257. #title {
  258. word-wrap:break-word;
  259. text-align:left;
  260. font-size:13px;
  261. letter-spacing:.2px;
  262. text-transform:lowercase;
  263. color:{color:title};
  264. font-family: 'Merriweather Sans', sans-serif;
  265. font-weight:700;
  266. }
  267.  
  268.  
  269. #description {
  270. font-size:10px;
  271. line-height:140%;
  272. margin-top:5px;
  273. margin-bottom:10px;
  274. font-style:italic;
  275. }
  276.  
  277.  
  278. #postinfo {
  279. {block:If500pxposts}
  280. width:500px;
  281. {/block:If500pxposts}
  282. {block:If400pxposts}
  283. width:400px;
  284. {/block:If400pxposts}
  285. {block:If250pxposts}
  286. width:250px;
  287. {/block:If250pxposts}
  288. font-size:9px;
  289. margin-top:15px;
  290. padding-top:5px;
  291. padding-bottom:5px;
  292. letter-spacing:.5px;
  293. text-align:left;
  294. border-top:1px solid {color:borders};
  295. text-transform:lowercase;
  296. }
  297.  
  298. a:visited, a:link {
  299. text-decoration:none;
  300. color:{color:link};
  301. }
  302.  
  303. a:hover {
  304. cursor: crosshair;
  305. font-style:italic;
  306. color:{color:link hover};
  307. }
  308.  
  309.  
  310. .date {
  311. color:{color:title};
  312. margin-bottom:5px;
  313. }
  314.  
  315. .date a {
  316. color:{color:title};
  317.  
  318. }
  319.  
  320. .source {
  321. display:inline;
  322. float:right;
  323. }
  324.  
  325.  
  326. .pagenotes {
  327. {block:IndexPage}
  328. display: none;
  329. {/block:IndexPage}
  330. {block:If500pxposts}
  331. width:500px;
  332. {/block:If500pxposts}
  333. {block:If400pxposts}
  334. width:400px;
  335. {/block:If400pxposts}
  336. {block:If250pxposts}
  337. width:250px;
  338. {/block:If250pxposts}
  339. padding:10px;
  340. margin-bottom:30px;
  341. margin-top:20px;
  342. letter-spacing:.5px;
  343. text-transform:lowercase;
  344. font-size:10px;
  345. }
  346.  
  347. .pagenotes img {
  348. display:none;
  349. }
  350. .pagenotes li {
  351. {block:If500pxposts}
  352. width:500px;
  353. {/block:If500pxposts}
  354. {block:If400pxposts}
  355. width:400px;
  356. {/block:If400pxposts}
  357. {block:If250pxposts}
  358. width:250px;
  359. {/block:If250pxposts}
  360. list-style-type:none;
  361. padding:5px 0px;
  362. text-align:left;
  363. margin-left:-40px;
  364. }
  365. .tags {
  366. {block:If500pxposts}
  367. width:500px;
  368. {/block:If500pxposts}
  369. {block:If400pxposts}
  370. width:400px;
  371. {/block:If400pxposts}
  372. {block:If250pxposts}
  373. width:250px;
  374. {/block:If250pxposts}
  375. font-size:9px;
  376. padding-top:3px;
  377. color:{color:text};
  378. padding-bottom:3px;
  379. letter-spacing:.5px;
  380. word-wrap:break-word;
  381. text-align:left;
  382. text-transform:lowercase;
  383. }
  384.  
  385. .tags a {
  386. text-transform:lowercase;
  387. text-decoration:none;
  388. }
  389.  
  390. .pagi {
  391. {block:If500pxposts}
  392. width:500px;
  393. {/block:If500pxposts}
  394. {block:If400pxposts}
  395. width:400px;
  396. {/block:If400pxposts}
  397. {block:If250pxposts}
  398. width:250px;
  399. {/block:If250pxposts}
  400. margin:auto;
  401. text-align:right;
  402. word-spacing:5px;
  403. padding-bottom:5px;
  404. margin-top:100px;
  405. letter-spacing:1px;
  406. margin-bottom:40px;
  407. color:{color:link};
  408. font-size:10px;
  409. color:{color:title};
  410. font-weight:700;
  411. border-bottom:1px solid {color:borders};
  412. }
  413.  
  414. .pagi a {
  415. color:{color:title};
  416. }
  417. .player {
  418. width:50px;
  419. height:25px;
  420. overflow:hidden;
  421. position:absolute;
  422. background:white;}
  423.  
  424. .audioinfo {
  425. margin-left:50px;
  426. font-size:12px;
  427. }
  428.  
  429. .q {
  430. text-align:center;
  431. font-weight:bold;
  432. }
  433.  
  434. .as {
  435. font-weight:bold;
  436. text-transform:uppercase;
  437. margin-bottom:10px;
  438. }
  439.  
  440.  
  441. .a {
  442. margin-top:10px;
  443.  
  444. }
  445.  
  446. .chat ol {
  447. padding:0;
  448. list-style:none;
  449. }
  450.  
  451. .label {font-weight:bold;
  452. }
  453.  
  454. .newplayerbutton {
  455. position: relative;
  456. width: 28px;
  457. height: 27px;
  458. overflow: hidden;
  459. }
  460.  
  461. .playerbuttonhug {
  462. position: absolute;
  463. top: -11px;
  464. left: -12px;
  465. }
  466.  
  467.  
  468. .tumblr_audio_player {
  469. border: none;
  470. padding: 0px;
  471. margin: 0px;
  472. height: 50px;
  473. width: 500px;
  474. }
  475.  
  476. .playerbuttonbg {
  477. position: absolute;
  478. z-index:999;
  479. left: 30px;
  480. top: 30px;
  481. width: 28px;
  482. height: 28px;
  483. background-color: #ffffff;
  484. padding: 10px;
  485. -webkit-border-radius: 40px;
  486. -moz-border-radius: 40px;
  487. border-radius: 0px;
  488. opacity: .4;
  489. filter: alpha(opacity=40);
  490. -moz-opacity: 0.4;
  491. -khtml-opacity: 0.4;
  492. transition: opacity .7s ease-in-out;
  493. -moz-transition: opacity .7s ease-in-out;
  494. -webkit-transition: opacity .7s ease-in-out;
  495. }
  496.  
  497. .playerbuttonbg:hover {
  498. opacity: 1;
  499. filter: alpha(opacity=100);
  500. -moz-opacity: 1;
  501. -khtml-opacity: 1;
  502. }
  503.  
  504. .audioimgwrapper {
  505. position: absolute;
  506. padding:10px;
  507. background-color:{color:sidebar background};
  508. left: 0px;
  509. top: 0px;
  510. -webkit-border-radius: 50px;
  511. -moz-border-radius: 50px;
  512. border-radius: 0px;
  513. overflow: hidden;
  514. width: 90px;
  515. height: 88px;
  516. }
  517.  
  518. .audioimgwrapper img {
  519. width: 100%;
  520. height: auto;
  521. -webkit-border-radius: 50px;
  522. -moz-border-radius: 50px;
  523. border-radius: 0px;
  524. }
  525.  
  526. .trackdetails {
  527. width: auto;
  528. display:inline-block;
  529. margin-left: 120px;
  530. line-height:200%;
  531. min-height: 85px;
  532. margin-top:0px;
  533. }
  534.  
  535. .audiowrapper {
  536. position: relative;
  537. display:inline-block;
  538. margin-bottom:20px;
  539. }
  540. #credit {
  541. position:fixed;
  542. color:{color:text};
  543. bottom:2px;
  544. right:1px;
  545. padding:4px;
  546. font-size:12px;
  547. }
  548.  
  549. #credit a {
  550. text-decoration:none;
  551. }
  552.  
  553.  
  554.  
  555. </style>
  556. </head>
  557. <body>
  558.  
  559. <div id="side">
  560. </div>
  561. </div>
  562. <div id="sidebar">
  563. </div>
  564.  
  565. <div id="container">
  566. <div id="top">
  567. <div id="title">{title}</div>
  568. <div id="description">{Description}</div>
  569. <div id="nav">
  570. <a href="{text:Link1 url}">{text:link1}</a>
  571. <a href="{text:Link2 url}">{text:link2}</a>
  572. <a href="{text:Link3 url}">{text:link3}</a>
  573. <a href="{text:Link4 url}">{text:link4}</a>
  574. </div></div>
  575. {block:IfInfiniteScroll}
  576. <script type="text/javascript" src="http://static.tumblr.com/q0etgkr/ytzm5f1ke/infinitescrolling.js"></script>
  577. {/block:IfInfiniteScroll}
  578. <div id="content">
  579. {block:IfInfiniteScroll}
  580. <div class="autopagerize_page_element">
  581. {/block:IfInfiniteScroll}
  582. {block:Posts}<div id="posts">
  583.  
  584. <div class="entries">
  585. {block:Text}{block:Title}<h3>{Title}</h3>{/block:Title}{Body}{/block:Text}
  586.  
  587. {block:Quote}<h2>&#147;{Quote}&#148;</h2><h1>{Source}</h1>{/block:Quote}
  588.  
  589. {block:Link}<a href="{URL}"><h3>{Name}</h3></a>
  590.  
  591. {block:Description}<p>{Description}</p>{/block:Description}{/block:Link}
  592.  
  593. {block:Photo} {block:If500pxposts}<img src="{PhotoURL-500}" />{block:Caption}{Caption}{/block:Caption} {/block:If500pxposts}{block:If400pxposts}<img src="{PhotoURL-400}" />{block:Caption}{Caption}{/block:Caption} {/block:If400pxposts}{block:If250pxposts}<img src="{PhotoURL-250}" />{block:Caption}{Caption}{/block:Caption} {/block:If250pxposts}{/block:Photo}
  594.  
  595. {block:Photoset}
  596. {block:If500pxposts}
  597. <center>{Photoset-500}</center>{block:Caption}{Caption}{/block:Caption}
  598. {/block:If500pxposts}
  599. {block:If400pxposts}
  600. <center>{Photoset-400}</center>{block:Caption}{Caption} {/block:If400pxposts}{/block:Caption}
  601.  
  602. {/block:If400pxposts}
  603. {block:If250pxposts}
  604. <center>{Photoset-250}</center>{block:Caption}{Caption} {/block:If400pxposts}{/block:Caption}
  605.  
  606. {/block:If250pxposts}
  607. {/block:Photoset}
  608.  
  609. {block:Chat}<ul class="chat">{block:Title}<h3>{Title}</h3>{/block:Title}{block:Lines}<li>{block:Label}<span class="label">{Label}</span>{/block:Label}{Line}</li>{/block:Lines}</ul>{/block:Chat}
  610.  
  611. {block:Video} {block:If500pxposts} {Video-500}{block:Caption}{Caption}{/block:Caption}
  612. {/block:If500pxposts}
  613. {block:If400pxposts}
  614. {Video-400}{block:Caption}{Caption}{/block:Caption}
  615. {/block:If400pxposts}
  616. {block:If250pxposts}
  617. {Video-250}{block:Caption}{Caption}{/block:Caption}
  618. {/block:If250pxposts}{/block:Video}
  619.  
  620. {block:Audio}{block:AudioPlayer}
  621. <div class="audiowrapper">
  622. {block:AlbumArt}
  623. <div class="audioimgwrapper"><img src="{AlbumArtURL}"></div>
  624. {/block:AlbumArt}
  625.  
  626. <div class="playerbuttonbg">
  627. <div class="newplayerbutton">
  628. <div class="playerbuttonhug">
  629.  
  630. {AudioPlayerWhite}
  631.  
  632. </div>
  633. </div>
  634. </div>
  635.  
  636. <div class="trackdetails">
  637.  
  638. {block:TrackName}<strong>{TrackName}</strong>{/block:TrackName}<br/>
  639. {block:Artist}<em>{Artist}</em> {/block:Artist}<br/>
  640. {block:Album}{Album}{/block:Album}<br/>
  641. {PlayCountWithLabel}
  642.  
  643. </div>
  644. </div>
  645. {/block:AudioPlayer}{/block:Audio}
  646.  
  647.  
  648. {block:Answer}
  649. <div class="q">
  650. <div class="as">{Asker} inquired: </div>
  651. {Question}</div>
  652. <div class="a">{Answer}</div>
  653. {/block:Answer}
  654.  
  655. {block:Date}<div id="postinfo"><div class="date"><a href="{permalink}">{Month}&nbsp;{DayofMonth}{DayofMonthSuffix}</a> &ndash;&nbsp;<a href="{permalink}">{NoteCount} notes</a></div><div class="source">{block:RebloggedFrom}<a href="{ReblogParentURL}" title="{ReblogParentName}">via </a>{block:ContentSource}<a href="{ReblogRootURL}" title="{ReblogRootName}">//&nbsp;src</a>{/block:ContentSource}{/block:RebloggedFrom}</div>{block:HasTags}filed under: {block:Tags}<a href="{TagUrl}">{Tag},&nbsp;</a>{/block:Tags}{/block:HasTags}</div>{/block:Date}
  656. </div>
  657. {block:PostNotes}
  658. <div class="pagenotes">
  659. {PostNotes}
  660. </div>
  661. {/block:PostNotes}
  662. </div>
  663. {/block:Posts}
  664. </div>
  665.  
  666. {block:IfNotInfiniteScroll}
  667. {block:Pagination}
  668. <div class="pagi">
  669. {block:PreviousPage}
  670. <a href="{PreviousPage}"> back</a>
  671. {/block:PreviousPage}
  672.  
  673.  
  674. {block:NextPage}
  675. &mdash;
  676. <a href="{NextPage}">next </a>
  677. {/block:NextPage}
  678. </div>
  679. {/block:Pagination}
  680. </div>
  681. {/block:IfNotInfiniteScroll}
  682.  
  683. {block:ContentSource}
  684. {SourceURL}{block:SourceLogo}<img src="{BlackLogoURL}"
  685. width="{LogoWidth}" height="{LogoHeight}" alt="{SourceTitle}" />
  686. {/block:SourceLogo}
  687. {block:NoSourceLogo}{SourceLink}{/block:NoSourceLogo}
  688. {/block:ContentSource}
  689. <div id="credit">
  690. <a href="http://kalopsiathemes.tumblr.com" title="kalopsiathemes"</div>&#916;</a></div></div>
  691. {block:IfInfiniteScroll}
  692. </div>
  693. {/block:IfInfiniteScroll}
  694. </body></html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement