Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!DOCTYPE html>
- <head>
- <title>{text:Page Title}</title>
- <!--
- >> ETHEREAL THEMES // IRIS - ICONS PAGE
- Designed by etherealthemes
- etherealthemes.tumblr.com
- ⓒ 2016 - 2019
- >> TERMS OF USE
- Do NOT remove the credit
- Do NOT claim as your own
- *You can move the credit, but leave it visible
- *Edit as much as you'd like
- *Feel free to ask about basic customization
- *Page suggestions always welcomed
- >> THEME HELP
- All colors customizalbe on editor
- TO ADD NOTES
- To add filters, search:
- START NOTES
- TO ADD FILTERS AND CATEGORIES:
- To add filters, search:
- START FILTERS
- 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
- The catergories are directly below, or search:
- START CATEGORIES
- TO ADD ICONS:
- To add icons, search:
- Start Exmaple Icon
- and copy the block of code (marked by START and END EXAMPLE ICONS)
- paste for each icon. Each icon image needs to be in its own <div> block
- TO CATEGORIZE ICONS:
- 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:
- data-option-filter=".gameofthrones"
- data-option-filter=".killingeve"
- data-option-filter=".thepunisher"
- data-option-filter=".red"
- data-option-filter=".green"
- data-option-filter=".orange"
- Then I would label the classes for each as:
- class="icon gameofthrones red"
- class="icon killingeve green"
- class="icon thepunisher orange"
- Do the same for each main filter and category.
- THEME:
- All colors customizable on main editor.
- BG: #fbfbfb, Text: #000000, Gray: #dddddd, Content: #ffffff, Accent: a0a1a5
- MISC:
- Page auto-centers
- Auto-fills all page sizes ; drag your window size to preview
- Page will NOT look centered unless you fill at least the top row with icons
- -->
- <!-- COLORS -->
- <meta name="color:Background" content="#fbfbfb" />
- <meta name="color:Text" content="#000000" />
- <meta name="color:Content" content="#ffffff" />
- <meta name="color:Gray" content="#dddddd" />
- <meta name="color:Accent" content="#a0a1a5" />
- <!-- TEXT -->
- <meta name="text:Page Title" content="Page Title"/>
- <!-- IF -->
- <meta name="if:Invert Tumblr Controls" content="1"/>
- <!-- SELECT -->
- <meta name="select:Font Size" content="10px" title="Default">
- <meta name="select:Font Size" content="9px" title="Small">
- <meta name="select:Font Size" content="11px" title="Large">
- <!-- SCRIPTS-->
- <link href="https://fonts.googleapis.com/css?family=Muli:400,400i,700,700i" rel="stylesheet">
- <!-- STYLESHEET-->
- <style type="text/css">
- /* --- SCROLLBAR --- */
- ::-webkit-scrollbar-thumb {background:{color:Accent};border:4px solid {color:Background};}
- ::-webkit-scrollbar {width:11px;border:5px solid {color:Background};border-right:5px solid {color:Background};background:{color:Gray};}
- /* --- TUMBLR TOOLS --- */
- iframe.tmblr-iframe {
- position:fixed;
- z-index:5!important;
- top:3px!important;
- right:0px!important;
- opacity:0;
- padding-right:60px;
- transform:scale(0.5);
- transform-origin:100% 0;
- -webkit-transform:scale(0.5);
- -webkit-transform-origin:100% 0;
- -o-transform:scale(0.5);
- -o-transform-origin:100% 0;
- -moz-transform:scale(0.5);
- -moz-transform-origin:100% 0;
- -ms-transform:scale(0.5);
- -ms-transform-origin:100% 0;
- transition:.2s ease-in-out;
- -webkit-transition:.2s ease-in-out;
- -moz-transition:.2s ease-in-out;
- {block:IfInvertTumblrControls}
- filter:invert(1);
- -webkit-filter:invert(1);
- -o-filter:invert(1);
- -moz-filter:invert(1);
- -ms-filter:invert(1);
- {/block:IfInvertTumblrControl}
- }
- iframe.tmblr-iframe:hover {opacity:0.5!important;}
- .tcontrols {
- position:fixed;
- top:{select:Font Size};
- right:15px;
- z-index:4;
- transition:.2s ease-in-out;
- -webkit-transition:.2s ease-in-out;
- -moz-transition:.2s ease-in-out;
- }
- .tcontrols {color:{color:Text};font-size:14px;}
- /* --- BODY --- */
- body {
- margin: 0px;
- padding: 0px;
- font-family: 'Muli', sans-serif;
- color:{color:Text};
- font-size:{select:Font Size};
- line-height:155%;
- font-weight:normal;
- overflow-x:hidden;
- word-wrap:normal;
- text-align:left;
- background:{color:Background};
- }
- a {
- color:{color:Text};
- text-decoration:none;
- border:0;
- opacity:1;
- transition:0.3s ease-in-out;
- -webkit-transition:0.3s ease-in-out;
- -moz-transition:0.3s ease-in-out;
- }
- a:hover {opacity:0.6;}
- b,strong {font-weight:700;}
- .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;}
- /* --- TOPBAR --- */
- #topbar {
- position:fixed;
- top:0px;
- left:0px;
- width:100%;
- padding:{select:Font Size};
- text-align:center;
- background:{color:Content};
- z-index:2;
- }
- .topbar {width:100%;text-align:center;}
- ul.topbar {list-style-type:none;}
- .topbar li {display:inline-block;text-align:center;}
- .topbar li a {
- margin:0px 5px 5px 5px;
- color:{color:Text};
- font-size:{select:Font Size};
- text-transform:uppercase;
- padding:5px;
- }
- .topbar li:not(:first-child):before {content:"\2022";padding-right:5px;position:relative;top:-1px;}
- /* --- CONTAINER --- */
- #container {
- margin: 0 auto;
- width:90%;
- margin-top:100px;
- padding-bottom:100px;
- position:relative;
- text-align:center;
- }
- .block_bottom {position:fixed;background:{color:Background};height:35px;width:100%;z-index:3;}
- .block_top {top:0px;left:0px;}
- .block_bottom {bottom:0px;left:0px;}
- /* --- NOTES --- */
- .notes {
- position:fixed;
- top:23px;
- left:{select:Font Size};
- width:200px;
- text-align:center;
- padding:{select:Font Size};
- color:{color:Text};
- background:transparent;
- z-index:3;
- transition:0.2s ease-in-out;
- -webkit-transition:0.2s ease-in-out;
- -moz-transition:0.2s ease-in-out;
- }
- .notes h1 {
- font-size:calc({select:Font Size} + 2px);
- text-transform:uppercase;
- margin:0px 0px 4px 0px;
- }
- .notes:hover {background:{color:Accent};color:{color:Content};}
- .notes:hover .notes_det {opacity:1;margin-top:0px;display:block;}
- .notes_det {
- display:none;
- transition:0.3s ease-in-out;
- -webkit-transition:0.3s ease-in-out;
- -moz-transition:0.3s ease-in-out;
- color:{color:Content};
- }
- .notes a {color:{color:Content};opacity:0.8!important;}
- ul.rules {margin-left:-30px;}
- .rules li {display:block;text-align:left;}
- /* --- ICONS --- */
- .icon img {
- margin:3px;
- padding:1px;
- width:100px;
- display:inline-block;
- height:100px;
- }
- .icon {
- display:inline-block;
- margin:3px 3px 50px 3px;
- width:100px;
- height:100px;
- transition-duration:0.9s;
- -moz-transition-duration:0.9s;
- -webkit-transition-duration:0.9s;
- -o-transition-duration:0.9s;
- }
- /* --- CHARACTER NAMES --- */
- .tooltip-wrap {
- position:relative;
- height:135px;
- width:105px;
- z-index:1;
- }
- .tooltip-content {
- position:relative;
- top:0px;
- width:100px;
- z-index:2;
- color:#000000;
- }
- </style>
- <body>
- <!-- DO NOT EDIT -->
- <div class="tcontrols">+</div><div class="block_bottom"></div><div class="et"><a href="https://ethereal-themes.tumblr.com">ethereal</a></div>
- <!------- START NOTES ------->
- <div class="notes">
- <h1>muses</h1>
- <div class="notes_det">
- my babies!!! i love them so much ♡ click on the icons for a link to posts, graphics and gifs that have inspired them. enjoy!
- </a></div></div>
- <!------- END NOTES ------->
- <!------- START TOPBAR ------->
- <div id="topbar">
- <div class="topbar">
- <div id="filters" class="option-set clearfix" data-option-key="filter">
- <!------- START FILTERS ------->
- <ul class="filter"><center>
- <li><a href="#filter" data-option-filter=".aeonian">aeonian</a></a></li>
- <li><a href="#filter" data-option-filter=".falsegods">false gods</a></li>
- <li><a href="#filter" data-option-filter=".spirit">spirit kingdom</a></li>
- <li><a href="#filter" data-option-filter=".diamond">diamond of the first water</a></li>
- <li><a href="#filter" data-option-filter=".tbote">the beginning of the end</a></li>
- <li><a href="#filter" data-option-filter=".division">division</a></li>
- <li><a href="#filter" data-option-filter=".100">100th</a></li>
- <li><a href="#filter" data-option-filter=".selection">the selection</a></li>
- <li><a href="#filter" data-option-filter="">all</a></li>
- </center>
- </ul>
- <!-------END FILTERS ------->
- <!------- START CATEGORIES ------->
- <ul class="categories"><center>
- <li><a href="#filter" data-option-filter=".medieval">medieval</a></li>
- <li><a href="#filter" data-option-filter=".modern">modern</a></li>
- <li><a href="#filter" data-option-filter=".futuristic">futuristic</a></li>
- <li><a href="#filter" data-option-filter=".others">others</a></li>
- </center>
- </ul>
- <!------- END CATEGORIES ------->
- </a></div></div></div>
- <!------- END TOPBAR ------->
- <!------- START CONTAINER ------->
- <div id="container" class="clearfix"><center>
- <!------- START ICONS ------->
- <!--- Start Exmaple Icon --->
- <div id="icons" class="icon aeonian medieval">
- <div class="tooltip-wrap">
- <a href="https://sanguine-bliss.tumblr.com/tagged/gem"><img src=""/>
- <div class="tooltip-content">
- <p>gem</p>
- </div>
- </a></div></div>
- <!--- End Exmaple Icon --->
- <!--- Start Exmaple Icon --->
- <div id="icons" class="icon aeonian medieval">
- <div class="tooltip-wrap">
- <a href="https://sanguine-bliss.tumblr.com/tagged/astro"><img src=""/>
- <div class="tooltip-content">
- <p>astro</p>
- </div>
- </a></div></div>
- <!--- End Exmaple Icon --->
- <!--- Start Exmaple Icon --->
- <div id="icons" class="icon aeonian medieval">
- <div class="tooltip-wrap">
- <a href="https://sanguine-bliss.tumblr.com/tagged/rune"><img src="" />
- <div class="tooltip-content">
- <p>rune</p>
- </div>
- </a></div></div>
- <!--- End Exmaple Icon --->
- <!--- Start Exmaple Icon --->
- <div id="icons" class="icon aeonian medieval">
- <div class="tooltip-wrap">
- <a href="https://sanguine-bliss.tumblr.com/tagged/sera"><img src="" />
- <div class="tooltip-content">
- <p>sera</p>
- </div>
- </a></div></div>
- <!--- End Exmaple Icon --->
- <!--- Start Exmaple Icon --->
- <div id="icons" class="icon aeonian medieval">
- <div class="tooltip-wrap">
- <a href="https://sanguine-bliss.tumblr.com/tagged/ying"><img src="" />
- <div class="tooltip-content">
- <p>ying</p>
- </div>
- </a></div></div>
- <!--- End Exmaple Icon --->
- <!--- Start Exmaple Icon --->
- <div id="icons" class="icon aeonian medieval">
- <div class="tooltip-wrap">
- <a href="https://sanguine-bliss.tumblr.com/tagged/sky"><img src="" />
- <div class="tooltip-content">
- <p>sky</p>
- </div>
- </a></div></div>
- <!--- End Exmaple Icon --->
- <!--- Start Exmaple Icon --->
- <div id="icons" class="icon aeonian medieval">
- <div class="tooltip-wrap">
- <a href="https://sanguine-bliss.tumblr.com/tagged/oli"><img src="" />
- <div class="tooltip-content">
- <p>oli</p>
- </div>
- </a></div></div>
- <!--- End Exmaple Icon --->
- <!--- Start Exmaple Icon --->
- <div id="icons" class="icon aeonian medieval">
- <div class="tooltip-wrap">
- <a href="https://sanguine-bliss.tumblr.com/tagged/aaron"><img src="" />
- <div class="tooltip-content">
- <p>aaron</p>
- </div>
- </a></div></div>
- <!--- End Exmaple Icon --->
- <!--- Start Exmaple Icon --->
- <div id="icons" class="icon spirit medieval">
- <div class="tooltip-wrap">
- <a href="https://sanguine-bliss.tumblr.com/tagged/ellie"><img src="" />
- <div class="tooltip-content">
- <p>ellie</p>
- </div>
- </a></div></div>
- <!--- End Exmaple Icon --->
- <!--- Start Exmaple Icon --->
- <div id="icons" class="icon spirit medieval">
- <div class="tooltip-wrap">
- <a href="https://sanguine-bliss.tumblr.com/tagged/nia"><img src="" />
- <div class="tooltip-content">
- <p>nia</p>
- </div>
- </a></div></div>
- <!--- End Exmaple Icon --->
- <!--- Start Exmaple Icon --->
- <div id="icons" class="icon spirit medieval">
- <div class="tooltip-wrap">
- <a href="https://sanguine-bliss.tumblr.com/tagged/styx"><img src="" />
- <div class="tooltip-content">
- <p>styx</p>
- </div>
- </a></div></div>
- <!--- End Exmaple Icon --->
- <!--- Start Exmaple Icon --->
- <div id="icons" class="icon spirit medieval">
- <div class="tooltip-wrap">
- <a href="https://sanguine-bliss.tumblr.com/tagged/ez"><img src="" />
- <div class="tooltip-content">
- <p>ezra</p>
- </div>
- </a></div></div>
- <!--- End Exmaple Icon --->
- <!--- Start Exmaple Icon --->
- <div id="icons" class="icon diamond medieval">
- <div class="tooltip-wrap">
- <a href="https://sanguine-bliss.tumblr.com/tagged/liliana"><img src="" />
- <div class="tooltip-content">
- <p>liliana</p>
- </div>
- </a></div></div>
- <!--- End Exmaple Icon --->
- <!--- Start Exmaple Icon --->
- <div id="icons" class="icon diamond medieval">
- <div class="tooltip-wrap">
- <a href="https://sanguine-bliss.tumblr.com/tagged/ria"><img src="" />
- <div class="tooltip-content">
- <p>orianne</p>
- </div>
- </a></div></div>
- <!--- End Exmaple Icon --->
- <!--- Start Exmaple Icon --->
- <div id="icons" class="icon diamond medieval">
- <div class="tooltip-wrap">
- <a href="https://sanguine-bliss.tumblr.com/tagged/archer"><img src="" />
- <div class="tooltip-content">
- <p>archer</p>
- </div>
- </a></div></div>
- <!--- End Exmaple Icon --->
- <div id="icons" class="icon diamond medieval">
- <div class="tooltip-wrap">
- <a href="https://sanguine-bliss.tumblr.com/tagged/cyrus"><img src="" />
- <div class="tooltip-content">
- <p>cyrus</p>
- </div>
- </a></div></div>
- <!--- Start Exmaple Icon --->
- <!--- End Exmaple Icon --->
- <!--- Start Exmaple Icon --->
- <div id="icons" class="icon tbote modern">
- <div class="tooltip-wrap">
- <a href="https://sanguine-bliss.tumblr.com/tagged/will"><img src="" />
- <div class="tooltip-content">
- <p>will</p>
- </div>
- </a></div></div>
- <!--- End Exmaple Icon --->
- <!--- Start Exmaple Icon --->
- <div id="icons" class="icon tbote modern">
- <div class="tooltip-wrap">
- <a href="https://sanguine-bliss.tumblr.com/tagged/soraya"><img src="" />
- <div class="tooltip-content">
- <p>soraya</p>
- </div>
- </a></div></div>
- <!--- End Exmaple Icon --->
- <!--- Start Exmaple Icon --->
- <div id="icons" class="icon falsegods futuristic">
- <div class="tooltip-wrap">
- <a href="https://sanguine-bliss.tumblr.com/tagged/rhea"><img src="" />
- <div class="tooltip-content">
- <p>rhea</p>
- </div>
- </a></div></div>
- <!--- End Exmaple Icon --->
- <!--- Start Exmaple Icon --->
- <div id="icons" class="icon falsegods futuristic">
- <div class="tooltip-wrap">
- <a href="https://sanguine-bliss.tumblr.com/tagged/aera"><img src="" />
- <div class="tooltip-content">
- <p>aera</p>
- </div>
- </a></div></div>
- <!--- End Exmaple Icon --->
- <!--- Start Exmaple Icon --->
- <div id="icons" class="icon division futuristic">
- <div class="tooltip-wrap">
- <a href="https://sanguine-bliss.tumblr.com/tagged/liam"><img src="" />
- <div class="tooltip-content">
- <p>liam</p>
- </div>
- </a></div></div>
- <!--- End Exmaple Icon --->
- <!--- Start Exmaple Icon --->
- <div id="icons" class="icon division futuristic">
- <div class="tooltip-wrap">
- <a href="https://sanguine-bliss.tumblr.com/tagged/fin"><img src="" />
- <div class="tooltip-content">
- <p>fin</p>
- </div>
- </a></div></div>
- <!--- End Exmaple Icon --->
- <!--- Start Exmaple Icon --->
- <div id="icons" class="icon division futuristic">
- <div class="tooltip-wrap">
- <a href="https://sanguine-bliss.tumblr.com/tagged/june"><img src="" />
- <div class="tooltip-content">
- <p>june</p>
- </div>
- </a></div></div>
- <!--- End Exmaple Icon --->
- <!--- Start Exmaple Icon --->
- <div id="icons" class="icon division futuristic">
- <div class="tooltip-wrap">
- <a href="https://sanguine-bliss.tumblr.com/tagged/kylie"><img src="" />
- <div class="tooltip-content">
- <p>kylie</p>
- </div>
- </a></div></div>
- <!--- End Exmaple Icon --->
- <!--- Start Exmaple Icon --->
- <div id="icons" class="icon division futuristic">
- <div class="tooltip-wrap">
- <a href="https://sanguine-bliss.tumblr.com/tagged/jordan"><img src="" />
- <div class="tooltip-content">
- <p>jordan</p>
- </div>
- </a></div></div>
- <!--- End Exmaple Icon --->
- <!--- Start Exmaple Icon --->
- <div id="icons" class="icon division futuristic">
- <div class="tooltip-wrap">
- <a href="https://sanguine-bliss.tumblr.com/tagged/kedian"><img src="" />
- <div class="tooltip-content">
- <p>kedian</p>
- </div>
- </a></div></div>
- <!--- End Exmaple Icon --->
- <!--- Start Exmaple Icon --->
- <div id="icons" class="icon 100 others">
- <div class="tooltip-wrap">
- <a href="https://sanguine-bliss.tumblr.com/tagged/cassie"><img src="" />
- <div class="tooltip-content">
- <p>cassie</p>
- </div>
- </a></div></div>
- <!--- End Exmaple Icon --->
- <!--- Start Exmaple Icon --->
- <div id="icons" class="icon 100 others">
- <div class="tooltip-wrap">
- <a href="https://sanguine-bliss.tumblr.com/tagged/cyn"><img src="" />
- <div class="tooltip-content">
- <p>halcyon</p>
- </div>
- </a></div></div>
- <!--- End Exmaple Icon --->
- <!--- Start Exmaple Icon --->
- <div id="icons" class="icon selection others">
- <div class="tooltip-wrap">
- <a href="https://sanguine-bliss.tumblr.com/tagged/elektra"><img src="" />
- <div class="tooltip-content">
- <p>elektra</p>
- </div>
- </a></div></div>
- <!--- End Exmaple Icon --->
- <!--- Start Exmaple Icon --->
- <div id="icons" class="icon selection others">
- <div class="tooltip-wrap">
- <a href="https://sanguine-bliss.tumblr.com/tagged/mea"><img src="" />
- <div class="tooltip-content">
- <p>mea</p>
- </div>
- </a></div></div>
- <!--- End Exmaple Icon --->
- <!--- Start Exmaple Icon --->
- <div id="icons" class="icon selection others">
- <div class="tooltip-wrap">
- <a href="https://sanguine-bliss.tumblr.com/tagged/az"><img src="" />
- <div class="tooltip-content">
- <p>azriel</p>
- </div>
- </a></div></div>
- <!--- End Exmaple Icon --->
- <!--- Start Exmaple Icon --->
- <div id="icons" class="icon selection others">
- <div class="tooltip-wrap">
- <a href="https://sanguine-bliss.tumblr.com/tagged/leia"><img src="" />
- <div class="tooltip-content">
- <p>leia</p>
- </div>
- </a></div></div>
- <!--- End Exmaple Icon --->
- <!--- Start Exmaple Icon --->
- <div id="icons" class="icon selection others">
- <div class="tooltip-wrap">
- <a href="https://sanguine-bliss.tumblr.com/tagged/serene"><img src="" />
- <div class="tooltip-content">
- <p>serene</p>
- </div>
- </a></div></div>
- <!--- End Exmaple Icon --->
- <!--- Start Exmaple Icon --->
- <div id="icons" class="icon 1x1 others">
- <div class="tooltip-wrap">
- <a href="https://sanguine-bliss.tumblr.com/tagged/thea"><img src="" />
- <div class="tooltip-content">
- <p>althea</p>
- </div>
- </a></div></div>
- <!--- End Exmaple Icon --->
- <!--- Start Exmaple Icon --->
- <div id="icons" class="icon 1x1 others">
- <div class="tooltip-wrap">
- <a href="https://sanguine-bliss.tumblr.com/tagged/kye"><img src="" />
- <div class="tooltip-content">
- <p>kye</p>
- </div>
- </a></div></div>
- <!--- End Exmaple Icon --->
- <!--- Start Exmaple Icon --->
- <div id="icons" class="icon 1x1 others">
- <div class="tooltip-wrap">
- <a href="https://sanguine-bliss.tumblr.com/tagged/ash"><img src="" />
- <div class="tooltip-content">
- <p>ashyvien</p>
- </div>
- </a></div></div>
- <!--- End Exmaple Icon --->
- <!------- END ICONS ------->
- </div>
- <!------- END CONTAINER ------->
- <!------- SCRIPTS: DO NOT EDIT ------->
- <script src="https://static.tumblr.com/zvesamf/1T6okd4xb/imagesloaded.pkgd.min.js"></script>
- <script src="https://static.tumblr.com/fuu6t9w/kh8ml0pl9/jquery-1.7.1.min.js"></script>
- <script src="https://static.tumblr.com/fuu6t9w/eubml0pm0/jquery.isotope.min.js"></script>
- <script>
- $(function(){
- var $container = $('#container');
- $container.isotope({
- itemSelector : '.icon'
- });
- var $optionSets = $('#topbar .option-set'),
- $optionLinks = $optionSets.find('a');
- $optionLinks.click(function(){
- var $this = $(this);
- // don't proceed if already selected
- if ( $this.hasClass('selected') ) {
- return false;
- }
- var $optionSet = $this.parents('.option-set');
- $optionSet.find('.selected').removeClass('selected');
- $this.addClass('selected');
- // make option object dynamically, i.e. { filter: '.my-filter-class' }
- var options = {},
- key = $optionSet.attr('data-option-key'),
- value = $this.attr('data-option-filter');
- // parse 'false' as false boolean
- value = value === 'false' ? false : value;
- options[ key ] = value;
- if ( key === 'layoutMode' && typeof changeLayoutMode === 'function' ) {
- // changes in layout modes need extra logic
- changeLayoutMode( $this, options )
- } else {
- // otherwise, apply new options
- $container.isotope( options );
- }
- return false;
- });
- $grid.imagesLoaded().progress( function() {
- $grid.isotope('layout');
- });
- });
- </script>
- </html>
Advertisement
Add Comment
Please, Sign In to add comment