Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!DOCTYPE html>
- <html>
- <!--
- MAIN THEME
- Credits:
- - Suiomi Cappuccicons icons
- - Shythemes like & rebglog button
- If you need any help, feel free to send me a message at fallingforthemes.tumblr.com/ask
- -->
- <head>
- <title>{Title}</title>
- <!---------------- META -------------->
- <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1">
- <meta name="select:Post Size" content="250px" title="250px" />
- <meta name="select:Post Size" content="400px" title="400px" />
- <meta name="select:Post Size" content="540px" title="540px" />
- <meta name="select:Post Size" content="600px" title="600px" />
- <meta name="select:Post Size" content="650px" title="650px" />
- <meta name="select:Post Size" content="700px" title="700px" />
- <meta name="color:Background" content="#2f3136"/>
- <meta name="color:Container" content="#f6f6f6"/>
- <meta name="color:Header Font" content="#2f3136"/>
- <meta name="color:Header Font Hightlighted" content="#2f3136"/>
- <meta name="color:Navigation Links Bkgd" content="#5aa6e6" />
- <meta name="color:Links" content="#5aa6e6" />
- <meta name="color:Highlighted Link" content="#3247d2" />
- <meta name="color:Post" content="#ffffff" />
- <meta name="color:Post Accent" content="#ffffff" />
- <meta name="color:Post Font" content="#000000">
- <meta name="color:Post Border" content="#ffffff" />
- <meta name="text:URL 1 Label" content="" />
- <meta name="text:URL 1" content="" />
- <meta name="text:URL 2 Label" content="" />
- <meta name="text:URL 2" content="" />
- <meta name="text:URL 3 Label" content="" />
- <meta name="text:URL 3" content="" />
- <meta name="text:URL 4 Label" content="" />
- <meta name="text:URL 4" content="" />
- <meta name="text:URL 5 Label" content="" />
- <meta name="text:URL 5" content="" />
- <meta name="text:Description Name" content="" />
- <meta name="text:Description Age" content="" />
- <meta name="text:Description Gender" content="" />
- <meta name="text:Description Pronouns" content="" />
- <meta name="text:Description Other" content="" />
- <meta name="if:Show Tags" content=""/>
- <!---------------- FEATHERICONS -------------->
- <script src="https://unpkg.com/feather-icons"></script>
- <!---------------- FONT (POPPINS) ---------------->
- <link rel="preconnect" href="https://fonts.googleapis.com">
- <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
- <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300&display=swap" rel="stylesheet">
- <!---------------- TOOLTIPS SCALE ANIMATION -------------->
- <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
- <!---------------- CSS -------------->
- <style type="text/css">
- /*********** GENERAL: BODY, IMGS, LINKS, IFRAME ************/
- * {
- margin: 0;
- padding: 0;
- box-sizing: border-box;
- }
- body {
- word-wrap: break-word;
- background: {color:Background};
- font-family: 'Poppins', sans-serif;
- display: grid;
- grid-template-columns: auto;
- grid-template-rows: 0.5fr 4fr;
- grid-template-areas:
- "header"
- "content";
- }
- img {
- border: 0; /*Precaution for IE*/
- max-width: 100%; /*Prevent imgs from spilling over*/
- }
- ol, ul {
- padding: 10px 30px;
- }
- a, .comma {
- color: {color:Links};
- }
- a:hover, .comma:hover {
- color: {color:Highlighted Link};
- }
- .tumblr_audio_player, .embed_iframe {
- width: 100%;
- }
- .html_photoset iframe {
- width: 100%;
- }
- /* REMOVES TUMBLR CONTROLS IN UPPER RIGHT*/
- /* .tmblr-iframe-compact .tmblr-iframe--unified-controls {
- display: none !important;
- }*/
- /********* CAROUSEL *********/
- #container {
- grid-area: content;
- height: 650px;
- width: 1000px;
- background: {color:Container};
- margin: 0 auto;
- overflow: scroll;
- overflow-x: hidden;
- }
- #carousel, #navigation {
- flex: initial;
- display: block;
- }
- #carousel {
- overflow: hidden;
- height: 700px;
- border-radius: 4px;
- background-color: #fff;
- flex-flow: row nowrap;
- }
- .p-wrapper {
- position: relative;
- width: 100%;
- height: 100%;
- transition: transform 0.4s ease-in-out;
- }
- #button_a:checked ~ #carousel .p-wrapper {
- -webkit-transform: translateY(0);
- transform: translateY(0);
- }
- #button_b:checked ~ #carousel .p-wrapper {
- -webkit-transform: translateY(-100%);
- transform: translateY(-100%);
- }
- #button_c:checked ~ #carousel .p-wrapper {
- -webkit-transform: translateY(-200%);
- transform: translateY(-200%);
- }
- #button_d:checked ~ #carousel .p-wrapper {
- -webkit-transform: translateY(-300%);
- transform: translateY(-300%);
- }
- #button_e:checked ~ #carousel .p-wrapper {
- -webkit-transform: translateY(-400%);
- transform: translateY(-400%);
- }
- [class^="panel_"] {
- overflow: auto;
- position: relative;
- width: inherit;
- height: inherit;
- padding: 48px;
- }
- #navigation {
- position: absolute;
- top: 20px;
- display: flex;
- text-align: center;
- justify-content: space-evenly;
- width: 1000px;
- }
- [class^="label_"] {
- display: block;
- cursor: pointer;
- margin: 8px 0;
- height: 32px;
- line-height: 32px;
- text-align: center;
- border-radius: 4px;
- color: {color:Header Font};
- background-color: {color:Background};
- padding: 0 10px;
- transition: all 0.3s ease;
- }
- [class^="label_"]:hover {
- color: #444;
- background-color: {color:Header Font Hightlighted};
- }
- #button_a:checked ~ #navigation .label_a,
- #button_b:checked ~ #navigation .label_b,
- #button_c:checked ~ #navigation .label_c,
- #button_d:checked ~ #navigation .label_d,
- #button_e:checked ~ #navigation .label_e {
- cursor: default;
- color: #fff;
- background-color: #222;
- }
- #ask_form {
- background-color:transparent;
- overflow:hidden;
- }
- #submit_form {
- background-color:transparent;
- overflow:hidden;
- }
- /*********** HEADER ************/
- header {
- grid-area: header;
- position: relative;
- top: 30px;
- }
- header a {
- text-decoration: none;
- }
- /***** ICON *****/
- .icon {
- display: none;
- }
- /***** TITLES *****/
- .title, .post_title {
- font-weight: bold;
- font: 'Lora', sans-serif;
- }
- /*****LINKS *****/
- .link {
- padding: 20px 25px;
- background-color: {color:Navigation Links Bkgd};
- margin: 5px;
- }
- .link:hover {
- background-color: {color:Highlighted Link};
- color: {color:Links};
- }
- /***** PAGINATION *****/
- #pagination {
- padding: 10px;
- margin-top: 10px;
- display: flex;
- justify-content: space-evenly;
- }
- #pagination span {
- text-decoration: underline;
- }
- /***** DESCRIPTION *****/
- .desc {
- color: {color:Post Font};
- background-color: {color:Post};
- position: relative;
- margin-bottom: 5px;
- }
- .desc h2, #about_me h2 {
- font-family: 'Lora', sans-serif;
- }
- .info h4{
- display: inline-block;
- }
- .desc, #about_me {
- width: 600px;
- margin: 0 auto;
- }
- .exit {
- position: absolute;
- color: {color:Links};
- font-size: 2em;
- margin-left: 10px;
- }
- /*********** CONTENT ************/
- #content {
- grid-area: content;
- height: 700px;
- width: 1000px;
- background: {color:Container};
- margin: 0 auto;
- overflow: scroll;
- overflow-x: hidden;
- }
- /*********** POSTS ************/
- .posts {
- width:{select:Post Size};
- margin: 0 auto;
- margin-top: 20px;
- color: {color:Post Font};
- border: 3px solid {color:Post Border};
- border-radius: 5px;
- padding: 20px;
- position: relative;
- }
- .posts img {
- max-width: 100%;
- display: block;
- margin: auto;
- }
- /*** POST INFO (LIKE, REBLOG, PERMALINK, NOTES, TAGS) ***/
- .post_header {
- width: 160px;
- position: absolute;
- left: calc({select:Post Size} + 5px);
- text-decoration: none;
- }
- .post_info {
- max-height: 110px;
- overflow-y: scroll;
- border: 3px solid {color:Post Accent};
- border-radius: 5px;
- padding: 5px 10px;
- margin-top: 5px;
- }
- .like_reblog, .permalink {
- margin-right: 5px;
- }
- .like-b, .reblog_button, .permalink {
- text-decoration: none;
- }
- .like-b {
- position:relative;
- overflow:hidden;
- margin-bottom:-1px;
- margin-right: 10px;
- }
- .like-b .like_button iframe {
- position:absolute;
- top:0;
- bottom:0;
- right:0;
- z-index:2;
- opacity:0;
- }
- .like-b .liked + .b {
- color:inherit;
- }
- .like-b .liked + .b:after {
- content:'d';
- }
- .permalink {
- padding: 9px 14px 11px 14px;
- font-size: 18px;
- }
- .note_count {
- color: {color:Links};
- }
- .posts .tags .comma:last-child {
- display: none;
- }
- /***** POST CONTENT *****/
- .caption p, .chat li{
- padding-bottom: 5px;
- }
- .post_title, .caption, .reblog-list, .quote, .chat, .source, .answering, .asking {
- background:{color:Post};
- padding: 10px 20px;
- }
- .reblog-list, .chat, .quote, .text_post .caption {
- border-radius: 5px;
- }
- .caption, .answering, .source {
- border-radius: 0 0 5px 5px;
- }
- /*** ASK POST ***/
- .asking {
- background-color: {color:Ask Post};
- border-radius: 5px 5px 0 0;
- }
- /*** QUOTE POST ***/
- .quote_post .quote {
- font-size: 18px;
- }
- /*** LIST OF NOTES ***/
- #note_list {
- background-color: white;
- width: {select:Post Size};
- padding: 10px 10px 60px;
- border-radius: 5px;
- margin-top: 10px;
- }
- #note_list a:first-child {
- margin-left: 5px;
- }
- /***** FOOTER *****/
- footer {
- height: 25px;
- grid-area: footer;
- z-index: 100;
- position: fixed;
- bottom: 0;
- width: 100%;
- line-height: 25px;
- }
- footer .thememaker {
- float: right;
- text-decoration: none;
- font-size: 0.9em;
- color: black;
- background-color: white;
- padding: 0 5px;
- border-radius: 5px;
- }
- /***** HANDLES DISPLAY FOR DIFFERENT SCREENS *****/
- @media only screen and (max-width: 1125px) {
- .embed_iframe {
- height: 100%;
- }
- }
- {CustomCSS}
- </style>
- </head>
- <body>
- <!-------------- HEADER -------------->
- <div id="container">
- <input hidden type="radio" name="carousel-control" id="button_a" checked/>
- <input hidden type="radio" name="carousel-control" id="button_b"/>
- <input hidden type="radio" name="carousel-control" id="button_c"/>
- <input hidden type="radio" name="carousel-control" id="button_d"/>
- <input hidden type="radio" name="carousel-control" id="button_e"/>
- <div id="navigation">
- <label for="button_a" class="label_a"> <span> Home </span> </label>
- <label for="button_b" class="label_b"> <span> Description </span> </label>
- <label for="button_c" class="label_c"> <span> Navigation </span> </label>
- <label for="button_d" class="label_d"> <span> Ask </span> </label>
- <label for="button_e" class="label_e"> <span> Submit </span> </label>
- </div> <!-- // #navigation -->
- <div id="carousel">
- <div class="p-wrapper">
- <section class="panel_a">
- <!-------------- MAIN CONTENT -------------->
- {block:Posts}
- <!-------------- POSTS -------------->
- <article class="{PostType}_post posts" id="{PostID}">
- <!-------------- HEADER -------------->
- <aside class="post_header">
- <i data-feather="settings" class="settings"></i>
- <div class="post_info">
- <a href="{Permalink}" class="date">
- {block:Date}{Year}.{MonthNumberWithZero}.{DayOfMonthWithZero}{/block:Date}
- </a>
- <div class="like_reblog">
- <a class="like-b" href="#">{LikeButton}<span class="b">like</span></a>
- <a href="{ReblogURL}" target="_blank" class="reblog_button">reblog</a>
- <div class="note_count">
- {NoteCountWithLabel}
- </div>
- {block:IfShowtags}
- {block:HasTags}
- <!-------------- TAGS --------------> <div class="tags">
- {block:Tags}
- <a href="{TagURL}">#{Tag}</a><span class="comma">, </span>
- {/block:Tags}
- </div>
- {/block:HasTags}
- {block:IfShowTags}
- </div>
- </div>
- </aside>
- {block:Title}
- <!-------------- POST TITLE -------------->
- <div class="post_title">{Title}</div>
- {/block:Title}
- {block:Photo}
- <!-------------- PHOTO POST -------------->
- {LinkOpenTag}<img src="{PhotoURL-HighRes}" alt="{PhotoAlt}"/>{LinkCloseTag}
- {/block:Photo}
- {block:Photoset}
- <!-------------- PHOTOSET POST -------------->
- {Photoset-700}
- {/block:Photoset}
- {block:Panorama}
- <!-------------- PANORAMA POST -------------->
- <img src="{PhotoUrl-Panorama}" alt="{PhotoAlt}">
- {/block:Panorama}
- {block:Video}
- <!-------------- VIDEO POST -------------->
- {Video-500}
- {/block:Video}
- {block:Audio}
- <!-------------- ADUIO POST -------------->
- <div class="audio_container" alt="Album art for {block:TrackName}{Trackname}{/block:TrackName}">
- {block:AudioEmbed}
- {AudioEmbed}
- {/block:AudioEmbed}
- </div>
- {/block:Audio}
- {block:Quote}
- <!-------------- QUOTE POST -------------->
- <div class="quote">"{Quote}"</div>
- {block:Source}<p class="source">— {Source}</p>{/block:Source}
- {/block:Quote}
- {block:Text}
- <!-------------- TEXT POST -------------->
- {block:NotReblog}
- <!-------------- ORIGINAL POST/NOT REBLOGGED -------------->
- <div class="caption">{Body}</div>
- {/block:NotReblog}
- {block:RebloggedFrom}
- <!-------------- REBLOGGED POST -------------->
- <div class="reblog-list">
- {block:Reblogs}
- <div class="reblog-item">
- <div class="reblog-header">
- {block:IsActive}
- <a target="_blank" class="active reblogged_from" href="{Permalink}">{Username}</a>
- {/block:IsActive}
- {block:IsDeactivated}
- <span class="inactive reblogged_from">{Username}</span>
- {/block:IsDeactivated}
- </div>
- <div class="post-reblog-content">
- <div class="caption">{Body}</div>
- </div>
- </div>
- {/block:Reblogs}
- </div>
- {/block:RebloggedFrom}
- {/block:Text}
- {block:Answer}
- <!-------------- ASK POST -------------->
- <div class="asking">
- <div class="asker">{Asker} asked:</div>
- <div class="question">{Question}</div>
- </div>
- <div class="answering">
- {block:Answerer}
- <div class="answerer">{Answerer}</div>
- {/block:Answerer}
- <div class="answer">{Answer}</div>
- </div>
- {/block:Answer}
- {block:Chat}
- <!-------------- CHAT POST -------------->
- <ul class="chat">
- {block:Lines}
- <li>{block:Label}<strong>{Label}</strong>{/block:Label}{Line}</li>
- {/block:Lines}
- </ul>
- {/block:Chat}
- {block:Link}
- <!-------------- LINK POST -------------->
- <a href="{URL}" class="post_link">{Name}</a>
- {block:Description}<div class="link_desc"><br>{Description}</div>{/block:Description}
- {/block:Link}
- {block:Caption}
- <!-------------- CAPTION -------------->
- <div class="caption">
- {Caption}
- </div>
- {/block:Caption}
- </article>
- {block:PostNotes}
- <!-- LIST OF NOTES (user liked/reblogged this) -->
- <div id="note_list">{PostNotes}</div>
- {/block:PostNotes}
- {/block:Posts}
- <!-------------- PAGING (BACK & NEXT) -------------->
- {block:Pagination}
- <div id="pagination">
- {block:PreviousPage}<a href="{PreviousPage}" class="prev"><i data-feather="arrow-left"></i></a>{/block:PreviousPage}
- {block:NextPage}<a href="{NextPage}" class="next"><i data-feather="arrow-right"></i></a>{/block:NextPage}
- </div>
- {/block:Pagination}
- </section>
- <section class="panel_b">
- <article id="about_me">
- <h2>About Me</h2>
- <div class="info">
- <p>
- <h4>Name:</h4><span> {text:Description Name}</span>
- </p>
- <p>
- <h4>Age:</h4><span> {text:Description Age}</span>
- </p>
- <p>
- <h4>Gender:</h4><span> {text:Description Gender}</span>
- </p>
- <p>
- <h4>Pronouns:</h4><span> {text:Description Pronouns}</span>
- </p>
- <p>
- <h4>Other: </h4><span> {text:Description Other}</span>
- </p>
- </div>
- </article>
- <div class="desc">
- <h2>Description</h2>
- {Description}
- </div>
- </section>
- <section class="panel_c">
- <h2>Navigation</h2>
- <a href="{text:URL 1}" class="link1"><div class="link">{text:URL 1 Label}</div></a>
- <a href="{text:URL 2}" class="link2"><div class="link">{text:URL 2 Label}</div></a>
- <a href="{text:URL 3}" class="link3"><div class="link">{text:URL 3 Label}</div></a>
- <a href="{text:URL 4}" class="link4"><div class="link">{text:URL 4 Label}</div></a>
- <a href="{text:URL 5}" class="link5"><div class="link">{text:URL 5 Label}</div></a>
- </section>
- <section class="panel_d">
- <h2>Ask</h2>
- <p>
- <iframe frameborder="0" scrolling="no" width="100%" height="190px" src="https://www.tumblr.com/ask_form/fallingthms.tumblr.com" id="ask_form"></iframe>
- </p>
- </section>
- <section class="panel_e">
- <h2>Submit</h2>
- <p>
- <iframe frameborder="0" border="0" scrolling="no" width="100%" height="650px" allowtransparency="true" src="https://www.tumblr.com/submit_form/fallingthms.tumblr.com"></iframe>
- </p>
- </section>
- </div> <!-- // .p-wrapper -->
- </div> <!-- // #carousel -->
- </div> <!-- // #container -->
- <footer>
- <a href="https://fallingforthemes.tumblr.com" class="thememaker">fallingforthms</a>
- </footer>
- <!-------------- SCRIPTS -------------->
- <script>
- feather.replace()
- </script>
- <script>
- $(".settings").click(function() {
- $( ".post_info" ).toggle( "fast", function() {});
- });
- </script>
- </body>
- </html>
Advertisement
Add Comment
Please, Sign In to add comment