API tools faq
paste
Advertisement
tanaxmercedes

Extremities Theme

tanaxmercedes
Sep 3rd, 2018
1,975
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 16.96 KB | None | 0 0
raw download clone embed print report
  1. <!--
  2.  
  3. Extremities Theme
  4.  
  5.  
  6. Ⓒ𝙒𝙝𝙞𝙢𝙨𝙮𝙏𝙝𝙚𝙢𝙚𝙨
  7. designed and coded by @tanaboo
  8.  
  9.  
  10. release date: 09.12.2018
  11. last update: 09.12.2018
  12.  
  13. -->
  14.  
  15. <!DOCTYPE html>
  16. <head>
  17.  
  18. <title>{Title}</title>
  19. <link rel="shortcut icon" href="{Favicon}">
  20. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  21. <link href="http://static.tumblr.com/wgijwsy/k1Hm9ei8b/normalize.css" rel="stylesheet" type="text/css" />
  22. <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous">
  23.  
  24. <script>
  25. (function($){
  26. $(document).ready(function(){
  27. $("a[title]").style_my_tooltips({
  28. tip_follows_cursor:true,
  29. tip_delay_time:90,
  30. tip_fade_speed:600,
  31. attribute:"title"
  32. });
  33. });
  34. })(jQuery);
  35. </script>
  36.  
  37.  
  38.  
  39. <!-- CUSTOMIZATION OPTIONS -->
  40. <meta name="image:Sidebar" content="">
  41. <meta name="image:Background" content="">
  42.  
  43. <meta name="color:Background" content="#111111">
  44. <meta name="color:Sidebar" content="#222222">
  45. <meta name="color:Text" content="#666666" />
  46. <meta name="color:Post" content="#222222">
  47. <meta name="color:Link" content="#aaaaaa">
  48. <meta name="color:Link Hover" content="#dddddd">
  49. <meta name="color:Highlight" content="#000000">
  50. <meta name="color:Scrollbar" content="#000000">
  51. <meta name="color:Accent" content="#000000">
  52.  
  53. <meta name="if:Sidebar Img" content="0">
  54. <meta name="if:Infinite Scroll" content="0">
  55. <meta name="if:One Columns" content="0">
  56. <meta name="if:Two Columns" content="1">
  57.  
  58. <meta name="select:Text" content="9px">
  59. <meta name="select:Text" content="10px">
  60. <meta name="select:Text" content="11px">
  61. <meta name="select:Text" content="12px">
  62. <meta name="select:Text" content="13px">
  63. <meta name="select:Text" content="14px">
  64.  
  65. <meta name="select:Font" content="trebuchet ms">
  66. <meta name="select:Font" content="lucida console">
  67. <meta name="select:Font" content="times new roman">
  68. <meta name="select:Font" content="georgia">
  69. <meta name="select:Font" content="verdana">
  70. <meta name="select:Font" content="courier new">
  71. <meta name="select:Font" content="arial">
  72. <meta name="select:Font" content="calibri">
  73. <meta name="select:Font" content="consolas">
  74. <meta name="select:Font" content="ms gothic">
  75.  
  76. <meta name="text:Link One" content="one" >
  77. <meta name="text:Link One URL" content="/">
  78. <meta name="text:Link One Title" content="title">
  79. <meta name="text:Link Two" content="two" >
  80. <meta name="text:Link Two URL" content="/">
  81. <meta name="text:Link Two Title" content="title">
  82. <meta name="text:Link Three" content="three" >
  83. <meta name="text:Link Three URL" content="/">
  84. <meta name="text:Link Three Title" content="title">
  85. <meta name="text:Link Four" content="four" >
  86. <meta name="text:Link Four URL" content="/">
  87. <meta name="text:Link Four Title" content="title">
  88.  
  89. <!-- CSS STYLING -->
  90. <style type="text/css">
  91.  
  92. /* TUMBLR CONTROLS */
  93. iframe.tmblr-iframe {
  94. position:fixed;
  95. z-index:99999999999999!important;
  96. top:-10px!important;
  97. right:-60px!important;
  98. opacity:0.4;
  99. transform: scale(0.5, 0.5);
  100. -ms-transform: scale(0.5, 0.5);
  101. -webkit-transform: scale(0.5, 0.5);
  102. }
  103.  
  104. iframe.tmblr-iframe:hover {
  105. opacity:0.6!important;}
  106.  
  107. /* SCROLLBAR */
  108. ::-webkit-scrollbar {
  109. width: 5px;
  110. border-radius:0px;
  111. background: {color:Background}; }
  112.  
  113. ::-webkit-scrollbar-thumb {
  114. background: #333;
  115. border-top:8px solid black;
  116. border-bottom:8px solid black;
  117. }
  118.  
  119. /* TEXT HIGHLIGHT */
  120. ::selection {
  121. background: {color:Highlight};
  122. }
  123. ::-moz-selection {
  124. background: {color:Highlight};
  125. }
  126.  
  127. /* TOOLTIP STYLING */
  128. .tooltip{
  129. display: inline;
  130. position: relative;
  131. }
  132. #s-m-t-tooltip {
  133. max-width:300px; /*how big the tooltip can be at most*/
  134. border-radius: 0px; /*change your border radius*/
  135. padding:3px 4px 5px 4px; /*padding inside tooltip*/
  136. margin:20px 7px -2px 20px; /*distance from word*/
  137. background-color:#ffffff; /*background color*/
  138. border:1px solid #E0E0E0; /*border info*/
  139. font-family:calibri; /*tooltip font*/
  140. font-size:9px; /*tooltip font size*/
  141. letter-spacing:2px; /*tooltip letter spacing*/
  142. text-transform:uppercase; /*makes the tooltip title uppercase*/
  143. color:#000; /*tooltip font color*/
  144. z-index:999999999999999999999999999999999999;
  145. }
  146.  
  147. @font-face { font-family: "tinytots"; src: url('https://dl.dropboxusercontent.com/s/y0pfz7ndq83n7j7/04b_03_.ttf?dl=1'); format(“truetype”);}
  148.  
  149. body {
  150. background-color: {color:background};
  151. background-image: url({image:background});
  152. background-attachment:fixed;
  153. background-repeat:repeat;
  154. background-position:center;
  155. font-family:'tinytots';
  156. /*
  157. font-family: {select:Font};*/
  158. font-size: 10px;
  159. color: {color:text};
  160. word-wrap:break-word;
  161. }
  162.  
  163. /* LINKS */
  164. a{
  165. color:{color:Link};
  166. text-decoration:none;
  167. }
  168.  
  169. a:hover{
  170. color:{color:Link Hover};
  171. }
  172.  
  173. blockquote {
  174. padding-left:5px;
  175. border-left:1px dotted {color:Accent};
  176. margin-left:3px;
  177. margin-bottom:5px;
  178. }
  179.  
  180. iframe, img, embed, object, video {
  181. max-width: 100%;
  182. }
  183.  
  184. img {
  185. height: auto;
  186. width: auto;
  187. }
  188.  
  189. #banner {
  190. position: fixed;
  191. background-image:url('https://static.tumblr.com/km932n4/6hKpebaej/webp.net-resizeimage.png');
  192. repeat:repeat-x;
  193. left:0;
  194. width:100%;
  195. top: 0px;
  196. height:60px;
  197. z-index: 1;
  198. opacity:1;
  199. }
  200.  
  201. #sidebar{
  202. position:fixed;
  203. z-index:999999;
  204. padding:12px;
  205. background:{color:Sidebar};
  206. background-image:url('https://www.toptal.com/designers/subtlepatterns/patterns/dark-triangles.png');
  207. top:200px;
  208. width:200px;
  209. height:200px;
  210. left: 50%;
  211. -webkit-box-shadow: inset 0px 0px 10px 5px rgba(0,0,0,0.75);
  212. -moz-box-shadow: inset 0px 0px 10px 5px rgba(0,0,0,0.75);
  213. box-shadow: inset 0px 0px 10px 5px rgba(0,0,0,0.75);
  214. }
  215.  
  216. #sidebarimg{
  217. width:40%;
  218. margin-bottom:12px;
  219. border:2px solid #111;
  220. -webkit-filter: grayscale(100%);
  221. -webkit-transition: all 0.9s ease-in-out;
  222. -moz-transition: all 0.9s ease-in-out;
  223. -o-transition: all 0.9s ease-in-out;
  224. -ms-transition: all 0.9s ease-in-out;
  225. transition: all 0.9s ease-in-out;
  226. }
  227.  
  228. #sidebarimg:hover{
  229. -webkit-filter: grayscale(25%);
  230. -webkit-transition: all 0.9s ease-in-out;
  231. -moz-transition: all 0.9s ease-in-out;
  232. -o-transition: all 0.9s ease-in-out;
  233. -ms-transition: all 0.9s ease-in-out;
  234. transition: all 0.9s ease-in-out;
  235. }
  236.  
  237. .desc{
  238. height:55px;
  239. text-align:justify;
  240. line-height:10px;
  241. }
  242.  
  243. .desc::first-letter{
  244. font-family:'dark_roast';
  245. font-size:20px;
  246. line-height:10px;
  247. }
  248.  
  249. #links {
  250. margin-top:5px;
  251. text-align:center;
  252. line-height:3px;
  253. }
  254.  
  255. #links a{
  256. font-style:italic;
  257. text-transform:uppercase;
  258. -webkit-transition: all 0.3s ease-in-out;
  259. -moz-transition: all 0.3s ease-in-out;
  260. -o-transition: all 0.3s ease-in-out;
  261. -ms-transition: all 0.3s ease-in-out;
  262. transition: all 0.3s ease-in-out;
  263. }
  264.  
  265. #links a:hover{
  266. letter-spacing:1px;
  267. color:transparent;
  268. -webkit-transition: all 0.3s ease-in-out;
  269. -moz-transition: all 0.3s ease-in-out;
  270. -o-transition: all 0.3s ease-in-out;
  271. -ms-transition: all 0.3s ease-in-out;
  272. transition: all 0.3s ease-in-out;
  273. text-shadow: -4px 4px rgba(179,179,179,.4), -3px 3px rgba(153,153,153,.2), -2px 2px rgba(179,179,179,.2), -1px 1px rgba(179,179,179,.2), 0px 0px rgba(128,128,128,.5), 1px -1px rgba(77,77,77,.6), 2px -2px rgba(77,77,77,.7), 3px -3px rgba(82,82,82,.8), 4px -4px rgba(77,77,77,.9), 5px -5px rgba(77,77,77,1);
  274. }
  275.  
  276. /* POSTS */
  277. #content {
  278. left:5%;
  279. margin-top:80px;
  280. width: 600px;
  281. }
  282.  
  283. article {
  284. background: {color:Post};
  285. margin: 30px;
  286. padding: 12px;
  287. border-radius:5px;
  288. width: 400px;
  289. -webkit-box-shadow: inset 0px 0px 10px 5px rgba(0,0,0,0.75);
  290. -moz-box-shadow: inset 0px 0px 10px 5px rgba(0,0,0,0.75);
  291. box-shadow: inset 0px 0px 10px 5px rgba(0,0,0,0.75);
  292. -webkit-filter: grayscale(100%);
  293. -webkit-transition: all 0.9s ease-in-out;
  294. -moz-transition: all 0.9s ease-in-out;
  295. -o-transition: all 0.9s ease-in-out;
  296. -ms-transition: all 0.9s ease-in-out;
  297. transition: all 0.9s ease-in-out;
  298. }
  299. article img{
  300. border-radius:5px;
  301. }
  302.  
  303. article:hover{
  304. -webkit-filter: grayscale(25%);
  305. z-index: -9999999999999999999999999px;
  306. -webkit-transition: all 0.9s ease-in-out;
  307. -moz-transition: all 0.9s ease-in-out;
  308. -o-transition: all 0.9s ease-in-out;
  309. -ms-transition: all 0.9s ease-in-out;
  310. transition: all 0.9s ease-in-out;
  311. }
  312.  
  313. .chat span {
  314. float: left;
  315. margin-right: 10px;
  316. }
  317. /* PERMALINKS */
  318. #perma {
  319. text-align: right;
  320. position: relative;
  321. margin-top:2px;
  322. padding-top: 4px;
  323. font-family: {select:Font};
  324. padding:2px;
  325. font-size: 10px;
  326. padding-left:3px;
  327. font-style:italic
  328. {block:PermalinkPage}
  329. display:none;
  330. {/block:PermalinkPage}
  331. }
  332.  
  333. #perma a{
  334. text-decoration:none;
  335. }
  336. @font-face { font-family: "dark_roast"; src: url('https://dl.dropboxusercontent.com/s/c7ahqyqieyz0yvo/dark%20roast.ttf?dl=1'); format(“truetype”);}
  337.  
  338. #title{
  339. position:fixed;
  340. font-family:'dark_roast';
  341. font-weight:normal;
  342. font-size:40px;
  343. margin-top:60px;
  344. width:auto;
  345. text-align:left;
  346. margin-left:50%;
  347. padding:6px;
  348. text-shadow: 3px 2px 3px #000;
  349. }
  350.  
  351. .quote{
  352. font-family:'dark_roast';
  353. font-weight:normal;
  354. font-size:28px;
  355. font-style:italic;
  356. line-height:22px;
  357. padding-top:10px;
  358. margin:0 0 10px 0;
  359. }
  360.  
  361. .tumblr_audio_player {
  362. width: 400px;
  363. height: 80px;
  364. margin-bottom:12px;
  365. overflow: hidden;
  366. position: relative;
  367. z-index: 1000;
  368. border-radius:5px;
  369. -webkit-filter: brightness(25%);
  370. filter: brightness(25%);
  371. background-color:#222;
  372. }
  373.  
  374. /* PAGE NAVIGATION */
  375. {block:ifnotinfinitescroll}
  376. .pagination {
  377. float:right;
  378. text-align: center;
  379. padding: 3px 0;
  380. }
  381.  
  382. .pagination a {
  383. color:;
  384. }
  385.  
  386. .pagination a:hover {
  387. color:;
  388. }
  389. {/block:ifnotinfinitescroll}
  390.  
  391. {block:ifinfinitescroll}
  392. .pagi {
  393. display:none;
  394. }
  395. {/block:ifinfinitescroll}
  396.  
  397. /* POST NOTES */
  398. .notes{
  399. margin:10px;
  400. padding-left:35px;
  401. height:60px;
  402. background:#333;
  403. overflow-y:scroll;
  404. }
  405.  
  406. .notes .note img{
  407. display:;
  408. }
  409.  
  410.  
  411. .notes .note{
  412. margin-top:10px;
  413. }
  414.  
  415.  
  416. </style>
  417. </head>
  418. <body>
  419.  
  420. <div id="banner"></div>
  421.  
  422. <div style="position:fixed; top:113px; left:40%;">
  423. <img src="http://4.bp.blogspot.com/-KaLKhF0KGXU/T3ElEp73KYI/AAAAAAAAAXQ/7-MZsxmXBDE/s1600/flower+edge+square.png" style="margin-top:80px; margin-left:129px; width:240px; height:239px;"></div>
  424.  
  425. <div style="position:fixed; z-index:9999999999; top:100px; left:40%;">
  426. <img src="https://78.media.tumblr.com/2e9e961a6bbf27805e6c7584c11b8494/tumblr_o22jzgsHGr1twgsxao1_1280.png" style="-webkit-filter: brightness(0%); transform: rotate(20deg); margin-top:80px; margin-left:190px; width:200px;"></div>
  427.  
  428. <div id="title">{Title}</div>
  429.  
  430. <!-- SIDEBAR INFO -->
  431. <div id="sidebar">
  432. <div id="sidebarimg"><img src="{image:Sidebar}"></div>
  433.  
  434. <div class="desc">{Description}</div>
  435. <br><br>
  436. <div id="links">
  437. <a href="{text:Link One url}" title="{text:Link One Title}">{text:Link One}</a>
  438. &mdash;
  439. <a href="{text:Link Two url}" title="{text:Link Two Title}">{text:Link Two}</a>
  440. &mdash;
  441. <a href="{text:Link Three url}" title="{text:Link Three Title}">{text:Link Three}</a>
  442. &mdash;
  443. <a href="{text:Link Four url}" title="{text:Link Four Title}">{text:Link Four}</a>
  444. </div>
  445.  
  446. {block:Pagination}
  447. <div class="pagination">
  448. <div class="pagi">
  449. {block:PreviousPage}<a href="{PreviousPage}">
  450. <i class="fas fa-chevron-left"></i>
  451. </a>{/block:PreviousPage}
  452. {block:NextPage}<a href="{NextPage}">
  453. <i class="fas fa-chevron-right"></i>
  454. </a>{/block:NextPage}
  455. </div>
  456. </div>
  457. {/block:Pagination}
  458. </div>
  459.  
  460. <nav>
  461. <ul>
  462. {block:HasPages}
  463. {block:Pages}
  464. <li> <a href="{URL}">{Label}</a></li>
  465. {/block:Pages}
  466. {/block:HasPages}
  467. </ul>
  468. </nav>
  469.  
  470. <div id="content">
  471. {block:Posts}
  472. <article>
  473. {block:Text}
  474. <div class="text">
  475. {block:Title}
  476. <h1 class="title">
  477. <a href="{Permalink}">{Title}</a>
  478. </h1>{/block:Title}
  479. {Body}
  480. {/block:Text}
  481.  
  482. {block:Photo}
  483. <div class="photo">
  484. {LinkOpenTag}<img src="{PhotoURL-400}" alt="{PhotoAlt}" />{LinkCloseTag}
  485.  
  486. {/block:Photo}
  487.  
  488. {block:Photoset}
  489. <div class="photoset">
  490. {block:IndexPage}
  491. {Photoset-400}
  492. {/block:IndexPage}
  493. {block:PermalinkPage}
  494. {Photoset-400}
  495. {/block:PermalinkPage}
  496. </div>
  497. {/block:Photoset}
  498.  
  499. {block:Quote}
  500. <div class="quote"><center>
  501. ❝{Quote}❞
  502. </center>
  503. </div>
  504. {block:Source}<cite><center> &mdash;{Source}</center></cite>{/block:Source}
  505. {/block:Quote}
  506.  
  507. {block:Link}
  508. <div class="link">
  509. <h1 class="title"><a href="{URL}">{Name}</a></h1>
  510. {block:Description}{Description}{/block:Description}
  511. {/block:Link}
  512.  
  513. {block:Chat}
  514. <div class="chat">
  515. <ul>
  516. {block:Lines}
  517. {block:Label}<b>{Label}</b>{/block:Label} {Line}<br>
  518. {/block:Lines}
  519. </ul>
  520. </div>
  521. {/block:Chat}
  522.  
  523. {block:Audio}
  524. <div class="audio">
  525. {block:AlbumArt}
  526. <img src="{AlbumArtURL}" width="100px" height="100px"/>
  527. {/block:AlbumArt}
  528. {AudioPlayerBlack}
  529. {block:AudioEmbed}{AudioEmbed}{/block:AudioEmbed}
  530. {block:TrackName}<b>track:</b> {TrackName}{/block:TrackName}</span><br>
  531. {block:Artist}<b>artist:</b> {Artist}{/block:Artist}
  532.  
  533. {/block:Audio}
  534.  
  535. {block:Video}
  536. <div class="video">
  537. <div class="video-player">{Video-400}</div>
  538. {/block:Video}
  539.  
  540. {block:Answer}
  541. <div class="answer">
  542. {Asker} asked: <b>{Question}</b>
  543. {Answer}
  544. {/block:Answer}
  545. </div>
  546.  
  547. <div id="perma">
  548. <a href="/" title="{TimeAgo}">{DayOfMonth}</a> / <a href="{Permalink}">{NoteCount}</a> /
  549. {block:RebloggedFrom} <a href="{ReblogRootURL}">SRC</a>{/block:RebloggedFrom}
  550. {block:HasTags}
  551. <div id="tags">
  552. {block:Tags} #<a href="{TagURL}">{Tag}</a>{/block:Tags}</div>
  553. {/block:HasTags}
  554. </div>
  555.  
  556. {block:PermalinkPage}
  557. {block:Date}{Month} {DayOfMonth}{DayOfMonthSuffix}, {Year}{/block:Date}
  558. {block:NoteCount} - {NoteCountWithLabel}{/block:NoteCount}
  559. {block:HasTags}</br>tagged as: {block:Tags}#<a href="{TagURL}">{Tag}</a> {/block:Tags}{/block:HasTags}
  560. {block:RebloggedFrom}</br>source: <a href="{ReblogRootURL}">{ReblogRootName}</a> - via: <a href="{ReblogParentURL}">{ReblogParentName}</a><br>{/block:RebloggedFrom}
  561. {block:PostNotes}{PostNotes}{/block:PostNotes}
  562. </div></div>
  563. {/block:PermalinkPage}
  564. </footer>
  565. </article>
  566. {/block:Posts}
  567. </div>
  568.  
  569. <!-- SCRIPTS! DON'T TOUCH -->
  570. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
  571. <script src="http://static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js"></script>
  572. <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
  573. <script src="http://static.tumblr.com/wgijwsy/Ebfm2v4gy/jquery.masonry.min.js"></script>
  574. {block:IfInfiniteScroll}
  575. <script src="http://static.tumblr.com/wgijwsy/u2vm2hxv6/jquery.infinitescroll.min.js"></script>
  576. <script src="http://static.tumblr.com/iwtk77u/Yhym2yygt/jquery.imagesloaded.min.js"></script>
  577. {/block:IfInfiniteScroll}
  578.  
  579. <script>
  580. (function() {
  581. var $tumblelog = $('#content');
  582. {block:IfInfiniteScroll}
  583. $tumblelog.infinitescroll({
  584. navSelector : ".pagination",
  585. nextSelector : ".pagination a:first",
  586. itemSelector : "article",
  587. bufferPx : 50,
  588. done : "",
  589. loading: {
  590. img : "",
  591. msgText: ""
  592. },
  593. },
  594. function( newElements ) {
  595. var $newElems = $( newElements ).css({ opacity: 0 });
  596. $newElems.imagesLoaded(function(){
  597. $newElems.animate({ opacity: 1 });
  598. $tumblelog.masonry( 'appended', $newElems);
  599. });
  600. }
  601. );
  602. {/block:IfInfiniteScroll}
  603. $tumblelog.imagesLoaded( function(){
  604. $tumblelog.masonry({
  605. columnWidth: function( containerWidth ) {
  606. return containerWidth / 100;
  607. }
  608. });
  609. });
  610. })();
  611. </script>
  612.  
  613.  
  614.  
  615. <div style="z-index:999999999999999999999999999; position:fixed; bottom:3px; right:10px; opacity:.7; text-transform:none; font-style:none; text-decoration:none;">
  616. <a href="http://ughthms.tumblr.com" title="Theme by Montana.">
  617. <span style="color:#000; font-size:20px">𝖚𝖌𝖍.</span>
  618. </a>
  619. </div>
  620.  
  621. </body>
  622. </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!