API tools faq
paste
Advertisement
romella

Tags2 by charmedthemes

romella
Aug 30th, 2017
6,609
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 9.69 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2.  
  3. <!-----
  4.  
  5.  
  6.  
  7.  
  8.  
  9.  
  10.  
  11.  
  12. tags2 by charmedthemes
  13.  
  14.  
  15.  
  16.  
  17.  
  18.  
  19.  
  20.  
  21.  
  22. ---------->
  23.  
  24. <head>
  25. <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700,300italic,400italic,600italic,700italic" rel="stylesheet" type="text/css">
  26. <link rel="shortcut icon" href="{Favicon}">
  27.  
  28.  
  29.  
  30. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
  31.  
  32. <script src="http://static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js"></script>
  33.  
  34. <script>
  35.  
  36. (function($){
  37.  
  38. $(document).ready(function(){
  39.  
  40. $("a[title]").style_my_tooltips({
  41.  
  42. tip_follows_cursor:true,
  43.  
  44. tip_delay_time:90,
  45.  
  46. tip_fade_speed:600,
  47.  
  48. attribute:"title"
  49.  
  50. });
  51.  
  52. });
  53.  
  54. })(jQuery);
  55.  
  56. </script>
  57. <!--basic tooltip from tutorial-baby! Enjoy-->
  58.  
  59.  
  60.  
  61.  
  62. </head><style>
  63. #s-m-t-tooltip{
  64. margin:24px 14px 7px 12px;
  65. letter-spacing:1px;
  66. z-index:9999999999999;
  67. line-height:16px;
  68. background-color:#ffffff;
  69. text-transform:uppercase;
  70. font-family:inherit;
  71. padding-left:03px;
  72. padding-right:03px;
  73. border-radius:3px;
  74. font-size:08px;
  75. }
  76.  
  77.  
  78. /* to change the background color to white change
  79. background-color:#F9F9F9;
  80. to
  81. background-color:white;
  82.  
  83. */
  84.  
  85. body {
  86. background-color:#F9F9F9;
  87. font-family:'Open Sans', 'Karla', sans-serif;
  88. width:10000px;
  89. overflow-x:hidden;
  90.  
  91. }
  92.  
  93. ul {
  94. list-style:none;
  95. text-align:left;
  96. padding-left:0;
  97. }
  98.  
  99. li {
  100. position:relative;
  101. padding-left:30px;
  102. }
  103.  
  104. a {
  105. text-decoration:none;
  106. color:#A1A1A1;
  107. z-index:1000094094;
  108. }
  109. /* Forward */
  110. #tags a {
  111. display: inline-block;
  112. vertical-align: middle;
  113. -webkit-transform: perspective(1px) translateZ(0);
  114. transform: perspective(1px) translateZ(0);
  115. box-shadow: 0 0 1px transparent;
  116. -webkit-transition-duration: 0.5s;
  117. transition-duration: 0.5s;
  118. -webkit-transition-property: transform;
  119. transition-property: transform;
  120.  
  121. line-height:190%;
  122. display:block;
  123. color:#525252;
  124. text-transform:lowercase;
  125. z-index:10066400;
  126. }
  127. #tags a:hover, #tags a:focus, #tags a:active {
  128. -webkit-transform: translateX(8px);
  129. transform: translateX(8px);
  130. }
  131. .droptitle {
  132. line-height:160%;
  133. display:block;
  134. }
  135.  
  136. #filters {
  137. z-index: 1;
  138. text-align:right;
  139. line-height:160%;
  140. }
  141.  
  142. #sidebar {
  143. z-index:10;
  144. margin-top:100px;
  145. position:fixed;
  146. text-align:right;
  147. border-right:2px solid #F0F0F0;
  148. font-size:12px;
  149. padding-left:10px;
  150. padding-right:10px;
  151. padding-top:5px;
  152. padding-bottom:5px;
  153. font-weight:300;
  154. width:120px;
  155. color:#A1A1A1;
  156. margin-left:100px;
  157.  
  158. }
  159.  
  160. #sidebartitle{
  161. color:#525252;
  162. font-weight:300;
  163. font-size:14px;
  164. text-align:right;
  165. padding-bottom:5px;
  166. }
  167.  
  168.  
  169. #container{
  170. position:fixed;
  171. left:0px;
  172. top:90px;
  173. width:950px;
  174. }
  175.  
  176. #tagsbox {
  177. margin-top:10px;
  178. width:150px;
  179. margin-left:300px;
  180. margin-bottom:0px;
  181. margin-right:-200px;
  182. padding-bottom:20px;
  183.  
  184. }
  185.  
  186.  
  187.  
  188. #tagsbox .tagstitle {
  189. text-transform:uppercase;
  190. font-size:14px;
  191. padding:5px;
  192. color:#525252;
  193. font-weight:300;
  194. font-weight:bold;
  195.  
  196. }
  197.  
  198. #tags {
  199. position:relative;
  200. text-transform:lowercase;
  201. font-size:11px;
  202. text-align:left;
  203. padding-left:7px;
  204. padding-top:3px;
  205. padding-bottom:3px;
  206. background-color:white;
  207. font-weight:300;
  208. color:#A1A1A1;
  209.  
  210. }
  211.  
  212. #tagsbox .box {
  213. width:150px;
  214. margin:20px;
  215. padding:20px;
  216.  
  217.  
  218. }
  219. .box {
  220. transition-duration:1s;
  221. -moz-transition-duration:1s;
  222. -webkit-transition-duration:1s;
  223. -o-transition-duration:1s;
  224.  
  225. }
  226. .droptags {
  227. padding-left:5px;
  228. text-transform:lowercase;
  229. -moz-transition-duration: 0.6s;
  230. -webkit-transition-duration: 0.6s;
  231. -o-transition-duration: 0.6s
  232.  
  233. }
  234.  
  235. #innertitle {
  236. text-transform:lowercase;
  237. font-size:12px;
  238.  
  239. padding-top:5px;
  240.  
  241. color:#525252;
  242. font-weight:bold;
  243. }
  244. </style>
  245.  
  246. <body>
  247.  
  248. <title>tags</title>
  249. <div id="sidebar">
  250. <div id="sidebartitle"><b>NAVIGATION</b></div>
  251.  
  252.  
  253. <!----- Filter links ------>
  254. <!---
  255.  
  256. HOW TO USE FILTERS!
  257.  
  258. - What you do is where it says ".filter" you put the tag that you want your box to respond to
  259. - so if I had a box that had my Marvel tags I could write ".marvel"
  260. - where it says >filter</a> change the word 'filter' to the word that you want displayed in the sidebar, so if I had a marvel tags box I would say 'Marvel' instead of the filter
  261. - You can add filters where it says class="box
  262. NEVER get rid of the word "box"!!!
  263.  
  264. TO MAKE MORE FILTERS COPY PASTE THIS CODE UNDER THE OTHER FILTERS
  265.  
  266. <a href="#filter" data-option-filter=".filter">filter</a><br>
  267.  
  268.  
  269. -->
  270.  
  271.  
  272. <div id="sort">
  273. <div id="filters" class="option-set clearfix" data-option-key="filter"><a href="#filter" data-option-filter=".box">refresh</a><br>
  274. <a href="#filter" data-option-filter=".filter">filter</a><br>
  275. <a href="#filter" data-option-filter=".filter">filter</a><br>
  276. <a href="#filter" data-option-filter=".filter">filter</a><br>
  277. <a href="#filter" data-option-filter=".filter">filter</a><br>
  278. <a href="#filter" data-option-filter=".filter">filter</a><br>
  279. <a href="#filter" data-option-filter=".filter">filter</a><br>
  280.  
  281.  
  282. </div>
  283. <!--- THIS IS THE CREDIT, DO NOT TOUCH!!!! -->
  284.  
  285. <a title="credit" href="http://charmedthemes.tumblr.com">☾</a>
  286.  
  287. </div>
  288. </div>
  289. <div id="container" class="clearfix">
  290.  
  291. <div id="tagsbox" class="box filter">
  292. <div class="tagstitle">title</div>
  293. <div id="tags">
  294. <a href="/tag">tag</a>
  295. <a href="/tag">tag</a>
  296. <a href="/tag">tag</a>
  297. <a href="/tag">tag</a>
  298. <a href="/tag">tag</a>
  299. <a href="/tag">tag</a>
  300. <a href="/tag">tag</a>
  301.  
  302.  
  303.  
  304. </div>
  305. </div>
  306.  
  307.  
  308. <div id="tagsbox" class="box filter">
  309. <div class="tagstitle">TITLE2</div>
  310. <div id="tags">
  311. <a href="/tag">tag</a>
  312. <a href="/tag">tag</a>
  313. <a href="/tag">tag</a>
  314. <a href="/tag">tag</a>
  315. <a href="/tag">tag</a>
  316. <a href="/tag">tag</a>
  317. <a href="/tag">tag</a>
  318. <a href="/tag">tag</a>
  319.  
  320.  
  321.  
  322. </div>
  323. </div>
  324.  
  325.  
  326. <div id="tagsbox" class="box">
  327. <div class="tagstitle">TAGS</div>
  328. <div id="tags">
  329. <a href="/tag">tag</a>
  330. <a href="/tag">tag</a>
  331. <a href="/tag">tag</a>
  332. <a href="/tag">tag</a>
  333. <a href="/tag">tag</a>
  334. <a href="/tag">tag</a>
  335. <a href="/tag">tag</a>
  336. <a href="/tag">tag</a>
  337.  
  338.  
  339. </div>
  340. </div>
  341.  
  342.  
  343. <div id="tagsbox" class="box">
  344. <div class="tagstitle">TAGS</div>
  345. <div id="tags">
  346. <a href="/tag">tag</a>
  347. <a href="/tag">tag</a>
  348. <a href="/tag">tag</a>
  349. <a href="/tag">tag</a>
  350. <a href="/tag">tag</a>
  351. <a href="/tag">tag</a>
  352. <a href="/tag">tag</a>
  353. <a href="/tag">tag</a>
  354.  
  355.  
  356.  
  357.  
  358.  
  359.  
  360.  
  361.  
  362. </div>
  363. </div>
  364.  
  365. <div id="tagsbox" class="box filter">
  366. <div class="tagstitle">TAGS</div>
  367. <div id="tags">
  368. <a href="/tag">tag</a>
  369. <a href="/tag">tag</a>
  370. <a href="/tag">tag</a>
  371. <a href="/tag">tag</a>
  372. <a href="/tag">tag</a>
  373. <a href="/tag">tag</a>
  374. <a href="/tag">tag</a>
  375. <a href="/tag">tag</a>
  376.  
  377.  
  378.  
  379.  
  380.  
  381.  
  382.  
  383.  
  384. </div>
  385. </div>
  386.  
  387. <div id="tagsbox" class="box filter">
  388. <div class="tagstitle">TAGS</div>
  389. <div id="tags">
  390. <a href="/tag">tag</a>
  391. <a href="/tag">tag</a>
  392. <a href="/tag">tag</a>
  393. <a href="/tag">tag</a>
  394. <a href="/tag">tag</a>
  395. <a href="/tag">tag</a>
  396. <a href="/tag">tag</a>
  397. <a href="/tag">tag</a>
  398.  
  399.  
  400.  
  401.  
  402.  
  403.  
  404.  
  405.  
  406. </div>
  407. </div>
  408.  
  409. <div id="tagsbox" class="box filter">
  410. <div class="tagstitle">TAGS</div>
  411. <div id="tags">
  412. <a href="/tag">tag</a>
  413. <a href="/tag">tag</a>
  414. <a href="/tag">tag</a>
  415. <a href="/tag">tag</a>
  416. <a href="/tag">tag</a>
  417. <a href="/tag">tag</a>
  418. <a href="/tag">tag</a>
  419. <a href="/tag">tag</a>
  420.  
  421.  
  422.  
  423.  
  424.  
  425.  
  426.  
  427.  
  428. </div>
  429. </div>
  430.  
  431.  
  432.  
  433.  
  434. </body>
  435.  
  436. <!------- filter scripts -------->
  437. <script src="https://secure.static.tumblr.com/fuu6t9w/kh8ml0pl9/jquery-1.7.1.min.js"></script>
  438. <script src="https://secure.static.tumblr.com/fuu6t9w/eubml0pm0/jquery.isotope.min.js"></script>
  439. <script>
  440. $(function(){
  441.  
  442. var $container = $('#container');
  443.  
  444. $container.isotope({
  445. itemSelector : '.box'
  446. });
  447.  
  448.  
  449. var $optionSets = $('#sort .option-set'),
  450. $optionLinks = $optionSets.find('a');
  451.  
  452. $optionLinks.click(function(){
  453. var $this = $(this);
  454. // don't proceed if already selected
  455. if ( $this.hasClass('selected') ) {
  456. return false;
  457. }
  458. var $optionSet = $this.parents('.option-set');
  459. $optionSet.find('.selected').removeClass('selected');
  460. $this.addClass('selected');
  461.  
  462. // make option object dynamically, i.e. { filter: '.my-filter-class' }
  463. var options = {},
  464. key = $optionSet.attr('data-option-key'),
  465. value = $this.attr('data-option-filter');
  466. // parse 'false' as false boolean
  467. value = value === 'false' ? false : value;
  468. options[ key ] = value;
  469. if ( key === 'layoutMode' && typeof changeLayoutMode === 'function' ) {
  470. // changes in layout modes need extra logic
  471. changeLayoutMode( $this, options )
  472. } else {
  473. // otherwise, apply new options
  474. $container.isotope( options );
  475. }
  476.  
  477. return false;
  478. });
  479.  
  480.  
  481. });
  482. </script>
  483. <!-----end filter scripts------>
  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!