API tools faq
paste
Advertisement
alydae

network iii

alydae
May 20th, 2018 (edited)
17,167
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 14.62 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <head>
  3.  
  4. <!--
  5.  
  6. NETWORK III
  7. by alydae
  8.  
  9. released: may 20, 2018
  10. last updated: november 19, 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>members</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.8.3/jquery.min.js"></script>
  26.  
  27. <script src="https://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. <link href=“//use.fontawesome.com/releases/v6.5.1/css/all.css” rel=“stylesheet”>
  46. <link rel="stylesheet" href="https://cdn.linearicons.com/free/1.0.0/icon-font.min.css">
  47.  
  48.  
  49. <style type="text/css">
  50.  
  51. @keyframes fadein {
  52. from { opacity:0; }
  53. to { opacity:1; }
  54. }
  55.  
  56. @-moz-keyframes fadein {
  57. from { opacity:0; }
  58. to { opacity:1; }
  59. }
  60.  
  61. @-webkit-keyframes fadein {
  62. from { opacity:0; }
  63. to { opacity:1; }
  64. }
  65.  
  66. @-ms-keyframes fadein {
  67. from { opacity:0; }
  68. to { opacity:1; }
  69. }
  70.  
  71. @-o-keyframes fadein {
  72. from { opacity:0; }
  73. to { opacity:1; }
  74. }
  75.  
  76. /*-- selection --*/
  77.  
  78. ::-moz-selection { background:var(--accent); color:var(--title); }
  79. ::selection { background:var(--accent); color:var(--title); }
  80.  
  81. /*-- scrollbar --*/
  82.  
  83. ::-webkit-scrollbar {
  84. width:1px;
  85. height:2px;
  86. }
  87.  
  88. ::-webkit-scrollbar-thumb { background-color:var(--text); }
  89.  
  90. /*-- tooltips --*/
  91.  
  92. #s-m-t-tooltip {
  93. color:var(--text);
  94. background-color:var(--accent);
  95. font-size:calc(var(--font-size) - 2px);
  96. font-family:'Open Sans', helvetica, sans-serif;
  97. letter-spacing:1px;
  98. text-transform:uppercase;
  99. text-align:center;
  100. position:absolute;
  101. padding:0px 5px 0px 5px;
  102. margin-top:30px;
  103. border:1px solid var(--borders);
  104. z-index:9999;
  105. }
  106.  
  107. /*-- tumblr controls --*/
  108.  
  109. .tmblr-iframe, .iframe-controls–desktop {
  110. display:none!important;
  111. }
  112.  
  113. /*-- change all variables here --*/
  114.  
  115. :root {
  116. --background:#fff;
  117. --accent:#fafafa;
  118. --text:#666;
  119. --links:#444;
  120. --links-hover:#bad1e7;
  121. --title:#222;
  122. --borders:#eee;
  123. --font-size:10px;
  124. }
  125.  
  126. /*-- general customisation --*/
  127.  
  128. body {
  129. color:var(--text);
  130. background-color:var(--background);
  131. font-style:normal;
  132. font-family:'Open Sans', helvetica, sans-serif;
  133. font-size:var(--font-size);
  134. font-weight:400;
  135. text-decoration:none;
  136. line-height:180%;
  137. -moz-osx-font-smoothing: grayscale;
  138. -webkit-font-smoothing: antialiased;
  139. font-smoothing: antialiased;
  140. -webkit-animation: fadein 1.5s;
  141. -moz-animation: fadein 1.5s;
  142. -o-animation: fadein 1.5s;
  143. animation: fadein 1.5s;
  144. }
  145.  
  146. a {
  147. text-decoration:none;
  148. color:var(--links);
  149. transition-duration: 0.6s;
  150. -moz-transition-duration: 0.6s;
  151. -webkit-transition-duration: 0.6s;
  152. -o-transition-duration: 0.6s;
  153. }
  154.  
  155. a:hover {
  156. color:var(--links-hover);
  157. cursor:pointer;
  158. transition-duration: 0.6s;
  159. -moz-transition-duration: 0.6s;
  160. -webkit-transition-duration: 0.6s;
  161. -o-transition-duration: 0.6s;
  162. }
  163.  
  164. b, strong { font-weight:700; color:var(--title); }
  165. i, em { font-style:italic; }
  166.  
  167. /*-- sidebar --*/
  168.  
  169. #sidebar {
  170. position:fixed;
  171. top:0;
  172. left:0;
  173. height:100vh;
  174. width:64px;
  175. z-index:999!important;
  176. background:var(--accent);
  177. border-right:1px solid var(--borders);
  178. }
  179.  
  180. #sidelinks { margin-top:50vh; transform:translateY(-50%); }
  181.  
  182. #sidelinks a {
  183. display:block;
  184. font-size:calc(var(--font-size) + 4px);
  185. line-height:100%;
  186. height:14px;
  187. width:14px;
  188. padding:10px;
  189. margin:15px;
  190. border-radius:100%;
  191. background:var(--background);
  192. border:1px solid var(--borders);
  193. }
  194.  
  195. .hover .hovertext {
  196. width:auto;
  197. background:var(--links-hover);
  198. color:var(--background);
  199. font-size:var(--font-size);
  200. text-transform:uppercase;
  201. font-weight:700;
  202. letter-spacing:0.5px;
  203. padding:3px 7px 3px 7px;
  204. position:absolute;
  205. margin-top:-3px;
  206. margin-left:40px;
  207. z-index:999!important;
  208. opacity:0;
  209. transition:opacity 0.6s;
  210. }
  211.  
  212. .hover:hover .hovertext { opacity:1; transition:opacity 0.6s; }
  213.  
  214. .hover .hovertext::after {
  215. content:" ";
  216. position:absolute;
  217. top:50%;
  218. right:100%;
  219. margin-top:-8px;
  220. border-width:8px;
  221. border-style:solid;
  222. border-color:transparent var(--links-hover) transparent transparent;
  223. }
  224.  
  225. /*-- header --*/
  226.  
  227. header {
  228. margin:100px auto 50px;
  229. width:300px;
  230. text-align:center;
  231. }
  232.  
  233. #icon {
  234. margin:0 auto;
  235. width:50px;
  236. height:50px;
  237. }
  238.  
  239. #icon img { width:50px; height:50px; border-radius:100%; }
  240.  
  241. #title {
  242. margin:20px 0px 5px 0px;
  243. font-size:calc(var(--font-size) + 6px);
  244. font-weight:700;
  245. text-transform:uppercase;
  246. letter-spacing:1px;
  247. color:var(--title);
  248. }
  249.  
  250. /*--filters--*/
  251.  
  252. #sort { margin-top:20px; }
  253.  
  254. #sort ul {
  255. display:block;
  256. list-style:none;
  257. padding-left:0px;
  258. margin-top:0;
  259. margin-bottom:0;
  260. }
  261.  
  262. #sort li { display:inline; list-style:none; }
  263. #sort li a.selected { font-weight:600; color:var(--title); }
  264.  
  265. #sort a {
  266. display:inline;
  267. margin-right:10px;
  268. font-style:italic;
  269. text-transform:lowercase;
  270. }
  271.  
  272. #sort b {
  273. text-transform:uppercase;
  274. letter-spacing:0.5px;
  275. margin-right:10px;
  276. }
  277.  
  278. /*-- content --*/
  279.  
  280. #content {
  281. margin:0 auto;
  282. margin-bottom:100px;
  283. width:calc((280px + 40px + 2px) * 3);
  284. /* ((box width + 2*margin + 2*border width) * number of columns) */
  285. }
  286.  
  287. .box {
  288. width:280px; /* image width x 2 + 30px */
  289. height:125px; /* image height */
  290. margin:20px;
  291. float:left;
  292. background:var(--accent);
  293. border:1px solid var(--borders);
  294. }
  295.  
  296. .name {
  297. width:30px;
  298. height:125px; /* image height */
  299. position:absolute;
  300. line-height:30px;
  301. transform:rotate(90deg);
  302. transform-origin:top left;
  303. }
  304.  
  305. .name h1 {
  306. width:105px; /* image height - 20px */
  307. float:right;
  308. margin-top:-30px;
  309. margin-right:-95px;
  310. padding-left:20px;
  311. transform:rotate(-180deg);
  312. transform-origin:center center;
  313. text-align:left;
  314. text-transform:uppercase;
  315. font-size:calc(var(--font-size) + 2px);
  316. font-weight:700;
  317. letter-spacing:0.5px;
  318. background:var(--background);
  319. }
  320.  
  321. .box img {
  322. position:absolute;
  323. width:125px; /* image width */
  324. height:125px; /* image height */
  325. margin-left:30px;
  326. }
  327.  
  328. .url {
  329. position:absolute;
  330. margin-left:155px;
  331. height:25px;
  332. width:125px;
  333. line-height:25px;
  334. text-align:center;
  335. background:var(--background);
  336. font-style:italic;
  337. font-weight:600;
  338. border-bottom:1px solid var(--borders);
  339. z-index:9;
  340. }
  341.  
  342. .desc {
  343. position:absolute;
  344. margin-left:155px;
  345. margin-top:25px;
  346. width:125px;
  347. height:100px;
  348. }
  349.  
  350. .t {
  351. text-align:center;
  352. line-height:160%;
  353. margin-top:10px;
  354. margin-left:10px;
  355. margin-bottom:10px;
  356. padding-right:10px;
  357. max-height:80px;
  358. overflow-Y:scroll;
  359. margin-top:calc(20% + 25px);
  360. transform:translateY(-50%);
  361. }
  362.  
  363. /*-- credit - DO NOT TOUCH --*/
  364.  
  365. .credit a {
  366. font-size:10px;
  367. bottom:15px;
  368. right:20px;
  369. position:fixed;
  370. text-transform:uppercase;
  371. }
  372.  
  373. </style>
  374. </head>
  375.  
  376.  
  377. <body>
  378.  
  379.  
  380. <div id="sidebar">
  381. <div id="sidelinks">
  382. <!-- this is where your sidebar links are. feel free to add more. icons can be found at https://linearicons.com/free. -->
  383. <a class="hover" href="/"><span class="lnr lnr-home"></span><span class="hovertext">index</span></a>
  384. <a class="hover" href="/ask"><span class="lnr lnr-envelope"></span><span class="hovertext">message</span></a>
  385. <a class="hover" href=""><span class="lnr lnr-menu"></span><span class="hovertext">link</span></a>
  386. <!-- do not remove this one!!! -->
  387. <a class="hover" href="https://enchantedthemes.tumblr.com"><span class="lnr lnr-code"></span><span class="hovertext">credit</span></a>
  388. </div>
  389. </div>
  390.  
  391.  
  392. <header>
  393. <!-- the default is your icon. if you want to change it, remove {PortraitURL-128} and replace it with the image url of the one you want -->
  394. <div id="icon"><img src="{PortraitURL-128}"/></div>
  395. <div id="title">members</div> <!-- title -->
  396. <!-- delete this section if you don't want a description-->
  397. <div class="d">optional description.</div>
  398. <!-- up to here! -->
  399.  
  400. <!-- HOW TO CUSTOMISE THE FILTERS
  401. template for new filter groups:
  402. <ul class="filter option-set" data-filter-group="group1">
  403. <b>category:</b>
  404. <li><a href="#" data-filter-value="" class="selected">all</a></li>
  405. <li><a href="#" data-filter-value=".filter">filter name</a></li>
  406. <li><a href="#" data-filter-value=".filter">filter name</a></li>
  407. </ul>
  408.  
  409. template for new filter:
  410. <li><a href="#" data-filter-value=".filter">filter name</a></li>
  411.  
  412. in order to make your filters match your books/tv shows/fic/whatever, you only need to change the '.filter' and 'filter name' part. the 'category' line is optional.
  413. for example, if I wanted to make my media filter by favourites only, my code would look like this
  414. <li><a href="#" data-filter-value=".fave">favourites</a></li>
  415. note the areas where it's been changed.
  416.  
  417. it is essential that you do not change any other part, including the 'exclusive' in the first filter group, as well as the first filter in every group.
  418. <li><a href="#" data-filter-value="" class="selected">all</a></li>
  419. -->
  420.  
  421. <div id="sort">
  422. <ul class="filter option-set exclusive" data-filter-group="group1">
  423. <b>category:</b>
  424. <li><a href="#" data-filter-value="" class="selected">all</a></li>
  425. <li><a href="#" data-filter-value=".filter">filter name</a></li>
  426. <li><a href="#" data-filter-value=".filter">filter name</a></li>
  427. </ul>
  428. <ul class="filter option-set" data-filter-group="group2">
  429. <b>category:</b>
  430. <li><a href="#" data-filter-value="" class="selected">all</a></li>
  431. <li><a href="#" data-filter-value=".filter">filter name</a></li>
  432. <li><a href="#" data-filter-value=".filter">filter name</a></li>
  433. </ul>
  434.  
  435. <ul class="filter option-set" data-filter-group="group3">
  436. <b>category:</b>
  437. <li><a href="#" data-filter-value="" class="selected">all</a></li>
  438. <li><a href="#" data-filter-value=".filter">filter name</a></li>
  439. <li><a href="#" data-filter-value=".filter">filter name</a></li>
  440. </ul>
  441. </div>
  442.  
  443. </header>
  444.  
  445.  
  446. <div id="content">
  447.  
  448. <!-- HOW TO ADD MORE AND FILTERS TO EACH MEMBER BOX
  449. template:
  450. <div class="box">
  451. <div class="name"><h1>name</h1></div>
  452. <img src=""/>
  453. <div class="url"><a href="">@username</a></div>
  454. <div class="desc">
  455. <div class="t">description</div>
  456. </div>
  457. </div>
  458.  
  459. 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 'box' in the beginning MUST stay there.
  460.  
  461. for example, if you wanted to have the filters 'admin' and 'blue' together for one box, the filters should look like this
  462. <div class="box admin blue">
  463. note how media is still there in front.
  464.  
  465. -->
  466.  
  467. <div class="box">
  468. <div class="name"><h1>name</h1></div>
  469. <img src=""/>
  470. <div class="url"><a href="">@username</a></div>
  471. <div class="desc">
  472. <div class="t">description</div>
  473. </div>
  474. </div>
  475.  
  476. <div class="box">
  477. <div class="name"><h1>name</h1></div>
  478. <img src=""/>
  479. <div class="url"><a href="">@username</a></div>
  480. <div class="desc">
  481. <div class="t">description</div>
  482. </div>
  483. </div>
  484.  
  485. <div class="box">
  486. <div class="name"><h1>name</h1></div>
  487. <img src=""/>
  488. <div class="url"><a href="">@username</a></div>
  489. <div class="desc">
  490. <div class="t">description</div>
  491. </div>
  492. </div>
  493.  
  494. <div class="box">
  495. <div class="name"><h1>name</h1></div>
  496. <img src=""/>
  497. <div class="url"><a href="">@username</a></div>
  498. <div class="desc">
  499. <div class="t">description</div>
  500. </div>
  501. </div>
  502.  
  503. <div class="box">
  504. <div class="name"><h1>name</h1></div>
  505. <img src=""/>
  506. <div class="url"><a href="">@username</a></div>
  507. <div class="desc">
  508. <div class="t">description</div>
  509. </div>
  510. </div>
  511.  
  512. <div class="box">
  513. <div class="name"><h1>name</h1></div>
  514. <img src=""/>
  515. <div class="url"><a href="">@username</a></div>
  516. <div class="desc">
  517. <div class="t">description</div>
  518. </div>
  519. </div>
  520.  
  521. </div>
  522.  
  523.  
  524. <!-- credit - DO NOT TOUCH -->
  525.  
  526. <div class="credit">
  527. <a href="https://enchantedthemes.tumblr.com" title="alydae">A.</a>
  528. </div>
  529.  
  530.  
  531. </body>
  532.  
  533.  
  534. <!-- combination filters by @magnusthemes -->
  535. <script src="https://unpkg.com/isotope-layout@3/dist/isotope.pkgd.min.js"></script>
  536. <script src="https://static.tumblr.com/p0knose/FpAp5c11c/magnusthemes.combofilters.js"></script>
  537.  
  538. <script>
  539. $(document).ready(function() {
  540. var $container = $("#content");
  541. var filters = {};
  542. var $grid = $container.isotope({
  543. itemSelector: ".box",
  544. percentPosition: false
  545. });
  546. $(".option-set a").click(function(e) {
  547. var $this = $(this); // cache the clicked link
  548. var filterAttr = "data-filter-value";
  549. var filterValue = $this.attr(filterAttr); // cache the filter
  550. var $optionSet = $this.parents(".option-set"); // cache the parent element
  551. var group = $optionSet.attr("data-filter-group"); // cache the parent filter group
  552. var filterGroup = filters[group];
  553. if (!filterGroup) {
  554. filterGroup = filters[group] = [];
  555. }
  556. var $selectAll = $optionSet.find('a['+filterAttr+'=""]'); // the 'select all' button in the current group
  557. var activeClass = "selected", // the class for active links
  558. exclClass = "exclusive"; // the class for exclusive groups
  559. comboFiltering($this,filters,filterAttr,filterValue,$optionSet,group,$selectAll,activeClass,exclClass);
  560. var comboFilter = getComboFilter(filters);
  561. $grid.isotope({
  562. filter: comboFilter
  563. });
  564. $this.toggleClass(activeClass);
  565. e.preventDefault();
  566. });
  567. });
  568. </script>
  569.  
  570.  
  571. </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!