Theme: HALLOWEEN I
<!----
©borntobewildcodes.tumblr.com | HALLOWEEN I (vol.4)
+ Do not redistribute this theme or remove the credits.
+ Edit as long as you keep the credits intact
+ Contact me if you have any questions or concerns.
+ Thanks for using my theme, I hope that you enjoy it.
Other credits:
- Jquery
- Disqus
- Google fonts
- Font Awesome icons
- Masonry by David Desandro
- Infinite scroll by Paul Irish
- PXU Photosets
- Masonry with Infinite Scroll and PXU Photosets tutorial by @shythemes
- Load more buttons tutorial by @shythemes
- Hide stuff tutorial by @lmthemes
---->
<!DOCTYPE html>
<head>
<title>{block:PostSummary}{PostSummary} : {/block:PostSummary}{Title}</title>
<link rel="shortcut icon" href="{favicon}">
<link rel="alternate" type="application/rss+xml" href="{RSS}">
{block:Description}<meta name="description" content="{MetaDescription}" />{/block:Description}
<!--Default Variables -->
<meta name="image:Background" content="1"/>
<meta name="image:Avatar" content="1"/>
<meta name="image:Menu background" content="0"/>
<meta name="color:Background" content="#ffffff"/>
<meta name="color:Header background" content="#ffffff"/>
<meta name="color:Blog title" content="#F2992E"/>
<meta name="color:Search" content="#F2992E"/>
<meta name="color:Description" content="#222222"/>
<meta name="color:Menu background" content="#dddddd"/>
<meta name="color:Main icon" content="#000000"/>
<meta name="color:Main link" content="#000000"/>
<meta name="color:Buttons" content="#000000"/>
<meta name="color:Link post background" content="#eeeeee"/>
<meta name="color:Ask bubble" content="#eeeeee"/>
<meta name="color:Title" content="#F2992E"/>
<meta name="color:Text" content="#222222"/>
<meta name="color:Link" content="#F2992E"/>
<meta name="color:Hover" content="#e7820a"/>
<meta name="color:Bold" content="#000000"/>
<meta name="color:Italic" content="#888888"/>
<meta name="color:Borders" content="#dddddd"/>
<meta name="color:Pagination" content="#000000"/>
<meta name="color:Scrollbar background" content="#ffffff"/>
<meta name="color:Scrollbar" content="#000000"/>
<meta name="select:Post transparency color" content="255,255,255" title="white">
<meta name="select:Post transparency color" content="0,0,0" title="black">
<meta name="select:Post transparency color" content="238,238,238" title="gray">
<meta name="select:Post transparency color" content="255,168,212" title="pink">
<meta name="select:Post transparency color" content="127,88,242" title="purple">
<meta name="select:Post transparency color" content="184,168,255" title="indigo">
<meta name="select:Post transparency color" content="184,208,255" title="blue">
<meta name="select:Post transparency color" content="103,173,90" title="green">
<meta name="select:Post transparency color" content="33,209,297" title="turquoise">
<meta name="select:Post transparency color" content="226,229,23" title="yellow">
<meta name="select:Post transparency color" content="112,38,11" title="brown">
<meta name="select:Post info transparency color" content="255,255,255" title="white">
<meta name="select:Post info transparency color" content="0,0,0" title="black">
<meta name="select:Post info transparency color" content="238,238,238" title="gray">
<meta name="select:Post info transparency color" content="255,168,212" title="pink">
<meta name="select:Post info transparency color" content="127,88,242" title="purple">
<meta name="select:Post info transparency color" content="184,168,255" title="indigo">
<meta name="select:Post info transparency color" content="184,208,255" title="blue">
<meta name="select:Post info transparency color" content="103,173,90" title="green">
<meta name="select:Post info transparency color" content="33,209,297" title="turquoise">
<meta name="select:Post info transparency color" content="226,229,23" title="yellow">
<meta name="select:Post info transparency color" content="112,38,11" title="brown">
<meta name="select:Transparency" content="1" title="opaque">
<meta name="select:Transparency" content=".9" title=".9">
<meta name="select:Transparency" content=".8" title=".8">
<meta name="select:Transparency" content=".7" title=".7">
<meta name="select:Transparency" content=".6" title=".6">
<meta name="select:Transparency" content=".5" title=".5">
<meta name="select:Transparency" content=".4" title=".4">
<meta name="select:Transparency" content=".3" title=".3">
<meta name="select:Transparency" content=".2" title=".2">
<meta name="select:Transparency" content=".1" title=".1">
<meta name="select:Transparency" content=".0" title="transparent">
<meta name="font:Body font" content="Helvetica"/>
<meta name="select:Body font size" content="12px" title="12px">
<meta name="select:Body font size" content="13px" title="13px">
<meta name="select:Body font size" content="14px" title="14px">
<meta name="select:Body font size" content="15px" title="15px">
<meta name="select:Body font size" content="16px" title="16px">
<meta name="select:Title font" content="Cinzel" title="Cinzel">
<meta name="select:Title font" content="Mystery Quest" title="Mystery Quest">
<meta name="select:Title font" content="New Rocker" title="New Rocker">
<meta name="select:Title font" content="Trade Winds" title="Trade Winds">
<meta name="select:Title font" content="Voltaire" title="Voltaire">
<meta name="select:Title font size" content="18px" title="18px">
<meta name="select:Title font size" content="20px" title="20px">
<meta name="select:Title font size" content="22px" title="22px">
<meta name="select:Title font size" content="25px" title="25px">
<meta name="select:Title font size" content="27px" title="27px">
<meta name="select:Post width" content="540" title="540px">
<meta name="select:Post width" content="500" title="500px">
<meta name="select:Post width" content="400" title="400px">
<meta name="select:Post width" content="300" title="300px">
<meta name="select:Post width" content="250" title="250px">
<meta name="select:Number of columns" content="1" title="1">
<meta name="select:Number of columns" content="2" title="2">
<meta name="select:Number of columns" content="3" title="3">
<meta name="if:Inverted Controls" content="0" />
<meta name="if:Show Bat" content="1" />
<meta name="if:Show Bats" content="1" />
<meta name="if:Show Black Cat" content="1" />
<meta name="if:White Halloween" content="0" />
<meta name="if:White frame" content="0" />
<meta name="if:Show Search Box" content="1" />
<meta name="if:Infinite Scroll" content="0"/>
<meta name="if:Load More" content="0"/>
<meta name="if:Faded Images" content="0" />
<meta name="if:Monochrome Images" content="0" />
<meta name="if:Show Captions" content="1" />
<meta name="if:Show Tags" content="1" />
<meta name="if:Ask Enabled" content="1" />
<meta name="if:Submissions Enabled" content="1" />
<meta name="if:Show Archive" content="1" />
<meta name="if:Disqus Shortname" content="0"/>
<meta name="if:Show Link One" content="1" />
<meta name="if:Show Link Two" content="1" />
<meta name="if:Show Link Three" content="1" />
<meta name="if:Show Link Four" content="1" />
<meta name="if:Show Link Five" content="1" />
<meta name="text:Link One" content="LINK ONE"/>
<meta name="text:Link One url" content="Link One url"/>
<meta name="text:Link Two" content="LINK TWO"/>
<meta name="text:Link Two url" content="Link Two url"/>
<meta name="text:Link Three" content="LINK THREE"/>
<meta name="text:Link Three url" content="Link Three url"/>
<meta name="text:Link Four" content="LINK FOUR"/>
<meta name="text:Link Four url" content="Link Four url"/>
<meta name="text:Link Five" content="LINK FIVE"/>
<meta name="text:Link Five url" content="Link Five url"/>
<meta name="text:Border radius" content="0px" />
<meta name="text:Blog alias" content="blogalias"/>
<meta name='text:Disqus Shortname' content='' />
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script><script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<!-- CSS -->
<style type="text/css">
/* ---------------------------- GENERAL ----------------------------- */
/* -------- BASICS ------- */
body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
color: {color:text};
font-family: {font:Body font};
font-size: {select:Body font size};
line-height: -moz-calc({select:Body font size} + 5px);
line-height: -webkit-calc({select:Body font size} + 5px);
line-height: -o-calc({select:Body font size} + 5px);
line-height: calc({select:Body font size} + 5px);
background-color: {color:Background};
background-image:url({image:Background});
background-attachment: fixed;
background-repeat: repeat;
word-wrap:break-word;
}
/* Tumblr lightbox */
.tmblr-lightbox {background:rgba({RGBcolor:Background}, .95)!important;}
.tmblr-lightbox img {opacity:0;}
.lightbox-caption {
color:{color:Title}!important;
font-family:inherit!important;
font-size:1em!important;
font-weight:normal!important;
text-shadow:none!important;
}
.lightbox-image {
-moz-box-shadow:none!important;
-webkit-box-shadow:none!important;
box-shadow:none!important;
-moz-border-radius:0px!important;
-webkit-border-radius:0px!important;
border-radius:0px!important;
padding:0px!important;
border:0!important;
opacity:1!important;
}
.vignette {opacity:0!Important;}
/* Webkit scrollbar */
::-webkit-scrollbar {
width: 9px;
height: 0px;
}
::-webkit-scrollbar-button:start:decrement,
::-webkit-scrollbar-button:end:increment {
height: 0px;
display: block;
background-color: {color:Scrollbar background};
}
::-webkit-scrollbar-track-piece {
background-color: {color:Scrollbar background};
}
::-webkit-scrollbar-thumb:vertical {
height: 0px;
background-color: {color:Scrollbar};
border: 4px solid {color:Scrollbar background};
}
/* Selection */
::-moz-selection {
background: {color:Hover};
color: {color:Background};
}
::selection {
background: {color:Hover};
color: {color:Background};
}
/* Tumblr controls */
iframe.tmblr-iframe {
top:0!important;
right:35px!important;
opacity:0.8;
{block:ifInvertedControls}
filter:invert(1);
-webkit-filter:invert(1);
-o-filter:invert(1);
-moz-filter:invert(1);
-ms-filter:invert(1);
{/block:ifInvertedControls}
transform:scale(0.8);
transform-origin:100% 0;
-webkit-transform:scale(0.8);
-webkit-transform-origin:100% 0;
-o-transform:scale(0.8);
-o-transform-origin:100% 0;
-moz-transform:scale(0.8);
-moz-transform-origin:100% 0;
-ms-transform:scale(0.8);
-ms-transform-origin:100% 0;
z-index:10000!important;
}
iframe.tmblr-iframe:hover {
opacity:0.6!important;
}
/* Tooltips */
.ui-tooltip {
position:Absolute;
z-index:9999;
padding-top:10px;
}
.ui-tooltip-content {
background:{color:background};
padding:0 4px;
font-style:italic;
color:{color:link};
text-transform:lowercase;
border:1px solid {color:Borders};
}
img {
opacity:1;
border:0;
text-decoration:none;
max-width:100%;
height:auto;
display:block;
}
/* Image style */
{block:IfFadedImages}
img {
-webkit-transition: opacity 0.8s linear;
-moz-transition: opacity 0.8s linear;
-o-transition: opacity 0.8s linear;
-ms-transition: opacity 0.8s linear;
opacity: 0.60;
}
img:hover {
-webkit-transition: opacity 0.8s linear;
-moz-transition: opacity 0.8s linear;
-o-transition: opacity 0.8s linear;
-ms-transition: opacity 0.8s linear;
opacity: 1;
}
{/block:IfFadedImages}
{block:IfMonochromeImages}
img {
-webkit-filter: grayscale(1);
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
img:hover {
filter: none;
-webkit-filter: grayscale(0);
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
}
{/block:IfMonochromeImages}
blockquote {
padding:.25em 0 .25em 15px;
margin:.5em 0;
border-left:1px solid {color:Borders};
}
pre {
padding:0;
margin:0;
line-height:inherit!important;
background:transparent;
font-family:inherit!Important;
font-size:inherit!important;
white-space:pre-wrap;
white-space:-moz-pre-wrap;
white-space:-pre-wrap;
white-space:-o-pre-wrap;
word-wrap:break-word;
}
/* Fix */
iframe, img, embed, object, video {
max-width: 100%;
border: none;
}
input, textarea, select, a { outline: none; }
/* Headings */
h1, h2, h3, h4 {
margin:1.5em 0;
font-size:1.5em;
padding:0;
color:{color:title};
font-weight:bold;
}
.entry h1:first-child, .entry h2:first-child, .entry h3:first-child, .entry h4:first-child {margin-top:0;}
/* Paragraph */
p { margin:5px 0px;}
p:first-of-type { margin-top:0;}
p:last-of-type { margin-bottom:0;}
small, big, sub, pre {
font-size:1em!important;
line-height:1.4em!important;
vertical-align:baseline!important;
}
/* Bold and italic */
b, strong, b a, strong a {
font-weight:bold!important;
color: {color:Bold};
}
i, em {
color: {color:Italic};
}
/* Links */
a {
color:{color:Link};
text-decoration:none;
transition:all .3s linear;
-webkit-transition:all .3s linear;
-o-transition:all .3s linear;
-moz-transition:all .3s linear;
}
a, a img {cursor:pointer;}
a:hover {
color:{color:Hover}!important;
text-decoration:none;
}
ul, ol, li {
margin: 5px 10px;
padding: 0px;
}
/* Line break */
hr {
border:none;
box-shadow:0;
margin:2em auto;
width:75px;
border-top:1px solid {color:Borders};
}
/* ------------------------------- CONTAINER ----------------------------- */
#container{
position:relative;
margin:auto;
margin-top:70px;
width:878px;
}
#bats {
position:fixed;
left:10px;
top:10px;
z-index:1;
{block:ifWhiteHalloween}
filter:invert(1);
-webkit-filter:invert(1);
-o-filter:invert(1);
-moz-filter:invert(1);
-ms-filter:invert(1);
{/block:ifWhiteHalloween}
}
#black-cat {
position:fixed;
right:-50px;
bottom: -20px;
z-index:1;
{block:ifWhiteHalloween}
filter:invert(1);
-webkit-filter:invert(1);
-o-filter:invert(1);
-moz-filter:invert(1);
-ms-filter:invert(1);
{/block:ifWhiteHalloween}
}
/* ------------------------------ HEADER --------------------------------- */
#header {
position:relative;
margin-left:0px;
margin-top:90px;
background-color:{color:Header background};
background-size:cover;
border:1px solid {color:Borders};
height:110px;
width:898px;
border-radius:{text:Border radius};
z-index:100;
}
/* Blog title */
#blogtitle {
position:absolute;
margin:5px 10px;
width:350px;
height:50px;
color:{color:Blog Title};
font-family:{select:Title Font};
font-size:30px;
line-height:50px;
text-align:center;
}
#blogtitle:hover {
color:{color:Hover};
}
/* Main icons */
#icons {
position:absolute;
margin-left:5px;
margin-top:68px;
width:370px;
height:40px;
}
#icons i {
color:{color:Main icon};
display:inline-block;
margin:0 10px;
font-size:18px;
}
#icons i:hover {
color:{color:Hover};
-webkit-transition: all .7s ease;
-moz-transition: all .7s ease;
-o-transition: all .7s ease;
transition: all .7s ease;
}
/* Avatar */
.bat {
position:absolute;
width:297px;
height:117px;
margin-top:-80px;
margin-left:300px;
background:url('');
{block:ifShowBat}
background:url('https://i.imgur.com/06QrMiI.png');
{block:ifWhiteHalloween}
background:url('https://i.imgur.com/qn62zd6.png');
{/block:ifWhiteHalloween}
{/block:ifShowBat}
z-index:1;
}
#avatar {
position:absolute;
margin-left:375px;
margin-top:-30px;
width:150px;
height:145px;
z-index:10;
}
#avatar img {
width:100%;
height:100%;
}
.avatarborder {
position:absolute;
width:150px;
height:140px;
margin-top:-145px;
margin-left:0px;
background:url('https://i.imgur.com/NnHUHUM.png');
{block:ifWhiteFrame}
background:url('https://i.imgur.com/RSdolU1.png');
{/block:ifWhiteFrame}
}
/* Description */
#description {
position:absolute;
margin-top:10px;
margin-left:540px;
width:340px;
height:90px;
padding-right:5px;
color:{color:Description};
font-size: {select:Body font size};
line-height: -moz-calc({select:Body font size} + 5px);
line-height: -webkit-calc({select:Body font size} + 5px);
line-height: -o-calc({select:Body font size} + 5px);
line-height: calc({select:Body font size} + 5px);
text-align:justify;
overflow-y:auto;
}
/* Search box */
#search {
position:absolute;
margin-left:195px;
margin-top:68px;
width:160px;
}
#search i {
position:absolute;
margin-left:140px;
margin-top:-18px;
font-size:12px;
color:{color:Search};
z-index:1000;
}
/* -------- MENU ------- */
#menu {
position:absolute;
left:50%;
margin-top:-1px;
height:55px;
width:620px;
background-color:{color:Menu background};
background-image:url({image:Menu background});
border:1px solid {color:Borders};
border-bottom-left-radius:50px;
border-bottom-right-radius:50px;
-webkit-transform:translateX(-50%);
-moz-transform:translateX(-50%);
-ms-transform:translateX(-50%);
transform:translateX(-50%);
z-index:100;
}
#menu a {
display:inline-block;
margin-left:10px;
margin-top:17px;
padding:2px;
text-align:center;
font-size: {select:Body font size};
color:{color:Main link};
border-bottom: 1px solid transparent;
}
#menu a:hover {
color:{color:Hover};
border-bottom: 1px solid {color:Hover};
}
/* -------------------------- POSTS AND ENTRIES --------------------------*/
section {
margin-top: 90px;
margin-left:auto;
margin-right:auto;
width:calc(({select:Post width}px + 38px) * {select:Number of columns})!important;
max-width:878px !important;
{block:PermalinkPage}
width:540px !important;
{/block:PermalinkPage}
overflow:hidden;
}
.entry {
display: inline-block;
float: left;
margin: 18px;
width: {select:Post width}px;
height:auto;
background:rgba({select:Post transparency color}, {select:Transparency});
overflow: hidden;
border: 1px solid {color:Borders};
border-radius:{text:Border radius};
{block:PermalinkPage}
width:500px !important;
{/block:PermalinkPage}
}
.entry img { max-width: 100%; }
.content {
padding: 10px;
}
/* Caption */
.comment {
padding:0px 10px;
list-style:none;
}
.comment:last-of-type { padding-bottom:0!important;}
.user {
display:inline-block;
line-height:1em;
margin-bottom:.75em;
}
.captioned .comment:first-of-type { margin-top:2em;}
/* -------- POSTS STYLES ------- */
/* Titles */
.title {
margin:10px;
margin-top:0px;
color:{color:Title};
font-family:{select:Title Font};
font-size:{select:Title font size};
line-height: -moz-calc({select:Title font size} + 3px);
line-height: -webkit-calc({select:Title font size} + 3px);
line-height: -o-calc({select:Title font size} + 3px);
line-height: calc({select:Title font size} + 3px);
}
.title a { color:{color:Title}; }
.title a:hover { color:{color:L ink}; }
.tex li, .tex blockquote {text-align:left; }
/* Quote posts */
.quote {
margin: 10px;
padding: 5px;
font-family: {select:Title font};
font-size: {select:Title font size};
line-height: -moz-calc({select:Title font size} + 3px);
line-height: -webkit-calc({select:Title font size} + 3px);
line-height: -o-calc({select:Title font size} + 3px);
line-height: calc({select:Title font size} + 3px);
color: {color:Italic};
text-align: left;
letter-spacing: 2px;
}
.source {
font-size: 12px;
line-height: 20px;
}
/* Link posts */
.linkthumb img {
width:100%;
}
.linkp {
background: {color:Link post background};
padding:10px;
}
.linkp i {
color: {color:Title};
}
/* Chat posts */
.line {
margin: 5px 10px;
line-height: 18px;
}
/* Ask Posts */
.asker {
margin: 5px;
margin-top: 10px;
width: -moz-calc(100% - 10px);
width: -webkit-calc(100% - 10px);
width: -o-calc(100% - 10px);
width: calc(100% - 10px);
height: auto;
}
.bubble {
width: -moz-calc(100% - 70px);
width: -webkit-calc(100% - 70px);
width: -o-calc(100% - 70px);
width: calc(100% - 70px);
height: auto;
min-height: 35px;
padding: 10px;
line-height: 20px;
background: {color:Ask bubble};
z-index: 10;
}
.triangle {
position: absolute;
margin-left: -moz-calc(100% - 90px);
margin-left: -webkit-calc(100% - 90px);
margin-left: -o-calc(100% - 90px);
margin-left: calc(100% - 90px);
width: 0;
z-index:0;
border-left: 8px solid {color:Ask bubble};
border-bottom: 8px solid transparent;
border-top: 8px solid transparent;
}
.asker img {
float: right;
margin-right: 0px;
max-width: 30px;
border: 1.5px solid {color:Ask bubble};
border-radius: 2px;
z-index:1000;
opacity:1;
}
.answer {
margin: 10px;
margin-bottom: 0;
}
/* ----------------------- POST INFO ----------------------------- */
.topinfo {
margin:0px;
width: -moz-calc(100% - 30px);
width: -webkit-calc(100% - 30px);
width: -o-calc(100% - 30px);
width: calc(100% - 30px);
height: 10px;
padding: 15px;
line-height: 15px;
background:rgba({select:Post info transparency color}, {select:Transparency});
}
.topinfourl {
margin:0;
font-size: 12px;
}
/* Date */
.topinfod {
float: right;
margin-top:-15px;
font-size:12px;
}
/* Bottom info */
.botinfo {
width: -moz-calc(100% - 30px);
width: -webkit-calc(100% - 30px);
width: -o-calc(100% - 30px);
width: calc(100% - 30px);
height:auto;
min-height: 50px;
margin: 0px;
padding: 15px;
padding-top: 10px;
padding-bottom: 10px;
font-size: 12px;
line-height: 25px;
color: {color:Text};
background:rgba({select:Post info transparency color}, {select:Transparency});
overflow:hidden;
}
.botinfo a {
margin-right: 25px;
color: {color:Link};
}
.tags {
{block:IndexPage}
{block:ifNotShowTags}
display: none;
{/block:ifNotShowTags}
{/block:IndexPage}
}
.notec {
float: left;
}
/* Butttons */
.buttons {
float:right;
margin-top:0px;
margin-right:-5px;
width:77px;
height:26px;
line-height:26px;
z-index:100;
list-style:none;
{block:ifDisqusShortname}
width: 103px;
{/block:ifDisqusShortname}
{block:PermalinkPage}
width:52px;
{/block:PermalinkPage}
}
.buttons li {
display:inline-block;
margin:0;
margin-left:2px;
margin-right:0;
width:20px;
height:26px;
padding:0px;
text-align:center;
}
.perma i {
font-size:13px;
color:{color:Buttons};
}
.cmnt i {
font-size:15px;
color:{color:Buttons};
}
.reblog i {
font-size:17px;
color:{color:Buttons};
}
.like .like_button {
position:absolute;
width:100%;
height:100%;
}
.like .like_button iframe {
position:absolute;
top:0;
bottom:0;
left:0;
right:0;
width:100%;
height:100%;
z-index:10;
opacity:0.0000001;
}
.like i {
font-size:15px;
color:{color:Buttons};
}
.like .liked + i {
font-size:14px;
color:#D95E40;
}
/* Permalink pagination */
.permapag {
margin-top: 15px;
margin-left: 0px;
}
.permapag a{
font-size: 15px;
margin:10px;
margin-top: 20px;
padding:5px;
color:{color:Link};
}
/* Show/hide */
.clickme {
margin: 10px;
width: 130px;
color: {color:Link};
text-align: left;
cursor: pointer;
padding: 5px 10px;
border-bottom: 1.5px solid {color:Borders};
}
.clickme:hover {
color: {color:Hover};
background:rgba({select:Post info transparency color}, {select:Transparency});
}
/* Post notes */
#notes {
margin: 10px;
width: 500px;
font-size: 12px;
color: {color:Text};
display:none;
}
ol.notes {
padding: 0px;
margin: 5px 0px;
list-style-type: none;
}
ol.notes li.note {
padding: 5px;
}
ol.notes li.note img.avatar {
float:left;
vertical-align: -5px;
width: 15px;
height: 15px;
margin-left:10px;
margin-right:10px;
}
li.more_notes_link_container {
text-transform: uppercase;
font-size: 12px;
}
/* Disqus box */
#disqusbox {
padding:15px;
}
/* ------------------- PAGINATION AND INFINITE SCROLL -------------------- */
#pagcon {
margin:25px auto;
width:calc({select:Post width}px + 40px)!important;
height:60px;
text-align: center;
z-index:100;
}
/* Pagination */
#pagination {
width: 100%;
height: 35px;
z-index:10000;
{block:ifInfiniteScroll}
display: none;
{/block:ifInfiniteScroll}
}
.previous, .next, .load-more {
display:inline;
margin-left:10px;
width:100px;
height:20px;
padding:8px 10px;
line-height:20px;
font-size:12px;
text-align:center;
color:{color:Pagination};
background:{color:Borders};
border:1px solid {color:Borders};
-webkit-transition: all .3s ease;
-moz-transition: all .3s ease;
-o-transition: all .3s ease;
transition: all .3s ease;
}
.previous a:hover, .next a:hover, .load-more a:hover {
color:{color:Pagination};
}
.previous i, .next i, .load-more i {
color:{color:Pagination};
font-size:15px;
margin-left:10px;
text-decoration:none;
}
.previous:hover i, .next:hover i, .load-more:hover i {
color:{color:Hover};
}
/* INFINITE SCROLL */
#infscr-loading {
display:none!important;
}
#iscon {
width:500px;
height:40px;
z-index:100;
}
{block:ifLoadMore}
.load-more{
height:40px;
}
{/block:ifLoadMore}
/*-- CREDIT --*/
#credit {
position:fixed;
top: 9px;
right: 10px;
width:25px;
height:25px;
z-index: 100000;
}
#credit img {
border: 1px solid {color:Borders};
}
#credit img:hover {
border: 1px solid {color:Hover};
}
{CustomCSS}
</style>
</head>
<body>
<div id="container">
<div id="header">
<div class="bat"></div>
<!-- End bat -->
<div id="blogtitle">{Title}</div>
<!-- End blogtitle -->
<div id="icons">
<a href="/" title="Index"><i class="fas fa-broom"></i></a>
{block:ifAskEnabled}
<a href="/ask" title="Ask"><i class="fas fa-ghost"></i></a>
{/block:ifAskEnabled}
{block:IfSubmissionsEnabled}
<a href="/submit" title="Submit"><i class="fas fa-cat"></i></a>
{/block:IfSubmissionsEnabled}
{block:IfShowArchive}
<a href="/archive" title="Archive"><i class="fas fa-spider"></i></a>
{/block:IfShowArchive}
</div>
<!--End icons-->
{block:IfShowSearchBox}
<div id="search">
<form action="/search" method="get">
<input type="text" name="q" value="Search..." style="margin-top:0px; margin-left:0px; width:150px; padding-left:10px; height:22px; background:transparent; border:1px solid {color:Borders}; border-radius:{text:Border radius}; color:{color:Search}; font-family:{font:Body font}; font-size: 12px;"/><span><i class="fa fa-search"></i></span></form>
</div>
<!-- End search-->
{/block:IfShowSearchBox}
<div id="avatar">
<img src="{image:Avatar}">
<div class="avatarborder"></div>
</div>
<!-- End avatar -->
<div id="description">{Description}</div>
<!-- End description -->
</div>
<!-- End header -->
<div id="menu">
<center>
{block:ifShowLinkOne}
<a href="{text:Link One url}">{text:Link One}</a>
{/block:ifShowLinkOne}
{block:ifShowLinkTwo}
<a href="{text:Link Two url}">{text:Link Two}</a>
{/block:ifShowLinkTwo}
{block:ifShowLinkThree}
<a href="{text:Link Three url}">{text:Link Three}</a>
{/block:ifShowLinkThree}
{block:ifShowLinkFour}
<a href="{text:Link Four url}">{text:Link Four}</a>
{/block:ifShowLinkFour}
{block:ifShowLinkFive}
<a href="{text:Link Five url}">{text:Link Five}</a>
{/block:ifShowLinkFive}
</center>
</div>
<!-- End menu-->
<!-- Posts -->
<section id="posts">
{block:posts}
<article class="entry {block:Caption}captioned{/block:Caption}">
{block:Date}
<div class="topinfo">
<div class="topinfourl">
{block:RebloggedFrom}
<a href="/"> {text:Blog alias}</a>
<i class="fa fa-retweet" aria-hidden="true"></i>
<a href="{ReblogParentURL}" target="_blank"> {ReblogParentName}</a>
{/block:RebloggedFrom}
{block:NotReblog}
<a href="/">{text:Blog alias}</a>
{/block:NotReblog}
</div>
<!-- End topinfourl-->
<div class="topinfod"><a href="/day/{Year}/{MonthNumberWithZero}/{DayOfMonthWithZero}"> {ShortMonth} {DayOfMonthWithZero} </a></div>
</div>
<!-- End topinfo-->
{/block:Date}
<!-- Text post -->
{block:Text}
<div class="content">
{block:Title}
<div class="title">{Title}</div>{/block:Title}
{block:RebloggedFrom}
{block:Reblogs}
<li class="comment {block:Title}{/block:Title}">
<a {block:haspermalink}href="{permalink}"{/block:haspermalink} class="user" target="_blank">{username}</a>
<div class="tex">{body}</div>
</li>
{/block:Reblogs}
{/block:RebloggedFrom}
{block:NotReblog}
<li class="comment {block:Title}{/block:Title}">
<div class="tex">{body}</div>
</li>
{/block:NotReblog}
</div>
<!-- End content -->
{/block:Text}
<!-- Photo post -->
{block:Photo}
{block:IndexPage}
{LinkOpenTag}
<img src="{photoURL-HighRes}" alt="{PhotoAlt}" width="{select:Post width}px"/></a>
{LinkCloseTag}
{/block:IndexPage}
{block:PermalinkPage}
{LinkOpenTag}
<img src="{photoURL-HighRes}" alt="{PhotoAlt}" width="500px"/></a>
{LinkCloseTag}
{/block:PermalinkPage}
{/block:Photo}
<!-- Photoset post -->
{block:Photoset}
<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:Photoset}
<!-- Quote post -->
{block:Quote}
<div class="content">
<div class="quote">
"{Quote}"
</div>
<!-- End quote-->
<div class="source">
— {Source}
</div>
<!-- End source-->
</div>
<!-- End content -->
{/block:Quote}
<!-- Link post -->
{block:Link}
{block:Thumbnail}
<div class="linkthumb">
<img src="{Thumbnail}" alt="{Name}">
</div>
<!-- End linkthumb-->
{/block:Thumbnail}
<div class="linkp">
<a href="{URL}"><h1>{Name} <i class="fa fa-angle-right" aria-hidden="true"></i></h1></a>
{block:Description}
{Description}
{/block:Description}
</div>
<!-- End linkp-->
{/block:Link}
<!-- Chat post -->
{block:Chat}
<div class="content">
{block:Title}<h1>{Title}</h1>{/block:Title}
{block:Lines}
<div class="line">
{block:Label}<b>{Label}</b>{/block:Label} {Line}
</div>
<!-- End line-->
{/block:Lines}
</div>
<!-- End content -->
{/block:Chat}
<!-- Audio post -->
{block:Audio}
<div style="height: 85px">{AudioEmbed-640}</div>
{/block:Audio}
<!-- Video post -->
{block:Video}
{Video-500}
{/block:Video}
<!-- Ask post -->
{block:Answer}
<div class="content">
<div class="asker">
<img src="{AskerPortraitURL-48}">
<div class="bubble" style="border-color: {color:Ask bubble}; background: {color:Ask bubble};">
<div class="triangle"></div>
{Asker}:
<br>{Question}
</div>
<!-- End bubble-->
</div>
<!-- End asker -->
<div class="answer">
{Answer}
</div>
<!-- End answer -->
</div>
<!-- End content -->
{/block:Answer}
<!-- Caption -->
{block:Caption}
{block:Reblogs}
<li class="comment">
<a {block:HasPermalink}href="{Permalink}"{/block:HasPermalink} } class="user" target="_blank">{Username}</a>
<div class="tex">{Body}</div>
</li>
{/block:Reblogs}
{block:NotReblog}
<li class="comment">
<a {block:HasPermalink}href="{Permalink}"{/block:HasPermalink} class="user" target="_blank">{Name}</a>
<div class="tex">{caption}</div>
</li>
{/block:NotReblog}
{/block:Caption}
{block:Date}
<div class="botinfo">
{block:RebloggedFrom}
{block:ContentSource}
Source: <a href="{ReblogRootURL}" target="_blank"> {ReblogRootName}</a><br>
{/block:ContentSource}
{/block:RebloggedFrom}
{block:HasTags}
<div class="tags">
{block:Tags}
<a href="{TagURL}">
#{Tag}</a>
{/block:Tags}<br>
</div>
{/block:HasTags}
{block:NoteCount}
<a href="{Permalink}"> {NoteCountWithLabel}</a>
{/block:NoteCount}
<div class="buttons">
{block:IndexPage}
<li class="perma"><a href="{Permalink}"><i class="fa fa-paper-plane" aria-hidden="true"></i></a></li>
{block:ifDisqusShortname}
<li class="cmnt"><a href="{Permalink}#disqus_thread"><i class="fa fa-comment" aria-hidden="true"></i></a></li>
{/block:ifDisqusShortname}
{/block:IndexPage}
<li class="reblog"><a href="{ReblogURL}"><i class="fa fa-retweet" aria-hidden="true"></i></a></li>
<li class="like">{LikeButton}<i class="fa fa-heart" aria-hidden="true"></i></a>
</div>
<!-- End buttons -->
</div>
<!-- End botinfo-->
<!--Permalink page-->
{block:PermalinkPage}
{block:PostNotes}
<div class="clickme">Show/hide post notes</div>
<div id="notes">
{PostNotes}
</div>
<!-- End notes-->
{/block:PostNotes}
{block:PermalinkPagination}
<div class="permapag">
<center>
{block:PreviousPost}
<a href="{PreviousPost}"><i class="fa fa-caret-left" aria-hidden="true"></i> Prev post</a>
{/block:PreviousPost}
{block:NextPost}
<a href="{NextPost}"> Next post <i class="fa fa-caret-right" aria-hidden="true"></i></a>
{/block:NextPost}
</center>
</div><br>
{/block:PermalinkPagination}
{block:ifDisqusShortname}
<div id="disqusbox">
<div id="disqus_thread"></div>
<script type="text/javascript">
/* * * CONFIGURATION VARIABLES: EDIT BEFORE PASTING INTO YOUR WEBPAGE * * */
var disqus_shortname = '{text:Disqus Shortname}'; // Required - Enter shortname in Tumblr Theme Options
var disqus_url = '{Permalink}';
/* * * DON'T EDIT BELOW THIS LINE * * */
(function() {
var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
dsq.src = '//' + disqus_shortname + '.disqus.com/embed.js';
(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
})();
</script>
<noscript>Please enable JavaScript to view the <a href="https://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>
<a href="https://disqus.com" class="dsq-brlink">blog comments powered by <span class="logo-disqus">Disqus</span></a>
</div>
<!-- End disqus box-->
{/block:ifDisqusShortname}
{/block:PermalinkPage}
{/block:Date}
</article>
{/block:Posts}
</section>
{block:Pagination}
<div id="pagcon">
<div id="pagination">
{block:PreviousPage}
<a class="previous" href="{PreviousPage}"><i class="fa fa-caret-left" aria-hidden="true"></i> NEWER </a>
{/block:PreviousPage}
{block:NextPage}
<a class="next" href="{NextPage}"> OLDER <i class="fa fa-caret-right" aria-hidden="true"></i></a>
{/block:NextPage}
</div>
<!-- End pagination -->
<div id="iscon">
{block:ifLoadMore}
<center>
<a href="#" class="load-more"> LOAD MORE <i class="fa fa-caret-down" aria-hidden="true"></i></a>
</center>
{/block:ifLoadMore}
</div>
<!-- End iscon -->
</div>
<!-- End pagcon -->
{/block:Pagination}
<!-------------------------------- SCRIPTS -------------------------------->
<!--Custom cursor -->
{block:IfShowCustomCursor}
<style type="text/css">
body, a:hover {cursor: url(https://cur.cursors-4u.net/food/foo-5/foo439.cur), progress !important;}</style><a href="https://www.cursors-4u.com/cursor/2010/11/04/pumpkin-2.html" target="_blank" title="Pumpkin"><img src="https://cur.cursors-4u.net/cursor.png" border="0" alt="Pumpkin" style="position:absolute; top: 0px; right: 0px;" /></a></style>
{/block:IfShowCustomCursor}
<!--Bats on the left -->
{block:IfShowBats}
<div id="bats">
<img src="https://i.imgur.com/IYsO8JN.png">
</div>
{/block:IfShowBats}
<!--Cat on the right -->
{block:IfShowBlackCat}
<div id="black-cat">
<img src="https://i.imgur.com/FVfvFE9.png">
</div>
{/block:IfShowBlackCat}
<!--Google fonts -->
<link href="https://fonts.googleapis.com/css?family=Cinzel|Mystery+Quest|New+Rocker|Trade+Winds|Voltaire" rel="stylesheet">
<!-- Font awesome -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.11.2/css/all.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.11.2/css/v4-shims.css">
<!-- PXU photoset & responsive photosets -->
<link href="//static.tumblr.com/qudkd6d/OcDnl99gb/style.css" rel="stylesheet" type="text/css"/>
<script src="//static.tumblr.com/qudkd6d/Az6nkemqr/pxuphotoset.min.js"></script>
<link href="//static.tumblr.com/wupwnyt/qWVoc4phj/resizing.css" rel="stylesheet" type="text/css"/>
{block:IndexPage}
<script src="https://static.tumblr.com/6hsqxdt/QBym35odk/jquery.masonry.js"></script>
{block:ifInfiniteScroll}<script src="//static.tumblr.com/wgijwsy/u2vm2hxv6/jquery.infinitescroll.min.js"></script>
{/block:ifInfiniteScroll}{/block:IndexPage}
<script>
$(document).ready(function(){
$('.photo-slideshow').pxuPhotoset({
lightbox: true,
rounded: false,
gutter: '1px',
photoset: '.photo-slideshow',
photoWrap: '.photo-data',
photo: '.pxu-photo'
});
{block:IndexPage}
var $container = $('section');
$container.masonry({ itemSelector: 'article' });
$container.imagesLoaded(function(){
$container.masonry();
$container.find('article').animate({ opacity: 1, zIndex: 1 });
});
{block:ifInfiniteScroll}
$container.infinitescroll({
itemSelector: 'article',
navSelector: '.pagination',
nextSelector: '.next',
loadingImg: '',
loadingText: '<em></em>',
bufferPx: 2000
},
function( newElements ) {
var $newElems = $( newElements );
$newElems.find('.photo-slideshow').pxuPhotoset({
lightbox: true,
rounded: false,
gutter: '1px',
photoset: '.photo-slideshow',
photoWrap: '.photo-data',
photo: '.pxu-photo'
},
function(){
$container.masonry();
});
$newElems.imagesLoaded(function(){
$container.masonry( 'appended', $newElems );
$newElems.animate({ opacity: 1, zIndex: 1 });
});
});
{/block:ifInfiniteScroll}
$container.infinitescroll({
itemSelector: "article",
navSelector: "#pagination",
nextSelector: ".next",
loadingImg: "",
loadingText: "<em></em>",
bufferPx: 10000,
extraScrollPx: 12000,
errorCallback: function() {
$('.load-more').fadeOut();
}
}, function(newElements) {
var $newElems = $(newElements).css({
opacity: 0
});
$newElems.imagesLoaded(function() {
$newElems.animate({
opacity: 1
});
$container.masonry('appended', $newElems,
true);
});
});
{block:ifLoadMore}
$(window).unbind('.infscr');
$('.load-more').click(function() {
$container.infinitescroll('retrieve');
return false
});
{/block:ifLoadMore}
{/block:IndexPage}
});
</script>
<!-- Sticky menu -->
{block:IndexPage}
<script type="text/javascript">
$(function(){
var stickyRibbonTop = $('#menu').offset().top;
$(window).scroll(function(){
if( $(window).scrollTop() > stickyRibbonTop ) {
$('#menu').css({position: 'fixed', top: '0px', marginTop: 'auto'});
} else {
$('#menu').css({position: 'absolute', top: 'auto', marginTop: '-1px'});
}
});
});
</script>
{/block:IndexPage}
<!-- Show/Hide tumblr notes -->
<script>
$(document).ready(function(){
$(".clickme").click(function(){
$("#notes").toggle(500);
});
});
</script>
<!-- CREDIT (do not remove) -->
<div id="credit"><a href="https://borntobewildcodes.tumblr.com" title="theme HALLOWEEN II by @borntobewildcodes"><img src="https://i.imgur.com/YsnOAtA.png"></a></div>
{block:ContentSource}
<!-- {SourceURL}{block:SourceLogo}<img src="{BlackLogoURL}"
width="{LogoWidth}" height= "{LogoHeight}" alt="{SourceTitle}" />
{/block:SourceLogo}
{block:NoSourceLogo}{SourceLink}{/block:NoSourceLogo} -->
{/block:ContentSource}
</body>
</html> Pasted: Oct 19, 2017, 3:31:31 pm
Views: 44