API tools faq
paste
Advertisement
MystiqueAquanian

Back up tags

MystiqueAquanian
Feb 1st, 2017
96
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 11.67 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <head>
  3.  
  4. <!--
  5.  
  6. TAGS II
  7. by alydae
  8.  
  9. - do not steal any part of this code
  10. - do not even TOUCH the credit
  11. - direct questions to enchantedthemes.tumblr.com
  12. - tabs tutorial by @phoenixthemes
  13.  
  14. thank you for using!!!
  15.  
  16. -->
  17.  
  18. <title>Tags</title>
  19. <link rel="shortcut icon" href="{Favicon}">
  20.  
  21. <!-- scripts - DO NOT TOUCH -->
  22.  
  23. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  24.  
  25. <script src="http://static.tumblr.com/rzl30kg/eAxm7a751/jquery.style-my-tooltips.js"></script>
  26. <script>
  27. (function($){
  28. $(document).ready(function(){
  29. $("[title]").style_my_tooltips({
  30. tip_follows_cursor:true,
  31. tip_delay_time:200,
  32. tip_fade_speed:300
  33. }
  34. );
  35. });
  36. })(jQuery);
  37. </script>
  38.  
  39. <!-- custom font -->
  40.  
  41. <link href='https://fonts.googleapis.com/css?family=Open+Sans:400,400italic,600,600italic,700,700italic' rel='stylesheet' type='text/css'>
  42.  
  43. <style type="text/css">
  44.  
  45.  
  46. @keyframes fadein {
  47. from { opacity:0; }
  48. to { opacity:1; }
  49. }
  50.  
  51. @-moz-keyframes fadein {
  52. from { opacity:0; }
  53. to { opacity:1; }
  54. }
  55.  
  56. @-webkit-keyframes fadein {
  57. from { opacity:0; }
  58. to { opacity:1; }
  59. }
  60.  
  61. @-ms-keyframes fadein {
  62. from { opacity:0; }
  63. to { opacity:1; }
  64. }
  65.  
  66. @-o-keyframes fadein {
  67. from { opacity:0; }
  68. to { opacity:1; }
  69. }
  70.  
  71. /*-- selection --*/
  72.  
  73. ::-moz-selection { background:#eee; color:#444; }
  74. ::selection { background:#eee; color:#444; }
  75.  
  76. /*-- scrollbar --*/
  77.  
  78. ::-webkit-scrollbar {
  79. width:3px;
  80. height:2px;
  81. }
  82.  
  83. ::-webkit-scrollbar-thumb { background-color:#aaa; } /* scrollbar colour */
  84.  
  85. /*-- tooltips --*/
  86.  
  87. #s-m-t-tooltip {
  88. color:#444;
  89. background-color:#fff;
  90. font-size:8px;
  91. font-family:'Open Sans', helvetica, sans-serif;
  92. letter-spacing:1px;
  93. text-transform:uppercase;
  94. text-align:center;
  95. position:absolute;
  96. padding:0px 5px 0px 5px;
  97. border:1px solid #eee;
  98. margin-top:30px;
  99. z-index:9999;
  100. }
  101.  
  102. /*-- tumblr controls --*/
  103.  
  104. .tmblr-iframe--desktop-logged-in-controls, #tumblr_controls {
  105. display:none!important;
  106. }
  107.  
  108.  
  109. /*-- general customisation --*/
  110.  
  111. body {
  112. color:#666; /* text colour */
  113. background-color:#fafafa; /* background colour */
  114. font-style:normal;
  115. font-family:'Open Sans', helvetica, sans-serif;
  116. font-size:10px;
  117. font-weight:400;
  118. text-decoration:none;
  119. line-height:180%;
  120. -moz-osx-font-smoothing: grayscale;
  121. -webkit-font-smoothing: antialiased;
  122. font-smoothing: antialiased;
  123. -webkit-animation: fadein 1.5s;
  124. -moz-animation: fadein 1.5s;
  125. -o-animation: fadein 1.5s;
  126. animation: fadein 1.5s;
  127. }
  128.  
  129. a {
  130. text-decoration:none;
  131. color:#444; /* links colour */
  132. transition-duration: 0.6s;
  133. -moz-transition-duration: 0.6s;
  134. -webkit-transition-duration: 0.6s;
  135. -o-transition-duration: 0.6s
  136. }
  137.  
  138. a:hover {
  139. color:#eecbff; /* links hover colour */
  140. cursor:pointer;
  141. transition-duration: 0.6s;
  142. -moz-transition-duration: 0.6s;
  143. -webkit-transition-duration: 0.6s;
  144. -o-transition-duration: 0.6s
  145. }
  146.  
  147. b, strong {
  148. font-weight:700;
  149. color:#444;
  150. }
  151.  
  152. i, em { font-style:italic; }
  153.  
  154. /*-- header --*/
  155.  
  156. #header {
  157. position:absolute;
  158. width:350px;
  159. top:100px;
  160. padding:15px;
  161. left:50%;
  162. transform:translateX(-50%);
  163. text-align:left;
  164. }
  165.  
  166. .icon {
  167. position:fixed;
  168. margin-top:40px;
  169. height:60px;
  170. width:60px;
  171. }
  172.  
  173. .icon img {
  174. height:60px;
  175. width:60px;
  176. border-radius:50%;
  177. }
  178.  
  179. .title {
  180. position:relative;
  181. margin-left:90px;
  182. text-transform:uppercase;
  183. font-size:14px;
  184. font-weight:700;
  185. letter-spacing:1px;
  186. color:#222; /* title colour */
  187. }
  188.  
  189. .desc {
  190. width:225px;
  191. max-height:55px;
  192. margin:15px 90px 15px;
  193. padding:10px;
  194. background-color:#fff; /* description background colour */
  195. border:1px solid #eee;
  196. overflow-y:scroll!important;
  197. }
  198.  
  199. .links {
  200. width:250px;
  201. margin:10px 90px;
  202. }
  203.  
  204. .links a {
  205. display:inline;
  206. margin-right:10px;
  207. letter-spacing:.5px;
  208. text-transform:uppercase;
  209. }
  210.  
  211. /*-- tags --*/
  212.  
  213. .content {
  214. position:absolute;
  215. width:801px;
  216. margin-top:330px;
  217. left:50%;
  218. transform:translateX(-50%);
  219. }
  220.  
  221. .tab label {
  222. width:140px;
  223. padding:20px;
  224. padding-right:40px;
  225. background-color:#fff; /* tab label background colour */
  226. border-left:1px solid #eee;
  227. border-bottom:1px solid #eee;
  228. font-size:11px;
  229. font-weight:600;
  230. letter-spacing:0.5px;
  231. line-height:100%;
  232. text-align:right;
  233. text-transform:uppercase;
  234. display:block;
  235. cursor:pointer;
  236. color:#222; /* tab text colour */
  237. transition-duration: 0.6s;
  238. -moz-transition-duration: 0.6s;
  239. -webkit-transition-duration: 0.6s;
  240. -o-transition-duration: 0.6s
  241. }
  242.  
  243. .tab label:first-of-type { border-top:1px solid #eee; }
  244.  
  245. .tab label:hover {
  246. color:#eecbff; /* links hover colour */
  247. cursor:pointer;
  248. transition-duration: 0.6s;
  249. -moz-transition-duration: 0.6s;
  250. -webkit-transition-duration: 0.6s;
  251. -o-transition-duration: 0.6s
  252. }
  253.  
  254. .tags {
  255. position:absolute;
  256. width:535px;
  257. height:calc((52px * 6.14) - 27px);
  258. /* if you want the height of the tabs to match the height of the main tag body, replace height:300px; with the line below
  259. height:calc((52px * 5) - 27px);
  260. change the 5 according to how many tabs you have */
  261. top:0px;
  262. margin:0px 201px 150px;
  263. padding:15px;
  264. padding-left:50px;
  265. overflow-y:scroll;
  266. border:1px solid #eee;
  267. background-color:#fff; /* tags section background colour */
  268. }
  269.  
  270. .tags a::before {
  271. content:'>';
  272. padding-right:7px;
  273. }
  274.  
  275. .tags a {
  276. width:calc(495px / 2); /* change the 3 to 2 for the tags to be in two columns */
  277. display:inline-block;
  278. padding:5px;
  279.  
  280. }
  281.  
  282. .tags h8 {
  283. color:#444; /* subtitle colour */
  284. font-size:10.5px;
  285. font-weight:600;
  286. letter-spacing:0.5px;
  287. text-transform:uppercase;
  288. display:block;
  289. margin-top:20px;
  290. margin-bottom:5px;
  291. }
  292.  
  293. [type=radio]:checked ~ label {
  294. z-index:2;
  295. color:#eecbff; /* text colour of selected tab */
  296. background-color:#fafafa; /* background colour of selected tab */
  297. }
  298.  
  299. [type=radio]:checked ~ label ~ .tags { z-index:1; }
  300.  
  301. .tab [type=radio] { display:none; }
  302.  
  303.  
  304. /*-- credit - DO NOT TOUCH --*/
  305.  
  306. .credit a {
  307. font-size:10px;
  308. bottom:15px;
  309. right:20px;
  310. position:fixed;
  311. text-transform:uppercase;
  312. }
  313.  
  314.  
  315. </style>
  316. </head>
  317.  
  318.  
  319. <body>
  320.  
  321.  
  322. <div id="header">
  323. <!-- the default is your icon. if you want to change it, remove {PortraitURL-64} and replace it with the image url of the one you want -->
  324. <div class="icon"><img src="{PortraitURL-64}"/></div>
  325. <div class="title">Marauder's Map</div> <!-- title -->
  326. <div class="desc"> <!-- you cannot delete or leave this section blank! it will mess up the entire layout. -->
  327. You have found the Marauder's Map, a guide to my messed up Tumblr. Everything is sorted according to alphabet, so it should be easy to find things you want.</div>
  328. <div class="links">
  329. <!-- this is where your header links are. feel free to add more. -->
  330. <a href="/">hogwarts</a>
  331. <a href="/ask">owlery</a>
  332. <a href="/about">about me</a>
  333. <a href="/icons">icons</a>
  334. <a href="characters">my characters</a>
  335. <!-- do not remove this one!!! -->
  336. <a href="http://alydae.tumblr.com">credit</a>
  337. </div>
  338. </div>
  339.  
  340.  
  341. <div class="content">
  342.  
  343. <!--
  344. INSTRUCTIONS ON HOW TO ADD MORE TABS
  345. 1. copy the template below
  346.  
  347. <div class="tab">
  348. <input type="radio" id="tab-1" name="tab-group-1">
  349. <label for="tab-1">tab title</label>
  350. <div class="tags">
  351. <a href="/tagged/">tag name</a>
  352. <h8>optional subtitle</h8>
  353. <a href="/tagged/">tag name</a>
  354. </div>
  355. </div>
  356.  
  357. 2. once you have done that, you need to change the number after the tab in id="tab-1" and label for="tab-1" - so if you were copying your third tab, it would be id="tab-3" and label for="tab-3".
  358. DO NOT TOUCH THE name="tab-group-1"
  359. -->
  360.  
  361. <div class="tab">
  362. <input type="radio" id="tab-1" name="tab-group-1" checked>
  363. <label for="tab-1">General</label>
  364. <div class="tags">
  365. <h8>harry potter</h8>
  366. <a href="/tagged/harry potter">Harry Potter</a>
  367. <a href="/tagged/wizarding schools">Wizarding School</a>
  368. <a href="/tagged/beauxbatons">Beauxbatons</a>
  369. <a href="/tagged/durmstrang">Durmstrang</a>
  370. <a href="/tagged/hogwarts">Hogwarts</a>
  371. <a href="/tagged/hogwarts houses">Hogwarts Houses</a>
  372. <a href="/tagged/ilvermorny">Ilvermorny</a>
  373. <a href="/tagged/gyffindor">Gryffindor</a>
  374. <a href="/tagged/hufflepuff">Hufflepuff</a>
  375. <a href="/tagged/ravenclaw">Ravenclaw</a>
  376. <a href="/tagged/slytherin">Slytherin</a>
  377. <a href="/tagged/fantastic beasts and where to find them">Fantastic Beasts and Where To Find Them</a>
  378. <h8>others</h8>
  379. <a href="/tagged/a song of ice and fire">A Song of Ice and Fire</a>
  380. <a href="/tagged/percy jackson">Percy Jackson</a>
  381. <a href="/tagged/the hunger games">The Hunger Games</a>
  382. <a href="/tagged/the raven cycle">The Raven Cycle</a>
  383. <h8>mythology</h8>
  384. <a href="/tagged/angel hierarchy">Angel Hierarchy</a>
  385. <a href="/tagged/egyptian mythology">Egyptian Mythology</a>
  386. <a href="/tagged/greek mythology">Greek Mythology</a>
  387. <a href="/tagged/korean mythology">Korean Mythology</a>
  388. <a href="/tagged/norse mythology">Norse Mythology</a>
  389. <a href="/tagged/roman mythology">Roman Mythology</a>
  390.  
  391. </div>
  392. </div>
  393.  
  394.  
  395.  
  396.  
  397. <div class="tab">
  398. <input type="radio" id="tab-2" name="tab-group-1">
  399. <label for="tab-2">Schools + Houses</label>
  400. <div class="tags">
  401. <h8>for my story</h8>
  402. <a href="/tagged/lucy hale">Lucy Hale</a>
  403.  
  404. </div>
  405. </div>
  406.  
  407.  
  408.  
  409.  
  410.  
  411.  
  412. <div class="tab">
  413. <input type="radio" id="tab-4" name="tab-group-1">
  414. <label for="tab-4">Thr</label>
  415. <div class="tags">
  416. <a href="/tagged/aesthetics">Aesthetics</a>
  417.  
  418. </div>
  419. </div>
  420.  
  421. <div class="tab">
  422. <input type="radio" id="tab-5" name="tab-group-1">
  423. <label for="tab-5">Marauder's Era</label>
  424. <div class="tags">
  425. <a href="/tagged/actions">Actions</a>
  426.  
  427. </div>
  428. </div>
  429.  
  430.  
  431.  
  432. <div class="tab">
  433. <input type="radio" id="tab-5" name="tab-group-1">
  434. <label for="tab-5">Three Eras</label>
  435. <div class="tags">
  436. <a href="/tagged/actions">Actions</a>
  437.  
  438. </div>
  439. </div>
  440.  
  441.  
  442.  
  443.  
  444.  
  445.  
  446.  
  447. <div class="tab">
  448. <input type="radio" id="tab-3" name="tab-group-1">
  449. <label for="tab-3">my stuff</label>
  450. <div class="tags">
  451. <h8>stories</h8>
  452. <a href="/tagged/learning to survive">Learning to Survive</a>
  453. <a href="/tagged/flawed">Anti-Cliché: Fawed</a>
  454. <a href="/tagged/flawed">Anti-Cliché: Prfect</a>
  455. <a href="/tagged/flawed">Anti-Cliché: Charming</a>
  456. <a href="/tagged/tangled in love">Descendants Fanfic</a>
  457. <h8>characters: learning to survive</h8>
  458. <a href="/tagged/viviana">Viviana</a>
  459. <a href="/tagged/kaelyn">Kaelyn</a>
  460. <a href="/tagged/ingrid">Ingrid</a>
  461. <a href="/tagged/kristy">Kristy</a>
  462. <h8>characters: anti-cliché</h8>
  463. <a href="/tagged/sara">Sarah</a>
  464. <a href="/tagged/amber">Amber</a>
  465. <a href="/tagged/courtney">Courtney</a>
  466. <h8>my edits</h8>
  467. <a href="/tagged/my edits">My Edits</a>
  468.  
  469. </div>
  470. </div>
  471.  
  472.  
  473. </div>
  474.  
  475.  
  476. <!-- credit - DO NOT TOUCH -->
  477.  
  478. <div class="credit">
  479. <a href="http://alydae.tumblr.com" title="enchantedthemes">A.</a>
  480. </div>
  481.  
  482.  
  483. </body>
  484. </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!