Advertisement
getnakedmiley

Hate to See Your Heart Break theme

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