Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!DOCTYPE html>
- <html>
- <!-----------------------------------------------------------------------
- *** PLEASE READ THIS AS IT CONTAINS IMPORTANT INFO ***
- Feline Themes Presents: Wednesdays
- You may make as many cosmetic changes as you'd like to this theme such as changing fonts, colors, and simple stuff like that. Just please don't make this theme look like an entirely new theme, okay? :)
- Do not use as a base code! And do not reupload this theme as your own, no matter how much you edit it, and keep both credit links intact (although you may edit the credit link in the sidebar to be a credit popup if you'd like).
- You may look at my coding to see how I did certain things, but please don't copy & paste any of the CSS/HTML.
- *FONTS USED*
- - Raleway [Google Font]
- - Sweetie Pie [dafont.com]
- - Sabrina [dafont.com]
- *INCLUDED PLUGINS*
- - jQuery (YOU DO NOT NEED TO ADD THIS AGAIN FOR POPUPS OR ANYTHING ELSE)
- - Infinite Scroll
- - Masonry
- - Unnest
- - PXU
- - Styled Tooltips
- *OTHER INFO*
- - I have tested the following post types: Text, Photos/Photosets, Quotes, Asks, Videos, Chats. I didn't really touch the audio posts as I don't see them used often.
- Enjoy and let me know if you use it so I can see! :)
- © Feline Themes 2017
- ------------------------------------------------------------------------>
- <head>
- <!---------------------------------------------------------------------->
- <title>{Title}</title>
- <link href="{Favicon}" rel="icon" type="image/x-icon" />
- <link rel="alternate" type="application/rss+xml" href="{RSS}">
- {block:Description}
- <meta name="description" content="{MetaDescription}"/>
- {/block:Description}
- <!---------------------------------------------------------------------->
- <meta name="color:Main Font Color" content="#000000"/>
- <meta name="color:Color 1" content="#eda5c5"/>
- <meta name="color:Color 2" content="#d15878"/>
- <meta name="color:Color 3" content="#dfadb0"/>
- <meta name="text:Title Font Size" content="28px"/>
- <meta name="if:Scroll To Top Button" content="1"/>
- <meta name="if:Loading Screen" content="1"/>
- <meta name="select:Photoset Gutter Size" content="3px"/>
- <meta name="select:Photoset Gutter Size" content="5px"/>
- <meta name="select:Photoset Gutter Size" content="7px"/>
- <meta name="if:Archive Link" content="1"/>
- <meta name="text:Link 1 URL" content="/linkone"/>
- <meta name="text:Link 1 Text" content="Link One"/>
- <meta name="text:Link 2 URL" content="/linktwo"/>
- <meta name="text:Link 2 Text" content="Link Two"/>
- <meta name="text:Your Name" content="Name/Nickname"/>
- <!---------------------------------------------------------------------->
- <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script> <!-- jQuery, you only need ONE of these libraries! -->
- <script src="http://static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js"></script> <!-- Style My Tooltips-->
- <script src="http://static.tumblr.com/wgijwsy/u2vm2hxv6/jquery.infinitescroll.min.js"></script> <!--- Infinite Scroll--->
- <script src="http://static.tumblr.com/wgijwsy/Ebfm2v4gy/jquery.masonry.min.js"></script> <!--- Masonry --->
- <script src="http://static.tumblr.com/iwtk77u/Yhym2yygt/jquery.imagesloaded.min.js"></script> <!-- Images Loaded -->
- <script src="http://static.tumblr.com/qudkd6d/Az6nkemqr/pxuphotoset.min.js"></script> <!-- PXU -->
- <link href="https://static.tumblr.com/qudkd6d/OcDnl99gb/style.css" rel="stylesheet" type="text/css"/> <!--- PXU Styling --->
- <script src="//static.tumblr.com/wgg6svp/OoTofxa0c/unnest.min.js"></script> <!-- Unnest Caption -->
- <script type="text/javascript" src="//static.tumblr.com/ikeq9mi/DfYl6o46t/scrolltotop.min.js"></script> <!--- To Top Button ---->
- <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"> <!--Font Awesome Icons-->
- <link rel="stylesheet" href="https://cdn.linearicons.com/free/1.0.0/icon-font.min.css"> <!--- Linear Icons --->
- <link href="http://static.tumblr.com/dq6g0mp/EI1oyye4i/sabrina.css" rel="stylesheet"> <!--- Sabrina Font --->
- <link href="http://static.tumblr.com/dq6g0mp/Zd8opm2zy/sweetie.css" rel="stylesheet"> <!-- Sweetie Pie Font -->
- <link href="https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300|Raleway" rel="stylesheet"> <!--- FONTS --->
- <style type="text/css">
- /*------------------------------ SIDEBAR ------------------------------*/
- /*---- General Sidebar ----*/
- #sidebar{
- position:fixed;
- z-index:100;
- top:170px;
- left:6%;
- width:270px;
- text-align:center;
- }
- /*---- Blogtitle ----*/
- #sb-blogtitle{
- margin:0px 0px -15px 75px;
- text-align:left;
- font-family: 'sabrina_atregular';
- font-size:{text:Title Font Size};
- color:#000000;
- }
- /*----- Avatar -----*/
- #sb-icon{
- width:70px;
- box-shadow:-5px -5px 0px {color:Color 3};
- }
- /*----- Description -----*/
- #sb-description{
- margin:-60px 0px 5px 60px;
- padding:10px 10px 10px 20px;
- background-color:{color:Color 1};
- box-shadow:5px 5px 0px {color:Color 2};
- color:#ffffff;
- }
- /*----- Links -----*/
- #sb-links{
- text-align:right;
- }
- .links{
- display:inline-block;
- margin:5px 0px 0px 0px;
- padding:0px;
- }
- .links:after {
- display:inline-block;
- clear:both;
- }
- .links li {
- display:inline-block;
- list-style:none;
- margin:0px 3px 0px 3px;
- width:7px;
- height:7px;
- }
- .links a {
- display:inline-block;
- width:7px;
- height:7px;
- border-radius:100%;
- background-color:#000000;
- -webkit-transition: all .9s ease;
- -moz-transition: all .9s ease;
- -o-transition: all .9s ease;
- -ms-transition: all .9s ease;
- transition: all .9s ease;
- }
- .links span{
- position:relative;
- width:10px;
- height:10px;
- }
- .links li:hover a{
- background-color:{color:Color 3};
- }
- /*------------------------------ SIDEBAR ------------------------------*/
- /*------------------------------ POSTS --------------------------------*/
- #container{
- position:absolute;
- left:56%;
- transform:translateX(-50%);
- width:570px;
- {block:IndexPage}
- top:70px;
- {/block:IndexPage}
- {block:PermalinkPage}
- top:90px;
- {/block:PermalinkPage}
- }
- .entry{
- position:relative;
- margin:0px 0px 60px 0px;
- {block:IndexPage}
- width:250px;
- {/block:IndexPage}
- {block:PermalinkPage}
- width:570px;
- {/block:PermalinkPage}
- }
- .thepost{
- {block:IndexPage}
- width:250px;
- {/block:IndexPage}
- {block:PermalinkPage}
- width:400px;
- {/block:PermalinkPage}
- }
- .postcontents{
- position:relative;
- }
- iframe, img, embed, object, video {
- max-width: 100%;
- }
- /*---- Text Post ----*/
- .tp-title, .cp-title{
- margin-bottom:3px;
- text-align:center;
- font-family: 'sabrina_atregular';
- color:#000000;
- }
- .tp-title{
- font-size:28px;
- }
- .tp-body, .qp-body{
- padding:15px;
- background-color:{color:Color 1};
- {block:PermalinkPage}
- min-height: 100px;
- {/block:PermalinkPage}
- {block:IndexPage}
- box-shadow:-3px 3px 0px #000000;
- {/block:IndexPage}
- }
- .tp-body a, .qp-source a{
- color:{color:Color 2};
- }
- /*---- Quote Post ----*/
- .qp-body{
- text-align:left;
- font-family: 'sabrina_atregular';
- }
- .qp-source{
- text-align:right;
- font-family: 'Raleway';
- font-size:9px;
- }
- .short{
- font-size:18px;
- }
- .medium{
- font-size:16px;
- }
- .long{
- font-size:14px;
- }
- /*---- Link Post ----*/
- a.p-link{
- display:block;
- padding:10px;
- border-radius:5px;
- background: {color:Color 3}; /* For browsers that do not support gradients */
- background: -webkit-linear-gradient(left, {color:Color 3}, {color:Color 2}); /* For Safari 5.1 to 6.0 */
- background: -o-linear-gradient(left, {color:Color 3}, {color:Color 2}); /* For Opera 11.1 to 12.0 */
- background: -moz-linear-gradient(left, {color:Color 3}, {color:Color 2}); /* For Firefox 3.6 to 15 */
- background: linear-gradient(left, {color:Color3}, {color:Color 2}); /* Standard syntax */
- font-family: 'sabrina_atregular';
- font-size:15px;
- color:#ffffff;
- }
- a.p-link:hover{
- background: {color:Color 3}; /* For browsers that do not support gradients */
- background: -webkit-linear-gradient(left, {color:Color 3}, {color:Color 1}); /* For Safari 5.1 to 6.0 */
- background: -o-linear-gradient(left, {color:Color 3}, {color:Color 1}); /* For Opera 11.1 to 12.0 */
- background: -moz-linear-gradient(left, {color:Color 3}, {color:Color 1}); /* For Firefox 3.6 to 15 */
- background: linear-gradient(left, {color:Color 3}, {color:Color 1}); /* Standard syntax */
- }
- /*---- Chat Posts ----*/
- .cp-title{
- font-size:15px;
- }
- .cp-body{
- font-size:10px;
- }
- .chat-line{
- margin:10px 0px 10px 0px;
- }
- .odd .c-line, .even .c-line{
- position:relative;
- margin-bottom:5px;
- padding:10px;
- border-radius:3px;
- color:#ffffff;
- }
- .even .c-line{
- margin-right:10px;
- background-color:{color:Color 2};
- }
- .odd .c-line{
- margin-left:10px;
- background-color:{color:Color 3};
- }
- .odd .c-user, .even .c-user{
- white-space: nowrap;
- overflow:hidden;
- font-size:9px;
- color:#aaaaaa;
- }
- .c-user hider /*-- hides semicolor --*/{
- display:inline-block;
- white-space: nowrap;
- overflow:hidden;
- background-color:#ffffff;
- margin-left:-2px;
- width:10px;
- height:9px;
- }
- .odd .c-user{
- margin-left:9px;
- text-align:right;
- }
- .even .c-user{
- text-align:left;
- }
- .chat-chatter{
- position:absolute;
- bottom:10px;
- width:10px;
- height:10px;
- transform:rotate(45deg);
- }
- .even .chat-chatter{
- right:-5px;
- background-color:{color:Color 2};
- }
- .odd .chat-chatter{
- left:-5px;
- background-color:{color:Color 3};
- }
- /*----- Photosets -----*/
- {block:IndexPage}
- .thephotoset{
- position:relative;
- overflow:hidden;
- }
- .thephotoset img{
- -webkit-transition: all .4s ease;
- -moz-transition: all .4s ease;
- -o-transition: all .4s ease;
- transition: all .4s ease;
- }
- #photopost:hover .thephotoset img{
- filter:grayscale(100%);
- }
- {/block:IndexPage}
- /*---- Photo Post ----*/
- #photopost{
- {block:IndexPage}
- position:relative;
- overflow:hidden;
- padding:10px;
- border:1px solid #eeeeee;
- {block:IndexPage}
- }
- .thephoto{
- position:relative;
- overflow:hidden;
- }
- {block:IndexPage}
- .thephoto img{
- -webkit-transition: all .4s ease;
- -moz-transition: all .4s ease;
- -o-transition: all .4s ease;
- transition: all .4s ease;
- }
- #photopost:hover .thephoto img{
- filter:grayscale(100%);
- }
- {/block:IndexPage}
- .photohovereffect{
- position:absolute;
- z-index:0;
- top:0px;
- bottom:0px;
- left:0px;
- right:0px;
- opacity:0;
- background: {color:Color 2}; /* For browsers that do not support gradients */
- background: -webkit-linear-gradient({color:Color 2}, {color:Color 3}); /* For Safari 5.1 to 6.0 */
- background: -o-linear-gradient({color:Color 2}, {color:Color 3}); /* For Opera 11.1 to 12.0 */
- background: -moz-linear-gradient({color:Color 2}, {color:Color 3}); /* For Firefox 3.6 to 15 */
- background: linear-gradient({color:Color 2}, {color:Color 3}); /* Standard syntax */
- -webkit-transition: all .4s ease;
- -moz-transition: all .4s ease;
- -o-transition: all .4s ease;
- transition: all .4s ease;
- }
- .entry:hover .photohovereffect{
- opacity:0.8;
- }
- /*--Photo Perma--*/
- .p-permalinks{
- position:absolute;
- top:50%;
- left:50%;
- width:200px;
- transform:translate(-50%,-50%);
- opacity:0;
- text-align:center;
- -webkit-transition: all .4s ease;
- -moz-transition: all .4s ease;
- -o-transition: all .4s ease;
- transition: all .4s ease;
- transition-delay:0s;
- }
- .entry:hover .p-permalinks{
- opacity:1;
- transition-delay:0.4s;
- }
- a.photo-perma{
- display:inline-block;
- position:relative;
- margin:3px;
- width:40px;
- overflow:hidden;
- color:#ffffff;
- }
- .photo-perma i{
- position:relative;
- width:40px;
- font-size:30px;
- -webkit-transition: all .4s ease;
- -moz-transition: all .4s ease;
- -o-transition: all .4s ease;
- }
- .photo-perma label{
- display:block;
- margin-top:5px;
- font-size:10px;
- }
- .like .like_button {
- position:relative;
- }
- .like .like_button iframe {
- position:absolute;
- z-index:2;
- top:0px;
- bottom:0px;
- left:0px;
- right:0px;
- opacity:1;
- zoom:750%;
- }
- .p-postinfo{
- margin-top:7px;
- padding:5px 7px 5px 7px;
- text-align:right;
- font-size:15px;
- font-family: 'sabrina_atregular';
- color:#aaaaaa;
- }
- /*--- Question Posts ---*/
- .asked{
- position:relative;
- }
- .asker-icon{
- width:40px;
- height:40px;
- }
- .asker-icon img{
- width:40px;
- height:40px;
- border-radius:3px;
- }
- .askerquestion{
- position:relative;
- z-index:1;
- margin:-40px 0px 0px 50px;
- min-height: 40px;
- padding:5px;
- border-radius:2px;
- background-color:{color:Color 3};
- color:#ffffff;
- }
- .askerquestion a{
- color:#ffffff;
- }
- .asked-chatter{
- position:absolute;
- z-index:-1;
- top:10px;
- left:-5px;
- width:10px;
- height:10px;
- transform:rotate(45deg);
- background-color:{color:Color 3};
- }
- .theanswer{
- position:relative;
- margin-top:5px;
- }
- .answered-q{
- padding:5px;
- background-color:{color:Color 1};
- color:#ffffff;
- }
- /*---- Text Based Permas ----*/
- #textperma{
- position:relative;
- margin:5px -3px 0px 0px;
- text-align:right;
- }
- #textperma a{
- display:inline-block;
- margin-right:3px;
- width:7px;
- height:7px;
- border-radius:100%;
- background-color:#000000;
- text-align:center;
- font-size:10px;
- color:#ffffff;
- -webkit-transition: all .4s ease;
- -moz-transition: all .4s ease;
- -o-transition: all .4s ease;
- transition: all .4s ease;
- }
- #textperma a:hover{
- background-color:{color:Color 2};
- }
- /*----Like Button Style----*/
- #textperma .like .like_button iframe {
- position:absolute;
- z-index:2;
- top:0px;
- bottom:0px;
- left:0px;
- right:0px;
- opacity:0;
- }
- /*----------------------PERMALINK PAGE---------------------*/
- .thepostinfo{
- position:absolute;
- top:0px;
- right:0px;
- width:160px;
- }
- .postinfo{
- margin:0px 0px 5px 0px;
- padding:7px;
- background-color:#000000;
- font-size:10px;
- color:#ffffff;
- }
- .postinfo a{
- color:#ffffff;
- }
- .caption{
- margin-top:10px;
- padding:10px;
- border:1px solid #eeeeee;
- background-color:#ffffff;
- color:#aaaaaa;
- }
- .caption a{
- color:{color:Color 2};
- }
- .caption b{
- color:{color:Color 1};
- }
- .caption h2{
- text-align:left;
- color:{color:Color 2};
- }
- .tumblr_parent {
- margin:0px 0px 5px 0px;
- }
- .tumblr_avatar{
- display:none;
- }
- ol.notes{
- margin:10px 0px 0px 0px;
- max-height:200px;
- overflow:auto;
- padding:0px;
- background-color:{color:Color 3};
- list-style-type:none;
- }
- /*NOTES SPECIFIC SCROLLBARS*/
- ol.notes::-webkit-scrollbar {
- width: 5px;
- }
- ol.notes::-webkit-scrollbar-track {
- background-color:#ffffff;
- border-top:5px solid {color:Color 2};
- border-bottom:5px solid {color:Color 2};
- border-left:2px solid {color:Color 2};
- border-right:2px solid {color:Color 2};
- }
- ol.notes::-webkit-scrollbar-thumb {
- border-top:5px solid {color:Color 2};
- border-bottom:5px solid {color:Color 2};
- border-left:2px solid {color:Color 2};
- border-right:2px solid {color:Color 2};
- background-color:#000000;
- }
- ol.notes li{
- position:relative;
- margin-top:-1px;
- padding:10px 25px 10px 10px;
- border-top:1px solid #ffffff;
- }
- ol.notes blockquote{
- display:inline-block;
- font-size:11px;
- }
- ol.notes a{
- color:#ffffff;
- }
- ol.notes img{
- display:none;
- }
- /*------------------------------ POSTS --------------------------------*/
- /*------------------------- LOADING SCREEN ----------------------------*/
- #loading {
- position:fixed;
- top:0px;
- bottom:0px;
- left:0px;
- right:0px;
- z-index: 1000;
- background-color:#ffffff;
- }
- #loadmessage{
- position:fixed;
- top:50%;
- left:50%;
- transform:translate(-50%,-50%);
- font-family: 'sabrina_atregular';
- font-size:80px;
- color:#000000;
- }
- /*---------------------------------------------------------------------*/
- #tl-corner1, #br-corner1, #left1, #bottom1, #right1, #top1, #borderbg-left, #borderbg-right, #borderbg-top, #borderbg-bottom, #left2, #bottom2, #right2, #top2{
- position:fixed;
- z-index:900000 !important;
- }
- #tl-corner1, #br-corner1{
- width:250px;
- height:250px;
- transform:rotate(45deg);
- background-color:#ffffff;
- box-shadow:0px 0px 1px #888888;
- }
- #tl-corner1{
- top:-125px;
- left:-125px;
- }
- #br-corner1{
- bottom:-125px;
- right:-125px;
- }
- #left1, #right1{
- top:0px;
- bottom:0px;
- width:15px;
- }
- #left1{
- left:0px;
- background: {color:Color 3}; /* For browsers that do not support gradients */
- background: -webkit-linear-gradient({color:Color 3}, {color:Color 1}); /* For Safari 5.1 to 6.0 */
- background: -o-linear-gradient({color:Color 3}, {color:Color 1}); /* For Opera 11.1 to 12.0 */
- background: -moz-linear-gradient({color:Color 3}, {color:Color 1}); /* For Firefox 3.6 to 15 */
- background: linear-gradient({color:Color 3}, {color:Color 1}); /* Standard syntax */
- }
- #right1{
- right:0px;
- background: {color:Color 1}; /* For browsers that do not support gradients */
- background: -webkit-linear-gradient({color:Color 1}, {color:Color 2}); /* For Safari 5.1 to 6.0 */
- background: -o-linear-gradient({color:Color 1}, {color:Color 2}); /* For Opera 11.1 to 12.0 */
- background: -moz-linear-gradient({color:Color 1}, {color:Color 2}); /* For Firefox 3.6 to 15 */
- background: linear-gradient({color:Color 1}, {color:Color 2}); /* Standard syntax */
- }
- #top1, #bottom1{
- height:15px;
- left:0px;
- right:0px;
- }
- #top1{
- top:0px;
- right:0px;
- background: {color:Color 1}; /* For browsers that do not support gradients */
- background: -webkit-linear-gradient(left, {color:Color 2}, {color:Color 1}); /* For Safari 5.1 to 6.0 */
- background: -o-linear-gradient(left, {color:Color 2}, {color:Color 1}); /* For Opera 11.1 to 12.0 */
- background: -moz-linear-gradient(left, {color:Color 2}, {color:Color 1}); /* For Firefox 3.6 to 15 */
- background: linear-gradient(left, {color:Color 2}, {color:Color 1}); /* Standard syntax */
- }
- #bottom1{
- bottom:0px;
- background: {color:Color 3}; /* For browsers that do not support gradients */
- background: -webkit-linear-gradient(left, {color:Color 1}, {color:Color 3}); /* For Safari 5.1 to 6.0 */
- background: -o-linear-gradient(left, {color:Color 1}, {color:Color 3}); /* For Opera 11.1 to 12.0 */
- background: -moz-linear-gradient(left, {color:Color 1}, {color:Color 3}); /* For Firefox 3.6 to 15 */
- background: linear-gradient(left, {color:Color 1}, {color:Color 3}); /* Standard syntax */
- }
- #borderbg-left, #borderbg-right, #borderbg-top, #borderbg-bottom{
- background-color:#ffffff;
- }
- #borderbg-left, #borderbg-right{
- top:15px;
- bottom:15px;
- width:5px;
- }
- #borderbg-left{
- left:15px;
- }
- #borderbg-right{
- right:15px;
- }
- #borderbg-top, #borderbg-bottom{
- left:15px;
- right:15px;
- height:5px;
- }
- #borderbg-top{
- top:15px;
- }
- #borderbg-bottom{
- bottom:15px;
- }
- #left2, #bottom2, #right2, #top2{
- background-color:#000000;
- }
- #left2, #right2{
- width:1px;
- }
- #bottom2, #top2{
- height:1px;
- }
- #left2{
- top:170px;
- bottom:20px;
- left:20px;
- }
- #bottom2{
- bottom:20px;
- left:20px;
- right:170px;
- }
- #right2{
- top:20px;
- bottom:170px;
- right:20px;
- }
- #top2{
- top:20px;
- right:20px;
- left:170px;
- }
- /*------------------------------ BASICS -------------------------------*/
- #infscr-loading {
- display: none !important;
- }
- #scrollToTop:link,
- #scrollToTop:visited {
- display:none;
- position:fixed;
- bottom:25px;
- left:25px;
- font-size:20px;
- color:{color:Color 2};
- }
- #s-m-t-tooltip {
- margin:15px 0px 0px 10px;
- padding:7px;
- background-color:#ffffff;
- border:1px solid #cccccc;
- font-size:10px;
- text-align:center;
- color:#cccccc;
- z-index:99999999999999999999999999999999999;
- }
- ::-moz-selection { /* Code for Firefox */
- color: #ffffff;
- background: {color:Color 1};
- }
- ::selection {
- color: #ffffff;
- background: {color:Color 1};
- }
- body{
- background-color:#ffffff;
- font-family:'Raleway';
- font-size:11px;
- }
- body::-webkit-scrollbar{
- width:0px;
- }
- blockquote{
- margin:0px;
- }
- img{
- vertical-align:middle;
- }
- hr{
- margin:5px 0px 5px 0px;
- height:1px;
- border:none;
- background-color:#cccccc;
- }
- h1{
- margin:0px 0px 5px 0px;
- font-family: 'sabrina_atregular';
- font-size:20px;
- color:{color:Color 1};
- }
- h2{
- font-family: 'sabrina_atregular';
- font-size:15px;
- }
- p{
- margin:5px 0px 5px 0px;
- text-align:justify;
- font-family: 'Raleway';
- font-size:11px;
- }
- ol{
- text-align:left;
- font-family: 'Raleway';
- font-size:11px;
- }
- ul{
- text-align:left;
- font-family: 'Raleway';
- font-size:11px;
- }
- a{
- text-decoration:none;
- color:{color:Color 3};
- }
- i{
- font-family:'sweetie_pieregular';
- }
- iframe.tmblr-iframe {
- z-index:99999999999999!important;
- top:20px!important;
- right:20px!important;
- opacity:0.7;
- 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;
- }
- /*------------------------------ BASICS -------------------------------*/
- </style>
- </head>
- <body>
- <!------------------------------ SIDEBAR ------------------------------->
- <div id="sidebar">
- <!--------------------------->
- <div id="sb-blogtitle" title="Refresh">{Title}</div>
- <!--------------------------->
- <div id="sb-icon"><img src="{Favicon}"></div>
- <!--------------------------->
- <div id="sb-description">{Description}</div>
- <!--------------------------->
- <div id="sb-links">
- <ul class="links">
- <li><a href="/" title="Home"></a></li>
- {block:AskEnabled}
- <li><a href="/ask" title="Ask"></a></li>
- {/block:AskEnabled}
- {block:ifLink1URL}
- <li><a href="{text:Link 1 URL}" title="{text:Link 1 Text}"></a></li>
- {/block:ifLink1URL}
- {block:ifLink2URL}
- <li><a href="{text:Link 2 URL}" title="{text:Link 2 Text}"></a></li>
- {/block:ifLink2URL}
- {block:ifArchiveLink}
- <li><a href="/archive" title="Archive"></a></li>
- {/block:ifArchiveLink}
- <li><a href="http://katting.tk" title="Theme Credit"></a></li>
- </ul>
- </div>
- <!--------------------------->
- </div>
- <!------------------------------ SIDEBAR ------------------------------->
- <!---------------------------------------------------------------------->
- <div id="container">
- {block:Posts}
- <div class="entry">
- <!-------------------------------------------------------------------->
- <div class="thepost {PostType}">
- <!----------------------------------------------------->
- {block:Text}
- <div class="post text">
- {block:Title}<div class="tp-title">{Title}</div>{/block:Title}
- <div class="tp-body">{Body}</div>
- <!----------------------->
- {block:IndexPage}
- <div id="textperma">
- <a href="#" title="Like" class="like"><likebutton>{LikeButton}</likebutton></a>
- <a href="{ReblogURL}" title="Reblog" target="blank"></a>
- <a href="{Permalink}" title="{TimeAgo} with {NoteCountWithLabel}"></a>
- </div>
- {/block:IndexPage}
- <!----------------------->
- </div>
- {/block:Text}
- <!----------------------------------------------------->
- <!----------------------------------------------------->
- {block:Quote}
- <div class="post quote {Length}">
- <div class="qp-body">
- "{Quote}"
- {block:Source}<div class="qp-source">- {Source}</div>{/block:Source}
- </div>
- <!----------------------->
- {block:IndexPage}
- <div id="textperma">
- <a href="#" title="Like" class="like"><likebutton>{LikeButton}</likebutton></a>
- <a href="{ReblogURL}" title="Reblog" target="blank"></a>
- <a href="{Permalink}" title="{TimeAgo} with {NoteCountWithLabel}"></a>
- </div>
- {/block:IndexPage}
- <!----------------------->
- </div>
- {/block:Quote}
- <!----------------------------------------------------->
- <!----------------------------------------------------->
- {block:Link}
- <div class="post link">
- <div class="lp-bg">
- <a href="{URL}" class="p-link {Target}" target="blank">{Name}</a>
- </div>
- <!----------------------->
- {block:IndexPage}
- <div id="textperma">
- <a href="#" title="Like" class="like"><likebutton>{LikeButton}</likebutton></a>
- <a href="{ReblogURL}" title="Reblog" target="blank"></a>
- <a href="{Permalink}" title="{TimeAgo} with {NoteCountWithLabel}"></a>
- </div>
- {/block:IndexPage}
- <!----------------------->
- </div>
- {/block:Link}
- <!----------------------------------------------------->
- <!----------------------------------------------------->
- {block:Chat}
- <div class="post chat">
- {block:Title}<div class="cp-title">{Title}</div>{/block:Title}
- <div class="cp-body">
- {block:Lines}
- <div class="chat-line">
- <div class="{Alt} user_{UserNumber}"><div class="c-line">
- <div class="chat-chatter"></div>
- {Line}
- </div></div>
- <div class="{Alt} user_{UserNumber}">
- {block:Label}<div class="c-user">{Label}<hider></hider></div>{/block:Label}
- </div>
- </div>
- {/block:Lines}
- </div>
- <!----------------------->
- {block:IndexPage}
- <div id="textperma">
- <a href="#" title="Like" class="like"><likebutton>{LikeButton}</likebutton></a>
- <a href="{ReblogURL}" title="Reblog" target="blank"></a>
- <a href="{Permalink}" title="{TimeAgo} with {NoteCountWithLabel}"></a>
- </div>
- {/block:IndexPage}
- <!----------------------->
- </div>
- {/block:Chat}
- <!----------------------------------------------------->
- <!----------------------------------------------------->
- {block:Video}
- <div class="post video">
- {block:IndexPage}{Video-250}{/block:IndexPage}
- {block:PermalinkPage}{Video-500}{/block:PermalinkPage}
- </div>
- <!----------------------->
- {block:IndexPage}
- <div id="textperma">
- <a href="#" title="Like" class="like"><likebutton>{LikeButton}</likebutton></a>
- <a href="{ReblogURL}" title="Reblog" target="blank"></a>
- <a href="{Permalink}" title="{TimeAgo} with {NoteCountWithLabel}"></a>
- </div>
- {/block:IndexPage}
- <!----------------------->
- {block:Video}
- <!----------------------------------------------------->
- <!----------------------------------------------------->
- {block:Audio}
- <div class="post audio">
- {block:AudioEmbed}
- {block:IndexPage}{block:AudioEmbed-250}{/block:IndexPage}
- {block:PermalinkPage}{AudioEmbed-500}{/block:PermalinkPage}
- {/block:AudioEmbed}
- {block:AudioPlayer}{AudioPlayer}{/block:AudioPlayer}
- </div>
- {/block:Audio}
- <!----------------------------------------------------->
- <!----------------------------------------------------->
- {block:Photoset}
- <div class="post photoset">
- <div id="photopost">
- <div class="thephotoset">
- <div class="photo-slideshow" id="photoset_{PostID}" data-layout="{PhotosetLayout}">
- {block:Photos}
- <div class="photo-data"><div class="pxu-photo">
- <img src="{PhotoURL-500}" width="{PhotoWidth-500}" height="{PhotoHeight-500}" data-highres="{PhotoURL-HighRes}" data-width="{PhotoWidth-HighRes}" data-height="{PhotoHeight-HighRes}">
- </div>
- <a class="tumblr-box" rel="post-{PostID}" href="{PhotoURL-HighRes}"></a>
- </div>
- {/block:Photos}
- </div>
- {block:IndexPage}
- <!---------------------------------->
- <div class="photohovereffect"></div>
- <div class="p-permalinks">
- <a href="{ReblogURL}" class="photo-perma"><i class="lnr lnr-redo"></i><label>Reblog</label></a>
- <a href="{Permalink}" class="photo-perma"><i class="lnr lnr-bubble"></i><label>Details</label></a>
- <a href="#" class="photo-perma like"><likebutton>{LikeButton}<i class="lnr lnr-heart"></i><label>Like</label></likebutton></a>
- </div>
- <!---------------------------------->
- {/block:IndexPage}
- </div>
- {block:IndexPage}
- <div class="p-postinfo">{TimeAgo} • {NoteCountWithLabel}</div>
- {/block:IndexPage}
- </div>
- </div>
- {/block:Photoset}
- <!----------------------------------------------------->
- <!----------------------------------------------------->
- {block:Photo}
- <div class="post photo">
- <div id="photopost">
- <div class="thephoto">
- <img src="{PhotoURL-500}" alt="{PhotoAlt}"/>
- {block:IndexPage}
- <!---------------------------------->
- <div class="photohovereffect"></div>
- <div class="p-permalinks">
- <a href="{ReblogURL}" class="photo-perma"><i class="lnr lnr-redo"></i><label>Reblog</label></a>
- <a href="{Permalink}" class="photo-perma"><i class="lnr lnr-bubble"></i><label>Details</label></a>
- <a href="#" class="photo-perma like"><likebutton>{LikeButton}<i class="lnr lnr-heart"></i><label>Like</label></likebutton></a>
- </div>
- <!---------------------------------->
- {/block:IndexPage}
- </div>
- {block:IndexPage}
- <div class="p-postinfo">{TimeAgo} • {NoteCountWithLabel}</div>
- {/block:IndexPage}
- </div>
- </div>
- {/block:Photo}
- <!----------------------------------------------------->
- <!----------------------------------------------------->
- {block:Answer}
- <div class="post answer">
- <div class="asked">
- <div class="thequestion">
- <div class="asker-icon"><img src="{AskerPortraitURL-96}"></div>
- <div class="askerquestion">
- <div class="asked-chatter"></div>
- {Asker} asked: {Question}
- </div>
- </div>
- </div>
- {block:NotReblog}
- <div class="theanswer">
- <div class="answered-q">
- {text:Your Name} Replied:
- {Answer}
- </div>
- </div>
- {/block:NotReblog}
- {block:IndexPage}
- <div id="textperma">
- <a href="#" title="Like" class="like"><likebutton>{LikeButton}</likebutton></a>
- <a href="{ReblogURL}" title="Reblog" target="blank"></a>
- <a href="{Permalink}" title="{TimeAgo} with {NoteCountWithLabel}"></a>
- </div>
- {/block:IndexPage}
- <!----------------------->
- </div>
- {/block:Answer}
- <!----------------------------------------------------->
- </div>
- {block:PermalinkPage}
- <div class="thepostinfo">
- <div class="postinfo">
- <info>{Month} {DayOfMonth}, {Year}</info>
- </div>
- {block:RebloggedFrom}
- <a href="{ReblogParentURL}" target="blank"><div class="postinfo">
- via {ReblogParentName}
- </div></a>
- {/block:RebloggedFrom}
- {block:ContentSource}
- <a href="{SourceURL}" target="blank"><div class="postinfo">
- Source : {SourceTitle}
- </div></a>
- {block:ContentSource}
- <div class="postinfo">
- {NoteCountWithLabel}
- </div>
- </div>
- {block:Caption}<div class="caption">{Caption}</div>{/block:Caption}
- {block:PostNotes}
- {PostNotes-64}
- {/block:PostNotes}
- {/block:PermalinkPage}
- </div>
- {/block:Posts}
- </div>
- </div>
- <!---------------------------------------------------------------------->
- <div id="top2"></div>
- <div id="bottom2"></div>
- <div id="left2"></div>
- <div id="right2"></div>
- <div id="top1"></div>
- <div id="bottom1"></div>
- <div id="left1"></div>
- <div id="right1"></div>
- <div id="borderbg-left"></div>
- <div id="borderbg-right"></div>
- <div id="borderbg-top"></div>
- <div id="borderbg-bottom"></div>
- <div id="tl-corner1"></div>
- <div id="br-corner1"></div>
- <style>
- #cred{
- position:fixed;
- z-index:999999990000;
- bottom:5px;
- right:5px;
- width:15px;
- height:15px;
- padding:5px;
- border-radius:90px;
- background-color:{color:Color 2};
- display: flex;
- align-items: center;
- justify-content: center;
- text-align:center;
- font-size:14px;
- color:#ffffff;
- webkit-transition: all 1s ease;
- -moz-transition: all 1s ease;
- -o-transition: all 1s ease;
- transition:all 1s ease; /*smooth transitions*/
- }
- #cred i{
- color:#ffffff;
- }
- #cred:hover{
- background-color:{color:Color 3};
- }
- </style>
- <a href="http://felinethemes.tumblr.com" title="Feline Themes" target="blank"><div id="cred"><i class="fa fa-paw"></i></div></a>
- <!---------------------------- LOADING SCREEN -------------------------->
- {block:ifLoadingScreen}
- <div id="loading">
- <div id="loadmessage">Loading </div>
- </div>
- {/block:ifLoadingScreen}
- <!---------------------------------------------------------------------->
- {block:ifScrollToTopButton}
- <a href="javascript:;" id="scrollToTop" rel="nofollow" title="Back To Top"><i class="fa fa-arrow-up"></i></a>
- {/block:ifScrollToTopButton}
- <!-------------------- PAGINATION - DON'T REMOVE ----------------------->
- {block:Pagination}
- <div class="pagination" style="visibility:hidden;">
- {block:NextPage}
- <a href="{NextPage}" id="next">Next</a>
- {/block:NextPage}
- </div>
- {/block:Pagination}
- <!------------ Functionality [BE CAREFUL, EASY TO FUCK UP] ------------->
- <script>
- $(function(){
- // ------------------------- LOADING SCREEN ----------------------------
- {block:ifLoadingScreen}
- $(window).load(function () {
- setTimeout(function() {
- $("#loading").fadeOut("slow");
- }, 6600);
- });
- {/block:ifLoadingScreen}
- // ------------------------- Style My Tooltips -------------------------
- (function($){
- $(document).ready(function(){
- $("a[title]").style_my_tooltips({
- tip_follows_cursor:true,
- tip_delay_time:90,
- tip_fade_speed:600,
- attribute:"title"
- });
- });
- })(jQuery);
- // ----------------------- Unnest by NEO --------------------------------
- $('.entry').unnest({ //posts themselves
- yourCaption: ".caption", //caption div
- wrapName: ".tumblr_parent", //unnested captions
- newCaptionUsername: true, //add username
- originalPostCaptionUsername: true, //adds username regardless
- tumblrAvatars: true, // user avatars
- tumblrAvatarClass: ".tumblr_avatar", // avatar class
- usernameColon: false
- });
- //---------------------------- PXU Photosets ----------------------------
- $('.photo-slideshow').pxuPhotoset({
- lightbox: false,
- rounded: false,
- gutter: '{select:Photoset Gutter Size}',
- photoset: '.photo-slideshow',
- photoWrap: '.photo-data',
- photo: '.pxu-photo'
- });
- });
- // -------------------------- Infinite Scroll ---------------------------
- {block:IndexPage}
- (function () {
- var $blogcontent = $('#container'); //posts container
- $blogcontent.imagesLoaded(function () {
- $blogcontent.masonry({
- itemSelector: '.entry', //posts themselves
- isAnimated:false,
- columnWidth:250,
- gutterWidth:60,
- });
- });
- $blogcontent.infinitescroll({
- navSelector : "div.pagination", //pagination div
- nextSelector : ".pagination a#next", //pagination next
- itemSelector : ".entry",
- loading: {
- finishedMsg: "<p>You have reached the end of the internet. Now go outside and get some fresh air.</p>", // if you scroll that far
- msg: null,
- msgText: "",
- },
- },
- function( newElements ) {
- var $newElems = $( newElements );
- $newElems.find('.photo-slideshow').pxuPhotoset({ //pxu callback
- lightbox: false,
- rounded: false,
- gutter: '3px',
- photoset: '.photo-slideshow',
- photoWrap: '.photo-data',
- photo: '.pxu-photo'
- },
- function(){
- $blogcontent.masonry({
- itemSelector: '.entry',
- columnWidth:250,
- gutterWidth:60,
- });
- });
- var $newElems = $(newElements).css({
- opacity: 0,
- zIndex: -1,
- });
- $newElems.imagesLoaded(function(){
- $newElems.animate({ opacity: 1, zIndex: 1 });
- $blogcontent.masonry( 'appended', $newElems );
- });
- });
- })();
- {/block:IndexPage}
- </script>
- <!---------------------------------------------------------------------->
- </body>
- </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement