API tools faq
paste
Advertisement
mal_de_coucou

theme 2 (the grand staff)

mal_de_coucou
Aug 21st, 2013
1,001
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 13.80 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2.  
  3. <!--
  4.  
  5. theme 2 (the grand staff) by seeroflights
  6.  
  7. please don't repost as your own
  8. please don't use it as a base
  9. please don't remove the credit or move it somewhere else
  10.  
  11. -->
  12.  
  13.  
  14. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  15. <head>
  16.  
  17. <title>{Title}</title>
  18. <link rel="shortcut icon" href="{Favicon}">
  19. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  20. {block:Description}<meta name="description" content="{MetaDescription}" />{/block:Description}
  21.  
  22.  
  23. <meta name="color:Text" content="#bbbbbb"/>
  24. <meta name="color:Link" content="#aaaaaa"/>
  25. <meta name="color:linkbg" content="#eeeeee"/>
  26. <meta name="color:Tags" content="#cccccc"/>
  27. <meta name="color:Hover" content="#f1f1f1"/>
  28. <meta name="color:Line" content="#f2f2f2"/>
  29. <meta name="color:Border" content="#eeeeee"/>
  30. <meta name="color:scrollbarbg" content="ffffff"/>
  31.  
  32. <meta name="image:sidebar" content=""/>
  33. <meta name="image:bg" content=""/>
  34.  
  35. <meta name="text:linkA" content="">
  36. <meta name="text:linkA url" content="/">
  37. <meta name="text:linkB" content="">
  38. <meta name="text:linkB url" content="/">
  39. <meta name="text:linkC" content="">
  40. <meta name="text:linkC url" content="/">
  41. <meta name="text:linkD" content="">
  42. <meta name="text:linkD url" content="/">
  43.  
  44.  
  45.  
  46.  
  47. <style type="text/css">
  48.  
  49.  
  50. ::-webkit-scrollbar {
  51. width: 5px;height: 5px;}
  52. ::-webkit-scrollbar-button:start:decrement,
  53. ::-webkit-scrollbar-button:end:increment {
  54. height: 6px;display: block;background-color: ;}
  55. ::-webkit-scrollbar-track-piece {
  56. background-color: ffffff;}
  57. ::-webkit-scrollbar-thumb:vertical {
  58. height: 9px;background-color: ffffff;border-top:1px solid ffffff;border-bottom:1px solid ffffff;}
  59.  
  60.  
  61. body {
  62. background:;
  63. margin:0px;
  64. color:#bbbbbb;
  65. font-family:Arial, Helvetica;
  66. font-size:12px;
  67. line-height:100%;
  68. }
  69.  
  70. a {
  71. text-decoration:none;
  72. -moz-outline-style:none;
  73. color:#aaaaaa;
  74. -webkit-transition: all 0.5s ease-in-out;
  75. -moz-transition: all 0.5s ease-in-out;
  76. -o-transition: all 0.5s ease-in-out;
  77. }
  78.  
  79. a:hover {
  80. opacity:1;
  81. color:#f1f1f1;
  82. }
  83.  
  84. h1 {
  85. font-size:20px;
  86. text-transform:lowercase;
  87. font-style:italic;
  88. font-family:cambria;
  89. }
  90.  
  91. h2 {
  92. font-size:16px;
  93. text-transform:lowercase;
  94. }
  95.  
  96. blockquote {
  97. padding-left:5px;
  98. margin-left:5px;
  99. border-left:2px solid;
  100. }
  101.  
  102. blockquote blockquote {
  103. padding-left:5px;
  104. border-left:2px solid;
  105. }
  106.  
  107. #everything {
  108. margin-left:200px;
  109. width:1000px;
  110. }
  111.  
  112. #all {
  113. margin-top:200px;
  114. padding:10px;
  115. width:1000px;
  116. margin-left:25px;
  117. }
  118.  
  119. #header {
  120. margin-top:-200px;
  121. margin-left:-50px;
  122. position:fixed;
  123. z-index:500;
  124. opacity:1;
  125. width:1000px;
  126. background-color:#000;
  127. -webkit-transition: all 0.5s ease-in-out;
  128. -moz-transition: all 0.5s ease-in-out;
  129. -o-transition: all 0.5s ease-in-out;
  130. }
  131.  
  132. .desc {
  133. margin-left:0px;
  134. font-family:cambria;
  135. line-height:110%;
  136. font-size:12px;
  137. padding:9px;
  138. -webkit-transition: all 0.5s ease-in-out;
  139. -moz-transition: all 0.5s ease-in-out;
  140. -o-transition: all 0.5s ease-in-out;
  141. }
  142.  
  143. .desc a {
  144. color:#aaaaaa;
  145. }
  146.  
  147. #pagi{
  148. display:none;
  149. background-color:#fff;
  150. }
  151.  
  152. .links {
  153. margin-top:10px;
  154. width:500px;
  155. padding:9px;
  156. letter-spacing:2px;
  157. font-family:Arial, Helvetica;
  158. text-align:center;
  159. text-transform:uppercase;
  160. z-index:2;
  161. -webkit-transition: all 0.5s ease-in-out;
  162. -moz-transition: all 0.5s ease-in-out;
  163. -o-transition: all 0.5s ease-in-out;
  164. }
  165.  
  166. .links a {
  167. font-size:12px;
  168. min-width:60px;
  169. display:inline-block;
  170. color:{color:link};
  171. background:{color:linkbg};
  172. line-height:200%;
  173. padding:5px;
  174. }
  175.  
  176. .links a:hover {
  177. background:{color:link};
  178. color:{color:linkbg};
  179. }
  180.  
  181. #posts {
  182. float:left;
  183. width:250px;
  184. padding-bottom:20px;
  185. padding:10px;
  186. background-color:{color:PostBackground};
  187. }
  188.  
  189. #audio {
  190. width:25px;
  191. height:25px;
  192. overflow:hidden;
  193. position:absolute;
  194. margin-left:115px;
  195. margin-top:115px;
  196. margin-bottom:115px;
  197. -webkit-transition: all 0.5s ease-in-out;
  198. -moz-transition: all 0.5s ease-in-out;
  199. -o-transition: all 0.5s ease-in-out;
  200. -ms-transition: all 0.5s ease-in-out;
  201. }
  202.  
  203. #album {
  204. opacity:1;
  205. z-index:2;
  206. -webkit-transition: all 0.5s ease-in-out;
  207. -moz-transition: all 0.5s ease-in-out;
  208. -o-transition: all 0.5s ease-in-out;
  209. -ms-transition: all 0.5s ease-in-out;
  210. }
  211.  
  212. #audiopost:hover #album {
  213. opacity:0;
  214. z-index:-100;
  215. }
  216.  
  217. #audiopost {
  218. min-height:250px;
  219. background-color:#eee;
  220. border:1px solid #eee;
  221. z-index:-1;
  222. -webkit-transition: all 0.5s ease-in-out;
  223. -moz-transition: all 0.5s ease-in-out;
  224. -o-transition: all 0.5s ease-in-out;
  225. -ms-transition: all 0.5s ease-in-out;
  226. }
  227.  
  228. #audiopost:hover {
  229. background-color:#fff;
  230. border:1px solid #fff;
  231. }
  232.  
  233. #audiopost:hover #audioeh {
  234. margin-bottom:0px;
  235. }
  236.  
  237. #audioinfo {
  238. text-align:center;
  239. margin-top:-250px;
  240. opacity:0;
  241. z-index:1;
  242. -webkit-transition: all 0.5s ease-in-out;
  243. -moz-transition: all 0.5s ease-in-out;
  244. -o-transition: all 0.5s ease-in-out;
  245. -ms-transition: all 0.5s ease-in-out;
  246. }
  247.  
  248. #audiopost:hover #audioinfo {
  249. opacity:1;
  250. z-index:3;
  251. }
  252.  
  253. #audiopost:hover #audio {
  254. z-index:100000;
  255. width:250px;
  256. margin-left:0px;
  257. }
  258.  
  259. #caption {
  260. z-index:2;
  261. opacity:0;
  262. margin-top:120px;
  263. -webkit-transition: all 0.5s ease-in-out;
  264. -moz-transition: all 0.5s ease-in-out;
  265. -o-transition: all 0.5s ease-in-out;
  266. -ms-transition: all 0.5s ease-in-out;
  267. }
  268.  
  269. #audiopost:hover #caption {
  270. opacity:1;
  271. }
  272.  
  273. .bubble {align:right;background: #eee; margin:7px 0px 5px 66px;padding:10px;position: relative;-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px;}
  274. .bubble p {margin:1px 0px;}
  275. .bubble span {display:block;position:absolute;width:1px;height:1px;font-size: 0;line-height: 1px;left:-10px;top:10px;border-top:7px solid transparent;border-bottom:7px solid transparent;border-right:10px solid #eee;}
  276.  
  277. .askborder {float: left;margin: 1px 4px 0 0;padding: 2px; background: #eee} ::-webkit-scrollbar {
  278. width: 6px;
  279. height: 6px;
  280. background:;
  281. }
  282. .my-like {
  283. color:{color:link};
  284. cursor:pointer;
  285. display:inline-block;
  286. vertical-align:top;
  287. -webkit-transition: all 0.5s ease-in-out;
  288. -moz-transition: all 0.5s ease-in-out;
  289. -o-transition: all 0.5s ease-in-out;
  290. -ms-transition: all 0.5s ease-in-out;
  291. }
  292.  
  293. .my-liked {
  294. color:red;
  295. display:inline-block;
  296. vertical-align:top;
  297. }
  298.  
  299. .my-like:hover {
  300. color:{color:hover};
  301. cursor:pointer;
  302. display:inline-block;
  303. vertical-align:top;
  304. }
  305.  
  306. #notes {
  307. float:right;
  308. width:500px;
  309. }
  310.  
  311. #details {
  312. text-align:right;
  313. margin-top:8px;
  314. text-transform:uppercase;
  315. font-size:8px;
  316. font-style:none;
  317. border-top:1px solid #f2f2f2;
  318. opacity:0;
  319. -webkit-transition: all 0.5s ease-in-out;
  320. -moz-transition: all 0.5s ease-in-out;
  321. -o-transition: all 0.5s ease-in-out;
  322. -ms-transition: all 0.5s ease-in-out;
  323. }
  324.  
  325.  
  326. #tags {
  327. font-family:cambria;
  328. letter-spacing:0px;
  329. text-transform:lowercase;
  330. font-size:10px;
  331. font-style:italic;
  332. margin-top:2px;
  333. text-align:right;
  334. float:right;
  335. }
  336.  
  337. #tags a {
  338. display:inline-block;
  339. padding:-3px;
  340. text-align:right;
  341. color:#cccccc;
  342. }
  343.  
  344. #posts:hover #details {
  345. opacity:1;
  346. }
  347.  
  348. #cred {
  349. position:fixed;
  350. bottom:2px;
  351. right:-82px;
  352. font-size:9px;
  353. letter-spacing:1px;
  354. font-family:calibri;
  355. text-transform:uppercase;
  356. border:1px solid;
  357. padding:4px;
  358. -webkit-transition: all 0.7s ease-in-out;
  359. -moz-transition: all 0.7s ease-in-out;
  360. -o-transition: all 0.7s ease-in-out;
  361. -ms-transition: all 0.7s ease-in-out;
  362. }
  363.  
  364. #cred:hover {
  365. right:3px;
  366. }
  367.  
  368. {CustomCSS}
  369.  
  370. </style>
  371.  
  372. <script>
  373. window.onload = function () {
  374. document.body.insertAdjacentHTML( 'beforeEnd', '<iframe id="my-like-frame" style="display:none;"></iframe>' );
  375. document.addEventListener( 'click', function ( event ) {
  376. var myLike = event.target;
  377. if( myLike.className.indexOf( 'my-like' ) > -1 ) {
  378. var frame = document.getElementById( 'my-like-frame' ),
  379. liked = ( myLike.className == 'my-liked' ),
  380. command = liked ? 'unlike' : 'like',
  381. reblog = myLike.getAttribute( 'data-reblog' ),
  382. id = myLike.getAttribute( 'data-id' ),
  383. oauth = reblog.slice( -8 );
  384. frame.src = 'http://www.tumblr.com/' + command + '/' + oauth + '?id=' + id;
  385. liked ? myLike.className = 'my-like' : myLike.className = 'my-liked';
  386. };
  387. }, false );
  388. };
  389. </script>
  390.  
  391. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
  392.  
  393. <script src="http://static.tumblr.com/6hsqxdt/vmwm2rb4g/infinitescrolling.js"></script><script src="http://static.tumblr.com/6hsqxdt/QBym35odk/jquery.masonry.js"></script>
  394.  
  395. <script>
  396. $(function(){
  397. var $container = $('#all');
  398. $container.imagesLoaded(function(){
  399. $container.masonry({
  400. itemSelector: '#posts',
  401. });
  402. });
  403. $container.infinitescroll({
  404. itemSelector : "#posts",
  405. navSelector : "#pagi",
  406. nextSelector : "#pagi a#next",
  407. loadingImg : "",
  408. loadingText : "<em></em>",
  409. bufferPx : 10000,
  410. extraScrollPx: 12000,
  411. },
  412. // trigger Masonry as a callback
  413. function( newElements ) {
  414. var $newElems = $( newElements ).css({ opacity: 0 });
  415. // ensure that images load before adding to masonry layout
  416. $newElems.imagesLoaded(function(){
  417. $newElems.animate({ opacity: 1 });
  418. $container.masonry( 'appended', $newElems, true );
  419. });
  420. }
  421. );
  422. });
  423. </script>
  424. </head><body>
  425. <div id="everything">
  426. <div id="header"><center>
  427. <h1><a href="/">{Title}</a></h1>
  428. <div class="desc">{Description}</div>
  429. <div class="links">
  430. {block:IfLinkA}
  431. <a href="{text:linkA url}">{text:linkA}</a>
  432. {/block:IfLinkA}
  433. {block:IfLinkB}
  434. <a href="{text:linkB url}">{text:linkB}</a>
  435. {/block:IfLinkB}
  436. {block:IfLinkC}
  437. <a href="{text:linkC url}">{text:linkC}</a>
  438. {/block:IfLinkC}
  439. {block:IfLinkD}
  440. <a href="{text:linkD url}">{text:linkD}</a>
  441. {/block:IfLinkD}
  442. </div>
  443. {block:Pagination}
  444. <div id="pagi">
  445. {block:PreviousPage}
  446. <a href="{PreviousPage}">&larr;</a>&nbsp;&nbsp;
  447. {/block:PreviousPage}
  448. {block:JumpPagination length="3"}
  449. {block:CurrentPage}
  450. <span class="current_page">
  451. {PageNumber}
  452. </span>&nbsp;&nbsp;
  453. {/block:CurrentPage}
  454. {block:JumpPage}
  455. <a class="jump_page" href="{URL}">
  456. {PageNumber}
  457. </a>&nbsp;&nbsp;
  458. {/block:JumpPage}
  459. {/block:JumpPagination}
  460. {block:NextPage}
  461. <a href="{NextPage}" id="next">&rarr;</a>
  462. {/block:NextPage}
  463. </div>
  464. {/block:Pagination}</center>
  465. </div>
  466.  
  467. <div id="all">
  468. {block:Posts}<div id="posts">
  469.  
  470. {block:Text}<h2>{block:Title}{Title}{/block:Title}</h2>{Body}{/block:Text}
  471.  
  472. {block:Photo}{LinkOpenTag}<img src="{PhotoURL-250}">{LinkCloseTag}{block:PermalinkPage}{block:Caption}{Caption}{/block:Caption}{/block:PermalinkPage}{/block:Photo}
  473.  
  474. {block:Link}<h2><a href="{URL}"{Target}>{Name}→</a></h2>{block:Description}{Description}{/block:Description}{/block:Link}
  475.  
  476. {block:Photoset}{Photoset-250}{block:PermalinkPage}{block:Caption}{Caption}{/block:Caption}{/block:PermalinkPage}{/block:Photoset}
  477.  
  478. {block:Quote}{Quote}{/block:Quote}
  479.  
  480. {block:Audio}
  481. <div id="audiopost">
  482. <div id="audio">{AudioPlayerWhite}</div>
  483. {block:AlbumArt}
  484. <div id="album">
  485. <img src="{AlbumArtURL}" width="250px">
  486. </div>
  487. {/block:AlbumArt}
  488. <div id="audioinfo">
  489. <br>{block:TrackName}<b>Title:</b> {TrackName}{/block:TrackName}
  490. <br>{block:Artist}<b>Artist:</b> {Artist}{/block:Artist}
  491. <br><b>Played:</b> {PlayCount} times
  492. </div>
  493. <br>{block:PermalinkPage}{block:Caption}<div id="caption">{Caption}</div>{/block:Caption}{/block:PermalinkPage}
  494. </div>
  495. {/block:Audio}
  496.  
  497. {block:Video}{Video-500}{block:PermalinkPage}{block:Caption}{Caption}{/block:Caption}{/block:PermalinkPage}{/block:Video}
  498.  
  499. {block:Chat}{block:Title}<h1>{Title}</h1>{/block:Title}{block:Lines}{block:Label}<b>{Label}</b>{/block:Label} {Line}<br>{/block:Lines}{/block:Chat}
  500.  
  501.  
  502. {block:Answer}
  503. <img src="{AskerPortraitURL-48}" width="40px" align="left" class="askborder"><div class="bubble"><span></span>{Asker} asked: {Question}&nbsp;</div>{Answer}
  504. {/block:Answer}
  505.  
  506. <div id="details">
  507. <br><a href="/day/{Year}/{MonthNumberWithZero}/{DayOfMonthWithZero}">{DayOfMonthWithZero}.{MonthNumberWithZero}.{Year}</a> // <a href="{Permalink}">{12Hour}:{Minutes} </a> {block:RebloggedFrom} via <a href="{ReblogParentURL}">{ReblogParentName}</a>{/block:RebloggedFrom} {block:ContentSource} <a href="{SourceURL}">© {SourceLink}</a> {/block:ContentSource} // <a href="{Permalink}">{NoteCountWithLabel}</a> (<div class="my-like" data-reblog="{ReblogURL}" data-id="{PostID}" title="Like">like</div>/<a href="{ReblogURL}">reblog</a>)<br>
  508. {block:HasTags}<div id="tags">tagged as:{block:Tags} #<a href="{TagURL}">{Tag}</a> {/block:Tags}</div>{/block:HasTags}</div></div>
  509. {/block:Posts}
  510. {block:PostNotes}<div id="notes">{PostNotes}</div>{/block:PostNotes}
  511. {/block:Posts}</div></div>
  512.  
  513.  
  514. <div id="cred"><a href="http://seeroflights.tumblr.com/">seeroflights<font color="red">&hearts;</font></a></center></div>
  515.  
  516.  
  517. </body></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!