Pastebin launched a little side project called HostCabi.net, check it out ;-)Don't like ads? PRO users don't see any ads ;-)
Guest

Theme 08 v2

By: thematchgirl on Mar 23rd, 2013  |  syntax: None  |  size: 14.46 KB  |  hits: 371  |  expires: Never
download  |  raw  |  embed  |  report abuse  |  print
Text below is selected. Please press Ctrl+C to copy to your clipboard. (⌘+C on Mac)
  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} url({image:background}) repeat-y fixed;
  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. #main {
  128. margin-left:50px;
  129. background:{color:post};
  130. border:1px solid {color:post border};
  131. margin-top:-10px;
  132. margin-bottom:-10px;
  133. width:550px;
  134. -webkit-box-shadow: -4px 0px 7px rgba(50, 50, 50, 0.4);
  135. -moz-box-shadow:    -4px 0px 7px rgba(50, 50, 50, 0.4);
  136. box-shadow:         -4px 0px 7px rgba(50, 50, 50, 0.4);
  137. }
  138.  
  139. #main h1 {
  140. background:{color:post title background};
  141. border-bottom:1px solid {color:post title border};
  142. color:{color:post title text};
  143. text-align:center;
  144. font-family: 'Mrs Saint Delafield', cursive;
  145. font-size:30px;
  146. line-height:20px;
  147. padding-top:13px;
  148. -webkit-transition: all 0.6s ease-in-out;
  149. -moz-transition: all 0.6s ease-in-out;
  150. -o-transition: all 0.6s ease-in-out;
  151. transition: all 0.6s ease-in-out;
  152. }
  153.  
  154. #main h1:hover {
  155. background:{color:post title background hover};
  156. }
  157.  
  158. a.h1, h1 a {
  159. color:{color:post title text};
  160. text-shadow:none;
  161. }
  162.  
  163. #content {
  164. width:500px;
  165. padding:25px;
  166. }
  167.  
  168. .meta {
  169. padding:3px;
  170. font-size:9px;
  171. text-transform:uppercase;
  172. background:{color:info background};
  173. border:1px solid {color:info border};
  174. color:{color:info text};
  175. width:494px;
  176. margin-top:5px;
  177. margin-bottom:5px;
  178. }
  179.  
  180. .meta a {
  181. text-shadow:none;
  182. }
  183.  
  184. .alignleft {
  185. float:left;
  186. font-size:13px;
  187. text-transform:uppercase;
  188.  }
  189.  
  190. .alignright {
  191. float:right;
  192. font-size:13px;
  193. text-transform:uppercase;
  194.  }
  195.  
  196.  #sidebar {
  197. position:fixed;
  198. left:610px;
  199. top:0;
  200. height:100%;
  201. width:200px;
  202. background:{color:sidebar background};
  203. padding:15px;
  204. border-right:1px solid {color:sidebar border};
  205. color:{color:sidebar text};
  206. }
  207.  
  208. #description {
  209. margin-top:100%;
  210. width:100%;
  211. text-align:justify;
  212. }
  213.  
  214. #judul {
  215. height:30px;
  216. border-bottom:2px solid {color:sidebar border};
  217. display:block;
  218. font-size:28px;
  219. font-family: 'Mrs Saint Delafield', cursive;
  220. text-align:right;
  221. margin-bottom:5px;
  222. font-weight:400;
  223. }
  224.  
  225. #link {
  226.         margin-top:10px;
  227. }
  228.  
  229. .link {
  230. font-size:9px;
  231. display:inline-block;
  232. background:{color:additional link background};
  233. border-bottom:1px solid {color:additional link border};
  234. padding:3px;
  235. text-align:center;
  236. width:200px;
  237. margin-top:1px;
  238. color:{color:additional link color};
  239. text-shadow:none;
  240. text-transform:uppercase;
  241. text-shadow:none;
  242. text-decoration:none;
  243. -webkit-transition: all 0.9s ease-in-out;
  244. -moz-transition: all 0.9s ease-in-out;
  245. -o-transition: all 0.9s ease-in-out;
  246. transition: all 0.9s ease-in-out;
  247. }
  248.  
  249. .link a, a.link {
  250. text-shadow:none;
  251. text-decoration:none;
  252. }
  253.  
  254. .link:hover {
  255. background:{color:additional link hover};
  256. }
  257.  
  258. #music {
  259. opacity:0.5;
  260. position:fixed;
  261. right:20px;
  262. background:{color:credit background};
  263. padding:10px;
  264. height:14px;
  265. width:14px;
  266. border:1px solid {color:credit border};
  267. bottom:20px;
  268. z-index:5;
  269. border-radius:50%;
  270. -webkit-transition: all 0.9s ease-in-out;
  271. -moz-transition: all 0.9s ease-in-out;
  272. -o-transition: all 0.9s ease-in-out;
  273. transition: all 0.9s ease-in-out;
  274. }
  275.  
  276. #musicplay {
  277. -webkit-transition: all 0.9s ease-in-out;
  278. -moz-transition: all 0.9s ease-in-out;
  279. -o-transition: all 0.9s ease-in-out;
  280. transition: all 0.9s ease-in-out;
  281. background:{color:credit background};
  282. padding:0px;
  283. height:5px;
  284. width:5px;
  285. border:1px solid {color:credit border};
  286. z-index:25;
  287. border-radius:50%;
  288. -moz-border-radius:50%;
  289. -o-border-radius:50%;
  290. -ms-border-radius:50%;
  291. -webkit-border-radius:50%;
  292. opacity:0;
  293. margin-top:10px;
  294. overflow:hidden;
  295. margin-left:10px
  296. }
  297.  
  298. #music:hover #musicplay {
  299. margin-top:-60px;
  300. margin-left:-35px;
  301. opacity:1;
  302. padding:10px;
  303. }
  304.  
  305. #music:hover {
  306. background:{color:credit hover};
  307. opacity:1;
  308. }
  309.  
  310. blockquote {
  311. background:{color:blockquote background};
  312. padding:10px;
  313. font-style:italic;
  314. border-left:5px solid {color:blockquote border};
  315. }
  316.  
  317. blockquote:first-letter {
  318. font-size:15px;
  319. font-weight:700px;
  320. }
  321.  
  322. .quote:first-letter {
  323. font-size:25px;
  324. color:#ccc;
  325. font-weight:700;
  326. font-style:italic;
  327. }
  328.  
  329. .quote {
  330. font-size:18px;
  331. text-align:right;
  332. }
  333.  
  334. .chat ul {
  335.     list-style: none;
  336.     margin: 0;
  337.     padding: 0;
  338. }
  339.  
  340. .chat .odd {
  341.     background:{color:chat odd line};
  342.         padding:5px;
  343. }
  344. .chat .even {
  345.     background:{color:chat even line};
  346.         padding:5px;
  347. }
  348.  
  349. #audioplayer {
  350.         height:80px;
  351.         font-size:16px;
  352.         text-align:center;
  353.         padding:10px;
  354.         display:block;
  355.         width:480px;
  356.         background:#fff;
  357.         border:1px solid #ccc;
  358.         -webkit-border-top-right-radius: 25px;
  359. -webkit-border-bottom-right-radius: 25px;
  360. -moz-border-radius-topright: 25px;
  361. -moz-border-radius-bottomright: 25px;
  362. border-top-right-radius: 25px;
  363. border-bottom-right-radius: 25px;
  364. }
  365.  
  366. .asker {
  367.         background:{color:asker};
  368.         width:100%;
  369.         padding:5px;
  370. }
  371.  
  372. .ask {
  373.         margin-left:80px;
  374.         width:400px;
  375.         padding:10px;
  376.         -webkit-border-bottom-right-radius: 20px;
  377. -webkit-border-bottom-left-radius: 20px;
  378. -moz-border-radius-bottomright: 20px;
  379. -moz-border-radius-bottomleft: 20px;
  380. border-bottom-right-radius: 20px;
  381. border-bottom-left-radius: 20px;
  382. border:1px solid {color:post border};
  383. display:block;
  384. margin-bottom:30px;
  385. }
  386.  
  387. {block:iffadingimages}.photo {
  388.         opacity:0.7;
  389.         -webkit-transition: all 0.9s ease-in-out;
  390. -moz-transition: all 0.9s ease-in-out;
  391. -o-transition: all 0.9s ease-in-out;
  392. transition: all 0.9s ease-in-out;
  393. }
  394.  
  395. .photo:hover {
  396.         opacity:1;
  397. }{/block:iffadingimages}
  398.  
  399. pre {
  400.         background:{color:pre};
  401.         font-family:consolas;
  402.         padding:5px;
  403. }
  404.  
  405. iframe#tumblr_controls {
  406. right:3px !important;
  407. position: fixed !important;
  408. opacity: 0.7;
  409. -webkit-transition: all 0.8s ease-out;
  410. -moz-transition: all 0.8s ease-out;
  411. transition: all 0.8s ease-out;
  412. -webkit-filter: invert(100%);
  413. -moz-filter: invert(100%);
  414. -o-filter: invert(100%);
  415. -ms-filter: invert(100%);
  416. filter: invert(100%);
  417. }
  418.  
  419. #s-m-t-tooltip{
  420. max-width: 500px;
  421. z-index:5000;
  422. margin:24px 14px 7px 12px;
  423. padding:5px;
  424. font-size:9px;
  425. line-height:16px;
  426. background:{color:tooltips background};
  427. border:1px solid {color:tooltips border};
  428. }
  429.  
  430. #scrolltotop {
  431. font-size:50px;
  432. position:fixed;
  433. bottom: 10%;
  434. left: 900px;
  435. z-index:1000000000000;
  436. }
  437.  
  438. #scrollToTop:link,
  439.     #scrollToTop:visited {
  440.         display: none;
  441.         position: fixed;
  442.         bottom: 10%;
  443.         left: 900px;
  444. font-size:50px;
  445.     }
  446.  
  447. .navigation {
  448.         margin-top:10px;
  449. }
  450.  
  451. #musicplay embed {
  452.     margin-left:-27px;
  453. }
  454.  
  455. </style>
  456.  
  457. <script type="text/javascript"
  458. src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
  459. <script src="http://static.tumblr.com/ikeq9mi/DfYl6o46t/scrolltotop.min.js"></script>
  460. <script src="http://static.tumblr.com/pdgxkke/bRomet3vm/jquery.style-my-tooltips.js"></script>
  461. <script>
  462.     (function($){
  463.         $(document).ready(function(){
  464.             $("[title]").style_my_tooltips();
  465.         });
  466.     })(jQuery);
  467. </script>
  468. <script type="text/javascript" src="http://static.tumblr.com/bmdsqsc/8mXm7q8vn/jquery.js"></script>
  469. {block:IfLazyLoad}<script type="text/javascript" src="http://static.tumblr.com/bmdsqsc/ogWm7q8w1/lazyload.js"></script>
  470. <script type="text/javascript" charset="utf-8">
  471. var $j = jQuery.noConflict();
  472. $j(function() {
  473. if (navigator.platform == "iPad" || navigator.platform == "iPhone") return;
  474. $j("img").lazyload({
  475. placeholder : "http://static.tumblr.com/twte3d7/RSvlio0k5/grey.gif",
  476. effect: "fadeIn",
  477. });
  478. });
  479. </script>{/block:IfLazyLoad}
  480.  
  481. <body>
  482.    
  483.         <div class="topp">
  484. <a href="javascript:;" id="scrollToTop">▲</a>
  485.     </div>
  486.  
  487.  <div id="music">
  488.   <a href="http://thematchgirl.tumblr.com" title="theme by the match girl"><img src="http://media.tumblr.com/tumblr_m7w2n46Pdl1r6o8v2.gif"></a>
  489.  {block:ifMusicPlayer}<div id="musicplay">{text:music}</div>{/block:ifMusicPlayer}
  490.  </div>
  491.  
  492. <div id="sidebar">
  493. <div id="description">
  494. <div id="judul">{title}</div><br>
  495. <img src="{PortraitURL-64}" align="left" style="margin:3px;border:2px solid {color:sidebar border};">{description}
  496. <div id="link">
  497. <a href="/" class="link">Home</a>
  498. <a href="/ask" class="link">Ask</a><br>
  499. {block:iflink1}<a href="{text:Link1URL}" class="link">{text:Link1}</a>{/block:iflink1}
  500. {block:iflink2}<a href="{text:Link2URL}" class="link">{text:Link2}</a>{/block:iflink2}
  501. {block:iflink3}<a href="{text:Link3URL}" class="link">{text:Link3}</a>{/block:iflink3}
  502. {block:iflink4}<a href="{text:Link4URL}" class="link">{text:Link4}</a>{/block:iflink4}
  503. </div>
  504. <div class="navigation">
  505.         <div class="alignleft">{block:PreviousPage}<a href="{PreviousPage}">← previous</a>{/block:PreviousPage}</div>
  506.         <div class="alignright">{block:NextPage} <a href="{NextPage}">next →</a>{/block:NextPage}</div>
  507. </div>
  508.   </div>
  509.   </div>
  510.  
  511. <div id="main">
  512. {block:posts}
  513. <div id="content">
  514. {block:Text}
  515. {block:Title}<a href="{Permalink}"><h1>{Title}</h1></a>{/block:Title}
  516. {Body}
  517. {/block:Text}
  518.    
  519. {block:Photo}
  520. <div class="photo"><a href="{PhotoURL-HighRes}"><img src="{PhotoURL-500}" alt=""></a></div>
  521. {block:Caption}{Caption}{/block:Caption}
  522. {/block:Photo}
  523.  
  524. {block:Photoset}
  525. <div class="photo">{Photoset-500}</div>
  526. {block:Caption}{Caption}{/block:Caption}
  527. {/block:Photoset}
  528.    
  529. {block:Quote}
  530. <div class="quote">❞{Quote}</div><br>
  531. <center>{block:Source}- {Source}{/block:Source}</center><br>
  532. {/block:Quote}
  533.    
  534. {block:Link}
  535. <a href="{URL}" target="{Target}"><h1>{Name} →</h1></a>
  536. {block:Description}{Description}{/block:Description}
  537. {/block:Link}
  538.    
  539. {block:Chat}
  540. {block:Title}<a href="{Permalink}"><h1>{Title}</h1></a>{/block:Title}
  541. <div class="chat">
  542.     <ul>
  543.         {block:Lines}<li class="{Alt}">{block:Label} <b>{Label}</b> {/block:Label}{Line}</li>{/block:Lines}
  544.     </ul>
  545. </div>
  546. {/block:Chat}
  547.  
  548.  
  549. {block:Audio}
  550. {block:AlbumArt}<img src="{AlbumArtURL}" width="100" align="left">{/block:AlbumArt}
  551. <div id="audioplayer">{AudioPlayerWhite}
  552. {block:Artist}{Artist} -{/block:Artist}{block:TrackName} {TrackName}{/block:TrackName}<br>
  553. ({PlayCountWithLabel})
  554. </div>
  555. {block:Caption}{Caption}{/block:Caption}
  556. {/block:Audio}
  557.  
  558.  
  559. {block:Video}
  560. {Video-500}
  561. {block:Caption}{Caption}{/block:Caption}
  562. {/block:Video}
  563.    
  564. {block:Answer}
  565. <img src="{AskerPortraitURL-64}" style="margin:3px;border:5px solid #ccc;" align="left"><div class="asker">{Asker} asked</div>
  566. <div class="ask">{Question}</div>
  567. {Answer}
  568. {/block:Answer}
  569.  
  570. <div class="meta">{block:HasTags}<b>Category:</b>{block:Tags} <a href="{TagURL}">{Tag}</a>, {/block:Tags}<br>{/block:HasTags}
  571. {block:Date}<b>Posted on:</b> <a href="{Permalink}">{Month} {DayOfMonth}{DayOfMonthSuffix} {Year}</a><br>{/block:Date}
  572. {block:PostNotes}<b>Notes:</b> {PostNotes}{/block:PostNotes}</div>
  573. </div>
  574. {/block:posts}
  575. </div>
  576. </body>
  577. </html>