API tools faq
paste
alydae

icons i

alydae
Dec 11th, 2016 (edited)
5,685
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 12.27 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <head>
  3.  
  4. <!--
  5.  
  6. ICONS I
  7. by alydae
  8.  
  9. released: december 16, 2016
  10. last updated: may 26, 2024
  11.  
  12. - do not steal any part of this code
  13. - do not even TOUCH the credit
  14. - direct questions to enchantedthemes.tumblr.com
  15.  
  16. thank you for using!!!
  17.  
  18. -->
  19.  
  20. <title>icons</title>
  21. <link rel="shortcut icon" href="{Favicon}">
  22.  
  23. <!-- scripts - DO NOT TOUCH -->
  24.  
  25. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  26.  
  27. <script src="http://static.tumblr.com/rzl30kg/eAxm7a751/jquery.style-my-tooltips.js"></script>
  28. <script>
  29. (function($){
  30. $(document).ready(function(){
  31. $("[title]").style_my_tooltips({
  32. tip_follows_cursor:true,
  33. tip_delay_time:200,
  34. tip_fade_speed:300
  35. }
  36. );
  37. });
  38. })(jQuery);
  39. </script>
  40.  
  41. <!-- custom font -->
  42.  
  43. <link href='https://fonts.googleapis.com/css?family=Open+Sans:300,300italic,400,400italic,600,600italic,700,700italic' rel='stylesheet' type='text/css'>
  44.  
  45.  
  46. <style type="text/css">
  47.  
  48. @keyframes fadein {
  49. from { opacity:0; }
  50. to { opacity:1; }
  51. }
  52.  
  53. @-moz-keyframes fadein {
  54. from { opacity:0; }
  55. to { opacity:1; }
  56. }
  57.  
  58. @-webkit-keyframes fadein {
  59. from { opacity:0; }
  60. to { opacity:1; }
  61. }
  62.  
  63. @-ms-keyframes fadein {
  64. from { opacity:0; }
  65. to { opacity:1; }
  66. }
  67.  
  68. @-o-keyframes fadein {
  69. from { opacity:0; }
  70. to { opacity:1; }
  71. }
  72.  
  73. /*-- selection --*/
  74.  
  75. ::-moz-selection { background:var(--accent); color:var(--title); }
  76. ::selection { background:var(--accent); color:var(--title); }
  77.  
  78. /*-- scrollbar --*/
  79.  
  80. ::-webkit-scrollbar {
  81. width:1px;
  82. height:2px;
  83. }
  84.  
  85. ::-webkit-scrollbar-thumb { background-color:var(--text); }
  86.  
  87. /*-- tooltips --*/
  88.  
  89. #s-m-t-tooltip {
  90. color:var(--text);
  91. background-color:var(--accent);
  92. font-size:calc(var(--font-size) - 2px);
  93. font-family:'Open Sans', helvetica, sans-serif;
  94. letter-spacing:1px;
  95. text-transform:uppercase;
  96. text-align:center;
  97. position:absolute;
  98. padding:0px 5px 0px 5px;
  99. margin-top:30px;
  100. border:1px solid var(--borders);
  101. z-index:9999;
  102. }
  103.  
  104. /*-- tumblr controls --*/
  105.  
  106. .tmblr-iframe, .iframe-controls–desktop {
  107. display:none !important;
  108. }
  109.  
  110. /*-- transitions --*/
  111.  
  112. a, a:hover, .links i, .links i:hover, #icons, #icons img {
  113. transition-duration: 0.6s;
  114. -moz-transition-duration: 0.6s;
  115. -webkit-transition-duration: 0.6s;
  116. -o-transition-duration: 0.6s;
  117. }
  118.  
  119. /*-- change all variables here --*/
  120.  
  121. :root {
  122. --background:#fff;
  123. --accent:#fafafa;
  124. --text:#666;
  125. --links:#444;
  126. --links-hover:#bad1e7;
  127. --title:#222;
  128. --borders:#eee;
  129. --font-size:10px;
  130. }
  131.  
  132. /*-- general customisation --*/
  133.  
  134. body {
  135. color:var(--text);
  136. background-color:var(--background);
  137. font-style:normal;
  138. font-family:'Open Sans', helvetica, sans-serif;
  139. font-size:var(--font-size);
  140. font-weight:400;
  141. text-decoration:none;
  142. line-height:180%;
  143. -moz-osx-font-smoothing: grayscale;
  144. -webkit-font-smoothing: antialiased;
  145. font-smoothing: antialiased;
  146. -webkit-animation: fadein 1.5s;
  147. -moz-animation: fadein 1.5s;
  148. -o-animation: fadein 1.5s;
  149. animation: fadein 1.5s;
  150. }
  151.  
  152. a { text-decoration:none; color:var(--links); }
  153. a:hover { color:var(--links-hover); cursor:pointer; }
  154.  
  155. b, strong { font-weight:600; color:var(--title); }
  156. i, em { font-style:italic; }
  157.  
  158. /*-- header --*/
  159.  
  160. header {
  161. position:static;
  162. margin:100px auto;
  163. width:400px;
  164. height:150px;
  165. }
  166.  
  167. .title {
  168. padding:10px;
  169. text-transform:uppercase;
  170. text-align:center;
  171. font-size:calc(var(--font-size) + 4px);
  172. font-weight:700;
  173. letter-spacing:1px;
  174. color:var(--title);
  175. }
  176.  
  177. .title:after {
  178. content:"";
  179. height:1px;
  180. width:100px;
  181. background:var(--borders);
  182. display:block;
  183. margin:10px auto 0px;
  184. }
  185.  
  186. .desc {
  187. width:230px;
  188. max-height:55px;
  189. margin:10px;
  190. padding-right:10px;
  191. text-align:right;
  192. overflow-y:auto;
  193. float:left;
  194. }
  195.  
  196. .links {
  197. float:right;
  198. position:absolute;
  199. width:130px;
  200. max-height:55px;
  201. padding:0px 10px;
  202. margin-top:10px;
  203. margin-left:250px;
  204. text-align:left;
  205. border-left:1px solid var(--borders);
  206. }
  207.  
  208. .links a { display:block; }
  209. .links a:before { content:'>'; margin-right:7px; }
  210. .links a:hover { padding-left:10px; }
  211.  
  212. /*-- left sidebar --*/
  213.  
  214. #lsidebar {
  215. position:fixed;
  216. width:150px;
  217. top:100px;
  218. left:calc(50% - ((70px + 12px) * 5) / 2 - 225px);
  219. /* if you change the number of columns, change the '5' after * to the number of columns you have. do not touch anything else. */
  220. display:none;
  221. text-align:right;
  222. }
  223.  
  224. .t {
  225. padding:10px;
  226. text-transform:uppercase;
  227. font-size:calc(var(--font-size) + 1px);
  228. border-bottom:1px solid var(--borders);
  229. font-weight:600;
  230. }
  231.  
  232. .d { padding:10px; }
  233.  
  234. #rsidebar {
  235. position:fixed;
  236. width:150px;
  237. top:100px;
  238. left:calc(50% + ((70px + 12px) * 5) / 2 + 75px);
  239. /* if you change the number of columns, change the '5' after * to the number of columns you have. do not touch anything else. */
  240. display:none;
  241. text-align:left;
  242. }
  243.  
  244. #rsidebar #sort { margin:0px -35px; text-align:left; }
  245. #rsidebar #sort li { display:block; line-height:160%; }
  246. #rsidebar #sort a:before { content:'>'; margin-right:7px; }
  247. #rsidebar #sort a:hover { padding-left:10px; }
  248.  
  249. /*--filters--*/
  250.  
  251. #sort {
  252. margin-top:85px;
  253. width:100%;
  254. text-align:center;
  255. }
  256.  
  257. #sort ul {
  258. display:block;
  259. list-style:none;
  260. line-height:100%;
  261. }
  262.  
  263. #sort a { display:inline; margin:5px; }
  264. #sort li { display:inline; list-style:none; }
  265. #sort li a.selected { font-weight:600; color:var(--title); }
  266.  
  267. /*-- icons --*/
  268.  
  269. #container {
  270. padding:0!important;
  271. margin:-50px auto 100px;
  272. width:calc((70px + 12px) * 5);
  273. /* ((image width + 2*margin) * number of columns)
  274. if you change the size of the icon, ctrl/cmd + f to find all the 70px and change that to your size. similarly with the margin spacing, if you change that, ctrl/cmd + f to find all the 12px
  275. */
  276. }
  277.  
  278. /*-- media --*/
  279.  
  280. #content {
  281. margin-top:0px;
  282. width:100%;
  283. }
  284.  
  285. #icons {
  286. position:relative;
  287. margin:6px;
  288. height:70px; /* image height */
  289. width:70px; /* image width */
  290. }
  291.  
  292. #icons img {
  293. height:70px; /* image height */
  294. width:70px; /* image width */
  295. }
  296.  
  297. /*-- credit - DO NOT TOUCH --*/
  298.  
  299. .credit a {
  300. font-size:10px;
  301. bottom:15px;
  302. right:20px;
  303. position:fixed;
  304. text-transform:uppercase;
  305. }
  306.  
  307. </style>
  308. </head>
  309.  
  310.  
  311. <!-- scripts - DO NOT TOUCH -->
  312.  
  313. <script type="text/javascript">
  314. $(document).scroll(function () {
  315. var y = $(this).scrollTop();
  316. if (y > 300) {
  317. $('#lsidebar').fadeIn();
  318. } if (y < 300) {
  319. $('#lsidebar').fadeOut();
  320. }
  321. });
  322. </script>
  323.  
  324. <script type="text/javascript">
  325. $(document).scroll(function () {
  326. var y = $(this).scrollTop();
  327. if (y > 300) {
  328. $('#rsidebar').fadeIn();
  329. } if (y < 300) {
  330. $('#rsidebar').fadeOut();
  331. }
  332. });
  333. </script>
  334.  
  335.  
  336. <body>
  337.  
  338.  
  339. <header><!-- start header -->
  340.  
  341. <div class="title">icons</div> <!-- title -->
  342. <div class="desc">
  343. this is where a desciption goes. it will scroll if it reaches the maximum height. you need something here because otherwise it will stuff up the design of the entire header.
  344. </div>
  345. <div class="links">
  346. <a href="/">index</a>
  347. <a href="/ask">ask</a>
  348. <a href="/">link</a>
  349. </div>
  350.  
  351. <!-- HOW TO CUSTOMISE THE FILTERS
  352.  
  353. template:
  354. <ul id="filters" class="option-set clearfix" data-option-key="filter">
  355. <li><a href="#filter" data-option-filter=".icon">all</a></li>
  356. <li><a href="#filter" data-option-filter=".filter">filter name</a></li>
  357. <li><a href="#filter" data-option-filter=".filter">filter name</a></li>
  358. <li><a href="#filter" data-option-filter=".filter">filter name</a></li>
  359. </ul>
  360.  
  361. in order to make your filters match your icons, you only need to change the '.filter' and 'filter name part'. it is essential that you do not change any other part.
  362. for example, if I wanted to make my icons filter by colour icons only, my code would look like this
  363. <li><a href="#filter" data-option-filter=".colour">colour</a></li>
  364. note the areas where it's been changed.
  365.  
  366. you can add a second lot of fitlers by copying the template above and placing it below the given filters
  367.  
  368. -->
  369.  
  370. <div id="sort">
  371. <ul id="filters" class="option-set clearfix" data-option-key="filter">
  372. <li><a href="#filter" data-option-filter=".icon">all</a></li> <!-- this needs to stay here -->
  373. <li><a href="#filter" data-option-filter=".filter">filter name</a></li>
  374. <li><a href="#filter" data-option-filter=".filter">filter name</a></li>
  375. <li><a href="#filter" data-option-filter=".filter">filter name</a></li>
  376. </ul>
  377. </div>
  378.  
  379. </header><!-- end header -->
  380.  
  381.  
  382. <div id="lsidebar"><!-- start left sidebar-->
  383. <div class="t">icons</div> <!-- subtitle -->
  384. <div class="d">
  385. like the description in the header, one is also needed here. it can be the same thing or it can be different. it will grow longer with the text - there is no scrollbar here.
  386. </div>
  387. </div><!-- end left sidebar-->
  388.  
  389.  
  390. <div id="rsidebar"><!-- start right sidebar-->
  391. <div class="t">filter by:</div> <!-- subtitle -->
  392.  
  393. <!--
  394. the filters for this section should be identical to the ones above in the header. just copy all the filters here. like the description, it will grow longer with the text - there is no scrollbar.
  395. -->
  396.  
  397. <div id="sort">
  398. <ul id="filters" class="option-set clearfix" data-option-key="filter">
  399. <li><a href="#filter" data-option-filter=".icon">all</a></li> <!-- this needs to stay here -->
  400. <li><a href="#filter" data-option-filter=".filter">filter name</a></li>
  401. <li><a href="#filter" data-option-filter=".filter">filter name</a></li>
  402. <li><a href="#filter" data-option-filter=".filter">filter name</a></li>
  403. </ul>
  404. </div>
  405. </div><!-- end right sidebar-->
  406.  
  407.  
  408. <div id="container">
  409.  
  410. <div id="content" class="clearfix"><!-- start icons -->
  411.  
  412. <!-- HOW TO ADD ICONS AND THEIR FILTERS
  413.  
  414. template:
  415. <div id="icons" class="icon filter"><img src="IMAGE ADDRESS HERE"></div>
  416.  
  417. to add icons, copy the template above as many times as you need.
  418. to add the filters, add the same name that you used above in the '.filter' but without the dot in front. you can add as many as you want but the 'icon' in the beginning MUST be there. then just put the image address in the part that says "IMAGE ADDRESS HERE"
  419.  
  420. for example, if my icon was of a female in colour, my code would look like this
  421. <div id="icons" class="icon colour femme"><img src="http://i.imgur.com/tDVMvip.png"></div>
  422.  
  423. -->
  424.  
  425. <div id="icons" class="icon filter"><img src="IMAGE ADDRESS HERE"></div>
  426.  
  427. </div><!-- end icons -->
  428.  
  429. </div><!-- end container -->
  430.  
  431.  
  432. <!-- credit - DO NOT TOUCH -->
  433.  
  434. <div class="credit">
  435. <a href="http://enchantedthemes.tumblr.com" title="alydae">A.</a>
  436. </div>
  437.  
  438.  
  439. </body>
  440.  
  441.  
  442. <!-- scripts - DO NOT TOUCH -->
  443.  
  444. <!-- filter scripts -->
  445. <script src="http://static.tumblr.com/fuu6t9w/eubml0pm0/jquery.isotope.min.js"></script>
  446.  
  447. <script>
  448. $(function(){
  449.  
  450. var $container = $('#content');
  451.  
  452. $container.isotope({
  453. itemSelector : '.icon'
  454. });
  455.  
  456.  
  457. var $optionSets = $('#sort .option-set'),
  458. $optionLinks = $optionSets.find('a');
  459.  
  460. $optionLinks.click(function(){
  461. var $this = $(this);
  462. // don't proceed if already selected
  463. if ( $this.hasClass('selected') ) {
  464. return false;
  465. }
  466. var $optionSet = $this.parents('.option-set');
  467. $optionSet.find('.selected').removeClass('selected');
  468. $this.addClass('selected');
  469.  
  470. // make option object dynamically, i.e. { filter: '.my-filter-class' }
  471. var options = {},
  472. key = $optionSet.attr('data-option-key'),
  473. value = $this.attr('data-option-filter');
  474. // parse 'false' as false boolean
  475. value = value === 'false' ? false : value;
  476. options[ key ] = value;
  477. if ( key === 'layoutMode' && typeof changeLayoutMode === 'function' ) {
  478. // changes in layout modes need extra logic
  479. changeLayoutMode( $this, options )
  480. } else {
  481. // otherwise, apply new options
  482. $container.isotope( options );
  483. }
  484.  
  485. return false;
  486. });
  487.  
  488.  
  489. });
  490. </script>
  491.  
  492. <!-- end filter scripts -->
  493.  
  494.  
  495. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Public Pastes
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!