Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!DOCTYPE html>
- <html>
- <head>
- <!-----------------------------------------------------------------------
- Theme 20 Solace
- by yukoki/s-ekki
- 1. Light/Heavy CSS editting is allowed.
- 2. Do not use as base code.
- 3. Do not remove credit.
- 4. Do not claim theme as your own.
- ---------------------------------------------------------- VER 280616 -->
- <meta name="color:scrollbar" content="#5892b6">
- <meta name="color:introductory panel background" content="#000000">
- <meta name="color:introductory panel accent" content="#ffffff">
- <meta name="color:introductory panel title" content="#ffffff">
- <meta name="color:introductory panel text" content="#dfdfdf">
- <meta name="color:intro panel bold" content="#6ec2df">
- <meta name="color:intro panel italic" content="#ffffff">
- <meta name="color:intro panel links" content="#7f9aad">
- <meta name="color:intro panel links hover" content="#ffffff">
- <meta name="color:nav icon popup" content="#ffffff">
- <meta name="color:directory links background" content="#ffffff">
- <meta name="color:directory links text" content="#ffffff">
- <meta name="color:content panel background" content="#ffffff">
- <meta name="color:content topbar background" content="#ffffff">
- <meta name="color:content topbar title" content="#818181">
- <meta name="color:content topbar border" content="#e1e1e1">
- <meta name="color:content topbar icon" content="#7587ad">
- <meta name="color:content topbar icon hover" content="#9d9d9d">
- <meta name="color:desc" content="#6d6d6d">
- <meta name="color:desc bold" content="#4c79ad">
- <meta name="color:desc italic" content="#b2b2b2">
- <meta name="color:desc links" content="#59969a">
- <meta name="color:desc links hover" content="#909090">
- <meta name="color:post background" content="#ffffff" />
- <meta name="color:body text" content="#525252">
- <meta name="color:body links" content="#44c1b3">
- <meta name="color:body links hover" content="#a2a2a2">
- <meta name="color:body bold" content="#93afc9">
- <meta name="color:body italic" content="#aaaaaa">
- <meta name="color:blockquote" content="#9dd3dc">
- <meta name="color:post title background" content="#f5f5f5">
- <meta name="color:post title text" content="#aaaaaa">
- <meta name="color:link post background" content="#f1fffd">
- <meta name="color:link post text" content="#97a8b3">
- <meta name="color:hover link post background" content="#f3f3f3">
- <meta name="color:hover link post text" content="#929292">
- <meta name="color:audio info background" content="#ffffff">
- <meta name="color:audio info text" content="#9d9d9d">
- <meta name="color:quote" content="#767676">
- <meta name="color:quote source" content="#979797">
- <meta name="color:ask background" content="#ffffff">
- <meta name="color:ask text" content="#898989">
- <meta name="color:asker text" content="#848484">
- <meta name="color:asker link" content="#9fd2d4">
- <meta name="color:chat even name" content="#a1ddf3" />
- <meta name="color:chat even text" content="#b3b3b3" />
- <meta name="color:chat odd name" content="#769dbe" />
- <meta name="color:chat odd text" content="#5d5d5d" />
- <meta name="color:post border" content="#e1e1e1">
- <meta name="color:permalink icon" content="#60a9b6">
- <meta name="color:permalink popup" content="#c3c3c3">
- <meta name="color:permalink popup bg" content="#ffffff">
- <meta name="color:pagination text" content="#7a7a7a">
- <meta name="color:pagination links" content="#77b6c9">
- <meta name="color:pagination links hover" content="#bbbbbb">
- <meta name="if:show captions" content="1">
- <meta name="if:fading photos" content="0">
- <meta name="if:monochrome posts" content="1">
- <meta name="if:introductory panel cover" content="1">
- <meta name="if:content panel cover" content="0">
- <meta name="text:url" content="your url">
- <meta name="text:introductory text" content="">
- <meta name="text:updates" content="">
- <meta name="text:long biography" content="">
- <meta name="text:content topbar text" content="Content Topbar Text">
- <meta name="text:link 1" content="">
- <meta name="text:link 1 url" content="">
- <meta name="text:link 2" content="">
- <meta name="text:link 2 url" content="">
- <meta name="text:link 3" content="">
- <meta name="text:link 3 url" content="">
- <meta name="text:link 4" content="">
- <meta name="text:link 4 url" content="">
- <meta name="text:link 5" content="">
- <meta name="text:link 5 url" content="">
- <meta name="text:link 6" content="">
- <meta name="text:link 6 url" content="">
- <meta name="text:link 7" content="">
- <meta name="text:link 7 url" content="">
- <meta name="text:link 8" content="">
- <meta name="text:link 8 url" content="">
- <meta name="text:link 9" content="">
- <meta name="text:link 9 url" content="">
- <meta name="text:link 10" content="">
- <meta name="text:link 10 url" content="">
- <meta name="text:link 11" content="">
- <meta name="text:link 11 url" content="">
- <meta name="text:link 12" content="">
- <meta name="text:link 12 url" content="">
- <meta name="image:introductory panel background" content="">
- <meta name="image:content panel background" content="">
- <meta name="image:sidebar" content="">
- <title>{title}{block:PostSummary}, {PostSummary}{/block:PostSummary}</title>
- {block:Description}<meta name="description" content="{MetaDescription}" />{/block:Description}
- <link rel="shortcut icon" href="{Favicon}" />
- <!-- java -->
- <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
- <script>
- $(document).ready(function(){
- $(".first-to-contact").click(function(){
- $("#contactmain").fadeIn(900);
- $("#firstmain").fadeOut(900);
- });
- $(".first-to-about").click(function(){
- $("#aboutmain").fadeIn(900);
- $("#firstmain").fadeOut(900);
- });
- $(".first-to-links").click(function(){
- $("#linksmain").fadeIn(900);
- $("#firstmain").fadeOut(900);
- });
- $(".contact-to-first").click(function(){
- $("#firstmain").fadeIn(900);
- $("#contactmain").fadeOut(900);
- });
- $(".contact-to-about").click(function(){
- $("#aboutmain").fadeIn(900);
- $("#contactmain").fadeOut(900);
- });
- $(".contact-to-links").click(function(){
- $("#linksmain").fadeIn(900);
- $("#contactmain").fadeOut(900);
- });
- $(".about-to-first").click(function(){
- $("#firstmain").fadeIn(900);
- $("#aboutmain").fadeOut(900);
- });
- $(".about-to-contact").click(function(){
- $("#contactmain").fadeIn(900);
- $("#aboutmain").fadeOut(900);
- });
- $(".about-to-links").click(function(){
- $("#linksmain").fadeIn(900);
- $("#aboutmain").fadeOut(900);
- });
- $(".links-to-first").click(function(){
- $("#firstmain").fadeIn(900);
- $("#linksmain").fadeOut(900);
- });
- });
- </script>
- <!--END JAVA-->
- <!--fontawesome-->
- <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css">
- <!--end fontawesome-->
- <!--smooth scrolling-->
- <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
- <script src="http://static.tumblr.com/whx9ghv/lSGm6k18m/jquery.scrollto-1.4.2-min.js"></script>
- <script src="http://static.tumblr.com/whx9ghv/GJEm6k188/jquery.localscroll-1.2.7-min.js"></script>
- <script>
- $(document).ready(function () {
- $.localScroll();
- });
- </script>
- <!--end smooth scrolling-->
- <!--sticky-->
- <script>
- $(document).ready(function() {
- var stickyNavTop = $('#cpbar').offset().top;
- var stickyNav = function(){
- var scrollTop = $(window).scrollTop();
- if (scrollTop > stickyNavTop) {
- $('#cpbar').addClass('sticky');
- } else {
- $('#cpbar').removeClass('sticky');
- }
- };
- stickyNav();
- $(window).scroll(function() {
- stickyNav();
- });
- });
- </script>
- <!--sticky-->
- <style type="text/css">
- @font-face { font-family: "opsans"; src: url('https://dl.dropboxusercontent.com/s/6t6k1zdmq4v9u8b/OpenSans-Light.ttf'); }
- @font-face { font-family: "gogoia"; src: url('https://dl.dropboxusercontent.com/s/zyh6remaoilffa9/GOGOIA-Deco.otf'); }
- .tmblr-iframe {z-index:999999999999999999!important;position:fixed!important;}
- ::-webkit-scrollbar { width: 4px; }
- ::-webkit-scrollbar-track-piece { background-color: transparent; }
- ::-webkit-scrollbar-thumb:vertical {
- width: 4px;
- background-color: {color:scrollbar};
- opacity: 0.4;
- }
- body {
- background-color: {color:introductory panel background};
- {block:ifintroductorypanelcover}
- background-size: cover;
- {/block:ifintroductorypanelcover}
- background-image: url({image:introductory panel background});
- {block:permalinkpage}
- background-image: url({image:content panel background});
- {block:ifcontentpanelcover}
- background-size: cover;
- {/block:ifcontentpanelcover}
- {/block:permalinkpage}
- background-attachment: fixed;
- margin: 0;
- word-wrap: break-word;
- }
- a { text-decoration:none; }
- #intropanel {
- {block:permalinkpage}display: none;{/block:permalinkpage}
- width: 100%;
- height: 660px;
- background-color: {color:introductory panel background};
- background-image: url({image:introductory panel background});
- background-size: cover;
- background-attachment: fixed;
- }
- #mainmain {padding-top: 90px;}
- #cropic {
- width: 85px;
- height: 85px;
- transform: rotate(45deg);
- border-radius: 14px;
- overflow: hidden;
- border: 10px solid rgba({RGBcolor:introductory panel accent},0.4);
- }
- .crip {
- width: 120px;
- height: 120px;
- display: block;
- transform: rotate(-45deg);
- margin-left: -58px;
- padding-left: 47px;
- }
- .maintitle {
- font-family: gogoia;
- font-size: 50px;
- letter-spacing: 8px;
- color: {color:introductory panel title};
- margin-top: 60px;
- }
- .mtabove {
- width: 700px;
- background-color: rgba({RGBcolor:introductory panel accent},0.5);
- height: 4px;
- margin-bottom: 24px;
- z-index: 10;
- }
- .mtbelow {
- width: 700px;
- background-color: rgba({RGBcolor:introductory panel accent},0.5);
- height: 4px;
- margin-top: 14px;
- z-index: 10;
- }
- .quotabove, .quotbelow {
- position: absolute;
- font-size: 70px;
- font-family: georgia;
- z-index: 9;
- overflow: hidden;
- height: 50px;
- margin: 40px 0;
- width: 700px;
- }
- .quotbelow { margin: -24px 0; }
- .quot {
- {block:ifintroductorypanelcover}
- background-size: cover;
- {/block:ifintroductorypanelcover}
- background-color: {color:introductory panel background};
- background-image: url({image:introductory panel background});
- background-size: cover;
- background-attachment: fixed;
- padding: 0 20px;
- color: {color:introductory panel accent};
- text-align: center;
- }
- #maininfo {
- width: 800px;
- margin-top: 40px;
- margin-left: -50px;
- }
- .leftinfo-desc {
- padding-right: 20px;
- border-right: 1px solid rgba({RGBcolor:introductory panel accent},0.2);
- width: 380px;
- float: left;
- font-family: opsans;
- line-height: 22px;
- color: {color:introductory panel text};
- font-size: 12px;
- text-align: right;
- margin-right: 19px;
- }
- .rightinfo-upd {
- float: left;
- width: 380px;
- text-align: left;
- font-family: opsans;
- line-height: 22px;
- color: {color:introductory panel text};
- font-size: 12px;
- }
- #maininfo b,strong, .abtbio b,strong {color: {color:intro panel bold};}
- #maininfo i,em, .abtbio i,em {color: {color:intro panel italic};}
- #maininfo a, .abtbio a {color: {color:intro panel links};}
- #maininfo a:hover, .abtbio a:hover {color: {color:intro panel links hover};}
- #leftnav, #rightnav {
- position: absolute;
- margin-top: -62px;
- margin-left: 33px;
- color: {color:introductory panel accent};
- }
- #rightnav {margin-left: 454px;}
- #leftnav a, #rightnav a { color: {color:introductory panel accent}; }
- .butt {
- width: 50px;
- float: left;
- margin-right: 32px;
- cursor: pointer;
- }
- .buttbg {
- position: absolute;
- width: 30px;
- height: 30px;
- border-radius: 4px;
- transform: rotate(45deg);
- border: 2px solid {color:introductory panel accent};
- background-color: rgba({RGBcolor:introductory panel accent},0.1);
- margin: -8px 8px;
- }
- .butt:hover .buttbg {
- transform: rotate(135deg);
- transition: 0.4s;
- }
- #homo {
- width: 700px;
- height: 100%;
- }
- .prompty {
- margin-top: 170px;
- color: {color:introductory panel accent};
- font-size: 40px;
- }
- .strikelin, .strikelin2 {
- width: 38px;
- position: absolute;
- background-color: {color:introductory panel accent};
- height: 2px;
- margin: 8px 47px;
- }
- .strikelin2 {
- margin: 8px -35px;
- }
- .txtbutt {
- position: absolute;
- width: 100px;
- margin: -60px -24px;
- font-family: gogoia;
- font-size: 20px;
- letter-spacing: 3px;
- opacity: 0;
- transition: 0.8s;
- cursor: pointer;
- color: {color:nav icon popup};
- }
- .tbhl {
- border: 2px solid {color:nav icon popup};
- padding: 5px 7px 3px 8px;
- }
- .butt:hover .txtbutt {
- opacity: 1;
- transition-delay: 0.4s;
- margin: -70px -24px;
- }
- .jiji {
- color: {color:introductory panel accent};
- margin-top: 180px;
- font-size: 40px;
- }
- .jiji a {color:{color:introductory panel accent};}
- #contentpanel {
- background-color: {color:content panel background};
- background-image: url({image:content panel background});
- {block:ifcontentpanelcover}
- background-size: cover;
- {/block:ifcontentpanelcover}
- width: 100%;
- background-attachment: fixed;
- min-height: 660px;
- }
- #cpbar {
- background-color: {color:content topbar background};
- padding: 20px 0;
- height: 32px;
- border-bottom: 1px solid {color:content topbar border};
- border-top: 1px solid {color:content topbar border};
- }
- .cpicon {
- width: 32px;
- height: 32px;
- border-radius: 3px;
- float: left;
- margin-left: 20px;
- }
- .cptitle {
- font-family: gogoia;
- font-size: 20px;
- padding-left: 20px;
- text-transform: uppercase;
- line-height: 32px;
- letter-spacing: 3px;
- float: left;
- color: {color:content topbar title};
- }
- .cptitle a { color: {color:content topbar title};}
- .sticky {
- position: fixed;
- width: 100%;
- left: 0;
- top: 0;
- z-index: 100;
- }
- #cpstickywrap {width: 100%;height: 100%;}
- #cpnav {
- width: 280px;
- margin-top: -37px;
- margin-left: 16px;
- position: absolute;
- font-size: 14px;
- }
- .cpnavi {
- width: 18px;
- margin-right: 22px;
- float: left;
- cursor: pointer;
- }
- .cpnbg {
- background-color: {color:content topbar background};
- border: 1px solid {color:content topbar border};
- border-radius: 3px;
- width: 24px;
- height: 24px;
- position: absolute;
- transform: rotate(45deg);
- transition: 0.6s;
- margin: -6px -4px;
- cursor: pointer;
- }
- .cpnic {
- color: {color:content topbar icon};
- position: relative;
- z-index: 2;
- font-size: 12px;
- transition: 0.6s;
- cursor: pointer;
- }
- .cpnavi:hover .cpnic {color: {color:content topbar icon hover};}
- #cpnic2 {margin-left: 0px;}
- #cprightsidebar {
- width: 170px;
- padding: 30px;
- background-color: {color:content topbar background};
- margin-left: 536px;
- margin-top: 53px;
- border-left: 1px solid {color:content topbar border};
- border-right: 1px solid {color:content topbar border};
- border-bottom: 1px solid {color:content topbar border};
- border-radius: 0 0 5px 5px;
- }
- .cprimg {width: 170px;display:block;}
- .desc {
- font-family: opsans;
- font-size: 10px;
- margin-top: 20px;
- text-align: left;
- color: {color:desc};
- }
- .desc b,strong { color: {color:desc bold}; }
- .desc i,em { color: {color:desc italic}; }
- .desc a { color: {color:desc links}; }
- .desc a:hover { color: {color:desc links hover}; }
- #contactmain, #aboutmain, #linksmain {
- padding-top: 90px;
- display: none;
- color: #fff;
- width: 100%;
- position: absolute;
- top: 0;
- {block:ifintroductorypanelcover}
- background-size: cover;
- {/block:ifintroductorypanelcover}
- background-image: url({image:introductory panel background});
- background-color: {color:introductory panel background};
- background-size: cover;
- background-attachment: fixed;
- }
- .contactpanel, .aboutpanel {width: 700px;}
- .frqntitle, .abttitle {
- margin-top: 40px;
- font-family: gogoia;
- font-size: 30px;
- color: {color:introductory panel title};
- letter-spacing: 6px;
- border-bottom: 2px solid {color:introductory panel accent};
- padding-bottom: 16px;
- margin-bottom: 30px;
- text-align: center;
- }
- #frqncon {
- padding: 0 30px;
- text-align: left;
- font-family: opsans;
- color: {color:introductory panel text};
- font-size: 12px;
- }
- .faqn {
- margin-top: 30px;
- font-size: 14px;
- }
- #frqncon blockquote {
- border-left: 2px solid {color:introductory panel accent};
- padding-left: 20px;
- margin-left: 20px;
- }
- .askbox {
- margin-top: 40px;
- margin-bottom: 40px;
- }
- .abtarea {
- font-family: opsans;
- font-size: 12px;
- text-align: left;
- }
- .abtbio {padding: 0 20px 40px 20px;}
- #linksmain {padding-top: 20p;}
- .linkspanel {
- width: 660px;
- padding-top: 120px;
- }
- .dirtitle {
- font-family: gogoia;
- font-size: 40px;
- color: {color:introductory panel title};
- letter-spacing: 8px;
- margin-bottom: 30px;
- }
- .dirlink {
- width: 200px;
- padding: 16px 0;
- margin: 10px;
- float: left;
- font-family: opsans;
- font-size: 12px;
- text-transform: uppercase;
- letter-spacing: 2px;
- color: {color:directory links text};
- background-color: rgba({RGBcolor:directory links background},0.1);
- border-radius: 5px;
- }
- .closelinksmain {
- position: fixed;
- top: 40px;
- right: 20px;
- background-color: rgba({RGBcolor:directory links background},0.2);
- color: {color:directory links text};
- font-family: opsans;
- font-size: 22px;
- padding: 2px 10px;
- cursor: pointer;
- }
- #content {
- width: 500px;
- margin-top: 30px;
- margin-left: -250px;
- padding-bottom: 30px;
- }
- .posts {
- width: 500px;
- margin-bottom: 30px;
- border-bottom: 1px solid {color:post border};
- transition: 0.6s;
- }
- .photo {
- display: block;
- max-width: 500px;
- {block:iffadingphotos}
- opacity: 0.7;
- {/block:iffadingphotos}
- {block:ifmonochromeposts}
- filter: gray; /* IE6-9 */
- -webkit-filter: grayscale(100%); /* Chrome 19+ & Safari 6+ */
- {/block:ifmonochromeposts}
- transition: 0.6s;
- }
- .photo:hover {
- opacity: 1;
- {block:ifmonochromeposts}
- filter: none;
- -webkit-filter: grayscale(0%);
- {/block:ifmonochromeposts}
- }
- .photo img {max-width: 500px;}
- .text img {max-width: 470px;}
- .posts blockquote img {max-width: 100%;}
- .qpost {
- background-color: {color:post background};
- padding: 30px;
- }
- .text, .ctext, .atext {
- background-color: {color:post background};
- padding: 20px 25px;
- font-family: opsans;
- font-size: 12px;
- color: {color:body text};
- text-align: justify;
- font-style: none;
- }
- .ctext { background-color: transparent; padding: 0; }
- .atext { margin-top: 5px; }
- blockquote {
- border-left: 1px solid {color:blockquote};
- padding: 0 10px;
- margin: 5px;
- }
- .line {
- text-align: left;
- margin: 3px 0;
- background-color: {color:post background};
- }
- .odd .line {padding: 10px;color:{color:chat odd text};}
- .even .line {padding: 10px;color:{color:chat even text};}
- .odd .name {color: {color:chat odd name};}
- .even .name {color: {color:chat even name};}
- .ptitle, .ltitle {
- font-family: gogoia;
- background-color: {color:post title background};
- font-size: 28px;
- letter-spacing: 4px;
- text-align: center;
- padding: 14px 0 6px 0;
- color: {color:post title text};
- }
- .ltitle {
- background-color: {color:link post background};
- color: {color:link post text};
- transition: 1s;
- -moz-transition: 1s;
- -webkit-transition: 1s;
- -o-transition: 1s;
- }
- .ltitle:hover {
- background-color: {color:hover link post background};
- color: {color:hover link post text};
- }
- .audiopost { height: 150px;margin-bottom: 5px; }
- .albumno {
- width: 150px;
- height: 150px;
- background-color: #888;
- position: absolute;
- z-index: 1;
- }
- .albumartp {
- z-index: 10;
- width: 150px;
- height: 150px;
- position: relative;
- z-index: 2;
- }
- .albumart {
- margin-left: -350px;
- width: 150px;
- height: 150px;
- display: block;
- position: relative;
- }
- .audioplayer {
- position: absolute;
- z-index: 11;
- margin-top: -90px;
- margin-left: 65px;
- width: 25px;
- height: 25px;
- overflow: hidden;
- opacity: 0.5;
- z-index: 10;
- transition: 0.6s;
- -moz-transition: 0.6s;
- -webkit-transition: 0.6s;
- -o-transition: 0.6s;
- }
- .audioplayer:hover {opacity: 1;}
- .audioinfo {
- position: absolute;
- margin-left: 155px;
- height: 150px;
- }
- .aline {
- width: 325px;
- text-align: left;
- font-family: opsans;
- font-size: 10px;
- padding: 11px 10px;
- margin-bottom: 5px;
- text-transform: uppercase;
- height: 12px;
- overflow:hidden;
- background-color: {color:post background};
- color: {color:audio info text};
- }
- .aline b,strong { color: {color:body bold};}
- .quote {
- font-family: gogoia;
- text-align: center;
- font-size: 30px;
- color: {color:quote};
- }
- .qsrc {color:{color:quote source};text-align:center;font-family:opsans;font-size:12px;}
- .askerportrait {
- max-width: 64px;
- max-height: 64px;
- position: absolute;
- border: 10px solid {color:ask background};
- float: left;
- margin-left: -250px;
- }
- .a {
- margin-left: 100px;
- background-color: {color:ask background};
- min-height: 64px;
- padding: 10px;
- font-family: opsans;
- font-size: 12px;
- color: {color:ask text};
- text-align: justify;
- }
- .asker {
- color: {color:asker text};
- font-family: opsans;
- font-size: 11px;
- text-transform: uppercase;
- }
- .asker a {color: {color:asker link};}
- .q {margin-top: 10px;}
- .tri {
- position: absolute;
- font-size: 30px;
- margin: 20px 0 0 85px;
- color: {color:ask background};
- }
- .text b,strong, .permainfo b,strong, .ctext b,strong, .atext b,strong, blockquote b,strong {
- color: {color:body bold};
- background-color: {color:post background};
- font-weight: 400;
- padding: 0 3px;
- }
- .text i,em, .permainfo a, .ctext i,em, .atext i,em {
- color: {color:body italic};
- transition: 0.6s;
- -moz-transition: 0.6s;
- -webkit-transition: 0.6s;
- -o-transition: 0.6s;
- }
- .text a, #notecon a, .qsrc a, .ctext a, .atext a, .permainfo3 a {
- color: {color:body links};
- transition: 0.6s;
- -moz-transition: 0.6s;
- -webkit-transition: 0.6s;
- -o-transition: 0.6s;
- }
- .text a:hover, .permainfo a:hover, #notecon a:hover, .qsrc a:hover, .ctext a:hover, .atext a:hover, .permainfo3 a:hover {
- color: {color:body links hover};
- }
- .perma {
- position: absolute;
- width: 500px;
- text-align: center;
- margin: -8px 180px;
- opacity: 0;
- transition: 0.6s;
- }
- .posts:hover {
- {block:indexpage}margin-bottom: 70px;{/block:indexpage}
- }
- .posts:hover .perma {
- opacity: 1;
- }
- .piconcon {
- float: left;
- width: 20px;
- margin-right: 40px;
- }
- .ptxttri { color: {color:permalink popup}; margin-bottom: -1px; }
- .ptx {
- color: {color:permalink popup};
- background-color: {color:permalink popup bg};
- padding: 2px 6px;
- border: 1px solid {color:permalink popup};
- }
- .ptxtcon {
- position: absolute;
- width: 200px;
- font-family: consolas;
- text-transform: uppercase;
- letter-spacing: 3px;
- font-size: 10px;
- z-index: 3;
- margin: 26px -88px;
- transition: 0.4s;
- opacity: 0;
- }
- .piconbg {
- margin: -7px -4px;
- width: 28px;
- height: 28px;
- border: 1px solid {color:post border};
- background-color: {color:post background};
- transform: rotate(45deg);
- position: absolute;
- }
- .picon { position: relative; z-index: 1; color: {color:permalink icon}; }
- .piconcon:hover .ptxtcon {
- opacity: 1;
- margin: 30px -88px;
- }
- .permainfo {
- font-family: opsans;
- font-size: 12px;
- color: {color:body text};
- padding: 30px;
- background-color: {color:post background};
- }
- #notecon {
- padding: 30px;
- margin-top: 30px;
- background-color: {color:post background};
- font-family: opsans;
- font-size: 12px;
- color: {color:body text};
- }
- #notecon ol.notes {
- list-style-type: none;
- font-size: 12px;
- color: {color:body text};
- font-family: opsans;
- text-decoration: none;
- margin: 0;
- width: 440px;
- line-height: 14px;
- text-align: left;
- }
- .notes li {
- width: 420px;
- margin-left: -30px;
- font-size: 12px;
- padding: 10px 0;
- border-bottom: 1px solid #f3f3f3;
- }
- .notes img {
- margin-right: 10px;
- float: left;
- width: 13px;
- height: 13px;
- }
- .pagi {
- position: absolute;
- margin: 44px 0;
- width: 170px;
- text-align: center;
- font-family: opsans;
- font-size: 12px;
- text-align: center;
- letter-spacing: 6px;
- color: {color:pagination text};
- }
- .pagi a {color: {color:pagination links};}
- .pagi a:hover {color: {color:pagination links hover};}
- {CustomCSS}
- </style>
- </head>
- <body>
- <center>
- <div id="linksmain">
- <span class="links-to-first"><div class="closelinksmain">X</div></span>
- <div class="linkspanel">
- <div class="dirtitle">directory</div>
- {block:iflink1}<a href="{text:link 1 url}"><div class="dirlink">{text:link 1}</div></a>{/block:iflink1}
- {block:iflink2}<a href="{text:link 2 url}"><div class="dirlink">{text:link 2}</div></a>{/block:iflink2}
- {block:iflink3}<a href="{text:link 3 url}"><div class="dirlink">{text:link 3}</div></a>{/block:iflink3}
- {block:iflink4}<a href="{text:link 4 url}"><div class="dirlink">{text:link 4}</div></a>{/block:iflink4}
- {block:iflink5}<a href="{text:link 5 url}"><div class="dirlink">{text:link 5}</div></a>{/block:iflink5}
- {block:iflink6}<a href="{text:link 6 url}"><div class="dirlink">{text:link 6}</div></a>{/block:iflink6}
- {block:iflink7}<a href="{text:link 7 url}"><div class="dirlink">{text:link 7}</div></a>{/block:iflink7}
- {block:iflink8}<a href="{text:link 8 url}"><div class="dirlink">{text:link 8}</div></a>{/block:iflink8}
- {block:iflink9}<a href="{text:link 9 url}"><div class="dirlink">{text:link 9}</div></a>{/block:iflink9}
- {block:iflink10}<a href="{text:link 10 url}"><div class="dirlink">{text:link 10}</div></a>{/block:iflink10}
- {block:iflink11}<a href="{text:link 11 url}"><div class="dirlink">{text:link 11}</div></a>{/block:iflink11}
- {block:iflink12}<a href="{text:link 12 url}"><div class="dirlink">{text:link 12}</div></a>{/block:iflink12}
- </div><!--linkspanel-->
- </div><!--linksmain-->
- </center>
- <center>
- <div id="aboutmain">
- <div class="aboutpanel">
- <div id="cropic"><img class="crip" src="{PortraitURL-128}"></div><!--cropic-->
- <div id="leftnav">
- <div class="butt"><span class="about-to-first"><div class="txtbutt"><span class="tbhl">posts</span><div class="tbtri">▼</div></div></span>
- <div class="strikelin"></div>
- <span class="about-to-first"><div class="buttbg"></div><i class="fa fa-file-text-o"></i></span>
- </div><!--butt-->
- <div class="butt"><span class="about-to-contact"><div class="txtbutt"><span class="tbhl">contact</span><div class="tbtri">▼</div></div></span>
- <div class="strikelin"></div>
- <span class="about-to-contact"><div class="buttbg"></div><i class="fa fa-envelope-o"></i></span>
- </div><!--butt-->
- <div class="butt"><div class="txtbutt"><span class="tbhl">archives</span><div class="tbtri">▼</div></div>
- <div class="strikelin"></div><a href="/archive">
- <div class="buttbg"></div><i class="fa fa-calendar"></i>
- </a></div><!--butt-->
- </div><!--leftnav-->
- <div id="rightnav">
- <div class="butt"><span class="first-to-about"><div class="txtbutt"><span class="tbhl">about</span><div class="tbtri">▼</div></div></span>
- <div class="strikelin2"></div><div class="strikelin"></div>
- <span class="first-to-about"><div class="buttbg"></div><i class="fa fa-user"></i></span>
- </div><!--butt-->
- <div class="butt"><span class="about-to-links"><div class="txtbutt"><span class="tbhl">links</span><div class="tbtri">▼</div></div></span>
- <div class="strikelin"></div><div class="strikelin"></div>
- <span class="about-to-links"><div class="buttbg"></div><i class="fa fa-plus"></i></span>
- </div><!--butt-->
- <div class="butt"><div class="txtbutt"><span class="tbhl">credit</span><div class="tbtri">▼</div></div>
- <a href="http://yukoki.tumblr.com">
- <div class="buttbg"></div><i class="fa fa-pagelines"></i>
- </a></div><!--butt-->
- </div><!--rightnav-->
- <div class="abtarea">
- <div class="abttitle">user biography</div>
- <div class="abtbio">{text:long biography}</div><!--abtbio-->
- </div><!--abtarea-->
- </div><!--aboutmain-->
- </div><!--aboutpanel-->
- </center>
- <center>
- <div id="contactmain">
- <div class="contactpanel">
- <div id="cropic"><img class="crip" src="{PortraitURL-128}"></div><!--cropic-->
- <div id="leftnav">
- <div class="butt"><span class="contact-to-first"><div class="txtbutt"><span class="tbhl">posts</span><div class="tbtri">▼</div></div></span>
- <div class="strikelin"></div>
- <span class="contact-to-first"><div class="buttbg"></div><i class="fa fa-file-text-o"></i></span>
- </div><!--butt-->
- <div class="butt"><span class="first-to-contact"><div class="txtbutt"><span class="tbhl">contact</span><div class="tbtri">▼</div></div></span>
- <div class="strikelin"></div>
- <span class="first-to-contact"><div class="buttbg"></div><i class="fa fa-envelope-o"></i></span>
- </div><!--butt-->
- <div class="butt"><div class="txtbutt"><span class="tbhl">archives</span><div class="tbtri">▼</div></div>
- <div class="strikelin"></div><a href="/archive">
- <div class="buttbg"></div><i class="fa fa-calendar"></i>
- </a></div><!--butt-->
- </div><!--leftnav-->
- <div id="rightnav">
- <div class="butt"><span class="contact-to-about"><div class="txtbutt"><span class="tbhl">about</span><div class="tbtri">▼</div></div></span>
- <div class="strikelin2"></div><div class="strikelin"></div>
- <span class="contact-to-about"><div class="buttbg"></div><i class="fa fa-user"></i></span>
- </div><!--butt-->
- <div class="butt"><span class="contact-to-links"><div class="txtbutt"><span class="tbhl">links</span><div class="tbtri">▼</div></div></span>
- <div class="strikelin"></div><div class="strikelin"></div>
- <span class="contact-to-links"><div class="buttbg"></div><i class="fa fa-plus"></i></span>
- </div><!--butt-->
- <div class="butt"><div class="txtbutt"><span class="tbhl">credit</span><div class="tbtri">▼</div></div>
- <a href="http://yukoki.tumblr.com">
- <div class="buttbg"></div><i class="fa fa-pagelines"></i>
- </a></div><!--butt-->
- </div><!--rightnav-->
- <div class="faqarea">
- <div class="frqntitle">frequently asked questions</div>
- <div id="frqncon">
- <!----------------------- Customizing FAQ questions -------------------------
- Really this is just free space for you to type whatever you want. Example:
- <div class="faqn"><i class="fa fa-quote-left"></i> How are you doing today?</div>
- <blockquote>I'm doing fine thank you!!!</blockquote>
- Check out this cheat sheet for html tips --
- http://yukoki.tumblr.com/post/36810349024/cheat-sheet
- ---------------------------------------------------------------------------->
- <div class="faqn"><i class="fa fa-quote-left"></i> How are you doing today?</div>
- <blockquote>I'm doing fine thank you!!!</blockquote>
- </div><!--frqncon-->
- </div><!--faqarea-->
- <div class="askbox">
- <iframe frameborder="0" scrolling="no" width="500" height="190" src="https://www.tumblr.com/ask_form/{text:url}.tumblr.com" style="background-color:transparent; overflow:hidden;" id="ask_form"></iframe><!--[if IE]><script type="text/javascript">document.getElementById('ask_form').allowTransparency=true;</script><![endif]--></div>
- </div><!--contactmain-->
- </div><!--contactpanel-->
- </center>
- <div id="firstmain">
- <div id="intropanel">
- <center>
- <div id="homo">
- <div id="mainmain">
- <div id="cropic">
- <img class="crip" src="{PortraitURL-128}">
- </div><!--cropic-->
- <div id="leftnav">
- <div class="butt"><a href="#int-to-con"><div class="txtbutt"><span class="tbhl">posts</span><div class="tbtri">▼</div></div></a>
- <div class="strikelin"></div>
- <a href="#int-to-con"><div class="buttbg"></div><i class="fa fa-file-text-o"></i></a>
- </div><!--butt-->
- <div class="butt"><span class="first-to-contact"><div class="txtbutt"><span class="tbhl">contact</span><div class="tbtri">▼</div></div></span>
- <div class="strikelin"></div>
- <span class="first-to-contact"><div class="buttbg"></div><i class="fa fa-envelope-o"></i></span>
- </div><!--butt-->
- <div class="butt"><div class="txtbutt"><span class="tbhl">archives</span><div class="tbtri">▼</div></div>
- <div class="strikelin"></div><a href="/archive">
- <div class="buttbg"></div><i class="fa fa-calendar"></i>
- </a></div><!--butt-->
- </div><!--leftnav-->
- <div id="rightnav">
- <div class="butt"><span class="first-to-about"><div class="txtbutt"><span class="tbhl">about</span><div class="tbtri">▼</div></div></span>
- <div class="strikelin2"></div><div class="strikelin"></div>
- <span class="first-to-about"><div class="buttbg"></div><i class="fa fa-user"></i></span>
- </div><!--butt-->
- <div class="butt"><span class="first-to-links"><div class="txtbutt"><span class="tbhl">links</span><div class="tbtri">▼</div></div></span>
- <div class="strikelin"></div><div class="strikelin"></div>
- <span class="first-to-links"><div class="buttbg"></div><i class="fa fa-plus"></i></span>
- </div><!--butt-->
- <div class="butt"><div class="txtbutt"><span class="tbhl">credit</span><div class="tbtri">▼</div></div>
- <a href="http://yukoki.tumblr.com">
- <div class="buttbg"></div><i class="fa fa-pagelines"></i>
- </a></div><!--butt-->
- </div><!--rightnav-->
- <div class="quotabove"><span class="quot">“</span></div>
- <div class="maintitle"><div class="mtabove"></div>{title}<div class="mtbelow"></div></div>
- <div class="quotbelow"><span class="quot">”</span></div>
- <div id="maininfo">
- <div class="leftinfo-desc">{text:introductory text}</div>
- <div class="rightinfo-upd">{text:updates}</div>
- </div><!--maininfo-->
- <div class="jiji">
- <a href="#int-to-con"><i class="fa fa-angle-double-down"></i></a>
- </div><!--jiji-->
- </div><!--mainmain-->
- </div><!--homo-->
- </center>
- </div><!--intropanel-->
- <div id="contentpanel"><center>
- <a name="int-to-con">
- <div id="cpbar">
- <a href="/"><img class="cpicon" src="{PortraitURL-128}"><span class="cptitle">{text:content topbar text}</span></a>
- <div id="cpstickywrap">
- <div id="cprightsidebar">
- <div id="cpnav">
- <span class="first-to-contact"><div class="cpnavi"><div class="cpnbg"></div><div class="cpnic"><i class="fa fa-envelope-o"></div></i></div></span>
- <a href="/archive"><div class="cpnavi" id="cpnavi2"><div class="cpnbg"></div><div class="cpnic" id="cpnic2"><i class="fa fa-calendar"></div></i></div></a>
- <span class="first-to-about"><div class="cpnavi"><div class="cpnbg"></div><div class="cpnic"><i class="fa fa-user"></div></i></div></span>
- <span class="first-to-links"><div class="cpnavi" id="cpnavi2"><div class="cpnbg"></div><div class="cpnic" id="cpnic2"><i class="fa fa-plus"></div></i></div></a></span>
- </div><!--cpleftnav-->
- <img class="cprimg" src="{image:sidebar}">
- <div class="desc">{description}</div>
- <div class="pagi">
- {block:Pagination}
- {block:PreviousPage}
- <a href="{PreviousPage}"><</a>
- {/block:PreviousPage}
- {block:JumpPagination length="4"}
- {block:CurrentPage}
- <span class="current_page">X</span>
- {/block:CurrentPage}
- {block:JumpPage}
- <a class="jump_page" href="{URL}">{PageNumber}</a>
- {/block:JumpPage}
- {/block:JumpPagination}
- {block:NextPage}
- <a href="{NextPage}">></a>
- {/block:NextPage}
- {/block:Pagination}
- </div>
- </div><!--cprightsidebar-->
- </div><!--cpstickywrap-->
- </div><!--sticky cpbar-->
- </a><!--end anchor int-to-con-->
- <div id="content">
- {block:Posts}
- <div class="posts">
- {block:Quote}
- <div class="qpost">
- <div class="quote">{Quote}</div> <div class="qsrc">- {Source} -</div>
- </div>
- {/block:Quote}
- {block:Link}
- <a href="{URL}"><div class="ltitle">
- <div class="ptdecp"><div class="spd1"></div><div class="spd2"></div><div class="spd3"></div></div>{Name} ></div></a>
- {block:Description}<div class="text">{Description}</div>{block:Description}
- {/block:Link}
- {block:Chat}
- {block:Title}
- <div class="ptitle">
- <div class="ptdecp"><div class="spd1"></div><div class="spd2"></div><div class="spd3"></div></div>{Title}</div>
- {/block:Title}
- <div class="ctext">
- {block:Lines}<div class="{Alt}">
- <div class="line">{block:Label}<span class="name">{Label}</span>{/block:Label} {Line}<br /></div></div>
- {/block:Lines}
- </div>
- {/block:Chat}
- {block:Photo}
- {linkopentag}<center><img class="photo" src="{PhotoURL-500}"></center>{linkclosetag}
- {block:IfShowCaptions}{block:Caption}<div class="text">{Caption}</div>{/block:Caption}{/block:IfShowCaptions}
- {block:IfNotShowCaptions}{block:PermalinkPage}{block:Caption}
- <div class="text">{Caption}</div>
- {/block:Caption}{/block:PermalinkPage}{/block:IfNotShowCaptions}
- {/block:Photo}
- {block:Photoset}
- <div class="photo">{Photoset-500}</div>
- {block:IfShowCaptions}{block:Caption}<div class="text">{Caption}</div>{/block:Caption}{/block:IfShowCaptions}
- {block:IfNotShowCaptions}{block:PermalinkPage}{block:Caption}
- <div class="text">{Caption}</div>
- {/block:Caption}{/block:PermalinkPage}{/block:IfNotShowCaptions}
- {/block:Photoset}
- {block:Text}
- {block:Title}
- <div class="ptitle">{Title}</div>
- {/block:Title}
- <div class="text">{Body}</div>
- {/block:Text}
- {block:Audio}
- <div class="audiopost">
- <div class="audioinfo">
- {block:trackname}<div class="aline"><b>track name:</b> {trackname}</div>{/block:trackname}
- {block:artist}<div class="aline"><b>artist:</b> {artist}</div>{/block:artist}
- {block:album}<div class="aline"><b>album:</b> {album}</div>{/block:album}
- {block:playcount}<div class="aline"><b>play count:</b> {playcount}</div>{/block:playcount}
- </div><!--audioinfo-->
- <div class="albumart"><div class="albumno"></div>{block:AlbumArt}<img class="albumartp" src="{AlbumArtURL}">{/block:AlbumArt}</div>
- <div class="audioplayer">{AudioPlayer}</div>
- </div><!--audiopost-->
- {block:indexpage}{block:IfShowCaptions}{block:Caption}<div class="text">{Caption}</div>{/block:Caption}{/block:IfShowCaptions}{/block:indexpage}
- {block:PermalinkPage}{block:Caption}
- <div class="text">{Caption}</div>
- {/block:Caption}{/block:PermalinkPage}
- {/block:Audio}
- {block:Video}
- {Video-500}
- {block:IfShowCaptions}{block:Caption}<div class="text">{Caption}</div>{/block:Caption}{/block:IfShowCaptions}
- {block:IfNotShowCaptions}{block:PermalinkPage}{block:Caption}
- <div class="text">{Caption}</div>
- {/block:Caption}{/block:PermalinkPage}{/block:IfNotShowCaptions}
- {/block:Video}
- {block:Answer}
- <img class="askerportrait" src="{AskerPortraitURL-64}">
- <div class="tri">◀</div>
- <div class="a">
- <span class="asker">{Asker} whispered:</span>
- <span class="q">{Question}</span>
- </div>
- <div class="atext">{Answer}</div>
- {/block:Answer}
- {block:indexpage}{block:date}
- <div class="perma">
- <a href="{permalink}">
- <div class="piconcon">
- <div class="ptxtcon"><div class="ptxttri">▲</div><div class="ptxt"><span class="ptx">{NoteCount}</span></div></div>
- <div class="piconbg"></div><div class="picon"><i class="fa fa-book"></i></div></div>
- </a>
- <a href="{permalink}">
- <div class="piconcon">
- <div class="ptxtcon"><div class="ptxttri">▲</div><div class="ptxt"><span class="ptx">{TimeAgo}</span></div></div>
- <div class="piconbg"></div><div class="picon"><i class="fa fa-clock-o"></i></div></div>
- </a>
- <a href="{ReblogURL}">
- <div class="piconcon">
- <div class="ptxtcon"><div class="ptxttri">▲</div><div class="ptxt"><span class="ptx">Reblog</span></div></div>
- <div class="piconbg"></div><div class="picon"><i class="fa fa-retweet"></i></div></div>
- </a>
- </div><!--perma-->
- {/block:date}{/block:indexpage}
- </div><!--posts-->
- {block:permalinkpage}
- {block:date}<div class="permainfo">
- Posted on <b>{DayOfMonth} {Month} {Year}</b>, at <b>{12Hour}.{Minutes}{AmPm}</b>, with <b>{NoteCountWithLabel}</b><br>
- {block:RebloggedFrom}
- Reblogged via <a href="{ReblogParentURL}">{ReblogParentName}</a>, originally by <a href="{ReblogRootURL}">{ReblogRootName}</a><br>
- {/block:RebloggedFrom}
- {block:HasTags}<div class="pitags">{block:Tags}
- <a href="{TagURL}">#{Tag} </a>
- {/block:Tags}</div>{/block:HasTags}
- </div>{/block:date}
- {block:date}{block:NoteCount}<div id="notecon">
- {PostNotes-16}
- </div><!--notecon-->{/block:NoteCount}{/block:date}
- {/block:permalinkpage}
- {/block:Posts}
- {block:ContentSource}
- <!-- {SourceURL}{block:SourceLogo}<img src="{BlackLogoURL}"
- width="{LogoWidth}" height="{LogoHeight}" alt="{SourceTitle}" />
- {/block:SourceLogo}
- {block:NoSourceLogo}{SourceLink}{/block:NoSourceLogo} -->
- {/block:ContentSource}
- <!--{block:NoRebloggedFrom}{block:RebloggedFrom}{ReblogParentName}{/block:RebloggedFrom}{/block:NoRebloggedFrom} -->
- </div><!--content-->
- </center></div><!--contentpanel-->
- </div><!--firstmain-->
- </body>
- </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement