Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- META TAGS
- <link rel="stylesheet" href="https://cdn.linearicons.com/free/1.0.0/icon-font.min.css">
- <link href='https://fonts.googleapis.com/css?family=Karla|Muli:400, 400:italic|Roboto:400,400italic,500,500italic|Cardo:400,400italic|Inconsolata' rel='stylesheet' type='text/css'>
- <meta name="color:Updates Tab Icons BG" content="#d3dbed"/>
- <meta name="color:Updates Tab Icons BG Hover" content="#dae7f3"/>
- <meta name="color:Updates Tab Icons" content="#000"/>
- <meta name="color:Updates Tab Icons Hover" content="#aaaaaa"/>
- <meta name="color:Updates Tab Title" content="#a6b3c1"/>
- <meta name="color:Updates Tab Content" content="#9f9f9f"/>
- <meta name="color:Updates Tab Link" content="#a4bfdc"/>
- <meta name="color:Updates Tab Link Hover" content="#d9dfe2"/>
- <meta name="color:Updates Tab Link Border" content="#dce9f5"/>
- <meta name="color:Updates Tab Stars" content="#ffdd62"/>
- <meta name="select:Updates Tab Font Family" content="Karla" title="Karla"/>
- <meta name="select:Updates Tab Font Family" content="Roboto" title="Roboto"/>
- <meta name="select:Updates Tab Font Family" content="Inconsolata" title="Inconsolata"/>
- <meta name="select:Updates Tab Font Family" content="Muli" title="Muli"/>
- <meta name="select:Updates Tab Font Family" content="Cardo" title="Cardo"/>
- <meta name="if:Updates Tab" content="1"/>
- <meta name="if:Reveal Updates On Click" content="1"/>
- <meta name="if:Updates Tab Top Left" content="1"/>
- <meta name="if:Updates Tab Top Right" content="0"/>
- <meta name="if:Updates Tab Bottom Left" content="0"/>
- <meta name="if:Updates Tab Bottom Right" content="0"/>
- before </style>
- /* updates tab */
- #updates {
- position:fixed;
- width:200px;
- {block:ifUpdatesTabTopLeft}top:10px; left:15px; text-align:justify;{/block:ifUpdatesTabTopLeft}
- {block:ifUpdatesTabTopRight}top:10px; right:15px; text-align:right;{/block:ifUpdatesTabTopRight}
- {block:ifUpdatesTabBottomLeft}bottom:30px; left:15px; text-align:justify;{/block:ifUpdatesTabBottomLeft}
- {block:ifUpdatesTabBottomRight}bottom:30px; right:15px; text-align:right;{/block:ifUpdatesTabBottomRight}
- padding:5px;
- z-index:99999999999;
- font-family:{select:Updates Tab Font Family};
- font-size:10px;
- }
- #updates a {text-decoration:none;}
- #updates a, #updates a:hover, .ui:hover ~ .lino:after, .ui:hover ~ .lino, .lino, #updates .lnr:hover, #updates .lnr {transition-duration: .5s;}
- #updates a:link, #updates a:visited {color:{color:Updates Tab Link}; border-bottom:1px solid {color:Updates Tab Link Border};}
- #updates a:hover {color:{color:Updates Tab Link Hover};}
- .uparent {padding-top:5px;}
- .ui {display:inline-block; padding:5px 0; vertical-align:middle;}
- .ui .lnr {
- padding:6px;
- font-size:10px;
- color:{color:Updates Tab Icons};
- background:{color:Updates Tab Icons BG};
- border-radius:40px;
- }
- .ui .lnr:hover {color:{color:Updates Tab Icons Hover}; background:{color:Updates Tab Icons BG Hover};}
- .ui:hover ~ .lino {border-bottom:1px solid {color:Updates Tab Icons BG Hover};}
- .ui:hover ~ .lino:after {background-color:{color:Updates Tab Icons BG Hover};}
- .lino {
- display:inline-block;
- position:relative;
- top:-2px;
- width:170px;
- {block:ifUpdatesTabTopLeft}left:-2px;{/block:ifUpdatesTabTopLeft}
- {block:ifUpdatesTabTopRight}right:-2px;{/block:ifUpdatesTabTopRight}
- {block:ifUpdatesTabBottomLeft}left:-2px;{/block:ifUpdatesTabBottomLeft}
- {block:ifUpdatesTabBottomRight}right:-2px;{/block:ifUpdatesTabBottomRight}
- {block:ifRevealUpdatesOnClick}width:0px;{/block:ifRevealUpdatesOnClick}
- height:1px;
- border-bottom:1px solid {color:Updates Tab Icons BG};
- }
- .lino:after {
- position:absolute;
- {block:ifUpdatesTabTopLeft}right:0;{/block:ifUpdatesTabTopLeft}
- {block:ifUpdatesTabTopRight}left:0;{/block:ifUpdatesTabTopRight}
- {block:ifUpdatesTabBottomLeft}right:0;{/block:ifUpdatesTabBottomLeft}
- {block:ifUpdatesTabBottomRight}left:0;{/block:ifUpdatesTabBottomRight}
- top:-2px;
- content:'';
- width:6px;
- height:6px;
- background-color:{color:Updates Tab Icons BG};
- border-radius:20px;
- }
- .updates_title {
- margin-top:-3px;
- padding-bottom:5px;
- font-weight:bold;
- font-size:12px;
- color:{color:Updates Tab Title};
- clear:both;
- }
- .container_content {
- display:block;
- margin-left:14px;
- {block:ifUpdatesTabTopLeft}margin-top:-6px;{/block:ifUpdatesTabTopLeft}
- {block:ifUpdatesTabTopRight}margin-right:15px;{/block:ifUpdatesTabTopRight}
- {block:ifUpdatesTabBottomLeft}margin-top:-6px;{/block:ifUpdatesTabBottomLeft}
- {block:ifUpdatesTabBottomRight}margin-right:15px;{/block:ifUpdatesTabBottomRight}
- padding:8px 6px 2px 7px;
- color:{color:Updates Tab Content};
- }
- .container_content ul {margin:0 0 0 -15px!important; list-style-type:none!important;}
- .container_content ol {margin-left:-25px!important;}
- .container_content ul li:before {content:'—'!important; margin-right:5px;!important;}
- .container_content .lnr-star {
- background:none;
- padding:0;
- font-size:8px;
- color:{color:Updates Tab Stars};
- after <body>
- <!-- updates tab -->
- {block:ifUpdatesTab}
- <div id="updates">
- <!------------------
- 1) You can change the icons by visiting https://linearicons.com/free#cheat-sheet and pasting your desired icon title (e.g.:home, user, dice, etc.) over the existing icon titles below
- 2) To create a new section, copy everything between "<!-- section 1 -- >" and "<!-- end section 1 -- >" and paste it right after "<!-- end section 4 -- >"
- ------------------>
- <!-- section 1 -->
- <div class="uparent">
- {block:ifUpdatesTabTopRight}<div class="lino"></div>{/block:ifUpdatesTabTopRight}
- {block:ifUpdatesTabBottomRight}<div class="lino"></div>{/block:ifUpdatesTabBottomRight}
- <div class="ui"><div class="updates_icon">
- <!-- paste your new selected icon title over "moon" -->
- <i class="lnr lnr-user" aria-hidden="true"></i>
- </div></div>
- {block:ifUpdatesTabTopLeft}<div class="lino"></div>{/block:ifUpdatesTabTopLeft}
- {block:ifUpdatesTabBottomLeft}<div class="lino"></div>{/block:ifUpdatesTabBottomLeft}
- <div class="container_content">
- <div class="updates_title">
- About <!-- your title here -->
- </div>
- <p>Jes, she/her, Gemini, INFP-A, Ravenpuff, Pukwudgie </p>
- <p>Blog: 99 3/4% HP</p>
- <p>prev. @lunaxgoldenchains</p>
- </div>
- </div>
- <!-- end section 1 -->
- <!-- section 2 -->
- <div class="uparent">
- {block:ifUpdatesTabTopRight}<div class="lino"></div>{/block:ifUpdatesTabTopRight}
- {block:ifUpdatesTabBottomRight}<div class="lino"></div>{/block:ifUpdatesTabBottomRight}
- <div class="ui"><div class="updates_icon">
- <i class="lnr lnr-calendar-full" aria-hidden="true"></i>
- </div></div>
- {block:ifUpdatesTabTopLeft}<div class="lino"></div>{/block:ifUpdatesTabTopLeft}
- {block:ifUpdatesTabBottomLeft}<div class="lino"></div>{/block:ifUpdatesTabBottomLeft}
- <div class="container_content">
- <div class="updates_title">
- Updates <!-- your title here -->
- </div>
- <!-- you can create lists like so: -->
- <ul>
- <li>Mar 27th: 200 FOLLOWERS!!</li>
- <li>Feb 19th: 100 FOLLOWERS!!</li>
- <li>Feb 11th: New writing <a href="http://scrivenshafts.tumblr.com">sideblog</a></li>
- </ul>
- <!-- end list -->
- </div>
- </div>
- <!-- end section 2 -->
- <!-- section 3 -->
- <div class="uparent">
- {block:ifUpdatesTabTopRight}<div class="lino"></div>{/block:ifUpdatesTabTopRight}
- {block:ifUpdatesTabBottomRight}<div class="lino"></div>{/block:ifUpdatesTabBottomRight}
- <div class="ui"><div class="updates_icon">
- <!-- paste your new selected icon title over "star" -->
- <i class="lnr lnr-book" aria-hidden="true"></i>
- </div></div>
- {block:ifUpdatesTabTopLeft}<div class="lino"></div>{/block:ifUpdatesTabTopLeft}
- {block:ifUpdatesTabBottomLeft}<div class="lino"></div>{/block:ifUpdatesTabBottomLeft}
- <div class="container_content">
- <div class="updates_title">
- Currently... <!-- your title here -->
- </div>
- <!-- for watching / reading / rec lists, you can add a rating system with star icons inside the <li>...</li> tags like so: -->
- <p><b>Reading:</b> The Battle of the Lyberinth</p>
- <p><b>Watching:</b> Supergirl</p>
- <p><b>Listening to:</b> <a href="https://open.spotify.com/user/princess40522/playlist/4qo1XH6QXCBYj5DEjYyXUA">Playlist</a></p>
- </div>
- </div>
- <!-- end section 3 -->
- <!-- section 4 -->
- <div class="uparent">
- {block:ifUpdatesTabTopRight}<div class="lino"></div>{/block:ifUpdatesTabTopRight}
- {block:ifUpdatesTabBottomRight}<div class="lino"></div>{/block:ifUpdatesTabBottomRight}
- <div class="ui"><div class="updates_icon">
- <!-- paste your new selected icon title over "rocket" -->
- <i class="lnr lnr-link" aria-hidden="true"></i>
- </div></div>
- {block:ifUpdatesTabTopLeft}<div class="lino"></div>{/block:ifUpdatesTabTopLeft}
- {block:ifUpdatesTabBottomLeft}<div class="lino"></div>{/block:ifUpdatesTabBottomLeft}
- <div class="container_content">
- <div class="updates_title">
- Links <!-- your title here -->
- </div>
- <!-- you can insert links like so: -->
- <p>Networks:
- <a href="http://harrypotternetwork.tumblr.com">♡</a>
- <a href="https://mischiefmanagednet.tumblr.com">♡</a>
- <a href="https://mythologicalnet.tumblr.com">♡</a>
- <a href="http://theliteraturenet.tumblr.com">♡</a>
- <a href="http://vacantnet.tumblr.com">♡</a>
- </p>
- <p>Fandom Families:
- <a href="http://ginnyweasleu.tumblr.com/fandomfam">♢</a>
- <a href="http://delacour.co.vu/fandomfam">♢</a>
- <a href="http://flcur.co.vu/hpfam">♢</a>
- <a href="http://jamespottuh.tumblr.com/houses">♢</a>
- <a href="http://hagridsrubeus.tumblr.com/fandomfamily">♢</a>
- <a href="https://hclenaravenclaw.tumblr.com/fanfam">♢</a>
- <a href="http://ginnyweasleu.tumblr.com/fandomfam">♢</a>
- </p>
- <p>Birthdays:
- <a href="http://owvlery.tumblr.com/birthdays">☆</a>
- <a href="http://flcur.co.vu/birthdays">☆</a>
- <a href="http://spncreids.tumblr.com/bday">☆</a>
- <a href="http://http://heartrenders.co.vu/birthdays">☆</a>
- <a href="http://holycricket.co.vu/bdays">☆</a>
- <a href="https://emmelinevvance.tumblr.com/birthdaypage">☆</a>
- <a href="http://lilybleu.co.vu/bdays#_=_">☆</a>
- <p><a href="/saved urls">Saved Urls</a>
- <!-- end link -->
- <p>
- <script language="JavaScript">var fhs = document.createElement('script');var fhs_id = "5438951";
- var ref = (''+document.referrer+'');var pn = window.location;var w_h = window.screen.width + " x " + window.screen.height;
- fhs.src = "//s1.freehostedscripts.net/ocounter.php?site="+fhs_id+"&e1=Student in Hogwarts&e2=Students in Hogwarts&r="+ref+"&wh="+w_h+"&a=1&pn="+pn+"";
- document.head.appendChild(fhs);document.write("<span id='o_"+fhs_id+"'></span>");
- </script>
- </p>
- <p>
- <script language="JavaScript">var fhsh = document.createElement('script');var fhs_id_h = "3222492";
- fhsh.src = "//s1.freehostedscripts.net/ocount.php?site="+fhs_id_h+"&name=Visits to Hogsmeade&a=1";
- document.head.appendChild(fhsh);document.write("<span id='h_"+fhs_id_h+"'></span>");
- </script>
- </p>
- </div>
- </div>
- <!-- end section 4 -->
- <!-- section 5 -->
- <div class="uparent">
- {block:ifUpdatesTabTopRight}<div class="lino"></div>{/block:ifUpdatesTabTopRight}
- {block:ifUpdatesTabBottomRight}<div class="lino"></div>{/block:ifUpdatesTabBottomRight}
- <div class="ui"><div class="updates_icon">
- <!-- paste your new selected icon title over "moon" -->
- <i class="lnr lnr-heart" aria-hidden="true"></i>
- </div></div>
- {block:ifUpdatesTabTopLeft}<div class="lino"></div>{/block:ifUpdatesTabTopLeft}
- {block:ifUpdatesTabBottomLeft}<div class="lino"></div>{/block:ifUpdatesTabBottomLeft}
- <div class="container_content">
- <div class="updates_title">
- You <!-- your title here -->
- </div>
- <a href="/for you">FOR YOU</a>
- </div>
- </div>
- <!-- end section 5 -->
- </div>
- {/block:ifUpdatesTab}
- BEFORE </body>
- <script type="text/javascript" src="http://static.tumblr.com/iuggpng/bGqm4yfv9/jquery-1.7.2.js"></script>
- {block:ifRevealUpdatesOnClick}
- <script>
- $(function(){
- $(".container_content").hide();
- $(".ui").each(function(){
- $(this).click(function(){
- $(this).parent().find('.container_content').stop(true, true).delay(200).slideToggle("slow");
- });
- })
- });
- </script>
- {/block:ifRevealUpdatesOnClick}
- <script>
- $(function(){
- $(".ui").each(function(){
- $(this).click(function(){
- var lea = $(this).parent().find(".lino").width() == 0 ? "175px" : "0px";
- $(this).parent().find(".lino").stop(true, true).animate({width:lea});
- });
- })
- });
- </script>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement