API tools faq
paste
Advertisement
thematchgirl

Theme 08 v1

thematchgirl
Mar 23rd, 2013
339
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 15.15 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  2. <html>
  3. <head>
  4. <title>{title}</title>
  5. <link href='http://fonts.googleapis.com/css?family=Mrs+Saint+Delafield' rel='stylesheet' type='text/css'>
  6. <link rel="shortcut icon" href="{Favicon}">
  7. <meta name="color:background" content="#fdfdfd" />
  8. <meta name="color:scrollbar" content="#fff" />
  9. <meta name="color:scrollbar border" content="#ccc" />
  10. <meta name="color:selection text" content="#fff" />
  11. <meta name="color:selection" content="#ccc" />
  12. <meta name="color:link" content="#7d7d7d" />
  13. <meta name="color:text" content="#7d7d7d" />
  14. <meta name="color:bold" content="#4b4b4b" />
  15. <meta name="color:italic" content="#4b4b4b" />
  16. <meta name="color:post" content="#fff" />
  17. <meta name="color:post border" content="#ccc" />
  18. <meta name="color:post title background" content="#f8f8f8" />
  19. <meta name="color:post title border" content="#7d7d7d" />
  20. <meta name="color:post title text" content="#7d7d7d" />
  21. <meta name="color:post title background hover" content="#f2f2f2" />
  22. <meta name="color:info background" content="#fbfbfb" />
  23. <meta name="color:info border" content="#ccc" />
  24. <meta name="color:info text" content="#7d7d7d" />
  25. <meta name="color:info text" content="#7d7d7d" />
  26. <meta name="color:sidebar background" content="#fff" />
  27. <meta name="color:sidebar border" content="#ccc" />
  28. <meta name="color:sidebar text" content="#7d7d7d" />
  29. <meta name="color:additional link background" content="#f7f7f7" />
  30. <meta name="color:additional link border" content="#ccc" />
  31. <meta name="color:additional link color" content="#7d7d7d" />
  32. <meta name="color:credit background" content="#fff" />
  33. <meta name="color:credit border" content="#ccc" />
  34. <meta name="color:credit hover" content="#ccc" />
  35. <meta name="color:blockquote border" content="#ccc" />
  36. <meta name="color:blockquote background" content="#fbfbfb" />
  37. <meta name="color:chat odd line" content="#f0f0f0" />
  38. <meta name="color:chat even line" content="#ffff" />
  39. <meta name="color:asker" content="#ccc" />
  40. <meta name="color:pre" content="#f4f4f4" />
  41. <meta name="color:tooltips background" content="#fff" />
  42. <meta name="color:tooltips border" content="#ccc" />
  43. <meta name="color:additional link hover" content="#f0f0f0" />
  44.  
  45. <meta name="image:background" content="http://i.imgur.com/URLMmfs.png" />
  46.  
  47. <meta name="if:FadingImages" content="1" />
  48. <meta name="if:LazyLoad" content="1" />
  49. <meta name="if:Music Player" content="1" />
  50.  
  51. <meta name="text:Link1" content="" />
  52. <meta name="text:Link1URL" content=""/>
  53. <meta name="text:Link2" content="" />
  54. <meta name="text:Link2URL" content=""/>
  55. <meta name="text:Link3" content="" />
  56. <meta name="text:Link3URL" content=""/>
  57. <meta name="text:Link4" content="" />
  58. <meta name="text:Music" content="" />
  59. </head>
  60. <style>
  61. *, body {cursor: url(http://img69.imageshack.us/img69/7673/cursorw.png), auto;}
  62.  
  63. a, a:hover, h1, #music {cursor: url(http://i46.tinypic.com/1fe911.png), auto;}
  64.  
  65. body {
  66. font-family:Cambria;
  67. color: {color:text};
  68. background: {color:background};
  69. text-align:justify;
  70. font-size:11px;
  71. }
  72.  
  73. ::-webkit-scrollbar-thumb:vertical {
  74. background-color: {color:scrollbar};
  75. border:1px solid {color:scrollbar border};
  76. width:10px;
  77. height:auto;
  78. }
  79.  
  80. ::-webkit-scrollbar-thumb:horizontal {
  81. background-color: {color:scrollbar};
  82. border:1px solid {color:scrollbar border};
  83. width:auto;
  84. height:10px;
  85. }
  86.  
  87. ::-webkit-scrollbar {
  88. height:10px;
  89. width:10px;
  90. background-color: {color:background};
  91. }
  92.  
  93.  
  94. ::-moz-selection {background-color:{color:selection}; color: {color:selection text};}
  95. ::selection {background-color:{color:selection}; color: {color:selection text};}
  96.  
  97. a {
  98. color:{color:link};
  99. text-shadow: 2px 2px 3px rgba(148, 150, 150, 1);
  100. text-decoration:none;
  101. transition: all 0.4s ease-out;
  102. -o-transition: all 0.4s ease-out;
  103. -webkit-transition: all 0.4s ease-out;
  104. -moz-transition: all 0.4s ease-out;
  105. }
  106.  
  107. a:hover {
  108. color:{color:link};
  109. text-shadow:none;
  110. }
  111.  
  112. hr {
  113. background:{color:text};
  114. border:{color:text};
  115. height:1px;
  116. }
  117.  
  118. b, strong {
  119. font-weight:700px;
  120. color:{color:bold};}
  121.  
  122. i, em {
  123. font-style:italic;
  124. color:{color:italic};
  125. }
  126.  
  127.  
  128. #main {
  129. margin:10px;
  130. width:550px;
  131. }
  132.  
  133. #main h1 {
  134. background:{color:post title background};
  135. border-bottom:1px solid {color:post title border};
  136. color:{color:post title text};
  137. text-align:center;
  138. font-family: 'Mrs Saint Delafield', cursive;
  139. font-size:30px;
  140. line-height:20px;
  141. padding-top:13px;
  142. -webkit-transition: all 0.6s ease-in-out;
  143. -moz-transition: all 0.6s ease-in-out;
  144. -o-transition: all 0.6s ease-in-out;
  145. transition: all 0.6s ease-in-out;
  146. }
  147.  
  148. #main h1:hover {
  149. background:{color:post title background hover};
  150. }
  151.  
  152. a.h1, h1 a {
  153. color:{color:post title text};
  154. text-shadow:none;
  155. }
  156.  
  157. #content {
  158. width:500px;
  159. padding:25px;
  160. background:{color:post};
  161. border:1px solid {color:post border};
  162. margin-bottom:25px;
  163. }
  164.  
  165. .meta {
  166. padding:3px;
  167. font-size:9px;
  168. text-transform:uppercase;
  169. background:{color:info background};
  170. border:1px solid {color:info border};
  171. color:{color:info text};
  172. width:494px;
  173. margin-top:5px;
  174. margin-bottom:5px;
  175. }
  176.  
  177. .meta a {
  178. text-shadow:none;
  179. }
  180.  
  181. .alignleft {
  182. float:left;
  183. font-size:13px;
  184. text-transform:uppercase;
  185. }
  186.  
  187. .alignright {
  188. float:right;
  189. font-size:13px;
  190. text-transform:uppercase;
  191. }
  192.  
  193. #sidebar {
  194. position:fixed;
  195. left:600px;
  196. top:0;
  197. height:100%;
  198. width:200px;
  199. }
  200.  
  201. #description {
  202. margin-top:100%;
  203. background:{color:sidebar background};
  204. padding:15px;
  205. border:1px solid {color:sidebar border};
  206. width:100%;
  207. text-align:justify;
  208. color:{color:sidebar text};
  209. }
  210.  
  211. #judul {
  212. height:30px;
  213. border-bottom:2px solid {color:sidebar border};
  214. display:block;
  215. font-size:28px;
  216. font-family: 'Mrs Saint Delafield', cursive;
  217. text-align:right;
  218. margin-bottom:5px;
  219. font-weight:400;
  220. }
  221.  
  222. #link {
  223. margin-top:10px;
  224. margin-bottom:-25px;
  225. -webkit-transition: all 0.6s ease-in-out;
  226. -moz-transition: all 0.6s ease-in-out;
  227. -o-transition: all 0.6s ease-in-out;
  228. transition: all 0.6s ease-in-out;
  229. }
  230.  
  231. #link:hover {
  232. margin-bottom:0;
  233. }
  234.  
  235. #judullink {
  236. height:14px;
  237. padding:5px;
  238. background:{color:additional link background};
  239. border-bottom:1px solid {color:additional link border};
  240. text-align:center;
  241. text-transform:uppercase;
  242. font-size:9px;
  243. -webkit-transition: all 0.6s ease-in-out;
  244. -moz-transition: all 0.6s ease-in-out;
  245. -o-transition: all 0.6s ease-in-out;
  246. transition: all 0.6s ease-in-out;
  247. }
  248.  
  249. #link2 {
  250. margin-top:-50px;
  251. height:1px;
  252. margin-bottom:25px;
  253. opacity:0;
  254. -webkit-transition: all 0.6s ease-in-out;
  255. -moz-transition: all 0.6s ease-in-out;
  256. -o-transition: all 0.6s ease-in-out;
  257. transition: all 0.6s ease-in-out;
  258. }
  259.  
  260. .link {
  261. font-size:9px;
  262. display:inline-block;
  263. background:{color:additional link background};
  264. border-bottom:1px solid {color:additional link border};
  265. padding:3px;
  266. text-align:center;
  267. width:92px;
  268. margin-top:1px;
  269. color:{color:additional link color};
  270. text-shadow:none;
  271. text-transform:uppercase;
  272. text-shadow:none;
  273. text-decoration:none;
  274. -webkit-transition: all 0.9s ease-in-out;
  275. -moz-transition: all 0.9s ease-in-out;
  276. -o-transition: all 0.9s ease-in-out;
  277. transition: all 0.9s ease-in-out;
  278. }
  279.  
  280. .link a, a.link {
  281. text-shadow:none;
  282. text-decoration:none;
  283. }
  284.  
  285. .link:hover {
  286. background:{color:additional link hover};
  287. }
  288.  
  289. #link:hover #link2 {
  290. opacity:1;
  291. margin-top:0px;
  292. }
  293.  
  294. #link:hover #judullink {
  295. opacity:0;
  296. height:0px;
  297. margin-top:-15px;
  298. }
  299.  
  300. #music {
  301. opacity:0.5;
  302. position:fixed;
  303. right:20px;
  304. background:{color:credit background};
  305. padding:10px;
  306. height:14px;
  307. width:14px;
  308. border:1px solid {color:credit border};
  309. bottom:20px;
  310. z-index:5;
  311. border-radius:50%;
  312. -webkit-transition: all 0.9s ease-in-out;
  313. -moz-transition: all 0.9s ease-in-out;
  314. -o-transition: all 0.9s ease-in-out;
  315. transition: all 0.9s ease-in-out;
  316. }
  317.  
  318. #musicplay {
  319. -webkit-transition: all 0.9s ease-in-out;
  320. -moz-transition: all 0.9s ease-in-out;
  321. -o-transition: all 0.9s ease-in-out;
  322. transition: all 0.9s ease-in-out;
  323. background:{color:credit background};
  324. padding:0px;
  325. height:5px;
  326. width:5px;
  327. border:1px solid {color:credit border};
  328. z-index:25;
  329. border-radius:50%;
  330. -moz-border-radius:50%;
  331. -o-border-radius:50%;
  332. -ms-border-radius:50%;
  333. -webkit-border-radius:50%;
  334. opacity:0;
  335. margin-top:10px;
  336. overflow:hidden;
  337. margin-left:10px
  338. }
  339.  
  340. #music:hover #musicplay {
  341. margin-top:-60px;
  342. margin-left:-35px;
  343. opacity:1;
  344. padding:10px;
  345. }
  346.  
  347. #music:hover {
  348. background:{color:credit hover};
  349. opacity:1;
  350. }
  351.  
  352. blockquote {
  353. background:{color:blockquote background};
  354. padding:10px;
  355. font-style:italic;
  356. border-left:5px solid {color:blockquote border};
  357. }
  358.  
  359. blockquote:first-letter {
  360. font-size:15px;
  361. font-weight:700px;
  362. }
  363.  
  364. .quote:first-letter {
  365. font-size:25px;
  366. color:#ccc;
  367. font-weight:700;
  368. font-style:italic;
  369. }
  370.  
  371. .quote {
  372. font-size:18px;
  373. text-align:right;
  374. }
  375.  
  376. .chat ul {
  377. list-style: none;
  378. margin: 0;
  379. padding: 0;
  380. }
  381.  
  382. .chat .odd {
  383. background:{color:chat odd line};
  384. padding:5px;
  385. }
  386. .chat .even {
  387. background:{color:chat even line};
  388. padding:5px;
  389. }
  390.  
  391. #audioplayer {
  392. height:80px;
  393. font-size:16px;
  394. text-align:center;
  395. padding:10px;
  396. display:block;
  397. width:480px;
  398. background:#fff;
  399. border:1px solid #ccc;
  400. -webkit-border-top-right-radius: 25px;
  401. -webkit-border-bottom-right-radius: 25px;
  402. -moz-border-radius-topright: 25px;
  403. -moz-border-radius-bottomright: 25px;
  404. border-top-right-radius: 25px;
  405. border-bottom-right-radius: 25px;
  406. }
  407.  
  408. .asker {
  409. background:{color:asker};
  410. width:100%;
  411. padding:5px;
  412. }
  413.  
  414. .ask {
  415. margin-left:80px;
  416. width:400px;
  417. padding:10px;
  418. -webkit-border-bottom-right-radius: 20px;
  419. -webkit-border-bottom-left-radius: 20px;
  420. -moz-border-radius-bottomright: 20px;
  421. -moz-border-radius-bottomleft: 20px;
  422. border-bottom-right-radius: 20px;
  423. border-bottom-left-radius: 20px;
  424. border:1px solid {color:post border};
  425. display:block;
  426. margin-bottom:30px;
  427. }
  428.  
  429. {block:iffadingimages}.photo {
  430. opacity:0.7;
  431. -webkit-transition: all 0.9s ease-in-out;
  432. -moz-transition: all 0.9s ease-in-out;
  433. -o-transition: all 0.9s ease-in-out;
  434. transition: all 0.9s ease-in-out;
  435. }
  436.  
  437. .photo:hover {
  438. opacity:1;
  439. }{/block:iffadingimages}
  440.  
  441. pre {
  442. background:{color:pre};
  443. font-family:consolas;
  444. padding:5px;
  445. }
  446.  
  447. iframe#tumblr_controls {
  448. right:3px !important;
  449. position: fixed !important;
  450. opacity: 0.7;
  451. -webkit-transition: all 0.8s ease-out;
  452. -moz-transition: all 0.8s ease-out;
  453. transition: all 0.8s ease-out;
  454. -webkit-filter: invert(100%);
  455. -moz-filter: invert(100%);
  456. -o-filter: invert(100%);
  457. -ms-filter: invert(100%);
  458. filter: invert(100%);
  459. }
  460.  
  461. #s-m-t-tooltip{
  462. max-width: 500px;
  463. z-index:5000;
  464. margin:24px 14px 7px 12px;
  465. padding:5px;
  466. font-size:9px;
  467. line-height:16px;
  468. background:{color:tooltips background};
  469. border:1px solid {color:tooltips border};
  470. }
  471.  
  472. #scrolltotop {
  473. font-size:50px;
  474. position:fixed;
  475. bottom: 10%;
  476. left: 900px;
  477. z-index:1000000000000;
  478. }
  479.  
  480. #scrollToTop:link,
  481. #scrollToTop:visited {
  482. display: none;
  483. position: fixed;
  484. bottom: 10%;
  485. left: 900px;
  486. font-size:50px;
  487. }
  488.  
  489. .navigation {
  490. margin-top:10px;
  491. }
  492.  
  493. #musicplay embed {
  494. margin-left:-27px;
  495. }
  496.  
  497. </style>
  498.  
  499. <script type="text/javascript"
  500. src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
  501. <script src="http://static.tumblr.com/ikeq9mi/DfYl6o46t/scrolltotop.min.js"></script>
  502. <script src="http://static.tumblr.com/pdgxkke/bRomet3vm/jquery.style-my-tooltips.js"></script>
  503. <script>
  504. (function($){
  505. $(document).ready(function(){
  506. $("[title]").style_my_tooltips();
  507. });
  508. })(jQuery);
  509. </script>
  510. <script type="text/javascript" src="http://static.tumblr.com/bmdsqsc/8mXm7q8vn/jquery.js"></script>
  511. {block:IfLazyLoad}<script type="text/javascript" src="http://static.tumblr.com/bmdsqsc/ogWm7q8w1/lazyload.js"></script>
  512. <script type="text/javascript" charset="utf-8">
  513. var $j = jQuery.noConflict();
  514. $j(function() {
  515. if (navigator.platform == "iPad" || navigator.platform == "iPhone") return;
  516. $j("img").lazyload({
  517. placeholder : "http://static.tumblr.com/twte3d7/RSvlio0k5/grey.gif",
  518. effect: "fadeIn",
  519. });
  520. });
  521. </script>{/block:IfLazyLoad}
  522.  
  523. <body>
  524.  
  525. <div class="topp">
  526. <a href="javascript:;" id="scrollToTop">▲</a>
  527. </div>
  528.  
  529. <div id="music">
  530. <a href="http://thematchgirl.tumblr.com" title="theme by the match girl"><img src="http://media.tumblr.com/tumblr_m7w2n46Pdl1r6o8v2.gif"></a>
  531. {block:ifMusicPlayer}<div id="musicplay">{text:music}</div>{/block:ifMusicPlayer}
  532. </div>
  533.  
  534. <div id="sidebar">
  535. <div id="description">
  536. <div id="judul">{title}</div>
  537. {description}
  538.  
  539. <div id="link">
  540. <div id="judullink">Hover Here for Links</div>
  541. <div id="link2">
  542. <a href="/" class="link">Home</a>
  543. <a href="/ask" class="link">Ask</a><br>
  544. {block:iflink1}<a href="{text:Link1URL}" class="link">{text:Link1}</a>{/block:iflink1}
  545. {block:iflink2}<a href="{text:Link2URL}" class="link">{text:Link2}</a><br>{/block:iflink2}
  546. {block:iflink3}<a href="{text:Link3URL}" class="link">{text:Link3}</a>{/block:iflink3}
  547. {block:iflink4}<a href="{text:Link4URL}" class="link">{text:Link4}</a>{/block:iflink4}
  548. </div>
  549. </div><br><br>
  550. </div>
  551. </div>
  552.  
  553. <div id="main">
  554. {block:posts}
  555. <div id="content">
  556. {block:Text}
  557. {block:Title}<a href="{Permalink}"><h1>{Title}</h1></a>{/block:Title}
  558. {Body}
  559. {/block:Text}
  560.  
  561. {block:Photo}
  562. <div class="photo"><a href="{PhotoURL-HighRes}"><img src="{PhotoURL-500}" alt=""></a></div>
  563. {block:Caption}{Caption}{/block:Caption}
  564. {/block:Photo}
  565.  
  566. {block:Photoset}
  567. <div class="photo">{Photoset-500}</div>
  568. {block:Caption}{Caption}{/block:Caption}
  569. {/block:Photoset}
  570.  
  571. {block:Quote}
  572. <div class="quote">❞{Quote}</div><br>
  573. <center>{block:Source}- {Source}{/block:Source}</center><br>
  574. {/block:Quote}
  575.  
  576. {block:Link}
  577. <a href="{URL}" target="{Target}"><h1>{Name} →</h1></a>
  578. {block:Description}{Description}{/block:Description}
  579. {/block:Link}
  580.  
  581. {block:Chat}
  582. {block:Title}<a href="{Permalink}"><h1>{Title}</h1></a>{/block:Title}
  583. <div class="chat">
  584. <ul>
  585. {block:Lines}<li class="{Alt}">{block:Label} <b>{Label}</b> {/block:Label}{Line}</li>{/block:Lines}
  586. </ul>
  587. </div>
  588. {/block:Chat}
  589.  
  590.  
  591. {block:Audio}
  592. {block:AlbumArt}<img src="{AlbumArtURL}" width="100" align="left">{/block:AlbumArt}
  593. <div id="audioplayer">{AudioPlayerWhite}
  594. {block:Artist}{Artist} -{/block:Artist}{block:TrackName} {TrackName}{/block:TrackName}<br>
  595. ({PlayCountWithLabel})
  596. </div>
  597. {block:Caption}{Caption}{/block:Caption}
  598. {/block:Audio}
  599.  
  600.  
  601. {block:Video}
  602. {Video-500}
  603. {block:Caption}{Caption}{/block:Caption}
  604. {/block:Video}
  605.  
  606. {block:Answer}
  607. <img src="{AskerPortraitURL-64}" style="margin:3px;border:5px solid #ccc;" align="left"><div class="asker">{Asker} asked</div>
  608. <div class="ask">{Question}</div>
  609. {Answer}
  610. {/block:Answer}
  611.  
  612. <div class="meta">{block:HasTags}<b>Category:</b>{block:Tags} <a href="{TagURL}">{Tag}</a>, {/block:Tags}<br>{/block:HasTags}
  613. {block:Date}<b>Posted on:</b> <a href="{Permalink}">{Month} {DayOfMonth}{DayOfMonthSuffix} {Year}</a><br>{/block:Date}
  614. {block:PostNotes}<b>Notes:</b> {PostNotes}{/block:PostNotes}</div>
  615. </div>
  616. {/block:posts}
  617.  
  618. <div class="navigation">
  619. <div class="alignleft">{block:PreviousPage}<a href="{PreviousPage}">← previous</a>{/block:PreviousPage}</div>
  620. <div class="alignright">{block:NextPage} <a href="{NextPage}">next →</a>{/block:NextPage}</div>
  621. </div>
  622.  
  623. </div>
  624. </body>
  625. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
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!