Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!--
- Dimensions Theme
- โธ๐๐๐๐ข๐จ๐ฎ๐๐๐๐ข๐๐จ
- designed and coded by @tanaboo
- release date: 09.21.2018
- last update: 09.21.2018
- -->
- <!DOCTYPE html>
- <title>{Title}</title>
- <link rel="shortcut icon" href="{Favicon}">
- <link rel="alternate" type="application/rss+xml" href="{RSS}">
- <link href="http://static.tumblr.com/wgijwsy/k1Hm9ei8b/normalize.css" rel="stylesheet" type="text/css" />
- <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous">
- <link href='http://static.tumblr.com/blpgwiz/u8Qmijy1c/fade_in_up.css' rel='stylesheet' type='text/css'>
- <link href='http://static.tumblr.com/blpgwiz/Zjemijy8n/fade_in_down.css' rel='stylesheet' style='text/css'>
- <link href="https://fonts.googleapis.com/css?family=Fugaz+One" rel="stylesheet">
- <!-- CUSTOMIZATION OPTIONS -->
- <meta name="image:Sidebar" content="">
- <meta name="image:Background" content="">
- <meta name="color:Background" content="#0a0a0d">
- <meta name="color:Text" content="#666666" />
- <meta name="color:Post" content="#fff">
- <meta name="color:Link" content="#aaa">
- <meta name="color:Link Hover" content="#ddd">
- <meta name="color:Highlight" content="#facade">
- <meta name="color:Scrollbar" content="#eee">
- <meta name="color:Accent" content="#facade">
- <meta name="if:Sidebar Img" content="0">
- <meta name="if:Infinite Scroll" content="0">
- <meta name="select:Text" content="9px">
- <meta name="select:Text" content="10px">
- <meta name="select:Text" content="11px">
- <meta name="select:Text" content="12px">
- <meta name="select:Text" content="13px">
- <meta name="select:Text" content="14px">
- <meta name="select:Post" content="150px">
- <meta name="select:Post" content="200px">
- <meta name="select:Post" content="300px">
- <meta name="select:Post" content="400px">
- <meta name="select:Post" content="500px">
- <meta name="select:Font" content="trebuchet ms">
- <meta name="select:Font" content="lucida console">
- <meta name="select:Font" content="times new roman">
- <meta name="select:Font" content="georgia">
- <meta name="select:Font" content="verdana">
- <meta name="select:Font" content="courier new">
- <meta name="select:Font" content="arial">
- <meta name="select:Font" content="calibri">
- <meta name="select:Font" content="consolas">
- <meta name="select:Font" content="ms gothic">
- <meta name="text:Link One" content="one" >
- <meta name="text:Link One URL" content="/">
- <meta name="text:Link One Title" content="title">
- <meta name="text:Link Two" content="two" >
- <meta name="text:Link Two URL" content="/">
- <meta name="text:Link Two Title" content="title">
- <meta name="text:Link Three" content="three" >
- <meta name="text:Link Three URL" content="/">
- <meta name="text:Link Three Title" content="title">
- <meta name="text:Link Four" content="four" >
- <meta name="text:Link Four URL" content="/">
- <meta name="text:Link Four Title" content="title">
- <!-- CSS STYLING -->
- <style type="text/css">
- /* TUMBLR CONTROLS */
- iframe.tmblr-iframe {
- z-index:99999999999999!important;
- top:-10px!important;
- margin-right:-20px!important;
- opacity:0.4;
- transform: scale(0.8);
- }
- iframe.tmblr-iframe:hover {
- opacity:0.6!important;}
- /* SCROLLBAR */
- ::-webkit-scrollbar {
- width: 6px;
- background: transparent; }
- ::-webkit-scrollbar-thumb {
- border-radius:3px;
- background: transparent;
- border-left: 2.5px solid #04F2EA;
- border-right: 2.5px solid #ff0f54;
- }
- /* TEXT HIGHLIGHT */
- ::selection {
- background: {color:Highlight};
- }
- ::-moz-selection {
- background: {color:Highlight};
- }
- /* TOOLTIP STYLING */
- .ease-in-outip{
- display: inline;
- position: relative;
- }
- #s-m-t-tooltip {
- max-width:300px;
- height:auto;
- border-radius: 3px;
- padding:4px;
- margin:20px 7px -2px 20px;
- background-color: #fff;
- font-size:9px;
- letter-spacing:1px;
- text-transform:uppercase;
- color:#bbb;
- z-index:999999999999999999999999999999999999;
- -moz-transition: all .3s ease-in-out;
- -o-transition: all .3s ease-in-out;
- -webkit-transition: all .3s ease-in-out;
- transition: all .3s ease-in-out;
- -webkit-box-shadow: 5px 5px 3px 0px rgba(0,0,0,0.1);
- -moz-box-shadow: 5px 5px 3px 0px rgba(0,0,0,0.1);
- box-shadow: 5px 5px 3px 0px rgba(0,0,0,0.1);
- }
- body {
- background-color: {color:background};
- background-image: url({image:background});
- background-attachment:fixed;
- background-repeat:repeat;
- background-position:center;
- font-family: {select:Font};
- font-size: 11px;
- color: {color:text};
- word-wrap:break-word;
- }
- /* LINKS */
- a{
- color:{color:Link};
- }
- a:hover{
- color:{color:Link Hover};
- color: #000;
- text-shadow: 2px 1px 0px #04F2EA, -1px -1px 0px #ff0f54;
- }
- a:active {
- background-color: none;
- border:none;
- }
- blockquote {
- padding-left:5px;
- border-left:1px dotted {color:Accent};
- margin-left:3px;
- margin-bottom:5px;
- }
- iframe, img, embed, object, video {
- max-width: 100%;
- }
- img {
- height: auto;
- width: auto;
- }
- #sidebar{
- z-index: 9999;
- padding:12px;
- padding-left: 22px;
- padding-right: 22px;
- background:#121217;
- top:130px;
- left:60px;
- height:150px;
- width:200px;
- position:fixed;
- border-radius:5px;
- -webkit-box-shadow: inset 0px 0px 15px 0px rgba(0,0,0,0.75);
- -moz-box-shadow: inset 0px 0px 15px 0px rgba(0,0,0,0.75);
- box-shadow: inset 0px 0px 15px 0px rgba(0,0,0,0.75);
- }
- #sidebarbg{
- z-index: 999;
- padding:12px;
- padding-left: 22px;
- padding-right: 22px;
- background:#0F0F13;
- top:120px;
- left:45px;
- height:170px;
- width:220px;
- position:fixed;
- border-radius:12px;
- border-left: 5px solid #04F2EA;
- border-right: 5px solid #ff0f54;
- }
- .desc{
- height:100px;
- padding:6px;
- }
- #links {
- margin-top:5px;
- }
- #links a{
- font-style:italic;
- text-transform:uppercase;
- }
- #links a:hover{
- letter-spacing:1px;
- }
- /* POSTS */
- #content {
- right:20%;
- margin-top:30px;
- width: 600px; /* CHANGE # OF COLUMNS */
- float: right;
- }
- article {
- background:#0F0F13;
- margin: 20px;
- padding: 10px;
- width: {select:Post};
- border-radius:12px;
- }
- article img{
- border-radius:14px;
- }
- #caption{
- margin-top: 12px;
- padding: 6px;
- background: #121217;
- border-radius:14px;
- }
- .chat span {
- float: left;
- margin-right: 10px;
- }
- /* PERMALINKS */
- #perma {
- text-align: left;
- position: relative;
- margin-top:2px;
- padding-top: 4px;
- font-family: arial;
- padding:2px;
- font-size: 10px;
- padding-left:3px;
- {block:PermalinkPage}
- display:none;
- {/block:PermalinkPage}
- }
- .title{
- font-family: 'Fugaz One', cursive;
- font-weight:normal;
- font-size:18px;
- margin:0 0 10px 0;
- color: #000;
- text-shadow: 2px 1px 0px #04F2EA, -1px -1px 0px #ff0f54;
- }
- .quote{
- font-weight:normal;
- font-size:16px;
- font-style:italic;
- margin:0 0 10px 0;
- }
- .tumblr_audio_player {
- width: 400px;
- height: 100px;
- overflow: hidden;
- position: relative;
- z-index: 1000;
- }
- /* PAGE NAVIGATION */
- {block:ifnotinfinitescroll}
- .pagination {
- float:right;
- text-align: center;
- padding: 3px 0;
- }
- .pagination a {
- color:;
- }
- .pagination a:hover {
- color:;
- }
- {/block:ifnotinfinitescroll}
- {block:ifinfinitescroll}
- .pagi {
- display:none;
- }
- {/block:ifinfinitescroll}
- /* POST NOTES */
- .notes{
- margin:10px;
- padding-left:35px;
- height:60px;
- background:#f6f6f6;
- border:1px solid #f1f1f1;
- overflow-y:scroll;
- }
- .notes .note img{
- display:;
- }
- .notes .note{
- margin-top:10px;
- }
- .tri1{
- position: fixed;
- bottom: 0;
- left: 0;
- width: 0;
- height: 0;
- border-style: solid;
- border-width: 100px 0 0 600px;
- border-color: transparent transparent transparent #04F2EA;
- }
- .tri2{
- position: fixed;
- top: 0;
- right: 0;
- width: 0;
- height: 0;
- border-style: solid;
- border-width: 0 600px 100px 0;
- border-color: transparent #ff0f54 transparent transparent;
- }
- .dropbtn:active,
- .dropbtn:focus
- {
- outline:none;
- }
- /* Dropdown Button */
- .dropbtn {
- background-color: #121217;
- color: white;
- padding: 10px;
- font-size: 24px;
- cursor: pointer;
- border-radius:12px;
- border: none;
- margin-top: 50px;
- border-left: 5px solid #04F2EA;
- border-right: 5px solid #ff0f54;
- -moz-transition: all .3s ease-in-out;
- -o-transition: all .3s ease-in-out;
- -webkit-transition: all .3s ease-in-out;
- transition: all .3s ease-in-out;
- }
- /* Dropdown button on hover & focus */
- .dropbtn:hover, .dropbtn:focus {
- background-color: #0F0F13;
- }
- /* The container <div> - needed to position the dropdown content */
- .dropdown {
- position: relative;
- display: inline-block;
- }
- /* Dropdown Content (Hidden by Default) */
- .dropdown-content {
- margin-top: -45px;
- margin-left: 80px;
- display: none;
- border-radius: 12px;
- position: absolute;
- background-color: #1A1A23;
- min-width: 100px;
- box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
- z-index: 1;
- -webkit-box-shadow: 5px 5px 5px 0px rgba(0,0,0,0.75);
- -moz-box-shadow: 5px 5px 5px 0px rgba(0,0,0,0.75);
- box-shadow: 5px 5px 5px 0px rgba(0,0,0,0.75);
- -webkit-animation: fadeInDownยท1s;
- -moz-animation: fadeInDown 1s;
- -ms-animation: fadeInDown 1s;
- -o-animation: fadeInDown 1s;
- animation: fadeInDown 1s;
- }
- /* Links inside the dropdown */
- .dropdown-content a {
- color: black;
- padding: 8px 16px;
- text-decoration: none;
- display: block;
- border-radius:12px;
- -webkit-box-shadow: inset 0px 0px 0px 0px rgba(18,18,23,1);
- -moz-box-shadow: inset 0px 0px 0px 0px rgba(18,18,23,1);
- box-shadow: inset 0px 0px 0px 0px rgba(18,18,23,1);
- -moz-transition: all .3s ease-in-out;
- -o-transition: all .3s ease-in-out;
- -webkit-transition: all .3s ease-in-out;
- transition: all .3s ease-in-out;
- }
- /* Change color of dropdown links on hover */
- .dropdown-content a:hover {
- border-radius:6px;
- -webkit-box-shadow: inset 110px 0px 5px 0px rgba(18,18,23,1);
- -moz-box-shadow: inset 110px 0px 5px 0px rgba(18,18,23,1);
- box-shadow: inset 110px 0px 5px 0px rgba(18,18,23,1);
- }
- /* Show the dropdown menu (use JS to add this class to the .dropdown-content container when the user clicks on the dropdown button) */
- .show {display:block;}
- </style>
- </head>
- <body>
- <div class="tri1"></div>
- <div class="tri2"></div>
- <!-- SIDEBAR INFO -->
- <div id="sidebar">
- <div class="title">{Title}</div>
- <div class="desc">{Description}</div>
- <br><br>
- <div class="dropdown">
- <button onclick="myFunction()" class="dropbtn"> โก </button>
- <div id="myDropdown" class="dropdown-content">
- <a href="{text:Link One url}">— {text:Link One}</a>
- <a href="{text:Link Two url}">— {text:Link Two}</a>
- <a href="{text:Link Three url}">— {text:Link Three}</a>
- <a href="{text:Link Four url}">— {text:Link Four}</a>
- </div>
- </div>
- <div id="articlebg"></div>
- {block:Pagination}
- <div class="pagination">
- <div class="pagi">
- {block:PreviousPage}<a href="{PreviousPage}">
- <i class="fas fa-chevron-left"></i>
- </a>{/block:PreviousPage}
- {block:NextPage}<a href="{NextPage}">
- <i class="fas fa-chevron-right"></i>
- </a>{/block:NextPage}
- </div>
- </div>
- {/block:Pagination}
- </div>
- <div id="sidebarbg"></div>
- <nav>
- <ul>
- {block:HasPages}
- {block:Pages}
- <li> <a href="{URL}">{Label}</a></li>
- {/block:Pages}
- {/block:HasPages}
- </ul>
- </nav>
- <div id="content">
- {block:Posts}
- <article>
- {block:Text}
- <div class="text">
- {block:Title}
- <h1 class="title">
- <a href="{Permalink}">{Title}</a>
- </h1>{/block:Title}
- {Body}
- {/block:Text}
- {block:Photo}
- <div class="photo">
- {LinkOpenTag}<img src="{PhotoURL-500}" alt="{PhotoAlt}" />{LinkCloseTag}
- {block:Caption}
- <div id="caption">
- {Caption}
- </div>
- {/block:Caption}
- {/block:Photo}
- {block:Photoset}
- <div class="photoset">
- {block:IndexPage}
- {Photoset-500}
- {/block:IndexPage}
- {block:PermalinkPage}
- {Photoset-500}
- {/block:PermalinkPage}
- {block:Caption}
- <div id="caption">
- {Caption}
- </div>
- {/block:Caption}
- </div>
- {/block:Photoset}
- {block:Quote}
- <div class="quote">
- {Quote}
- {block:Source}<cite>{Source}</cite>{/block:Source}
- {/block:Quote}
- {block:Link}
- <div class="link">
- <h1 class="title"><a href="{URL}">{Name}</a></h1>
- {block:Description}{Description}{/block:Description}
- {/block:Link}
- {block:Chat}
- <div class="chat">
- <ul>
- {block:Lines}
- {block:Label}<b>{Label}</b>{/block:Label} {Line}<br>
- {/block:Lines}
- </ul>
- </div>
- {/block:Chat}
- {block:Audio}
- <div class="audio">
- {block:AlbumArt}
- <img src="{AlbumArtURL}" width="100px" height="100px"/>
- {/block:AlbumArt}
- {AudioPlayerWhite}
- {block:AudioEmbed}{AudioEmbed}{/block:AudioEmbed}
- {block:TrackName}<b>track:</b> {TrackName}{/block:TrackName}</span><br>
- {block:Artist}<b>artist:</b> {Artist}{/block:Artist}
- {block:Caption}
- <div id="caption">
- {Caption}
- </div>
- {/block:Caption}
- {/block:Audio}
- {block:Video}
- <div class="video">
- <div class="video-player">{Video-500}</div>
- {block:Caption}
- <div id="caption">
- {Caption}
- </div>
- {/block:Caption}
- {/block:Video}
- {block:Answer}
- <div class="answer">
- {Asker} asked: <b>{Question}</b>
- {Answer}
- {/block:Answer}
- </div>
- <div id="perma">
- {TimeAgo} - <a href="{Permalink}">{NoteCountWithLabel}</a> -
- {block:RebloggedFrom} <a href="{ReblogRootURL}">{ReblogRootName}</a>{/block:RebloggedFrom}
- {block:HasTags}
- <div id="tags">
- {block:Tags} #<a href="{TagURL}">{Tag}</a>{/block:Tags}</div>
- {/block:HasTags}
- </div>
- {block:PermalinkPage}
- {block:Date}{Month} {DayOfMonth}{DayOfMonthSuffix}, {Year}{/block:Date}
- {block:NoteCount} - {NoteCountWithLabel}{/block:NoteCount}
- {block:HasTags}</br>tagged as: {block:Tags}#<a href="{TagURL}">{Tag}</a> {/block:Tags}{/block:HasTags}
- {block:RebloggedFrom}</br>source: <a href="{ReblogRootURL}">{ReblogRootName}</a> - via: <a href="{ReblogParentURL}">{ReblogParentName}</a><br>{/block:RebloggedFrom}
- {block:PostNotes}{PostNotes}{/block:PostNotes}
- </div></div>
- {/block:PermalinkPage}
- </footer>
- </article>
- {/block:Posts}
- </div>
- <!-- SCRIPTS! DON'T TOUCH -->
- <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
- <script src="http://static.tumblr.com/wgijwsy/Ebfm2v4gy/jquery.masonry.min.js"></script>
- {block:IfInfiniteScroll}
- <script src="http://static.tumblr.com/wgijwsy/u2vm2hxv6/jquery.infinitescroll.min.js"></script>
- <script src="http://static.tumblr.com/iwtk77u/Yhym2yygt/jquery.imagesloaded.min.js"></script>
- {/block:IfInfiniteScroll}
- <script>
- (function() {
- var $tumblelog = $('#content');
- {block:IfInfiniteScroll}
- $tumblelog.infinitescroll({
- navSelector : ".pagination",
- nextSelector : ".pagination a:first",
- itemSelector : "article",
- bufferPx : 50,
- done : "",
- loading: {
- img : "",
- msgText: ""
- },
- },
- function( newElements ) {
- var $newElems = $( newElements ).css({ opacity: 0 });
- $newElems.imagesLoaded(function(){
- $newElems.animate({ opacity: 1 });
- $tumblelog.masonry( 'appended', $newElems);
- });
- }
- );
- {/block:IfInfiniteScroll}
- $tumblelog.imagesLoaded( function(){
- $tumblelog.masonry({
- columnWidth: function( containerWidth ) {
- return containerWidth / 100;
- }
- });
- });
- })();
- </script>
- <script>
- (function($){
- $(document).ready(function(){
- $("[title]").style_my_tooltips();
- });
- })(jQuery);
- </script>
- <script src="http://static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js"></script>
- <script>
- (function($){
- $(document).ready(function(){
- $("a[title]").style_my_tooltips({
- tip_follows_cursor:true,
- tip_delay_time:5,
- tip_fade_speed:400,
- attribute:"title"
- });
- });
- })(jQuery);
- </script>
- <script>
- /* When the user clicks on the button,
- toggle between hiding and showing the dropdown content */
- function myFunction() {
- document.getElementById("myDropdown").classList.toggle("show");
- }
- // Close the dropdown menu if the user clicks outside of it
- window.onclick = function(event) {
- if (!event.target.matches('.dropbtn')) {
- var dropdowns = document.getElementsByClassName("dropdown-content");
- var i;
- for (i = 0; i < dropdowns.length; i++) {
- var openDropdown = dropdowns[i];
- if (openDropdown.classList.contains('show')) {
- openDropdown.classList.remove('show');
- }
- }
- }
- }
- </script>
- <div style="z-index:999999999999999999999999999; position:fixed; bottom:3px; right:10px; opacity:.7; text-transform:none; font-style:none; color: #000; text-shadow: 2px 1px 0px #04F2EA, -1px -1px 0px #ff0f54;">
- <a href="http://whimsythemes.tumblr.com" title="Theme by WhimsyThemes." style="text-decoration:none;">
- <span style="color:{color:Link}; font-size:24px">แ.</span>
- </a>
- </div>
- </body>
- </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement