Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!------------------------------------
- MADE BY VEVI ALL RIGHTS RESERVED. ©
- DO NOT
- -----------------------------------------------------------------------------
- 1. Steal my code
- 2. Mix any of my themes together
- 3. Repost any of my themes
- 4. Remove the credit
- ------------------------------------------------------------------------------
- Credits:
- Unest by: Neothms and Magnusthms
- Tooltips: Style My Tooltips
- ---------------------------------------->
- <!DOCTYPE html>
- <html>
- <!----------------------------------------------------------------------------
- I M P O R T A N T
- ---------------------------------------------------------------------------->
- <head>
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <link rel="shortcut icon" href="{Favicon}">
- <link rel="alternate" type="application/rss+xml" href="{RSS}">
- {block:Description}
- <meta name="description" content="{MetaDescription}" />
- {/block:Description}
- <!----------------------------------------------------------------------------
- S T Y L E S H E E T S
- ----------------------------------------------------------------------------->
- <link href="https://fonts.googleapis.com/css?family=Coiny" rel="stylesheet">
- <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css" integrity="sha384-oS3vJWv+0UjzBfQzYUhtDYW+Pj2yciDJxpsK1OYPAYjqT085Qq/1cq5FLXAZQ7Ay" crossorigin="anonymous">
- <link href="style-my-tooltips.css" rel="stylesheet" type="text/css" />
- <link href="https://fonts.googleapis.com/css?family=Dosis|Karla|News+Cycle&display=swap" rel="stylesheet">
- <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
- <!----------------------------------------------------------------------------
- S O U R C E
- ----------------------------------------------------------------------------->
- <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js">
- </script>
- <script src="https://static.tumblr.com/wgg6svp/OoTofxa0c/unnest.min.js">
- </script>
- <script src="https://static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js"></script>
- <!----------------------------------------------------------------------------
- S C R I P T S
- ----------------------------------------------------------------------------->
- <script>
- $(function(){ $('.posts').unnest({
- yourCaption: ".text", {Caption}
- wrapName: ".tumblr_parent",
- newCaptionUsername: false,
- originalPostCaptionUsername: false,
- tumblrAvatars: true,
- tumblrAvatarClass: ".tumblr_avatar",
- usernameColon: true
- }); });
- </script>
- <script>
- (function($){
- $(document).ready(function(){
- $("a[title], img[title]").style_my_tooltips({
- tip_follows_cursor:true,
- tip_delay_time:50,
- tip_fade_speed:0,
- attribute:"title"
- });
- });
- })(jQuery);
- </script>
- <script>
- $(window).scroll(function() {
- var height = $(window).scrollTop();
- if (height > 100) {
- $('.to-top').fadeIn();
- } else {
- $('.to-top').fadeOut();
- }
- });
- $(document).ready(function() {
- $(".to-top").click(function(event) {
- event.preventDefault();
- $("html, body").animate({ scrollTop: 0 }, "slow");
- return false;
- });
- });
- </script>
- <!--------------------------------------------------------------------------->
- </head>
- <meta name="color:Scrollbar" content="d7c5b7" />
- <meta name="color:Scrollbar Bg" content="" />
- <meta name="image:Sidebar Image" content="" />
- <meta name="image:Header Img" content="" />
- <meta name="color:Background" content=""/>
- <meta name="image:Background Image" content=""/>
- <meta name="color:Desc Color" content=""/>
- <meta name="color:Text" content=""/>
- <meta name="color:Sidebar" content=""/>
- <meta name="color:Header" content=""/>
- <meta name="color:Posts" content=""/>
- <meta name="color:Tags" content=""/>
- <meta name="color:Permalink" content=""/>
- <meta name="color:Post Head" content=""/>
- <meta name="color:Music Text" content=""/>
- <meta name="color:Links" content=""/>
- <meta name="color:Custom Links" content=""/>
- <meta name="color:Tooltip Bg" content=""/>
- <meta name="color:Tooltip Text" content=""/>
- <meta name="color:Borders" content=""/>
- <meta name="color:Hover" content=""/>
- <meta name="select:Font" content="Dosis" title="Dosis"/>
- <meta name="select:Font" content="News Cycle" title="News Cycle"/>
- <meta name="select:Font" content="Karla" title="Karla"/>
- <meta name="text:Custom Link 1" content="Link 1"/>
- <meta name="text:Custom Link 1 URL" content=""/>
- <meta name="text:Custom Link 2" content="Link 2"/>
- <meta name="text:Custom Link 2 URL" content=""/>
- <meta name="text:Custom Link 3" content="Link 3"/>
- <meta name="text:Custom Link 3 URL" content=""/>
- <meta name="text:Custom Link 4" content="Link 4"/>
- <meta name="text:Custom Link 4 URL" content=""/>
- <!---------------------------------------------------------------------------
- S T Y L E
- ----------------------------------------------------------------------------->
- <style>
- /*
- ------------------------------------------------------------------------------
- T O O L T I P S
- ------------------------------------------------------------------------------
- */
- #s-m-t-tooltip
- {
- max-width:300px;
- z-index:10;
- margin:24px 14px 7px 12px;
- padding:8px;
- background:{color:Tooltip Bg};
- opacity: 0.8;
- -moz-border-radius:3px;
- -webkit-border-radius:3px;
- border-radius:3px;
- font-family:{select:Font};
- font-size:11px;
- line-height:16px;
- color:{color:Tooltip Text};
- }
- /*----------------------------------------------------------------------------*/
- /*
- ------------------------------------------------------------------------------
- B A S I C
- ------------------------------------------------------------------------------
- */
- body
- {
- font-size: 10px;
- background-color: {color:Background};
- font-family: {select:Font};
- background-image: url({image:Background Image});
- color: black;
- margin: 0;
- }
- ::-webkit-scrollbar
- {
- width: 3px;
- }
- ::-webkit-scrollbar-track
- {
- background:{color:Scrollbar Bg};
- }
- ::-webkit-scrollbar-thumb
- {
- background: {color:Scrollbar};
- }
- a
- {
- text-decoration: none;
- color: {color:Links};
- -moz-transition-duration: 0.5s;
- -o-transition-duration: 0.5s;
- -webkit-transition-duration: 0.5s;
- transition-duration: 0.5s;
- }
- a:hover
- {
- color: {color:Hover};
- -moz-transition-duration: 0.5s;
- -o-transition-duration: 0.5s;
- -webkit-transition-duration: 0.5s;
- transition-duration: 0.5s;
- }
- a:visited
- {
- text-decoration: none;
- }
- /*
- ------------------------------------------------------------------------------
- S I D E B A R
- ------------------------------------------------------------------------------
- */
- .header
- {
- width: 100%;
- }
- .headerimg
- {
- margin-bottom: -4px;
- height: 300px;
- width: 100%;
- object-fit: cover;
- }
- .navbar
- {
- z-index: 10;
- font-size: 18px;
- background: {color:Header};
- }
- .navbar ul
- {
- list-style-type: none;
- margin: 0;
- padding: 0;
- overflow: hidden;
- }
- .navbar li
- {
- float: left;
- border-right:1px solid {color:Borders};
- }
- .navbar a
- {
- background: {color:Custom Links};
- display: inline-block;
- transition: 0.5s;
- color: white;
- padding: 9px;
- text-decoration: none;
- }
- .navbar a:hover
- {
- }
- .sidebar
- {
- position: sticky;
- position: -webkit-sticky;
- top: 25px;
- border-radius: 5px;
- margin-left: 15px;
- padding: 10px;
- text-align: center;
- width: 200px;
- margin-top: 12px;
- background: {color:Sidebar};
- float: left;
- }
- .search
- {
- border-radius: 25px;
- font-size: 18px;
- padding: 5px;
- margin-left: 15px;
- margin-top: 15px;
- position: absolute;
- width: 400px;
- background: white;
- }
- .search i
- {
- margin-right: 5px;
- margin-top: 10px;
- float: right;
- }
- .search input
- {
- border-radius: 25px;
- width: 360px;
- padding: 5px;
- border: none;
- }
- .sidebarimg
- {
- object-fit: cover;
- border-radius: 50%;
- margin-top: 5px;
- width: 100px;
- height: 100px;
- }
- .head
- {
- border-radius: 5px 5px 0px 0px;
- margin-top: -10px;
- margin-left: -10px;
- margin-right: -10px;
- background: {color:Header};
- }
- .sidetxt
- {
- margin-top: 7px;
- }
- /*
- ------------------------------------------------------------------------------
- P O S T S
- ------------------------------------------------------------------------------
- */
- .posts
- {
- margin-left: -55px;
- float: left;
- break-inside: avoid;
- display:inline-block;
- color: {color:Text};
- width: 420px;
- margin-top: 10px;
- margin-bottom: 12px;
- padding: 10px;
- background-color: {color:Posts};
- background-image: url('');
- object-fit: cover;
- }
- .posts img
- {
- max-width: 100%;
- margin-top: 12px;
- text-align: center;
- }
- .posts a:hover
- {
- color: {color:Hover};
- -moz-transition-duration: 0.5s;
- -o-transition-duration: 0.5s;
- -webkit-transition-duration: 0.5s;
- transition-duration: 0.5s;
- }
- .posts h2
- {
- font-size: 12px;
- color: #cf2d85;
- font-weight: normal;
- margin: 0px;
- }
- .posts li
- {
- max-width: 100%;
- list-style: square;
- }
- .posts blockquote
- {
- max-width: 100%;
- border-left: 1px solid {color:Borders};
- padding-left: 5px;
- }
- .title
- {
- text-align: left;
- margin-top: 5px;
- }
- .text
- {
- margin-top: 5px;
- }
- #permalink
- {
- margin-right: -10px;
- margin-left: -10px;
- margin-top: -10px;
- background: {color:Post Head};
- padding: 5px;
- font-size: 10px;
- }
- #permalink a
- {
- color: {color:Permalink};
- }
- #permalink a:hover
- {
- color: {color:Hover};
- -moz-transition-duration: 0.5s;
- -o-transition-duration: 0.5s;
- -webkit-transition-duration: 0.5s;
- transition-duration: 0.5s;
- }
- #tags
- {
- border: 1px solid {color:Borders};
- margin-top: 8px;
- background: white;
- padding: 5px;
- }
- #break
- {
- margin-top: 5px;
- }
- #tags a
- {
- color: {color:Tags};
- }
- #tags a:hover
- {
- color: {color:Hover};
- -moz-transition-duration: 0.5s;
- -o-transition-duration: 0.5s;
- -webkit-transition-duration: 0.5s;
- transition-duration: 0.5s;
- }
- #player
- {
- margin-top: 5px;
- }
- .quote
- {
- border-radius: 5px;
- color: {color:Text};
- font-family: 'Karla', sans-serif;
- padding: 5px;
- background: #FFFFFF;
- width: 300px;
- font-size: 15px;
- }
- .chatext
- {
- color: {color:Text};
- font-family: 'Play', sans-serif;
- margin-top: 5px;
- padding: 10px;
- border-radius: 10px;
- background: white;
- width: 150px;
- }
- .artist
- {
- background: #D7D5D5;
- font-size: 15px;
- }
- .playerinfo
- {
- overflow: hidden;
- border-radius: 5px;
- color: {color:Music Text};
- background: black;
- font-size: 12px;
- width: 400px;
- text-align:center;
- }
- .videoplayer
- {
- margin-top: 10px;
- width: 400px;
- }
- .rebloginfo
- {
- margin-top: 7px;
- padding: 2px;
- }
- .asks
- {
- font-size: 14px;
- padding: 5px;
- background: white;
- color: black;
- }
- .askimg
- {
- border-radius: 50%;
- width: 70px;
- height: 70px;
- object-fit: cover;
- }
- .posts img, .posts li, .posts blockquote
- {
- max-width: 100%;
- }
- /*
- ------------------------------------------------------------------------------
- E X T R A
- ------------------------------------------------------------------------------
- */
- .tumblr_avatar
- {
- width: 30px;
- height: 30px;
- object-fit:cover;
- margin-right: 10px;
- }
- #container
- {
- column-count: 2;
- column-gap: 120px;
- width: 800px;
- margin: auto;
- }
- article
- {
- width:400px;
- margin:50px auto 0;
- background-color:#fff;
- padding:20px;
- }
- .tumblr_parent
- {
- margin:10px 10px 20px;
- padding: 0px 10px;
- border-left: 2px solid #ccc;
- }
- .credit a
- {
- border: 3px solid {color:Borders};
- height: 10px;
- width: 10px;
- position: fixed;
- bottom: 5px;
- right: 5px;
- }
- .credit a:hover
- {
- background: {color:Custom Links};
- border-radius: 50%;
- }
- .to-top a
- {
- right: 25px;
- bottom: 5px;
- position: fixed;
- width: 0;
- height: 0;
- border-left: 10px solid transparent;
- border-right: 10px solid transparent;
- border-bottom: 10px solid {color:Borders};
- color: {color:Custom Links};
- }
- </style>
- <!--------------------------------------->
- <!-----SIDEBAR------>
- <body>
- <div class="to-top">
- <a href="#">
- </a>
- </div>
- <div class="credit">
- <a href="https://vivenathms.tumblr.com" title="theme"></a>
- </div>
- <div class="header">
- <div class="search">
- <input type="text" placeholder="Search" name="search">
- <i class="fas fa-search"></i>
- </div>
- <img src="{image:Header Img}" class="headerimg">
- </div>
- <div class="navbar">
- <div class="customlinks">
- <ul>
- <li><a href="/">Home</a></li>
- <li><a href="/ask">Ask</a></li>
- <li><a href="/archive">Archive</a></li>
- <li> <a href="/submit">Submit</a></li>
- <li><a href="{text:Custom Link 1 URL}">{text:Custom Link 1}</a></li>
- <li><a href="{text:Custom Link 2 URL}">{text:Custom Link 2}</a></li>
- <li><a href="{text:Custom Link 3 URL}">{text:Custom Link 3}</a></li>
- <li><a href="{text:Custom Link 4 URL}">{text:Custom Link 4}</a></li>
- </ul>
- </div>
- </div>
- <div class="sidebar">
- <div class="head">
- <img src="{image:Sidebar Image}" class="sidebarimg">
- </div>
- <div class="sidetxt">
- {Description}
- </div>
- <div id="pagination">
- {block:PreviousPage}
- <a href="{PreviousPage}"><i class="fas fa-backward"></i></a>
- {/block:PreviousPage}
- {block:JumpPagination length="5"}
- {block:CurrentPage}
- <span class="current_page">{PageNumber}</span>
- {/block:CurrentPage}
- {block:JumpPage}
- <a class="jump_page" href="{URL}">{PageNumber}</a>
- {/block:JumpPage}
- {/block:JumpPagination}
- {block:NextPage}
- <a href="{NextPage}"><i class="fas fa-play"></i></a>
- {/block:NextPage}
- </div>
- </div>
- <!----------------->
- <div id="container">
- <!----------------------------------------------------------------------------
- POSTS
- ------------------------------------------------------------------------------>
- <div class="postcol">
- {block:Posts}
- <div class="posts">
- <div id="permalink">
- <a href="{Permalink}" title="{block:NoteCount}{NoteCountWithLabel}
- {/block:NoteCount}">
- <i class="fas fa-star"></i>
- {block:Date}
- {Month} {DayOfMonth} {Year}
- {/block:Date}
- </a>
- </div>
- <div id="break">
- </div>
- {block:Photo}
- {LinkOpenTag}<img src="{PhotoURL-500}" />{LinkCloseTag}
- {block:Caption}<div class="text">{Caption}</div>{/block:Caption}
- {/block:Photo}
- {block:Photoset}
- {Photoset-500}
- {block:Caption}<div class="text">{Caption}</div>{/block:Caption}
- {/block:Photoset}
- {block:Video}
- <div class="videoplayer">{Video-400}</div>
- {block:Caption}<div class="text">{Caption}</div>{/block:Caption}
- {/block:Video}
- {block:Audio}
- <div class="playerinfo">
- <div class="artist">
- {block:Artist}
- {Artist}
- {/block:Artist}
- <br>
- {block:TrackName}
- {TrackName}
- {/block:TrackName}
- </div>
- <div id="player">
- {block:AudioPlayer}{AudioPlayerBlack}{/block:AudioPlayer}
- </div>
- {block:AudioEmbed}{AudioEmbed-400}{/block:AudioEmbed}
- </div>
- {block:Caption}<div class="text">{Caption}</div>{/block:Caption}
- {/block:Audio}
- {block:Quote}
- <div class="quote">
- "{Quote}"
- <br>
- {block:Source}<div class="source">- {Source}</div>{/block:Source}
- </div>
- {/block:Quote}
- {block:Text}
- {block:Title}<div class="title">{Title}</div>{/block:Title}
- <div class="text">{Body}</div>
- {/block:Text}
- {block:Answer}
- <div class="asks">
- <img src="{AskerPortraitURL-64}" class="askimg">
- {Asker} asked: {Question}
- </div>
- <div class="text">{Answer}</div>
- {block:Answer}
- {block:Chat}
- {block:Title}<div class="title">{Title}</div>{/block:Title}
- <div class="chatext">
- {block:Lines}
- {block:Label}<strong>{Label}</strong>{/block:Label} {Line}<br />
- {/block:Lines}
- </div> <!--text-->
- {/block:Chat}
- {block:Link}
- <div class="title"><a href="{URL}">{Name}</a></div>
- {block:Description}
- <div class="text">{Description}</div>
- {/block:Description}
- {/block:Link}
- {block:HasTags}<div id="tags">
- {block:Tags}
- <a href="{TagURL}">#{Tag} </a>
- {/block:Tags}
- </div>
- {/block:HasTags}
- {block:RebloggedFrom}<div class="rebloginfo">
- <a href="{ReblogRootURL}" title="{ReblogRootName}"><img src="{ReblogParentPortraitURL-64}" style="width:20px; height:20px; border-radius: 25px"></a>
- </div>{/block:RebloggedFrom}
- {block:PostNotes}
- <div id="notecontainer">{PostNotes}</div>
- {/block:PostNotes}
- </div>
- {/block:Posts}
- </div>
- </div>
- {block:Pagination}
- {/block:Pagination}
- </div>
- <!----------------->
- </div>
- </div>
- </body>
- </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement