Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!--
- >> ETHEREAL THEMES // FANSITE THEME #05
- Designed by etherealthemes
- etherealthemes.tumblr.com
- ⓒ 2016 - 2017
- >> 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
- *Theme suggestions always welcomed
- >> EXTRAS
- Fonts by Google Fonts
- Icons by FontAwesome
- NOTE:
- This page will auto center and auto align the characters. While editing, the characters might be mis-aligned. Once you go to yoururl.tumblr.com/page the characters will auto-fill the screen depending on the screen size that's being used to view.
- Inverting Tumblr Controls - Search "Tumblr Controls" and delete the second code with the invert settings.
- To change colors, press CTRL+F and "search for" the original hex code. Then change the color with the "replace with" to change all the associated colors. Then you can go through and tweak individual colors. This just makes it easier to go from light to dark without having to go through each color.
- ACCENT COLORS CHEATSHEET:
- Pink - Topbar Title ; Link Hovers - #f3b9cf
- Blue - Character Names - #9bdcf7
- Black - Link Hover - #101010
- PAGE HELP //
- For each character box, you'll need to change the number of the character/div in four places. IE if you have five characters, each character has an assigned number. So character one is assigned to "1", and there's four places in the code that need to correspond to that number. Character four would be "4", Character 200 would be "200".
- There are three bits of code named:
- target="#"
- and one with:
- id='content#'
- Each needs to have matching numbers for the code to work. This allows the show/hide on click to work per character instead of clicking one image and every character info showing.
- EXAMPLE //
- <character one code start>
- <target="1">
- character info
- //////
- <id='content1'>
- more info more info
- //////
- <target="1">
- character info
- //////
- <target="1">
- character info
- <character one code end>
- <character two code start>
- <target="2">
- character info
- //////
- <id='content2'>
- more info more info
- //////
- <target="2">
- character info
- //////
- <target="2">
- character info
- <character two code end>
- <character three code start>
- <target="3">
- character info
- //////
- <id='content3'>
- more info more info
- //////
- <target="3">
- character info
- //////
- <target="3">
- character info
- <character three code end>
- -->
- <!DOCTYPE html>
- <html>
- <title> Page Title </title>
- <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
- <link href='https://fonts.googleapis.com/css?family=Open+Sans|Work+Sans:500' rel='stylesheet' type='text/css'>
- <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
- <style type="text/css">
- /* --- Body Scrollbar --- */
- ::-webkit-scrollbar {width:7px;background-color:#ffffff;}
- ::-webkit-scrollbar-thumb {background-color:#eeeeee;}
- /* --- Character Scrollbars --- */
- div::-webkit-scrollbar {width:2px;background-color:rgba(0,0,0,0)!important;}
- div::-webkit-scrollbar-thumb {background-color:#dfdfdf;}
- div::-webkit-scrollbar-corner {background-color:rgba(0,0,0,0)!important;}
- /* --- General --- */
- body {
- margin:0px;
- font-family: 'Open Sans', sans-serif;
- color:#8f8f8f;
- font-size:10px;
- line-height:12px;
- background-color:#ffffff;
- }
- #et {
- background:transparent;
- color:#000000;
- background:transparent;
- right:0px;
- bottom:0px;
- padding:5px;
- position:fixed;
- letter-spacing:1px;
- opacity:0.4;
- }
- #et a {
- color:#000000;
- text-decoration:none;
- border:0px;
- }
- /* --- Tumblr Controls --- */
- iframe.tmblr-iframe {
- z-index:999999!important;
- top:0px!important;
- right:-10px!important;
- opacity:0.6!important;
- padding-right:10px;
- transform:scale(0.6);
- transform-origin:100% 0;
- -webkit-transform:scale(0.6);
- -webkit-transform-origin:100% 0;
- -o-transform:scale(0.6);
- -o-transform-origin:100% 0;
- -moz-transform:scale(0.6);
- -moz-transform-origin:100% 0;
- -ms-transform:scale(0.6);
- -ms-transform-origin:100% 0;
- }
- iframe.tmblr-iframe {
- filter:invert(1);
- -webkit-filter:invert(1);
- -o-filter:invert(1);
- -moz-filter:invert(1);
- -ms-filter:invert(1);
- }
- /* --- Topbar --- */
- #topbar {
- position:fixed;
- top:0px;
- left:0px;
- width:100%;
- height:90px;
- text-align:center;
- background-color:#ffffff;
- border-bottom:1px solid #eeeeee;
- z-index:3;
- }
- .topbartitle {
- margin-top:25px;
- margin-bottom:20px;
- font-family: 'Work Sans', sans-serif;
- font-weight:500;
- font-size:32px;
- letter-spacing:-1px;
- text-transform:uppercase;
- text-align:center;
- font-style:italic;
- color:#f3b9cf;
- }
- #topbar a {
- padding:5px 10px 5px 10px;
- color:#000000;
- font-size:10px;
- text-transform:uppercase;
- text-decoration:none;
- border-bottom:1px solid #ffffff;
- -webkit-transition: all 0.3s ease-in-out;
- -moz-transition: all 0.3s ease-in-out;
- -o-transition: all 0.3s ease-in-out;
- }
- #topbar a:hover {
- color:#000000;
- border-bottom:1px solid #000000;
- }
- /* --- Containers --- */
- #container {
- margin: 0 auto;
- width:100%;
- text-align:center;
- display:inline-block;
- }
- #main {
- margin: 0 auto;
- margin-top:120px;
- text-align:center;
- display:inline-block;
- width:80%;
- }
- /* --- Characters --- */
- .characters {
- display:inline-block;
- width:450px;
- height:300px;
- margin:0px 20px 35px 20px;
- }
- .charactermain {
- width:450px;
- height:300px;
- -webkit-transition: all 350ms linear;
- -moz-transition: all 350ms linear;
- -ms-transition: all 350ms linear;
- -o-transition: all 350ms linear;
- transition: all 350ms linear;
- }
- .characterimg {
- height:300px;
- width:450px;
- z-index:-1!important;
- }
- .characterimg img {
- height:300px;
- width:450px;
- z-index:-1!important;
- }
- /* --- Character Hover Info --- */
- .characterinfo {
- position:absolute;
- margin-top:-300px;
- margin-left:0px;
- width:450px;
- height:300px;
- -webkit-transition: all 350ms linear;
- -moz-transition: all 350ms linear;
- -ms-transition: all 350ms linear;
- -o-transition: all 350ms linear;
- transition: all 350ms linear;
- }
- .characterimghover {
- height:300px;
- width:450px;
- }
- .characterimghover img {
- height:300px;
- width:450px;
- }
- .charinfo {
- position:absolute;
- margin-top:-275px;
- margin-left:25px;
- height:230px;
- width:380px;
- padding:10px;
- color:#ffffff;
- background:rgba(0,0,0,.9)!important;
- font-family: 'Work Sans', sans-serif;
- font-weight:500;
- font-size:10px;
- text-align:left;
- }
- .charportrait {
- height:230px;
- width:150px;
- }
- .info {
- height:225px;
- margin-left:160px;
- width:200px;
- padding:10px;
- margin-top:-230px;
- text-align:center;
- overflow:scroll;
- }
- .info a {
- border:0px;
- text-decoration:none;
- color:#ffffff;
- font-style:italic;
- -webkit-transition: all 10ms linear;
- -moz-transition: all 100ms linear;
- -ms-transition: all 100ms linear;
- -o-transition: all 100ms linear;
- transition: all 100ms linear;
- }
- .info a:hover {color:#f3b9cf;}
- .bio {
- text-align:left;
- }
- h1 {
- font-family: 'Work Sans', sans-serif;
- font-weight:500;
- font-size:18px;
- font-size:16px;
- text-transform:uppercase;
- text-align:center;
- color:#9bdcf7;
- margin:10px 0 10px 0;
- }
- .charactertitle {
- position:absolute;
- margin-top:-200px;
- margin-left:62px;
- padding-top:45px;
- height:55px;
- width:325px;
- color:#ffffff;
- font-family: 'Work Sans', sans-serif;
- font-weight:500;
- font-size:14px;
- letter-spacing:5px;
- text-transform:uppercase;
- text-align:center;
- font-style:italic;
- }
- .characterdiv {display:none;}
- a.showSingle:link, a.showSingle:hover {color:#ffffff;}
- </style>
- </head>
- <body>
- <!-- Start Topbar -->
- <div id="topbar">
- <div class="topbartitle">Character Page</div>
- <a href="#">Link</a>
- <a href="#">Link</a>
- <a href="#">Link</a>
- <a href="#">Link</a>
- <a href="#">Link</a>
- <a href="#">Link</a>
- <a href="#">Link</a>
- </div></div>
- <!-- End Topbar -->
- <div id="container">
- <div id="main">
- <!-- Start Character -->
- <div class="characters">
- <!-- Main Character Image -->
- <!-- This is the main image + character name that always shows -->
- <a class="showSingle" target="1">
- <div class="charactermain">
- <div class="characterimg">
- <img src="http://placehold.it/450X300" /><!-- Character image 450X300 -->
- </div>
- <div class="charactertitle">Character Name</div><!-- Character Name -->
- </div>
- </a>
- <!-- Main Character Image End -->
- <!-- Character Hover Info Start -->
- <!-- This is information box + image that shows when you click the main image -->
- <div id='content1' class="characterdiv">
- <a class="showSingle" target="1">
- <div class="characterinfo">
- <div class="characterimghover">
- <img src="http://placehold.it/450X300" /><!-- Character Hover Image Background 450X300 -->
- </div>
- <!-- Character Information -->
- <div class="charinfo">
- <div class="charportrait">
- <img src="http://placehold.it/150X230" /><!-- Small Character Image 150X230 -->
- </div>
- <div class="info">
- <h1>Character Name</h1><!-- Character name here -->
- personality type ; age ; gender</a>
- <p><!-- This adds a space between sections -->
- <a href="#">Link</a>
- <a href="#">Link</a>
- <a href="#">Link</a>
- <a href="#">Link</a>
- <a href="#">Link</a>
- <a class="showSingle" target="1">
- <div class="bio">
- Character bio goes here. Lorem ipsum dolor sit amet, nunc quam id sed aliquet volutpat, praesent eu habitant eu eget voluptatibus, qui mauris et dapibus risus nulla, condimentum in tincidunt. Sed at, dignissim est rhoncus blandit erat sit tempus, sodales volutpat nibh sit suscipit, quis metus phasellus sit quis. Tincidunt ornare condimentum dignissim, non eu vel proin vitae, faucibus ut porta, purus feugiat elementum consequat et. Bibendum faucibus justo.
- <p><!-- This adds a space between lines -->
- lorem odio ut nibh, natoque magna adipiscing nec. Et dui et voluptatem, diam auctor augue id sed quis mattis, enim tellus enim, suscipit felis mollis ornare hymenaeos sem eros. Libero mollis ut fusce nulla, quis cras sem praesent consequat proin id, libero consequat mauris vestibulum donec.
- </div>
- </div>
- </div>
- </div>
- </a>
- </div>
- <!-- Character Hover Info End -->
- </div></a>
- <!-- End Character -->
- <!-- Start Character -->
- <div class="characters">
- <!-- Main Character Image -->
- <!-- This is the main image + character name that always shows -->
- <a class="showSingle" target="2">
- <div class="charactermain">
- <div class="characterimg">
- <img src="https://68.media.tumblr.com/8516c1d9fcb56aae84b388f8c1484d8b/tumblr_owvooja2Yc1ucjeiho2_r1_500.jpg" /><!-- Character image 450X300 -->
- </div>
- <div class="charactertitle">Kremi</div><!-- Character Name -->
- </div>
- </a>
- <!-- Main Character Image End -->
- <!-- Character Hover Info Start -->
- <!-- This is information box + image that shows when you click the main image -->
- <div id='content2' class="characterdiv">
- <a class="showSingle" target="2">
- <div class="characterinfo">
- <div class="characterimghover">
- <img src="https://68.media.tumblr.com/e60471ac94b3d561ca035ce7a3053198/tumblr_owxa7vtcSb1ucjeiho3_r1_500.jpg" /><!-- Character Hover Image Background 450X300 -->
- </div>
- <!-- Character Information -->
- <div class="charinfo">
- <div class="charportrait">
- <img src="https://68.media.tumblr.com/378a478595f9b7aa4744d35e9047b5d2/tumblr_owvp7w2vSq1ucjeiho1_250.gif" /><!-- Small Character Image 150X230 -->
- </div>
- <div class="info">
- <h1>Kremi</h1><!-- Character name here -->
- personality type ; age ; gender</a>
- <p><!-- This adds a space between sections -->
- <a href="#">Link</a>
- <a href="#">Link</a>
- <a href="#">Link</a>
- <a href="#">Link</a>
- <a href="#">Link</a>
- <a class="showSingle" target="2">
- <div class="bio">
- Character bio goes here. Lorem ipsum dolor sit amet, nunc quam id sed aliquet volutpat, praesent eu habitant eu eget voluptatibus, qui mauris et dapibus risus nulla, condimentum in tincidunt. Sed at, dignissim est rhoncus blandit erat sit tempus, sodales volutpat nibh sit suscipit, quis metus phasellus sit quis. Tincidunt ornare condimentum dignissim, non eu vel proin vitae, faucibus ut porta, purus feugiat elementum consequat et. Bibendum faucibus justo.
- <p><!-- This adds a space between lines -->
- lorem odio ut nibh, natoque magna adipiscing nec. Et dui et voluptatem, diam auctor augue id sed quis mattis, enim tellus enim, suscipit felis mollis ornare hymenaeos sem eros. Libero mollis ut fusce nulla, quis cras sem praesent consequat proin id, libero consequat mauris vestibulum donec.
- </div>
- </div>
- </div>
- </div>
- </a>
- </div>
- <!-- Character Hover Info End -->
- </div></a>
- <!-- End Character -->
- </div></div></div></div>
- <div id="et"><a href="http://etherealthemes.co.vu/"><i class="fa fa-paint-brush"></i></a></div>
- <script>
- jQuery(document).ready(function(){
- jQuery('.showSingle').live('click', function(event) {
- jQuery('#content'+$(this).attr('target')).toggle('show');
- });
- });
- </script>
- </div>
- </div>
- </body></html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement