Advertisement
getnakedmiley

Misery Business theme

May 5th, 2013
4,595
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 11.46 KB | None | 0 0
  1. <!DOCTYPE html>
  2. <html>
  3.  
  4. <head>
  5.  
  6. <!-- Misery Business theme by STATEOFGRACES -->
  7.  
  8. <meta name="color:bg" content="#FFFFFF">
  9. <meta name="color:postbg" content="#F7F7F7">
  10. <meta name="color:link" content="#E6E4E4">
  11. <meta name="color:hover" content="#454545">
  12. <meta name="color:text" content="#9A9A9A">
  13. <meta name="color:tags" content="#EDEDED">
  14. <meta name="color:scrollbar" content="#D6D5D5">
  15. <meta name="color:border" content="#F0F0F0">
  16. <meta name="color:accent1" content="#FCFCFC">
  17. <meta name="color:accent2" content="##5B6B9A">
  18.  
  19. <meta name="image:himage" content="">
  20.  
  21. <meta name="text:linkA" content="">
  22. <meta name="text:linkA url" content="/">
  23. <meta name="text:linkB" content="">
  24. <meta name="text:linkB url" content="/">
  25. <meta name="text:linkC" content="">
  26. <meta name="text:linkC url" content="/">
  27. <meta name="text:linkD" content="">
  28. <meta name="text:linkD url" content="/">
  29.  
  30.  
  31. <title>{Title}</title>
  32. {block:Description}
  33. <meta name="description" content="{MetaDescription}"/>
  34. {/block:Description}
  35. <link rel="shortcut icon" href="{Favicon}" />
  36. <link rel="alternate" type="application/rss+xml" href="{RSS}" />
  37.  
  38.  
  39. <link href='http://fonts.googleapis.com/css?family=Noto+Sans' rel='stylesheet' type='text/css'>
  40.  
  41. <link href='http://fonts.googleapis.com/css?family=Cutive+Mono' rel='stylesheet' type='text/css'>
  42.  
  43. <script type="text/javascript" src="http://static.tumblr.com/qlfmldj/1H6mmbwdm/jquery-1.7.1.min.js"></script>
  44.  
  45.  
  46. <script type="text/javascript">
  47.  
  48. $(function(){ // document ready
  49.  
  50. var stickyTop = $('.links').offset().top; // returns number
  51.  
  52. $(window).scroll(function(){ // scroll event
  53.  
  54. var windowTop = $(window).scrollTop(); // returns number
  55.  
  56. if (stickyTop < windowTop) {
  57. $('.links').css({ position: 'fixed', top: 0 });
  58. }
  59. else {
  60. $('.links').css('position','static');
  61. }
  62.  
  63. });
  64.  
  65. });
  66.  
  67. </script>
  68.  
  69.  
  70. </head>
  71.  
  72. <style type="text/css">
  73.  
  74.  
  75. a {
  76. color:{color:link};
  77. text-decoration:none;
  78. -moz-transition-duration:0.4s;
  79. -webkit-transition-duration:0.4s;
  80. -o-transition-duration:0.4s;
  81. }
  82.  
  83. a:hover {
  84. color:{color:hover};
  85. text-decoration:none;
  86. -moz-transition-duration:0.4s;
  87. -webkit-transition-duration:0.4s;
  88. -o-transition-duration:0.4s;
  89. }
  90.  
  91.  
  92. ::-webkit-scrollbar {background-color:{color:accent1}; height:8px; width:8px}
  93. ::-webkit-scrollbar-thumb:vertical {background-color:{color:scrollbar}; height:50px}
  94. ::-webkit-scrollbar-thumb:horizontal {background-color:{color:scrollbar}; height:8px!important}
  95. ::selection {background-color: {color:accent1};
  96. }
  97.  
  98.  
  99. body {
  100. font-family: 'Noto Sans', sans-serif;
  101. font-weight:normal;
  102. }
  103.  
  104. h1 {
  105. font-weight:normal;
  106. text-align:left;
  107. line-height:120%;
  108. letter-spacing:0px;
  109. font-size:12px;
  110. color:{color:text};
  111. }
  112.  
  113. h2 {
  114. font-weight:normal;
  115. text-align:left;
  116. line-height:120%;
  117. letter-spacing:0px;
  118. font-size:14px;
  119. color:{color:accent2};
  120. font-family: 'Cutive Mono', serif;
  121. }
  122.  
  123. h3 {
  124. font-weight:normal;
  125. text-align:left;
  126. line-height:80%;
  127. letter-spacing:-1px;
  128. font-size:12px;
  129. color:{color:accent2};
  130. font-family: 'Cutive Mono', serif;
  131. }
  132.  
  133. blockquote {
  134. border-left:2px solid {color:text};
  135. padding-left:5px;
  136. margin:5px;
  137. }
  138.  
  139. #theme {
  140. text-align: center;
  141. width:500px;
  142. margin: -10px auto -12px auto;
  143. background-color:{color:bg};
  144. }
  145.  
  146. #header {
  147. width:500px;
  148. height:175px;
  149. position: relative;
  150. }
  151.  
  152. .pagi {
  153. letter-spacing:3px;
  154. width:500px;
  155. text-transform:uppercase;
  156. font-style:normal;
  157. text-align:center;
  158. margin-bottom:50px;
  159. }
  160.  
  161. .pagi a {
  162. color:{color:accent2};
  163. text-align:center;
  164. padding:4px;
  165. margin:5px;
  166. background-color:{color:accent1};
  167. font-size:11px;
  168. font-family: 'Cutive Mono', serif;
  169. letter-spacing:-1px;
  170. }
  171.  
  172. .pagi a:hover {
  173. color:{color:bg};
  174. background-color:{color:accent2};
  175. }
  176.  
  177. #desc {
  178. width:460px;
  179. padding:20px;
  180. padding-bottom:10px;
  181. text-align:center;
  182. font-size:9px;
  183. letter-spacing:1px;
  184. line-height:90%;
  185. color:{color:text};
  186. word-wrap:break-word;
  187. background-color:{color:accent1};
  188. }
  189.  
  190. .links {
  191. width:480px;
  192. padding:10px;
  193. padding-top:0px;
  194. background-color:{color:accent1};
  195. border-bottom:2px solid {color:bg};
  196. }
  197.  
  198. .links a {
  199. display:inline-block;
  200. text-transform:uppercase;
  201. background-color:{color:bg};
  202. color:{color:accent2};
  203. padding:3px;
  204. margin:0px 2px 0px;
  205. font-size:7px;
  206. letter-spacing:1px;
  207. }
  208.  
  209. .links a:hover {
  210. background-color:{color:link};
  211. color:{color:bg};
  212. }
  213.  
  214. #stuffcontainer {
  215. float:left;
  216. margin-top:50px;
  217. z-index:-50;
  218. position:absolute;
  219. text-align:justify;
  220. color:{color:text};
  221. word-wrap:break-word;
  222. }
  223.  
  224.  
  225. #stuff {
  226. width:500px;
  227. text-align:center;
  228. font-size:9px;
  229. letter-spacing:1px;
  230. line-height:90%;
  231. color:{color:text};
  232. word-wrap:break-word;
  233. background-color:{color:bg};
  234. }
  235.  
  236. #caption {
  237. background-color:{color:postbg};
  238. text-align:justify;
  239. font-size:9px;
  240. width:460px;
  241. padding:20px;
  242. text-align:justify;
  243. line-height:120%;
  244. word-wrap:break-word;
  245. }
  246.  
  247. .ask {
  248. padding:10px;
  249. width:440px;
  250. text-align:left;
  251. color:{color:text};
  252. background-color:{color:bg};
  253. word-wrap:break-word;
  254. }
  255.  
  256. .ans {
  257. padding:10px;
  258. padding-bottom:0px;
  259. width:440px;
  260. text-align:left;
  261. color:{color:text};
  262. }
  263.  
  264. .audio {
  265. width:500px;
  266. }
  267.  
  268. .ai {
  269. text-align:center;
  270. width:480px;
  271. line-height:130%;
  272. background-color:{color:accent1};
  273. padding:10px;
  274. font-size:9px;
  275. color:{color:accent2};
  276. }
  277.  
  278. .track {
  279. font-family: 'Cutive Mono', serif;
  280. font-size:16px;
  281. letter-spacing:-1px;
  282. }
  283.  
  284. .aplay {
  285. width:490px;
  286. padding:5px;
  287. text-align:center;
  288. background-color:{color:bg};
  289. overflow:hidden;
  290. }
  291.  
  292. .postinfo {
  293. text-transform:uppercase;
  294. margin:2px 0px 50px 0px;
  295. display:inline-block;
  296. font-style:normal;
  297. font-size:8px;
  298. color:{color:accent2};
  299. text-align:left;
  300. -moz-transition-duration:0.5s;
  301. -webkit-transition-duration:0.5s;
  302. -o-transition-duration:0.5s;
  303. }
  304.  
  305. .postinfo a {
  306. color:{color:text};
  307. display:inline-block;
  308. font-style:normal;
  309. }
  310.  
  311. .postinfo a:hover {
  312. color:{color:hover};
  313. }
  314.  
  315. .time {
  316. background-color:{color:accent1};
  317. padding:5px;
  318. position:absolute;
  319. width:490px;
  320. text-align:right;
  321. }
  322.  
  323. .count {
  324. background-color:{color:accent2};
  325. color:{color:bg};
  326. padding:5px;
  327. position:absolute;
  328. text-align:left;
  329. }
  330.  
  331. .count a {
  332. color:{color:bg};
  333. }
  334.  
  335. .count a:hover {
  336. color:{color:bg};
  337. }
  338.  
  339. .triangle {
  340. width:0px;
  341. height:0px;
  342. margin-top:-15px;
  343. margin-left:450px;
  344. position:absolute;
  345. border-bottom:15px solid {color:accent1};
  346. border-left:15px solid transparent;
  347. border-right:15px solid transparent;
  348. font-size:0px;
  349. line-height:0px;
  350. }
  351.  
  352. .note {
  353. text-transform:uppercase;
  354. font-style:normal;
  355. letter-spacing:0px;
  356. font-size:8px;
  357. text-align:left;
  358. line-height:90%;
  359. margin-left:-40px;
  360. }
  361.  
  362. .note li {
  363. list-style-type:none;
  364. height:20px;
  365. border-bottom:1px solid {color:border};
  366. padding:10px 25px 10px 25px;
  367. text-align:left;
  368. margin:0px;
  369. background-color:{color:bg};
  370. -moz-transition-duration:0.5s;
  371. -webkit-transition-duration:0.5s;
  372. -o-transition-duration:0.5s;
  373. }
  374.  
  375. .note li:hover {
  376. background-color:{color:accent1};
  377. -moz-transition-duration:0.5s;
  378. -webkit-transition-duration:0.5s;
  379. -o-transition-duration:0.5s;
  380. }
  381.  
  382. .note img {
  383. width:20px;
  384. height:20px;
  385. margin-bottom:-7px;
  386. margin-right:5px;
  387. }
  388.  
  389. .blogs {
  390. position:absolute;
  391. text-align:left;
  392. margin-left:500px;
  393. padding:5px;
  394. text-transform:uppercase;
  395. font-style:normal;
  396. letter-spacing:0px;
  397. font-size:8px;
  398. -moz-transition-duration:0.5s;
  399. -webkit-transition-duration:0.5s;
  400. -o-transition-duration:0.5s;
  401. }
  402.  
  403. .accent {
  404. font-size:7px;
  405. color:{color:bg};
  406. padding:5px;
  407. background-color:{color:accent1};
  408. }
  409.  
  410. .tags {
  411. width:500px;
  412. margin-top:25px;
  413. font-style:normal;
  414. text-transform:lowercase;
  415. text-align:left;
  416. letter-spacing:0.5px;
  417. text-transform:uppercase;
  418. -moz-transition-duration:0.5s;
  419. -webkit-transition-duration:0.5s;
  420. -o-transition-duration:0.5s;
  421. }
  422.  
  423. .tags a {
  424. color:{color:link};
  425. background-color:{color:bg};
  426. display:inline-block;
  427. padding:3px;
  428. margin-right:5px;
  429. -moz-transition-duration:0.5s;
  430. -webkit-transition-duration:0.5s;
  431. -o-transition-duration:0.5s;
  432. }
  433.  
  434. .tags a:hover {
  435. color:{color:bg};
  436. background-color:{color:accent2};
  437. -moz-transition-duration:0.5s;
  438. -webkit-transition-duration:0.5s;
  439. -o-transition-duration:0.5s;
  440. }
  441.  
  442. .convo {
  443. padding-bottom:10px;
  444. }
  445.  
  446. ul.chat, .chat ol, .chat li {
  447. list-style:none;
  448. margin:0px;
  449. padding:0px;
  450. }
  451.  
  452. .chat li:nth-child(odd) {
  453. background-color:{color:bg};
  454. padding:5px;
  455. }
  456.  
  457. .chat li:nth-child(even) {
  458. background-color:{color:accent1};
  459. padding:5px;
  460. }
  461.  
  462. .label {
  463. margin-right:5px;
  464. }
  465.  
  466. {CustomCSS}
  467.  
  468. </style>
  469.  
  470. <body>
  471.  
  472. <div id="theme">
  473.  
  474. <div id="header">
  475. <img src="{image:himage}">
  476. </div>
  477.  
  478. <div id="desc">
  479. {Description}
  480. </div>
  481.  
  482. <div class="links">
  483. <a href="/">home</a>
  484. <a href="/ask">ask</a>
  485. {block:IfLinkA}
  486. <a href="{text:linkA url}">{text:linkA}</a>
  487. {/block:IfLinkA}
  488. {block:IfLinkB}
  489. <a href="{text:linkB url}">{text:linkB}</a>
  490. {/block:IfLinkB}
  491. {block:IfLinkC}
  492. <a href="{text:linkC url}">{text:linkC}</a>
  493. {/block:IfLinkC}
  494. {block:IfLinkD}
  495. <a href="{text:linkD url}">{text:linkD}</a>
  496. {/block:IfLinkD}
  497. <a href="http://stateofgraces.tumblr.com/">©</a>
  498. </div>
  499.  
  500. <div id="stuffcontainer">
  501.  
  502. {block:Posts}
  503.  
  504. <div class="blogs">{block:RebloggedFrom}<span class="accent"><a href="{ReblogParentURL}">via</a></span><br><br>{/block:RebloggedFrom}{block:ContentSource}<span class="accent"> <a href="{SourceURL}">©</a></span>{/block:ContentSource}</div>
  505.  
  506. {block:Text}<div id="caption">{block:Title}<h2>{Title}</h2>{/block:Title}{Body}</div>{/block:Text}
  507.  
  508. {block:Quote}<div id="caption"><h1>“{Quote}”</h1><h3>— {Source}</h3></div>{/block:Quote}
  509.  
  510. {block:Link}<div id="caption"><a href="{URL}"><h2>{Name}</h2></a>
  511. {block:Description}<p>{Description}</p>{/block:Description}</div>{/block:Link}
  512.  
  513. {block:Photo}<div id="stuff"><img src="{PhotoURL-500}"/></div>
  514. {block:Caption}<div id="caption">{Caption}</div>{/block:Caption}{/block:Photo}
  515.  
  516. {block:Photoset}<div id="stuff"><center>{Photoset-500}</center></div>
  517. {block:Caption}<div id="caption">{Caption}</div>{/block:Caption}{/block:Photoset}
  518.  
  519. {block:Chat}<div id="caption"><div class="convo"><ul class="chat">{block:Title}<h1>{Title}</h1>{/block:Title}{block:Lines}<li>{block:Label}<span class="label">{Label}</span>{/block:Label}&nbsp;{Line}</li>{/block:Lines}</ul></div></div>{/block:Chat}
  520.  
  521. {block:Video}<div id="stuff">{Video-500}</div>
  522. {block:Caption}<div id="caption">{Caption}</div>{/block:Caption}{/block:Video}
  523.  
  524. {block:Answer}<div id="caption"><div class="ask">{Asker} said: {Question}</div><div class="ans">{Answer}</div></div>{/block:answer}
  525.  
  526. {block:Audio}<div class="audio"><div class="ai">{block:Artist}{Artist}{/block:Artist}<br>{block:TrackName}<span class="track">{TrackName}<br></span>{/block:TrackName}{block:Album}{Album}{/block:Album}<br>{block:PlayCount}Played {FormattedPlayCount} times{/block:PlayCount}</div></div><div class="aplay">{AudioPlayerWhite}</div>
  527. {block:Caption}<div id="caption">{Caption}</div>{/block:Caption}{/block:Audio}
  528.  
  529. {block:Date}
  530. <div class="postinfo">
  531. <div class="triangle">
  532. </div>
  533. <div class="time"><a href="{Permalink}">{TimeAgo}</a></div>
  534. {block:NoteCount}<div class="count"><a href="{Permalink}">{NoteCount}</a></div>{/block:NoteCount}
  535.  
  536. {block:HasTags}<div class="tags">under:
  537. {block:Tags}<a href="{TagURL}">#{Tag}</a>{/block:Tags}
  538. </div>{/block:HasTags}
  539.  
  540. </div>
  541. {/block:Date}
  542.  
  543.  
  544. <div class="note">
  545. {block:PostNotes}{PostNotes}{/block:PostNotes}
  546. </div>
  547.  
  548. {/block:Posts}
  549.  
  550. {block:Pagination}
  551. <div class="pagi">
  552. {block:PreviousPage}
  553. <a href="{PreviousPage}">prev</a>
  554. {/block:PreviousPage}
  555. {block:NextPage}
  556. <a href="{NextPage}">next</a>
  557. {/block:NextPage}
  558. </div>
  559. {/block:Pagination}
  560.  
  561. </div>
  562.  
  563. </div>
  564.  
  565. </body>
  566.  
  567. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement