Advertisement
ammetrine

Black Onyx Theme by Ammetrine

Dec 18th, 2015
213
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 15.87 KB | None | 0 0
  1. <!DOCTYPE html>
  2. <head>
  3. <link href='https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300' rel='stylesheet' type='text/css'>
  4. <script type="text/javascript"
  5. src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
  6. <script>
  7. $(document).ready(function() {
  8. //
  9. $('a.poplight[href^=#]').click(function() {
  10. var popID = $(this).attr('rel'); //Get Popup Name
  11. var popURL = $(this).attr('href'); //Get Popup href to define size
  12. var query= popURL.split('?');
  13. var dim= query[1].split('&');
  14. var popWidth = dim[0].split('=')[1]; //Gets the first query string value
  15. $('#' + popID).fadeIn().css({ 'width': Number( popWidth ) }).prepend('<a href="#" class="close"></a>');
  16. var popMargTop = ($('#' + popID).height() + 80) / 2;
  17. var popMargLeft = ($('#' + popID).width() + 80) / 2;
  18. //Apply Margin to Popup
  19. $('#' + popID).css({
  20. 'margin-top' : -popMargTop,
  21. 'margin-left' : -popMargLeft
  22. });
  23. $('body').append('<div id="fade"></div>');
  24. $('#fade').css({'filter' : 'alpha(opacity=80)'}).fadeIn(); //Fade in the fade layer - .css({'filter' : 'alpha(opacity=80)'})
  25. return false;
  26. });
  27. $('a.close, #fade').live('click', function() {
  28. $('#fade , .popup_block').fadeOut(function() {
  29. $('#fade, a.close').remove(); //fade them both out
  30. });
  31. return false;
  32. });
  33. });
  34. </script>
  35.  
  36.  
  37.  
  38.  
  39. <title>{Title}</title>
  40.  
  41. <link rel="shortcut icon" href="{Favicon}">
  42. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  43. {block:Description}<meta name="description" content="{MetaDescription}" />{/block:Description}
  44.  
  45.  
  46. <meta name="image:Background" content=""/>
  47. <meta name="color:Background" content="#ffffff"/>
  48. <meta name="color:Blog Title" content="#000000"/>
  49. <meta name="color:Description" content="#000000" />
  50. <meta name="color:Text" content="#000000"/>
  51. <meta name="color:Link" content="#000000"/>
  52. <meta name="color:Link Hover" content="#90D1D4"/>
  53. <meta name="color:Scrollbar" content="#90D1D4"/>
  54. <meta name="color:Sidebar Border" content="#00a0000"/>
  55. <meta name="color:Post Border" content="#000000"/>
  56. <meta name="color:Perma BG" content="#000000"/>
  57. <meta name="color:Perma Border" content="#ffffff"/>
  58. <meta name="color:Perma Text" content="#ffffff"/>
  59. <meta name="color:Perma Text Hover" content="#90D1D4"/>
  60.  
  61. <meta name="if:Show Custom Link 1" content="1"/>
  62. <meta name="if:Show Custom Link 2" content="1"/>
  63. <meta name="if:Show Custom Link 3" content="1"/>
  64.  
  65. <meta name="text:SBquote" content="--- quote here ----" />
  66. <meta name="text:Link 1 URL" content="" />
  67. <meta name="text:Link 1 Title" content="" />
  68. <meta name="text:Link 2 URL" content="" />
  69. <meta name="text:Link 2 Title" content="" />
  70. <meta name="text:Link 3 URL" content="" />
  71. <meta name="text:Link 3 Title" content="" />
  72.  
  73.  
  74.  
  75. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
  76.  
  77.  
  78. <script src="http://static.tumblr.com/rzl30kg/eAxm7a751/jquery.style-my-tooltips.js"></script>
  79. <script>
  80. (function($){
  81. $(document).ready(function(){
  82. $("[title]").style_my_tooltips({
  83. tip_follows_cursor:true,
  84. tip_delay_time:0,
  85. tip_fade_speed:0
  86. }
  87. );
  88. });
  89. })(jQuery);
  90. </script>
  91.  
  92.  
  93. <link href='http://fonts.googleapis.com/css?family=Lato' rel='stylesheet' type='text/css'>
  94.  
  95.  
  96. <style type="text/css">
  97.  
  98. ::-webkit-scrollbar-thumb{
  99. background-color:{color:scrollbar};
  100. border:1px solid {color:background};
  101. height:6px;
  102. }
  103.  
  104. ::-webkit-scrollbar {
  105. height:6px;
  106. width:4px;
  107. background-color:{color:background};
  108. }
  109.  
  110. #s-m-t-tooltip{
  111. position:absolute;
  112. margin-top: 15px;
  113. z-index:9999;
  114. background:{color:background};
  115. }
  116.  
  117.  
  118. body {
  119. background:{color:Background};
  120. color:{color:text};
  121. font-family: 'Open Sans Condensed', sans-serif;
  122. font-size:14px;
  123. text-align:justify;
  124. margin:0;
  125. line-height:16px;
  126.  
  127.  
  128. background-color:{color:Background};
  129. background-image:url('{image:background}');
  130. background-attachment:fixed;
  131.  
  132. }
  133.  
  134.  
  135. a {
  136. color:{color:link};
  137. text-decoration:none;
  138. -webkit-transition: all 0.2s ease-in-out;
  139. -moz-transition: all 0.2s ease-in-out;
  140. -o-transition: all 0.2s ease-in-out;
  141. }
  142.  
  143.  
  144. #sidebar {
  145. border:solid 1px {color:sidebar border};
  146. text-align:left;
  147. position:fixed;
  148. left:85px;
  149. top:80px;
  150. width:240px;
  151. padding:7px;
  152. background:#fff;
  153. }
  154.  
  155.  
  156. #blogt {
  157. font-size:26px;
  158. text-align:center;
  159. font-family: 'Open Sans Condensed', sans-serif;
  160. text-transform:uppercase;
  161. padding-bottom:20px;
  162. color:{color:Blog Title};
  163. }
  164.  
  165.  
  166. .navlinks {
  167. border-top:solid 1px {color:sidebar border};
  168. padding-top:10px;
  169. line-height:16px;
  170. text-transform:lowercase;
  171. position:relative;
  172. font-family: 'Open Sans Condensed', sans-serif;
  173. font-size:14px;
  174. text-align:center;
  175. }
  176.  
  177.  
  178. .navlinks a {
  179. margin-right:5px;
  180. margin-bottom:5px;
  181. display:inline-block;
  182. }
  183.  
  184.  
  185. .navlinks a:hover {
  186. color:{color:Link Hover};
  187. background:#fff;
  188. -webkit-transition:opacity 0.3s ease-in-out; opacity: 0.5;
  189. -webkit-transition:all 0.3s ease-in-out;
  190. -moz-transition:all 0.3s ease-in-out;
  191. transition:all 0.3s ease-in-out;
  192. }
  193.  
  194.  
  195. #description {
  196. padding-bottom:20px;
  197. color:{color:Description};
  198. font-family: 'Open Sans Condensed', sans-serif;
  199. font-size:15px;
  200. text-align:center;
  201. }
  202.  
  203. #sbquote {
  204. font-family: 'Open Sans Condensed', sans-serif;
  205. font-size:15px;
  206. text-align:center;
  207. padding-bottom:10px;
  208. font-style:italic;
  209. }
  210.  
  211.  
  212. #con {
  213. left:50%;
  214. margin-left:-250px;
  215. position:absolute;
  216. }
  217.  
  218.  
  219. #entries {
  220. width:650px;
  221. margin-top:50px;
  222. margin-left:-10px;
  223.  
  224. {block:PermalinkPage}
  225. width:500px;
  226. {/block:PermalinkPage}
  227. }
  228.  
  229.  
  230. .posts {
  231. border:solid 1px {color:post border};
  232. width:250px;
  233. float:left;
  234. margin-right:40px;
  235. padding:10px 10px 30px 10px;
  236. {block:IndexPage}
  237. margin-bottom:40px;
  238. {/block:IndexPage}
  239.  
  240. {block:PermalinkPage}
  241. width:500px;
  242. margin-bottom:30px;
  243. position:relative;
  244. float:left;
  245. {/block:PermalinkPage}
  246. }
  247.  
  248.  
  249. .posts img {
  250. max-width:250px;
  251. }
  252.  
  253. .posts img, .posts li, .posts blockquote {max-width: 100%;}
  254. .caption {width:100%;
  255. margin-top:10px;
  256.  
  257. }
  258.  
  259. #title {
  260. font-size:12px;
  261. line-height:18px;
  262. font-weight:bold;
  263. margin-bottom:10px;
  264. text-transform:uppercase;
  265. text-align:left;
  266. }
  267.  
  268.  
  269. .text {
  270. font-size:11px;
  271. font-family: 'Open Sans Condensed', sans-serif;
  272. }
  273.  
  274.  
  275. .text a:hover {
  276. text-decoration:underline;
  277. -webkit-transition:opacity 0.3s ease-in-out; opacity: 0.5;
  278. -webkit-transition:all 0.3s ease-in-out;
  279. -moz-transition:all 0.3s ease-in-out;
  280. transition:all 0.3s ease-in-out;
  281. }
  282.  
  283.  
  284. #quote{
  285. text-align:left;
  286. font-size:14px;
  287. line-height:18px;
  288. font-weight:bold;
  289. }
  290.  
  291.  
  292. #quote a:hover {
  293. text-decoration:underline;
  294. -webkit-transition:opacity 0.3s ease-in-out; opacity: 0.5;
  295. -webkit-transition:all 0.3s ease-in-out;
  296. -moz-transition:all 0.3s ease-in-out;
  297. transition:all 0.3s ease-in-out;
  298. }
  299.  
  300.  
  301. #quotesource {
  302. margin-top:15px;
  303. margin-left:15px;
  304.  
  305. }
  306.  
  307.  
  308. .player {
  309. width:25px;
  310. height:25px;
  311. overflow:hidden;
  312. position:absolute;
  313. margin-left:12px;
  314. margin-top:12px;
  315. background:white;
  316. }
  317.  
  318.  
  319. .audioinfo {
  320. margin-left:70px;
  321. }
  322.  
  323.  
  324. .albumart {
  325. position:absolute;
  326. {block:IndexPage}
  327. width:60px;
  328. height:60px;
  329. {/block:IndexPage}
  330. {block:PermalinkPage}
  331. width:60px;
  332. height:60px;
  333. {/block:PermalinkPage}
  334. }
  335.  
  336.  
  337. .albumart img {
  338. float:left;
  339. {block:IndexPage}
  340. width:60px;
  341. height:60px;
  342. {/block:IndexPage}
  343. {block:PermalinkPage}
  344. width:60px;
  345. height:60px;
  346. {/block:PermalinkPage}
  347. }
  348.  
  349.  
  350. .question {
  351. margin-bottom:10px;
  352. border-bottom:solid 1px {color:post border};
  353. }
  354.  
  355. .asker {
  356. text-align:right;
  357. font-weight:bold;
  358. }
  359.  
  360.  
  361. .answer {
  362. margin-top:10px;
  363. }
  364.  
  365.  
  366. .chat ol {
  367. padding:0;
  368. list-style:none;
  369. }
  370.  
  371.  
  372. .line {
  373. padding:5px 0;
  374. }
  375.  
  376.  
  377. .label {
  378. font-weight:bold;
  379. }
  380.  
  381.  
  382. #permalink {
  383. margin:5px;
  384. font-size:11px;
  385. text-align:center;
  386. padding:5px;
  387. opacity:0;
  388. position:absolute;
  389. bottom:-4px;
  390. left:3px;
  391. width:241px;
  392. background:{color:perma BG};
  393. border:solid 1px {color:perma border};
  394. }
  395.  
  396. .posts:hover #permalink {
  397. opacity:0.5;
  398. }
  399.  
  400.  
  401. #permalink a {
  402. margin-left:0px;
  403. color:{color:perma text};
  404. padding:3px;
  405. }
  406.  
  407.  
  408. #permalink a:hover {
  409. padding:3px;
  410. color:{color:perma text hover};
  411. -webkit-transition:opacity 0.3s ease-in-out; opacity: 0.5;
  412. -webkit-transition:all 0.3s ease-in-out;
  413. -moz-transition:all 0.3s ease-in-out;
  414. transition:all 0.3s ease-in-out;
  415. }
  416.  
  417. .pagination {
  418. display:none;
  419. }
  420.  
  421.  
  422. .popup_block{
  423. display:none;
  424. background:#fff;
  425. padding:20px;
  426. border:1px solid #eee; /* if you want a solid white pop-up, delete this */
  427. float:left;
  428. position:fixed;
  429. top:50%;left:50%;
  430. z-index: 99999;
  431. -webkit-box-shadow: 0px 0px 20px #000; /* delete for solid white */
  432. -moz-box-shadow: 0px 0px 20px #000; /* delete for solid white */
  433. box-shadow: 0px 0px 20px #000; /* delete for solid white */
  434. }
  435.  
  436. *html #fade {position: absolute;}
  437. *html .popup_block {position: absolute;}
  438. #fade {
  439. display:none;
  440. position:fixed;
  441. left:0px;
  442. top:0px;
  443. width:100%;
  444. height:100%;
  445. z-index:9999;
  446. background:#000; /* change to #fff for solid white */
  447. opacity:0.5; /* change to opacity:1; */
  448. }
  449.  
  450.  
  451. .notes {
  452. padding-left:20px;
  453. font-size:11px;
  454. }
  455.  
  456. .pagination {
  457. display: none;
  458. }
  459.  
  460.  
  461. #credit {
  462. position:fixed;
  463. right:20px;
  464. z-index:9999;
  465. bottom:20px;
  466. }
  467.  
  468.  
  469. {CustomCSS}
  470. </style>
  471.  
  472. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
  473.  
  474. <script src="http://static.tumblr.com/6hsqxdt/vmwm2rb4g/infinitescrolling.js"></script><script src="http://static.tumblr.com/6hsqxdt/QBym35odk/jquery.masonry.js"></script>
  475.  
  476. <script>
  477. $(function(){
  478. var $container = $('#entries');
  479. $container.imagesLoaded(function(){
  480. $container.masonry({
  481. itemSelector: '.posts',
  482. });
  483. });
  484. $container.infinitescroll({
  485. itemSelector : ".posts",
  486. navSelector : "div.pagination",
  487. nextSelector : ".pagination a#next",
  488. loadingImg : "",
  489. loadingText : "<em></em>",
  490. bufferPx : 10000,
  491. extraScrollPx: 12000,
  492. },
  493. // trigger Masonry as a callback
  494. function( newElements ) {
  495. var $newElems = $( newElements ).css({ opacity: 0 });
  496. // ensure that images load before adding to masonry layout
  497. $newElems.imagesLoaded(function(){
  498. $newElems.animate({ opacity: 1 });
  499. $container.masonry( 'appended', $newElems, true );
  500. });
  501. }
  502. );
  503. });
  504. </script>
  505.  
  506.  
  507. </head>
  508.  
  509. <body>
  510.  
  511. <div id="con">
  512.  
  513. <div id="credit"><a href="http://ammetrine.tumblr.com/" target="_blank" title="ammetrine's themes"><img src="http://38.media.tumblr.com/tumblr_lu2de5CqUh1qfoi4t.gif"></a></div>
  514.  
  515. <div id="sidebar">
  516. <div id="description">{Description}</div>
  517. <div id="blogt">{Title}</div>
  518. <div id="sbquote">{text:SBquote}</div>
  519.  
  520. <div class="navlinks">
  521. <a href="/">home</a>
  522. <a href="#?w=400" rel="box1" class="poplight">inbox</a>
  523. <a href="http://ammetrine.tumblr.com" target="_blank">theme</a>
  524. <br>
  525. {block:ifShowCustomlink1}<a href="{text:Link 1 URL}">{text:Link 1 Title}</a>
  526. {/block:ifShowCustomLink1}
  527. {block:ifShowCustomlink2}<a href="{text:Link 2 URL}" >{text:Link 2 Title}</a>{/block:ifShowCustomLink2}
  528. {block:ifShowCustomlink3}<a href="{text:Link 3 URL}">{text:Link 3 Title}</a>{/block:ifShowCustomLink3}
  529.  
  530. </div>
  531.  
  532. </div>
  533.  
  534.  
  535. <div id="entries">
  536.  
  537. {block:Posts}
  538.  
  539. <div class="posts">
  540.  
  541. {block:Quote}
  542. <div class="quote">
  543. '<strong><i>{Quote}</i></strong>'
  544. </div>
  545. {block:Source}
  546. <br><div class="quotesource">β€” {Source}</div>
  547. {/block:Source}
  548.  
  549. {block:IndexPage}
  550. <div id="permalink">
  551. <a href="{Permalink}" >{NoteCount}</a>
  552. <a href="{ReblogURL}">RBLG</a>
  553. </div>
  554. {/block:IndexPage}
  555. {/block:Quote}
  556.  
  557.  
  558. {block:Text}
  559. {block:Title}
  560. <div id="title">{Title}</div>
  561. {/block:Title}
  562. <div class="text">
  563. {Body}
  564. </div>
  565.  
  566. {block:IndexPage}
  567. <div id="permalink">
  568. <a href="{Permalink}" >{NoteCount}</a>
  569. <a href="{ReblogURL}">RBLG</a>
  570. </div>
  571. {/block:IndexPage}
  572. {/block:Text}
  573.  
  574.  
  575. {block:Link}
  576. <div id="title">
  577. <a href="{URL}">{Name}</a>
  578. </div>
  579. {block:Description}{Description}{/block:Description}
  580.  
  581. {block:IndexPage}
  582. <div id="permalink">
  583. <a href="{Permalink}" >{NoteCount}</a>
  584. <a href="{ReblogURL}">RBLG</a>
  585. </div>
  586. {/block:IndexPage}
  587. {/block:Link}
  588.  
  589.  
  590. {block:Chat}
  591. {block:Title}
  592. <h1>{Title}</h1>
  593. {/block:Title}
  594. <div class="chat">
  595. <ol>{block:Lines}
  596. <li class="line {Alt}">
  597. {block:Label}
  598. <span class="label">
  599. {Label}</span>
  600. {/block:Label}{Line}</li>
  601. {/block:Lines}
  602. </ol>
  603. </div>
  604.  
  605. {block:IndexPage}
  606. <div id="permalink">
  607. <a href="{Permalink}" >{NoteCount}</a>
  608. <a href="{ReblogURL}"</a>
  609. </div>
  610. {/block:IndexPage}
  611. {/block:Chat}
  612.  
  613.  
  614. {block:Photo}
  615. {block:IndexPage}
  616. <a href="{Permalink}"><img src="{PhotoURL-500}" alt="{PhotoAlt}"/></a>
  617.  
  618. <div id="permalink">
  619. <a href="{Permalink}" >{NoteCount}</a>
  620. <a href="{ReblogURL}">RBLG</a>
  621. </div>
  622. {/block:IndexPage}
  623.  
  624. {block:PermalinkPage}
  625. <img src="{PhotoURL-500}" alt="{PhotoAlt}"/>
  626. <br>
  627. {/block:PermalinkPage}
  628. {/block:Photo}
  629.  
  630.  
  631. {block:Photoset}
  632. {block:IndexPage}
  633. {Photoset}
  634.  
  635. <div id="permalink">
  636. <a href="{Permalink}" >{NoteCount}</a>
  637. <a href="{ReblogURL}">RBLG</a>
  638. </div>
  639. {/block:IndexPage}
  640. {block:PermalinkPage}{Photoset-500}{/block:PermalinkPage}
  641. {/block:Photoset}
  642.  
  643.  
  644. {block:Video}
  645. {Video-250}
  646.  
  647. {block:IndexPage}
  648. <div id="permalink">
  649. <a href="{Permalink}" >{NoteCount}</a>
  650. <a href="{ReblogURL}">RBLG</a>
  651. </div>
  652. {/block:IndexPage}
  653. {/block:Video}
  654.  
  655.  
  656. {block:Audio}
  657. {block:AlbumArt}
  658. <div class="albumart">
  659. <img src="{AlbumArtURL}">
  660. </div>
  661. {/block:AlbumArt}
  662. <div class="player">{AudioPlayerWhite}</div>
  663.  
  664. <div class="audioinfo">
  665. Title: {block:TrackName}{TrackName}{/block:TrackName}<br>
  666.  
  667. Artist: {block:Artist}{Artist}{/block:Artist}<br>
  668.  
  669. Plays: {block:PlayCount}{FormattedPlayCount}{/block:PlayCount}
  670.  
  671. {block:IndexPage}
  672. <div id="permalink">
  673. <a href="{Permalink}" >{NoteCount}</a>
  674. <a href="{ReblogURL}">RBLG</a>
  675. </div>
  676. {/block:IndexPage}
  677. </div>
  678. {/block:Audio}
  679.  
  680.  
  681. {block:Answer}
  682. <div class="question">
  683. <div class="asker">{Asker} queried: </div> <br>
  684. <i>{Question}</i>
  685. </div>
  686. <div class="answer"><br><i>{Answer}</i></div>
  687.  
  688. {block:IndexPage}
  689. <div id="permalink">
  690. <a href="{Permalink}" >{NoteCount}</a>
  691. <a href="{ReblogURL}">RBLG</a>
  692. </div>
  693. {/block:IndexPage}
  694. {/block:Answer}
  695.  
  696.  
  697.  
  698. {block:PermalinkPage}
  699. <div class="notes">
  700. {block:Date}{Caption} posted {TimeAgo}{/block:Date}
  701. {block:NoteCount} with {NoteCount} notes {/block:NoteCount}
  702. {block:RebloggedFrom}
  703. via <a href="{ReblogParentURL}">{ReblogParentName}</a>,
  704. {/block:RebloggedFrom}
  705. {block:ContentSource}originally from <a href="{SourceURL}">{SourceTitle} </a>{/block:ContentSource}
  706. <br>{block:hastags}{block:tags}#<a href="/tagged/{Tag}">{Tag}</a> &nbsp;&nbsp; {/block:tags}{/block:hastags}
  707. <br>{PostNotes}
  708. </div>
  709. {/block:PermalinkPage}
  710.  
  711. </div>
  712. {/block:Posts}
  713.  
  714. <div class="pagination">
  715. {block:Pagination}{block:PreviousPage}<a href="{PreviousPage}">previous</a> &middot;{/block:PreviousPage} {block:NextPage}<a href="{NextPage}" id="next">next</a>{/block:NextPage}{/block:Pagination}
  716. </div>
  717.  
  718.  
  719.  
  720. </div>
  721.  
  722. </div>
  723.  
  724. </body>
  725.  
  726. <div id="box1" class="popup_block">
  727. <iframe frameborder="0" height="200" id="ask_form" scrolling="yes" src="http://www.tumblr.com/ask_form/{Name}.tumblr.com" width="100%"></iframe>
  728.  
  729. </div>
  730.  
  731.  
  732. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement