API tools faq
paste
Advertisement
cvndythemes

IRIS: THEME

cvndythemes
Apr 6th, 2019
1,855
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 11.96 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <head>
  3.  
  4. <title>{text:Page Title}</title>
  5.  
  6. <!--
  7.  
  8. >> ETHEREAL THEMES // IRIS - ICONS PAGE
  9.  
  10. Designed by etherealthemes
  11. etherealthemes.tumblr.com
  12. ⓒ 2016 - 2019
  13.  
  14. >> TERMS OF USE
  15.  
  16. Do NOT remove the credit
  17. Do NOT claim as your own
  18.  
  19. *You can move the credit, but leave it visible
  20. *Edit as much as you'd like
  21. *Feel free to ask about basic customization
  22. *Page suggestions always welcomed
  23.  
  24. >> THEME HELP
  25.  
  26. All colors customizalbe on editor
  27.  
  28. TO ADD NOTES
  29. To add filters, search:
  30. START NOTES
  31.  
  32. TO ADD FILTERS AND CATEGORIES:
  33. To add filters, search:
  34. START FILTERS
  35. and copy one line from <li> to </li> and paste for every new filter. Make sure to keep the "." before your filter ie .riverdale instead of riverdale
  36. The catergories are directly below, or search:
  37. START CATEGORIES
  38.  
  39. TO ADD ICONS:
  40. To add icons, search:
  41. Start Exmaple Icon
  42. and copy the block of code (marked by START and END EXAMPLE ICONS)
  43. paste for each icon. Each icon image needs to be in its own <div> block
  44.  
  45. TO CATEGORIZE ICONS:
  46. On each icon <div> block there's a "class" with the filters associated with the icon. Leave "icon" to re-sort icons by clicking "All" on the topbar. For each main filter and category you add, add to the corresponding icon. For example if my filters are:
  47.  
  48. data-option-filter=".gameofthrones"
  49. data-option-filter=".killingeve"
  50. data-option-filter=".thepunisher"
  51. data-option-filter=".red"
  52. data-option-filter=".green"
  53. data-option-filter=".orange"
  54.  
  55. Then I would label the classes for each as:
  56. class="icon gameofthrones red"
  57. class="icon killingeve green"
  58. class="icon thepunisher orange"
  59.  
  60. Do the same for each main filter and category.
  61.  
  62. THEME:
  63. All colors customizable on main editor.
  64. BG: #fbfbfb, Text: #000000, Gray: #dddddd, Content: #ffffff, Accent: a0a1a5
  65.  
  66. MISC:
  67. Page auto-centers
  68. Auto-fills all page sizes ; drag your window size to preview
  69. Page will NOT look centered unless you fill at least the top row with icons
  70.  
  71.  
  72. -->
  73.  
  74.  
  75.  
  76.  
  77. <!-- COLORS -->
  78. <meta name="color:Background" content="#fbfbfb" />
  79. <meta name="color:Text" content="#000000" />
  80. <meta name="color:Content" content="#ffffff" />
  81. <meta name="color:Gray" content="#dddddd" />
  82. <meta name="color:Accent" content="#a0a1a5" />
  83.  
  84.  
  85. <!-- TEXT -->
  86. <meta name="text:Page Title" content="Page Title"/>
  87.  
  88.  
  89. <!-- IF -->
  90. <meta name="if:Invert Tumblr Controls" content="1"/>
  91.  
  92.  
  93. <!-- SELECT -->
  94. <meta name="select:Font Size" content="10px" title="Default">
  95. <meta name="select:Font Size" content="9px" title="Small">
  96. <meta name="select:Font Size" content="11px" title="Large">
  97.  
  98.  
  99. <!-- SCRIPTS-->
  100. <link href="https://fonts.googleapis.com/css?family=Muli:400,400i,700,700i" rel="stylesheet">
  101.  
  102. <!-- STYLESHEET-->
  103. <style type="text/css">
  104.  
  105. /* --- SCROLLBAR --- */
  106.  
  107. ::-webkit-scrollbar-thumb {background:{color:Accent};border:4px solid {color:Background};}
  108.  
  109. ::-webkit-scrollbar {width:11px;border:5px solid {color:Background};border-right:5px solid {color:Background};background:{color:Gray};}
  110.  
  111. /* --- TUMBLR TOOLS --- */
  112.  
  113. iframe.tmblr-iframe {
  114. position:fixed;
  115. z-index:5!important;
  116. top:3px!important;
  117. right:0px!important;
  118. opacity:0;
  119. padding-right:60px;
  120. transform:scale(0.5);
  121. transform-origin:100% 0;
  122. -webkit-transform:scale(0.5);
  123. -webkit-transform-origin:100% 0;
  124. -o-transform:scale(0.5);
  125. -o-transform-origin:100% 0;
  126. -moz-transform:scale(0.5);
  127. -moz-transform-origin:100% 0;
  128. -ms-transform:scale(0.5);
  129. -ms-transform-origin:100% 0;
  130. transition:.2s ease-in-out;
  131. -webkit-transition:.2s ease-in-out;
  132. -moz-transition:.2s ease-in-out;
  133.  
  134. {block:IfInvertTumblrControls}
  135. filter:invert(1);
  136. -webkit-filter:invert(1);
  137. -o-filter:invert(1);
  138. -moz-filter:invert(1);
  139. -ms-filter:invert(1);
  140. {/block:IfInvertTumblrControl}
  141. }
  142.  
  143. iframe.tmblr-iframe:hover {opacity:0.5!important;}
  144.  
  145. .tcontrols {
  146. position:fixed;
  147. top:{select:Font Size};
  148. right:15px;
  149. z-index:4;
  150. transition:.2s ease-in-out;
  151. -webkit-transition:.2s ease-in-out;
  152. -moz-transition:.2s ease-in-out;
  153. }
  154.  
  155. .tcontrols {color:{color:Text};font-size:14px;}
  156.  
  157. /* --- BODY --- */
  158.  
  159. body {
  160. margin: 0px;
  161. padding: 0px;
  162. font-family: 'Muli', sans-serif;
  163. color:{color:Text};
  164. font-size:{select:Font Size};
  165. line-height:155%;
  166. font-weight:normal;
  167. overflow-x:hidden;
  168. word-wrap:normal;
  169. text-align:left;
  170. background:{color:Background};
  171. }
  172.  
  173. a {
  174. color:{color:Text};
  175. text-decoration:none;
  176. border:0;
  177. opacity:1;
  178. transition:0.3s ease-in-out;
  179. -webkit-transition:0.3s ease-in-out;
  180. -moz-transition:0.3s ease-in-out;
  181. }
  182.  
  183. a:hover {opacity:0.6;}
  184.  
  185. b,strong {font-weight:700;}
  186.  
  187. .et {position:fixed;color:{color:Text};right:8px;bottom:8px;opacity:0.6;text-transform:uppercase;font-size:calc({select:Font Size} - 0.5px);z-index:5;}
  188.  
  189. /* --- TOPBAR --- */
  190.  
  191. #topbar {
  192. position:fixed;
  193. top:0px;
  194. left:0px;
  195. width:100%;
  196. padding:{select:Font Size};
  197. text-align:center;
  198. background:{color:Content};
  199. z-index:2;
  200. }
  201.  
  202. .topbar {width:100%;text-align:center;}
  203.  
  204. ul.topbar {list-style-type:none;}
  205.  
  206. .topbar li {display:inline-block;text-align:center;}
  207.  
  208. .topbar li a {
  209. margin:0px 5px 5px 5px;
  210. color:{color:Text};
  211. font-size:{select:Font Size};
  212. text-transform:uppercase;
  213. padding:5px;
  214. }
  215.  
  216. .topbar li:not(:first-child):before {content:"\2022";padding-right:5px;position:relative;top:-1px;}
  217.  
  218. /* --- CONTAINER --- */
  219.  
  220. #container {
  221. margin: 0 auto;
  222. width:90%;
  223. margin-top:80px;
  224. padding-bottom:100px;
  225. position:relative;
  226. text-align:center;
  227. }
  228.  
  229. .block_bottom {position:fixed;background:{color:Background};height:35px;width:100%;z-index:2;}
  230.  
  231. .block_top {top:0px;left:0px;}
  232.  
  233. .block_bottom {bottom:0px;left:0px;}
  234.  
  235. /* --- NOTES --- */
  236.  
  237. .notes {
  238. position:fixed;
  239. top:23px;
  240. left:{select:Font Size};
  241. width:200px;
  242. text-align:center;
  243. padding:{select:Font Size};
  244. color:{color:Text};
  245. background:transparent;
  246. z-index:3;
  247. transition:0.2s ease-in-out;
  248. -webkit-transition:0.2s ease-in-out;
  249. -moz-transition:0.2s ease-in-out;
  250. }
  251.  
  252. .notes h1 {
  253. font-size:calc({select:Font Size} + 2px);
  254. text-transform:uppercase;
  255. margin:0px 0px 4px 0px;
  256. }
  257.  
  258. .notes:hover {background:{color:Accent};color:{color:Content};}
  259.  
  260. .notes:hover .notes_det {opacity:1;margin-top:0px;display:block;}
  261.  
  262. .notes_det {
  263. display:none;
  264. transition:0.3s ease-in-out;
  265. -webkit-transition:0.3s ease-in-out;
  266. -moz-transition:0.3s ease-in-out;
  267. color:{color:Content};
  268. }
  269.  
  270. .notes a {color:{color:Content};opacity:0.8!important;}
  271.  
  272. ul.rules {margin-left:-30px;}
  273.  
  274. .rules li {display:block;text-align:left;}
  275.  
  276. /* --- ICONS --- */
  277.  
  278. .icon img {
  279. margin:3px;
  280. padding:1px;
  281. width:100px;
  282. display:inline-block;
  283. height:100px;
  284. }
  285.  
  286. .icon {
  287. display:inline-block;
  288. margin:3px;
  289. width:100px;
  290. height:100px;
  291. transition-duration:0.9s;
  292. -moz-transition-duration:0.9s;
  293. -webkit-transition-duration:0.9s;
  294. -o-transition-duration:0.9s;
  295. }
  296.  
  297.  
  298. </style>
  299.  
  300. <body>
  301.  
  302.  
  303.  
  304.  
  305. <!-- DO NOT EDIT -->
  306. <div class="tcontrols">+</div><div class="block_bottom"></div><div class="et"><a href="https://ethereal-themes.tumblr.com">ethereal</a></div>
  307.  
  308.  
  309.  
  310.  
  311.  
  312.  
  313.  
  314.  
  315. <!------- START NOTES ------->
  316.  
  317. <div class="notes">
  318.  
  319. <h1>Rules</h1>
  320.  
  321. <div class="notes_det">
  322.  
  323. Lorem <a href="/">ipsum</a> dolor sit <b>amet</b>, consectetur <em>adipiscing</em> elit. Aliquam <i>pretium</i> magna et velit dignissim, a placerat nisi rutrum. Vestibulum odio ipsum, <b>rutrum</b> a ex ac, fringilla <a href="/">fermentum</a> ante.
  324. <p>
  325. <ul class="rules">
  326. <li>Lorem ipsum dolor sit amet.</li>
  327. <li>Lorem ipsum dolor sit amet.</li>
  328. <li>Lorem ipsum dolor sit amet.</li>
  329. <li>Lorem ipsum dolor sit amet.</li>
  330. </ul>
  331. <p>
  332. Lorem <a href="/">ipsum</a> dolor sit <b>amet</b>, consectetur <em>adipiscing</em> elit. Aliquam <i>pretium</i> magna et velit dignissim, a placerat nisi rutrum. Vestibulum odio ipsum, <b>rutrum</b> a ex ac, fringilla <a href="/">fermentum</a> ante.
  333.  
  334. </div></div>
  335. <!------- END NOTES ------->
  336.  
  337.  
  338.  
  339.  
  340.  
  341.  
  342.  
  343.  
  344.  
  345.  
  346.  
  347.  
  348.  
  349.  
  350. <!------- START TOPBAR ------->
  351. <div id="topbar">
  352. <div class="topbar">
  353.  
  354.  
  355. <div id="filters" class="option-set clearfix" data-option-key="filter">
  356.  
  357. <!------- START FILTERS ------->
  358. <ul class="filter"><center>
  359.  
  360. <li><a href="#filter" data-option-filter=".filter1">filter one</a></li>
  361. <li><a href="#filter" data-option-filter=".filter2">filter two</a></li>
  362. <li><a href="#filter" data-option-filter=".filter3">filter three</a></li>
  363. <li><a href="#filter" data-option-filter=".filter4">filter four</a></li>
  364. <li><a href="#filter" data-option-filter=".filter5">filter five</a></li>
  365.  
  366. </center>
  367. </ul>
  368. <!-------END FILTERS ------->
  369.  
  370. <!------- START CATEGORIES ------->
  371. <ul class="categories"><center>
  372.  
  373. <li><a href="#filter" data-option-filter=".color1">color one</a></li>
  374. <li><a href="#filter" data-option-filter=".color2">color two</a></li>
  375. <li><a href="#filter" data-option-filter=".color3">color three</a></li>
  376. <li><a href="#filter" data-option-filter=".color4">color four</a></li>
  377. <li><a href="#filter" data-option-filter=".color5">color five</a></li>
  378. <li><a href="#filter" data-option-filter=".icon">all</a></li>
  379.  
  380. </center>
  381. </ul>
  382. <!------- END CATEGORIES ------->
  383.  
  384. </div></div></div>
  385. <!------- END TOPBAR ------->
  386.  
  387.  
  388.  
  389.  
  390.  
  391.  
  392.  
  393.  
  394.  
  395.  
  396.  
  397.  
  398. <!------- START CONTAINER ------->
  399. <div id="container" class="clearfix"><center>
  400. <!------- START ICONS ------->
  401.  
  402.  
  403.  
  404.  
  405.  
  406.  
  407.  
  408. <!--- Start Exmaple Icon --->
  409. <div id="icons" class="icon show color person etc"><img src="https://placehold.it/100X100" /></div>
  410. <!--- End Exmaple Icon --->
  411.  
  412.  
  413.  
  414. <!--- Start Exmaple Icon --->
  415. <div id="icons" class="icon filter1 color3"><img src="https://placehold.it/100X100" /></div>
  416. <!--- End Exmaple Icon --->
  417.  
  418.  
  419.  
  420.  
  421.  
  422.  
  423.  
  424.  
  425.  
  426. <!------- END ICONS ------->
  427. </div>
  428. <!------- END CONTAINER ------->
  429.  
  430.  
  431.  
  432.  
  433.  
  434.  
  435. <!------- SCRIPTS: DO NOT EDIT ------->
  436. <script src="https://static.tumblr.com/zvesamf/1T6okd4xb/imagesloaded.pkgd.min.js"></script>
  437. <script src="https://static.tumblr.com/fuu6t9w/kh8ml0pl9/jquery-1.7.1.min.js"></script>
  438. <script src="https://static.tumblr.com/fuu6t9w/eubml0pm0/jquery.isotope.min.js"></script>
  439.  
  440. <script>
  441. $(function(){
  442.  
  443. var $container = $('#container');
  444.  
  445. $container.isotope({
  446. itemSelector : '.icon'
  447. });
  448.  
  449.  
  450. var $optionSets = $('#topbar .option-set'),
  451. $optionLinks = $optionSets.find('a');
  452.  
  453. $optionLinks.click(function(){
  454. var $this = $(this);
  455. // don't proceed if already selected
  456. if ( $this.hasClass('selected') ) {
  457. return false;
  458. }
  459. var $optionSet = $this.parents('.option-set');
  460. $optionSet.find('.selected').removeClass('selected');
  461. $this.addClass('selected');
  462.  
  463. // make option object dynamically, i.e. { filter: '.my-filter-class' }
  464. var options = {},
  465. key = $optionSet.attr('data-option-key'),
  466. value = $this.attr('data-option-filter');
  467. // parse 'false' as false boolean
  468. value = value === 'false' ? false : value;
  469. options[ key ] = value;
  470. if ( key === 'layoutMode' && typeof changeLayoutMode === 'function' ) {
  471. // changes in layout modes need extra logic
  472. changeLayoutMode( $this, options )
  473. } else {
  474. // otherwise, apply new options
  475. $container.isotope( options );
  476. }
  477.  
  478. return false;
  479. });
  480.  
  481. $grid.imagesLoaded().progress( function() {
  482. $grid.isotope('layout');
  483. });
  484.  
  485. });
  486. </script>
  487.  
  488. </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!