Thanksgiving Tumblr Layouts - XquisiteKisses.com

★ Brushes ★ Font ★ Icons ★ Patterns ★ Tumblr Layouts ★ Models ★ Color Schemes ★ Fall Graphics

Preview Layout

Put this code under tumblr custom css

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>{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} <style type="text/css"> body{ background-image:url('https://res.cloudinary.com/girlycutegraphics/image/upload/v1604484012/autumn/thanks-bg01.png'); background-repeat:repeat; background-position:center; background-color:#8d847a; font:10pt arial; color:#ffffff; line-height:16px;} a,a:link,a:visited,a:active{ color:#ffffff; text-decoration:none;} a:hover{ color:#cac6c1; text-decoration:none;} .old a{ background-color:#110e0c; position:fixed; top:50%; right:50px; width:80px; height:57px; display:block; text-align:center; padding-top:23px; font-size:45pt; filter:alpha(opacity=90); opacity:0.9; -moz-border-radius:10px; border-radius:10px;} .old a:hover, .new a:hover{ color:#8b837a; background-color:#221d19;} .new a{ background-color:#110e0c; position:fixed; top:50%; left:50px; width:80px; height:57px; display:block; text-align:center; padding-top:23px; font-size:45pt; filter:alpha(opacity=90); opacity:0.9; -moz-border-radius:10px; border-radius:10px;} #container{ position:absolute; top:20px; left:50%; margin-left:-315px; width:630px; overflow:visible; background-color:transparent; border:none;} a.nav, .bottom a{ font-size:12pt; letter-spacing:-1px; padding:5px; background-color:#635b53; color:#110e0c; font-weight:bold; margin-right:5px; -moz-border-radius:5px; border-radius:5px;} a.nav:hover, .bottom a:hover{ background-color:#8d847a;} #main{margin:0;} #mainbox{ width:630px;} .content{ float:right; width:500px; background-color:#110e0c; padding:15px; margin-bottom:20px; border-bottom:10px solid #221d19; filter:alpha(opacity=90); opacity:0.9; -moz-border-radius:10px; border-radius:10px; min-height:80px;} #info{ float:left; width:100px;} .datebubble{ background-color:#221d19; padding:15px 0 0 0; text-align:center; font-weight:bold; margin:0 0 0 10px; width:64px; height:49px; filter:alpha(opacity=90); opacity:0.9; -moz-border-radius:10px; border-radius:10px;} .datebubble a{font-size:12pt;} .datebubble a:hover{color:#110e0c;} .notesbubble{ background-color:#cac6c1; padding:12px 0 0 0; text-align:center; font-weight:bold; margin:10px 0 0 45px; width:40px; height:28px; filter:alpha(opacity=90); opacity:0.9; -moz-border-radius:10px; border-radius:10px;} .notesbubble a{font-size:9pt; color:#110e0c;} .notesbubble a:hover{color:#635b53;} .portraitbubble{ margin:0 0 0 10px; width:64px; height:64px; filter:alpha(opacity=90); opacity:0.9;} .portraitbubble img{ -moz-border-radius:10px; border-radius:10px;} .clear{clear:both;} .bottom{ margin-top:20px; text-align:center;} .photo{text-align:center;} #footer{ clear:both; height:35px; width:630px margin:20px 0 20px 0; text-align:center; font-size:12pt; font-weight:bold; letter-spacing:-1px; color:#110e0c;} #footer a{color:#221d19!important;} #footer a:hover{color:#110e0c!important;} ul.chat{ list-style-type:none; margin:0 0 5px 0; padding:0;} li.odd{ font-weight:bold;} li.even{ font-weight:bold; color:#8b837a;} .quote{ line-height:18px; color:#635b53; letter-spacing:-2px; font-weight:bold; margin-bottom:5px; font-size:14pt; text-align:center;} .source, .caption{ text-align:center; font-weight:bold; font-size:11pt;} .audio{ padding:0; margin-left:10px; overflow:hidden; text-align:left; display:inline-block;} .ask{ background-color:#cac6c1; padding:10px; color:#110e0c!important; font-weight:bold; display:block; margin-bottom:5px; -moz-border-radius:10px; border-radius:10px;} .ask a:hover{ color:#110e0c!important;} h1, h1 a, a.link{ line-height:24px; font-size:20pt; letter-spacing:-2px; color:#ffffff !important; padding:0; margin-top:0; margin-bottom:5px; font-weight:bold;} h1 a:hover, a.link:hover{ color:#cac6c1 !important;} ul{list-style-type:dot;} blockquote{ font-style:normal !important; text-align:left !important; margin:0 0 0 10px; border-left:3px solid #8b837a; padding:0 0 0 6px;} ol.notes { margin:0 0 20px 60px; width:530px; list-style-type: none;} ol.notes li.note { color:#cac6c1; border:none; padding:4px; background-color:#110e0c; border-bottom:3px solid #221d19; filter:alpha(opacity=90); opacity:0.9; -moz-border-radius:3px; border-radius:3px;} ol.notes li.note img.avatar { vertical-align:-4px; margin-right:10px; width:16px; height:16px;} {CustomCSS} </style> </head> <body> <div id="container"> <div class="old"> {block:Pagination} {block:NextPage} <a href="{NextPage}"> » </a> {/block:NextPage} {/block:Pagination} </div> <div class="new"> {block:Pagination} {block:PreviousPage} <a href="{PreviousPage}"> « </a> {/block:PreviousPage} {/block:Pagination} </div> <div id="main"> <div id="mainbox"> <div id="info"> <div class="portraitbubble"> <img decoding="async" src="{PortraitURL-64}"> </div> </div> <div class="content"> <h1>{Title}</h1> {Description}<br><br> <center> <a class="nav" href="/">Home</a> <a class="nav" href="/archive">Archive</a> <a class="nav" href="{RSS}">RSS</a> <a class="nav" href="/ask">Ask</a> {block:HasPages} {block:Pages} <a class="nav" href="{URL}">{Label}</a> {/block:Pages} {/block:HasPages} </center> </div> </div> <div class="clear"></div> {block:Posts} <div id="mainbox"> <div id="info"> <div class="datebubble"> {block:Date} <a href="{Permalink}"> {MonthNumber}.{DayOfMonth}<br>{Year} </a> {/block:Date} </div> <div class="notesbubble"> {block:NoteCount} <a href="{Permalink}#notes">{NoteCount}</a> {/block:NoteCount} </div> </div> <div class="content"> {block:Text} {block:Title} <h1><a href="{Permalink}">{Title}</a></h1> {/block:Title} {Body} {/block:Text} {block:Photo} <div class="photo"> {LinkOpenTag}<img decoding="async" src="{PhotoURL-500}" alt="{PhotoAlt}" border="0"/>{LinkCloseTag} </div> {block:Caption} {Caption} {/block:Caption} {/block:Photo} {block:Photoset} <div class="photo"> {Photoset-500} </div> {block:Caption} {Caption} {/block:Caption} {/block:Photoset} {block:Quote} <div class="quote"> {Quote} </div> {block:Source} <div class="source"> {Source} </div> {/block:Source} {/block:Quote} {block:Link} <a href="{URL}" class="link" {Target}>{Name}</a> {block:Description} {Description} {/block:Description} {/block:Link} {block:Chat} {block:Title} <h2><a href="{Permalink}">{Title}</a></h2> {/block:Title} <ul class="chat"> {block:Lines} <li class="{Alt} user_{UserNumber}"> {block:Label} <span class="label">{Label}</span> {/block:Label} {Line} </li> {/block:Lines} </ul> </li> {/block:Chat} {block:Photoset} <div class="bigthings"> {Photoset-500} </div> {block:Caption} {Caption} {/block:Caption} {/block:Photoset} {block:Video} {Video-500} {block:Caption} {Caption} {/block:Caption} {/block:Video} {block:Answer} <div class="ask">{Asker} asked, “{Question}”</div> {Answer} {/block:Answer} {block:Audio} <table> <tr> <td> {block:AlbumArt} <img decoding="async" src="{AlbumArtURL}" style="width:120px; height:120px;"> {/block:AlbumArt} </td> <td> <div class="audio"> {AudioPlayerBlack}<br> {block:TrackName}”{TrackName}”{/block:TrackName} by {block:Artist}{Artist}{/block:Artist}<br> {block:Album}<strong>{Album}</strong>{/block:Album} </td></tr><tr><td colspan="2"> {block:Caption} {Caption} {/block:Caption} </td> </tr> </table> {/block:Audio} {block:HasTags} <div class="bottom"> {block:Tags} <a class="tags" href="{TagURL}">#{Tag}</a> {/block:Tags} </div> {/block:HasTags} </div></div><div class="clear"></div><div class="clear"></div> {PostNotes} {/block:Posts} </div> <div id="footer"> Designed by X Q U I S I T E K I S S E S. C O M <a href="http://xquisitekisses.com" target="_new"X Q U I S I T E K I S S E S . C O M</a>. Powered by <a href="http://tumblr.com" target="_new" rel="noopener noreferrer">Tumblr</a>. </div> </body> </html>

Preview Layout

Put this code under tumblr custom css

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>{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}

a,a:link,a:visited,a:active{
color:#ffffff;
text-decoration:none;}

a:hover{
color:#cac6c1;
text-decoration:none;}

.old a{
background-color:#110e0c;
position:fixed;
top:50%;
right:50px;
width:80px;
height:57px;
display:block;
text-align:center;
padding-top:23px;
font-size:45pt;
filter:alpha(opacity=90);
opacity:0.9;
-moz-border-radius:10px;
border-radius:10px;}

.old a:hover, .new a:hover{
color:#8b837a;
background-color:#221d19;}

.new a{
background-color:#110e0c;
position:fixed;
top:50%;
left:50px;
width:80px;
height:57px;
display:block;
text-align:center;
padding-top:23px;
font-size:45pt;
filter:alpha(opacity=90);
opacity:0.9;
-moz-border-radius:10px;
border-radius:10px;}

#container{
position:absolute;
top:20px;
left:50%;
margin-left:-315px;
width:630px;
overflow:visible;
background-color:transparent;
border:none;}

a.nav, .bottom a{
font-size:12pt;
letter-spacing:-1px;
padding:5px;
background-color:#635b53;
color:#110e0c;
font-weight:bold;
margin-right:5px;
-moz-border-radius:5px;
border-radius:5px;}

a.nav:hover, .bottom a:hover{
background-color:#8d847a;}

#main{margin:0;}

#mainbox{
width:630px;}

.content{
float:right;
width:500px;
background-color:#110e0c;
padding:15px;
margin-bottom:20px;
border-bottom:10px solid #221d19;
filter:alpha(opacity=90);
opacity:0.9;
-moz-border-radius:10px;
border-radius:10px;
min-height:80px;}

#info{
float:left;
width:100px;}

.datebubble{
background-color:#221d19;
padding:15px 0 0 0;
text-align:center;
font-weight:bold;
margin:0 0  0 10px;
width:64px;
height:49px;
filter:alpha(opacity=90);
opacity:0.9;
-moz-border-radius:10px;
border-radius:10px;}

.datebubble a{font-size:12pt;}
.datebubble a:hover{color:#110e0c;}

.notesbubble{
background-color:#cac6c1;
padding:12px 0 0 0;
text-align:center;
font-weight:bold;
margin:10px 0  0 45px;
width:40px;
height:28px;
filter:alpha(opacity=90);
opacity:0.9;
-moz-border-radius:10px;
border-radius:10px;}

.notesbubble a{font-size:9pt; color:#110e0c;}
.notesbubble a:hover{color:#635b53;}

.portraitbubble{
margin:0 0  0 10px;
width:64px;
height:64px;
filter:alpha(opacity=90);
opacity:0.9;}

.portraitbubble img{
-moz-border-radius:10px;
border-radius:10px;}

.clear{clear:both;}

.bottom{
margin-top:20px;
text-align:center;}

.photo{text-align:center;}

#footer{
clear:both;
height:35px;
width:630px
margin:20px 0 20px 0;
text-align:center;
font-size:12pt;
font-weight:bold;
letter-spacing:-1px;
color:#110e0c;}

#footer a{color:#221d19!important;}
#footer a:hover{color:#110e0c!important;}

ul.chat{
list-style-type:none;
margin:0 0 5px 0;
padding:0;}

li.odd{
font-weight:bold;}

li.even{
font-weight:bold;
color:#8b837a;}

.quote{
line-height:18px;
color:#635b53;
letter-spacing:-2px;
font-weight:bold;
margin-bottom:5px;
font-size:14pt;
text-align:center;}

.source, .caption{
text-align:center;
font-weight:bold;
font-size:11pt;}

.audio{
padding:0;
margin-left:10px;
overflow:hidden;
text-align:left;
display:inline-block;}

.ask{
background-color:#cac6c1;
padding:10px;
color:#110e0c!important;
font-weight:bold;
display:block;
margin-bottom:5px;
-moz-border-radius:10px;
border-radius:10px;}

.ask a:hover{
color:#110e0c!important;}

h1, h1 a, a.link{
line-height:24px;
font-size:20pt;
letter-spacing:-2px;
color:#ffffff !important;
padding:0;
margin-top:0;
margin-bottom:5px;
font-weight:bold;}

h1 a:hover, a.link:hover{
color:#cac6c1 !important;}

ul{list-style-type:dot;}

blockquote{
font-style:normal !important;
text-align:left !important;
margin:0 0 0 10px;
border-left:3px solid #8b837a;
padding:0 0 0 6px;}

ol.notes {
margin:0 0 20px 60px;
width:530px;
list-style-type: none;}

ol.notes li.note {
color:#cac6c1;
border:none;
padding:4px;
background-color:#110e0c;
border-bottom:3px solid #221d19;
filter:alpha(opacity=90);
opacity:0.9;
-moz-border-radius:3px;
border-radius:3px;}

ol.notes li.note img.avatar {
vertical-align:-4px;
margin-right:10px;
width:16px;
height:16px;}

{CustomCSS}
</style>
</head>

<body>

<div class="old">
{block:Pagination}
{block:NextPage}
<a href="{NextPage}">
»
</a>
{/block:NextPage}
{/block:Pagination}
</div>

<div class="new">
{block:Pagination}
{block:PreviousPage}
<a href="{PreviousPage}">
«
</a>
{/block:PreviousPage}
{/block:Pagination}
</div>

<div id="mainbox">
<div id="info">
<div class="portraitbubble">
<img decoding="async" src="{PortraitURL-64}">
</div>
</div>
<div class="content">
<h1>{Title}</h1>
{Description}<br><br>
<center>
<a class="nav" href="/">Home</a>
<a class="nav" href="/archive">Archive</a>
<a class="nav" href="{RSS}">RSS</a>
<a class="nav" href="/ask">Ask</a>
{block:HasPages}
{block:Pages}
<a class="nav" href="{URL}">{Label}</a>
{/block:Pages}
{/block:HasPages}
</center>
</div>
</div>
<div class="clear"></div>

{block:Posts}

<div id="mainbox">
<div id="info">
<div class="datebubble">
{block:Date}
<a href="{Permalink}">
{MonthNumber}.{DayOfMonth}<br>{Year}
</a>
{/block:Date}
</div>
<div class="notesbubble">
{block:NoteCount}
<a href="{Permalink}#notes">{NoteCount}</a>
{/block:NoteCount}
</div>
</div>
<div class="content">

{block:Text}
{block:Title}
<h1><a href="{Permalink}">{Title}</a></h1>
{/block:Title}
{Body}
{/block:Text}

{block:Photo}
<div class="photo">
{LinkOpenTag}<img decoding="async" src="{PhotoURL-500}" alt="{PhotoAlt}" border="0"/>{LinkCloseTag}
</div>
{block:Caption}
{Caption}
{/block:Caption}
{/block:Photo}

{block:Photoset}
<div class="photo">
{Photoset-500}
</div>
{block:Caption}
{Caption}
{/block:Caption}
{/block:Photoset}

{block:Quote}
<div class="quote">
{Quote}
</div>
{block:Source}
<div class="source">
{Source}
</div>
{/block:Source}
{/block:Quote}

{block:Link}
<a href="{URL}" class="link" {Target}>{Name}</a>
{block:Description}
{Description}
{/block:Description}
{/block:Link}

{block:Chat}
{block:Title}
<h2><a href="{Permalink}">{Title}</a></h2>
{/block:Title}
<ul class="chat">
{block:Lines}
<li class="{Alt} user_{UserNumber}">
{block:Label}
<span class="label">{Label}</span>
{/block:Label}
{Line}
 </li>
{/block:Lines}
</ul>
</li>
{/block:Chat}

{block:Photoset}
<div class="bigthings">
{Photoset-500}
</div>
{block:Caption}
{Caption}
{/block:Caption}
{/block:Photoset}

{block:Video}
{Video-500}
{block:Caption}
{Caption}
{/block:Caption}
{/block:Video}

{block:Answer}
<div class="ask">{Asker} asked, “{Question}”</div>
{Answer}
{/block:Answer}

{block:Audio}
<table>
<tr>
<td>
{block:AlbumArt}
<img decoding="async" src="{AlbumArtURL}" style="width:120px; height:120px;">
{/block:AlbumArt}    
</td>
<td>
<div class="audio">
{AudioPlayerBlack}<br>
{block:TrackName}”{TrackName}”{/block:TrackName} by
{block:Artist}{Artist}{/block:Artist}<br>
{block:Album}<strong>{Album}</strong>{/block:Album}
</td></tr><tr><td colspan="2">
{block:Caption}
{Caption}
{/block:Caption}
</td>
</tr>
</table>
{/block:Audio}

{block:HasTags}
<div class="bottom">
{block:Tags} 
<a class="tags" href="{TagURL}">#{Tag}</a>
{/block:Tags}
</div>
{/block:HasTags}
</div></div><div class="clear"></div><div class="clear"></div>

{PostNotes}
{/block:Posts}
</div>

<div id="footer"> Designed by X Q U I S I T E K I S S E S. C O M <a href="http://xquisitekisses.com" target="_new"X Q U I S I T E K I S S E S . C O M</a>.
Powered by <a href="http://tumblr.com" target="_new" rel="noopener noreferrer">Tumblr</a>.

</div>

</body>
</html>

Preview Layout

Put this code under tumblr custom css

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>{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} <style type="text/css"> body{ background-image:url('https://res.cloudinary.com/girlycutegraphics/image/upload/v1604484012/autumn/thanks-bg03.png'); background-repeat:repeat; background-position:center; background-color:#8d847a; font:10pt arial; color:#ffffff; line-height:16px;} a,a:link,a:visited,a:active{ color:#ffffff; text-decoration:none;} a:hover{ color:#cac6c1; text-decoration:none;} .old a{ background-color:#110e0c; position:fixed; top:50%; right:50px; width:80px; height:57px; display:block; text-align:center; padding-top:23px; font-size:45pt; filter:alpha(opacity=90); opacity:0.9; -moz-border-radius:10px; border-radius:10px;} .old a:hover, .new a:hover{ color:#8b837a; background-color:#221d19;} .new a{ background-color:#110e0c; position:fixed; top:50%; left:50px; width:80px; height:57px; display:block; text-align:center; padding-top:23px; font-size:45pt; filter:alpha(opacity=90); opacity:0.9; -moz-border-radius:10px; border-radius:10px;} #container{ position:absolute; top:20px; left:50%; margin-left:-315px; width:630px; overflow:visible; background-color:transparent; border:none;} a.nav, .bottom a{ font-size:12pt; letter-spacing:-1px; padding:5px; background-color:#635b53; color:#110e0c; font-weight:bold; margin-right:5px; -moz-border-radius:5px; border-radius:5px;} a.nav:hover, .bottom a:hover{ background-color:#8d847a;} #main{margin:0;} #mainbox{ width:630px;} .content{ float:right; width:500px; background-color:#110e0c; padding:15px; margin-bottom:20px; border-bottom:10px solid #221d19; filter:alpha(opacity=90); opacity:0.9; -moz-border-radius:10px; border-radius:10px; min-height:80px;} #info{ float:left; width:100px;} .datebubble{ background-color:#221d19; padding:15px 0 0 0; text-align:center; font-weight:bold; margin:0 0 0 10px; width:64px; height:49px; filter:alpha(opacity=90); opacity:0.9; -moz-border-radius:10px; border-radius:10px;} .datebubble a{font-size:12pt;} .datebubble a:hover{color:#110e0c;} .notesbubble{ background-color:#cac6c1; padding:12px 0 0 0; text-align:center; font-weight:bold; margin:10px 0 0 45px; width:40px; height:28px; filter:alpha(opacity=90); opacity:0.9; -moz-border-radius:10px; border-radius:10px;} .notesbubble a{font-size:9pt; color:#110e0c;} .notesbubble a:hover{color:#635b53;} .portraitbubble{ margin:0 0 0 10px; width:64px; height:64px; filter:alpha(opacity=90); opacity:0.9;} .portraitbubble img{ -moz-border-radius:10px; border-radius:10px;} .clear{clear:both;} .bottom{ margin-top:20px; text-align:center;} .photo{text-align:center;} #footer{ clear:both; height:35px; width:630px margin:20px 0 20px 0; text-align:center; font-size:12pt; font-weight:bold; letter-spacing:-1px; color:#110e0c;} #footer a{color:#221d19!important;} #footer a:hover{color:#110e0c!important;} ul.chat{ list-style-type:none; margin:0 0 5px 0; padding:0;} li.odd{ font-weight:bold;} li.even{ font-weight:bold; color:#8b837a;} .quote{ line-height:18px; color:#635b53; letter-spacing:-2px; font-weight:bold; margin-bottom:5px; font-size:14pt; text-align:center;} .source, .caption{ text-align:center; font-weight:bold; font-size:11pt;} .audio{ padding:0; margin-left:10px; overflow:hidden; text-align:left; display:inline-block;} .ask{ background-color:#cac6c1; padding:10px; color:#110e0c!important; font-weight:bold; display:block; margin-bottom:5px; -moz-border-radius:10px; border-radius:10px;} .ask a:hover{ color:#110e0c!important;} h1, h1 a, a.link{ line-height:24px; font-size:20pt; letter-spacing:-2px; color:#ffffff !important; padding:0; margin-top:0; margin-bottom:5px; font-weight:bold;} h1 a:hover, a.link:hover{ color:#cac6c1 !important;} ul{list-style-type:dot;} blockquote{ font-style:normal !important; text-align:left !important; margin:0 0 0 10px; border-left:3px solid #8b837a; padding:0 0 0 6px;} ol.notes { margin:0 0 20px 60px; width:530px; list-style-type: none;} ol.notes li.note { color:#cac6c1; border:none; padding:4px; background-color:#110e0c; border-bottom:3px solid #221d19; filter:alpha(opacity=90); opacity:0.9; -moz-border-radius:3px; border-radius:3px;} ol.notes li.note img.avatar { vertical-align:-4px; margin-right:10px; width:16px; height:16px;} {CustomCSS} </style> </head> <body> <div id="container"> <div class="old"> {block:Pagination} {block:NextPage} <a href="{NextPage}"> » </a> {/block:NextPage} {/block:Pagination} </div> <div class="new"> {block:Pagination} {block:PreviousPage} <a href="{PreviousPage}"> « </a> {/block:PreviousPage} {/block:Pagination} </div> <div id="main"> <div id="mainbox"> <div id="info"> <div class="portraitbubble"> <img decoding="async" src="{PortraitURL-64}"> </div> </div> <div class="content"> <h1>{Title}</h1> {Description}<br><br> <center> <a class="nav" href="/">Home</a> <a class="nav" href="/archive">Archive</a> <a class="nav" href="{RSS}">RSS</a> <a class="nav" href="/ask">Ask</a> {block:HasPages} {block:Pages} <a class="nav" href="{URL}">{Label}</a> {/block:Pages} {/block:HasPages} </center> </div> </div> <div class="clear"></div> {block:Posts} <div id="mainbox"> <div id="info"> <div class="datebubble"> {block:Date} <a href="{Permalink}"> {MonthNumber}.{DayOfMonth}<br>{Year} </a> {/block:Date} </div> <div class="notesbubble"> {block:NoteCount} <a href="{Permalink}#notes">{NoteCount}</a> {/block:NoteCount} </div> </div> <div class="content"> {block:Text} {block:Title} <h1><a href="{Permalink}">{Title}</a></h1> {/block:Title} {Body} {/block:Text} {block:Photo} <div class="photo"> {LinkOpenTag}<img decoding="async" src="{PhotoURL-500}" alt="{PhotoAlt}" border="0"/>{LinkCloseTag} </div> {block:Caption} {Caption} {/block:Caption} {/block:Photo} {block:Photoset} <div class="photo"> {Photoset-500} </div> {block:Caption} {Caption} {/block:Caption} {/block:Photoset} {block:Quote} <div class="quote"> {Quote} </div> {block:Source} <div class="source"> {Source} </div> {/block:Source} {/block:Quote} {block:Link} <a href="{URL}" class="link" {Target}>{Name}</a> {block:Description} {Description} {/block:Description} {/block:Link} {block:Chat} {block:Title} <h2><a href="{Permalink}">{Title}</a></h2> {/block:Title} <ul class="chat"> {block:Lines} <li class="{Alt} user_{UserNumber}"> {block:Label} <span class="label">{Label}</span> {/block:Label} {Line} </li> {/block:Lines} </ul> </li> {/block:Chat} {block:Photoset} <div class="bigthings"> {Photoset-500} </div> {block:Caption} {Caption} {/block:Caption} {/block:Photoset} {block:Video} {Video-500} {block:Caption} {Caption} {/block:Caption} {/block:Video} {block:Answer} <div class="ask">{Asker} asked, “{Question}”</div> {Answer} {/block:Answer} {block:Audio} <table> <tr> <td> {block:AlbumArt} <img decoding="async" src="{AlbumArtURL}" style="width:120px; height:120px;"> {/block:AlbumArt} </td> <td> <div class="audio"> {AudioPlayerBlack}<br> {block:TrackName}”{TrackName}”{/block:TrackName} by {block:Artist}{Artist}{/block:Artist}<br> {block:Album}<strong>{Album}</strong>{/block:Album} </td></tr><tr><td colspan="2"> {block:Caption} {Caption} {/block:Caption} </td> </tr> </table> {/block:Audio} {block:HasTags} <div class="bottom"> {block:Tags} <a class="tags" href="{TagURL}">#{Tag}</a> {/block:Tags} </div> {/block:HasTags} </div></div><div class="clear"></div><div class="clear"></div> {PostNotes} {/block:Posts} </div> <div id="footer"> Designed by X Q U I S I T E K I S S E S. C O M <a href="http://xquisitekisses.com" target="_new"X Q U I S I T E K I S S E S . C O M</a>. Powered by <a href="http://tumblr.com" target="_new" rel="noopener noreferrer">Tumblr</a>. </div> </body> </html>

Preview Layout

Put this code under tumblr custom css

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>{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} <style type="text/css"> body{ background-image:url('https://res.cloudinary.com/girlycutegraphics/image/upload/v1604484012/autumn/thanks-bg04.png'); background-repeat:repeat; background-position:center; background-color:#8d847a; font:10pt arial; color:#ffffff; line-height:16px;} a,a:link,a:visited,a:active{ color:#ffffff; text-decoration:none;} a:hover{ color:#cac6c1; text-decoration:none;} .old a{ background-color:#110e0c; position:fixed; top:50%; right:50px; width:80px; height:57px; display:block; text-align:center; padding-top:23px; font-size:45pt; filter:alpha(opacity=90); opacity:0.9; -moz-border-radius:10px; border-radius:10px;} .old a:hover, .new a:hover{ color:#8b837a; background-color:#221d19;} .new a{ background-color:#110e0c; position:fixed; top:50%; left:50px; width:80px; height:57px; display:block; text-align:center; padding-top:23px; font-size:45pt; filter:alpha(opacity=90); opacity:0.9; -moz-border-radius:10px; border-radius:10px;} #container{ position:absolute; top:20px; left:50%; margin-left:-315px; width:630px; overflow:visible; background-color:transparent; border:none;} a.nav, .bottom a{ font-size:12pt; letter-spacing:-1px; padding:5px; background-color:#635b53; color:#110e0c; font-weight:bold; margin-right:5px; -moz-border-radius:5px; border-radius:5px;} a.nav:hover, .bottom a:hover{ background-color:#8d847a;} #main{margin:0;} #mainbox{ width:630px;} .content{ float:right; width:500px; background-color:#110e0c; padding:15px; margin-bottom:20px; border-bottom:10px solid #221d19; filter:alpha(opacity=90); opacity:0.9; -moz-border-radius:10px; border-radius:10px; min-height:80px;} #info{ float:left; width:100px;} .datebubble{ background-color:#221d19; padding:15px 0 0 0; text-align:center; font-weight:bold; margin:0 0 0 10px; width:64px; height:49px; filter:alpha(opacity=90); opacity:0.9; -moz-border-radius:10px; border-radius:10px;} .datebubble a{font-size:12pt;} .datebubble a:hover{color:#110e0c;} .notesbubble{ background-color:#cac6c1; padding:12px 0 0 0; text-align:center; font-weight:bold; margin:10px 0 0 45px; width:40px; height:28px; filter:alpha(opacity=90); opacity:0.9; -moz-border-radius:10px; border-radius:10px;} .notesbubble a{font-size:9pt; color:#110e0c;} .notesbubble a:hover{color:#635b53;} .portraitbubble{ margin:0 0 0 10px; width:64px; height:64px; filter:alpha(opacity=90); opacity:0.9;} .portraitbubble img{ -moz-border-radius:10px; border-radius:10px;} .clear{clear:both;} .bottom{ margin-top:20px; text-align:center;} .photo{text-align:center;} #footer{ clear:both; height:35px; width:630px margin:20px 0 20px 0; text-align:center; font-size:12pt; font-weight:bold; letter-spacing:-1px; color:#110e0c;} #footer a{color:#221d19!important;} #footer a:hover{color:#110e0c!important;} ul.chat{ list-style-type:none; margin:0 0 5px 0; padding:0;} li.odd{ font-weight:bold;} li.even{ font-weight:bold; color:#8b837a;} .quote{ line-height:18px; color:#635b53; letter-spacing:-2px; font-weight:bold; margin-bottom:5px; font-size:14pt; text-align:center;} .source, .caption{ text-align:center; font-weight:bold; font-size:11pt;} .audio{ padding:0; margin-left:10px; overflow:hidden; text-align:left; display:inline-block;} .ask{ background-color:#cac6c1; padding:10px; color:#110e0c!important; font-weight:bold; display:block; margin-bottom:5px; -moz-border-radius:10px; border-radius:10px;} .ask a:hover{ color:#110e0c!important;} h1, h1 a, a.link{ line-height:24px; font-size:20pt; letter-spacing:-2px; color:#ffffff !important; padding:0; margin-top:0; margin-bottom:5px; font-weight:bold;} h1 a:hover, a.link:hover{ color:#cac6c1 !important;} ul{list-style-type:dot;} blockquote{ font-style:normal !important; text-align:left !important; margin:0 0 0 10px; border-left:3px solid #8b837a; padding:0 0 0 6px;} ol.notes { margin:0 0 20px 60px; width:530px; list-style-type: none;} ol.notes li.note { color:#cac6c1; border:none; padding:4px; background-color:#110e0c; border-bottom:3px solid #221d19; filter:alpha(opacity=90); opacity:0.9; -moz-border-radius:3px; border-radius:3px;} ol.notes li.note img.avatar { vertical-align:-4px; margin-right:10px; width:16px; height:16px;} {CustomCSS} </style> </head> <body> <div id="container"> <div class="old"> {block:Pagination} {block:NextPage} <a href="{NextPage}"> » </a> {/block:NextPage} {/block:Pagination} </div> <div class="new"> {block:Pagination} {block:PreviousPage} <a href="{PreviousPage}"> « </a> {/block:PreviousPage} {/block:Pagination} </div> <div id="main"> <div id="mainbox"> <div id="info"> <div class="portraitbubble"> <img decoding="async" src="{PortraitURL-64}"> </div> </div> <div class="content"> <h1>{Title}</h1> {Description}<br><br> <center> <a class="nav" href="/">Home</a> <a class="nav" href="/archive">Archive</a> <a class="nav" href="{RSS}">RSS</a> <a class="nav" href="/ask">Ask</a> {block:HasPages} {block:Pages} <a class="nav" href="{URL}">{Label}</a> {/block:Pages} {/block:HasPages} </center> </div> </div> <div class="clear"></div> {block:Posts} <div id="mainbox"> <div id="info"> <div class="datebubble"> {block:Date} <a href="{Permalink}"> {MonthNumber}.{DayOfMonth}<br>{Year} </a> {/block:Date} </div> <div class="notesbubble"> {block:NoteCount} <a href="{Permalink}#notes">{NoteCount}</a> {/block:NoteCount} </div> </div> <div class="content"> {block:Text} {block:Title} <h1><a href="{Permalink}">{Title}</a></h1> {/block:Title} {Body} {/block:Text} {block:Photo} <div class="photo"> {LinkOpenTag}<img decoding="async" src="{PhotoURL-500}" alt="{PhotoAlt}" border="0"/>{LinkCloseTag} </div> {block:Caption} {Caption} {/block:Caption} {/block:Photo} {block:Photoset} <div class="photo"> {Photoset-500} </div> {block:Caption} {Caption} {/block:Caption} {/block:Photoset} {block:Quote} <div class="quote"> {Quote} </div> {block:Source} <div class="source"> {Source} </div> {/block:Source} {/block:Quote} {block:Link} <a href="{URL}" class="link" {Target}>{Name}</a> {block:Description} {Description} {/block:Description} {/block:Link} {block:Chat} {block:Title} <h2><a href="{Permalink}">{Title}</a></h2> {/block:Title} <ul class="chat"> {block:Lines} <li class="{Alt} user_{UserNumber}"> {block:Label} <span class="label">{Label}</span> {/block:Label} {Line} </li> {/block:Lines} </ul> </li> {/block:Chat} {block:Photoset} <div class="bigthings"> {Photoset-500} </div> {block:Caption} {Caption} {/block:Caption} {/block:Photoset} {block:Video} {Video-500} {block:Caption} {Caption} {/block:Caption} {/block:Video} {block:Answer} <div class="ask">{Asker} asked, “{Question}”</div> {Answer} {/block:Answer} {block:Audio} <table> <tr> <td> {block:AlbumArt} <img decoding="async" src="{AlbumArtURL}" style="width:120px; height:120px;"> {/block:AlbumArt} </td> <td> <div class="audio"> {AudioPlayerBlack}<br> {block:TrackName}”{TrackName}”{/block:TrackName} by {block:Artist}{Artist}{/block:Artist}<br> {block:Album}<strong>{Album}</strong>{/block:Album} </td></tr><tr><td colspan="2"> {block:Caption} {Caption} {/block:Caption} </td> </tr> </table> {/block:Audio} {block:HasTags} <div class="bottom"> {block:Tags} <a class="tags" href="{TagURL}">#{Tag}</a> {/block:Tags} </div> {/block:HasTags} </div></div><div class="clear"></div><div class="clear"></div> {PostNotes} {/block:Posts} </div> <div id="footer"> Designed by X Q U I S I T E K I S S E S. C O M <a href="http://xquisitekisses.com" target="_new"X Q U I S I T E K I S S E S . C O M</a>. Powered by <a href="http://tumblr.com" target="_new" rel="noopener noreferrer">Tumblr</a>. </div> </body> </html>

Preview Layout

Put this code under tumblr custom css

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>{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} <style type="text/css"> body{ background-image:url('https://res.cloudinary.com/girlycutegraphics/image/upload/v1604484012/autumn/thanks-bg05.png'); background-repeat:repeat; background-position:center; background-color:#8d847a; font:10pt arial; color:#ffffff; line-height:16px;} a,a:link,a:visited,a:active{ color:#ffffff; text-decoration:none;} a:hover{ color:#cac6c1; text-decoration:none;} .old a{ background-color:#110e0c; position:fixed; top:50%; right:50px; width:80px; height:57px; display:block; text-align:center; padding-top:23px; font-size:45pt; filter:alpha(opacity=90); opacity:0.9; -moz-border-radius:10px; border-radius:10px;} .old a:hover, .new a:hover{ color:#8b837a; background-color:#221d19;} .new a{ background-color:#110e0c; position:fixed; top:50%; left:50px; width:80px; height:57px; display:block; text-align:center; padding-top:23px; font-size:45pt; filter:alpha(opacity=90); opacity:0.9; -moz-border-radius:10px; border-radius:10px;} #container{ position:absolute; top:20px; left:50%; margin-left:-315px; width:630px; overflow:visible; background-color:transparent; border:none;} a.nav, .bottom a{ font-size:12pt; letter-spacing:-1px; padding:5px; background-color:#635b53; color:#110e0c; font-weight:bold; margin-right:5px; -moz-border-radius:5px; border-radius:5px;} a.nav:hover, .bottom a:hover{ background-color:#8d847a;} #main{margin:0;} #mainbox{ width:630px;} .content{ float:right; width:500px; background-color:#110e0c; padding:15px; margin-bottom:20px; border-bottom:10px solid #221d19; filter:alpha(opacity=90); opacity:0.9; -moz-border-radius:10px; border-radius:10px; min-height:80px;} #info{ float:left; width:100px;} .datebubble{ background-color:#221d19; padding:15px 0 0 0; text-align:center; font-weight:bold; margin:0 0 0 10px; width:64px; height:49px; filter:alpha(opacity=90); opacity:0.9; -moz-border-radius:10px; border-radius:10px;} .datebubble a{font-size:12pt;} .datebubble a:hover{color:#110e0c;} .notesbubble{ background-color:#cac6c1; padding:12px 0 0 0; text-align:center; font-weight:bold; margin:10px 0 0 45px; width:40px; height:28px; filter:alpha(opacity=90); opacity:0.9; -moz-border-radius:10px; border-radius:10px;} .notesbubble a{font-size:9pt; color:#110e0c;} .notesbubble a:hover{color:#635b53;} .portraitbubble{ margin:0 0 0 10px; width:64px; height:64px; filter:alpha(opacity=90); opacity:0.9;} .portraitbubble img{ -moz-border-radius:10px; border-radius:10px;} .clear{clear:both;} .bottom{ margin-top:20px; text-align:center;} .photo{text-align:center;} #footer{ clear:both; height:35px; width:630px margin:20px 0 20px 0; text-align:center; font-size:12pt; font-weight:bold; letter-spacing:-1px; color:#110e0c;} #footer a{color:#221d19!important;} #footer a:hover{color:#110e0c!important;} ul.chat{ list-style-type:none; margin:0 0 5px 0; padding:0;} li.odd{ font-weight:bold;} li.even{ font-weight:bold; color:#8b837a;} .quote{ line-height:18px; color:#635b53; letter-spacing:-2px; font-weight:bold; margin-bottom:5px; font-size:14pt; text-align:center;} .source, .caption{ text-align:center; font-weight:bold; font-size:11pt;} .audio{ padding:0; margin-left:10px; overflow:hidden; text-align:left; display:inline-block;} .ask{ background-color:#cac6c1; padding:10px; color:#110e0c!important; font-weight:bold; display:block; margin-bottom:5px; -moz-border-radius:10px; border-radius:10px;} .ask a:hover{ color:#110e0c!important;} h1, h1 a, a.link{ line-height:24px; font-size:20pt; letter-spacing:-2px; color:#ffffff !important; padding:0; margin-top:0; margin-bottom:5px; font-weight:bold;} h1 a:hover, a.link:hover{ color:#cac6c1 !important;} ul{list-style-type:dot;} blockquote{ font-style:normal !important; text-align:left !important; margin:0 0 0 10px; border-left:3px solid #8b837a; padding:0 0 0 6px;} ol.notes { margin:0 0 20px 60px; width:530px; list-style-type: none;} ol.notes li.note { color:#cac6c1; border:none; padding:4px; background-color:#110e0c; border-bottom:3px solid #221d19; filter:alpha(opacity=90); opacity:0.9; -moz-border-radius:3px; border-radius:3px;} ol.notes li.note img.avatar { vertical-align:-4px; margin-right:10px; width:16px; height:16px;} {CustomCSS} </style> </head> <body> <div id="container"> <div class="old"> {block:Pagination} {block:NextPage} <a href="{NextPage}"> » </a> {/block:NextPage} {/block:Pagination} </div> <div class="new"> {block:Pagination} {block:PreviousPage} <a href="{PreviousPage}"> « </a> {/block:PreviousPage} {/block:Pagination} </div> <div id="main"> <div id="mainbox"> <div id="info"> <div class="portraitbubble"> <img decoding="async" src="{PortraitURL-64}"> </div> </div> <div class="content"> <h1>{Title}</h1> {Description}<br><br> <center> <a class="nav" href="/">Home</a> <a class="nav" href="/archive">Archive</a> <a class="nav" href="{RSS}">RSS</a> <a class="nav" href="/ask">Ask</a> {block:HasPages} {block:Pages} <a class="nav" href="{URL}">{Label}</a> {/block:Pages} {/block:HasPages} </center> </div> </div> <div class="clear"></div> {block:Posts} <div id="mainbox"> <div id="info"> <div class="datebubble"> {block:Date} <a href="{Permalink}"> {MonthNumber}.{DayOfMonth}<br>{Year} </a> {/block:Date} </div> <div class="notesbubble"> {block:NoteCount} <a href="{Permalink}#notes">{NoteCount}</a> {/block:NoteCount} </div> </div> <div class="content"> {block:Text} {block:Title} <h1><a href="{Permalink}">{Title}</a></h1> {/block:Title} {Body} {/block:Text} {block:Photo} <div class="photo"> {LinkOpenTag}<img decoding="async" src="{PhotoURL-500}" alt="{PhotoAlt}" border="0"/>{LinkCloseTag} </div> {block:Caption} {Caption} {/block:Caption} {/block:Photo} {block:Photoset} <div class="photo"> {Photoset-500} </div> {block:Caption} {Caption} {/block:Caption} {/block:Photoset} {block:Quote} <div class="quote"> {Quote} </div> {block:Source} <div class="source"> {Source} </div> {/block:Source} {/block:Quote} {block:Link} <a href="{URL}" class="link" {Target}>{Name}</a> {block:Description} {Description} {/block:Description} {/block:Link} {block:Chat} {block:Title} <h2><a href="{Permalink}">{Title}</a></h2> {/block:Title} <ul class="chat"> {block:Lines} <li class="{Alt} user_{UserNumber}"> {block:Label} <span class="label">{Label}</span> {/block:Label} {Line} </li> {/block:Lines} </ul> </li> {/block:Chat} {block:Photoset} <div class="bigthings"> {Photoset-500} </div> {block:Caption} {Caption} {/block:Caption} {/block:Photoset} {block:Video} {Video-500} {block:Caption} {Caption} {/block:Caption} {/block:Video} {block:Answer} <div class="ask">{Asker} asked, “{Question}”</div> {Answer} {/block:Answer} {block:Audio} <table> <tr> <td> {block:AlbumArt} <img decoding="async" src="{AlbumArtURL}" style="width:120px; height:120px;"> {/block:AlbumArt} </td> <td> <div class="audio"> {AudioPlayerBlack}<br> {block:TrackName}”{TrackName}”{/block:TrackName} by {block:Artist}{Artist}{/block:Artist}<br> {block:Album}<strong>{Album}</strong>{/block:Album} </td></tr><tr><td colspan="2"> {block:Caption} {Caption} {/block:Caption} </td> </tr> </table> {/block:Audio} {block:HasTags} <div class="bottom"> {block:Tags} <a class="tags" href="{TagURL}">#{Tag}</a> {/block:Tags} </div> {/block:HasTags} </div></div><div class="clear"></div><div class="clear"></div> {PostNotes} {/block:Posts} </div> <div id="footer"> Designed by X Q U I S I T E K I S S E S. C O M <a href="http://xquisitekisses.com" target="_new"X Q U I S I T E K I S S E S . C O M</a>. Powered by <a href="http://tumblr.com" target="_new" rel="noopener noreferrer">Tumblr</a>. </div> </body> </html>

Preview Layout

Put this code under tumblr custom css

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>{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} <style type="text/css"> body{ background-image:url('https://res.cloudinary.com/girlycutegraphics/image/upload/v1604484012/autumn/thanks-bg06.png'); background-repeat:repeat; background-position:center; background-color:#8d847a; font:10pt arial; color:#ffffff; line-height:16px;} a,a:link,a:visited,a:active{ color:#ffffff; text-decoration:none;} a:hover{ color:#cac6c1; text-decoration:none;} .old a{ background-color:#110e0c; position:fixed; top:50%; right:50px; width:80px; height:57px; display:block; text-align:center; padding-top:23px; font-size:45pt; filter:alpha(opacity=90); opacity:0.9; -moz-border-radius:10px; border-radius:10px;} .old a:hover, .new a:hover{ color:#8b837a; background-color:#221d19;} .new a{ background-color:#110e0c; position:fixed; top:50%; left:50px; width:80px; height:57px; display:block; text-align:center; padding-top:23px; font-size:45pt; filter:alpha(opacity=90); opacity:0.9; -moz-border-radius:10px; border-radius:10px;} #container{ position:absolute; top:20px; left:50%; margin-left:-315px; width:630px; overflow:visible; background-color:transparent; border:none;} a.nav, .bottom a{ font-size:12pt; letter-spacing:-1px; padding:5px; background-color:#635b53; color:#110e0c; font-weight:bold; margin-right:5px; -moz-border-radius:5px; border-radius:5px;} a.nav:hover, .bottom a:hover{ background-color:#8d847a;} #main{margin:0;} #mainbox{ width:630px;} .content{ float:right; width:500px; background-color:#110e0c; padding:15px; margin-bottom:20px; border-bottom:10px solid #221d19; filter:alpha(opacity=90); opacity:0.9; -moz-border-radius:10px; border-radius:10px; min-height:80px;} #info{ float:left; width:100px;} .datebubble{ background-color:#221d19; padding:15px 0 0 0; text-align:center; font-weight:bold; margin:0 0 0 10px; width:64px; height:49px; filter:alpha(opacity=90); opacity:0.9; -moz-border-radius:10px; border-radius:10px;} .datebubble a{font-size:12pt;} .datebubble a:hover{color:#110e0c;} .notesbubble{ background-color:#cac6c1; padding:12px 0 0 0; text-align:center; font-weight:bold; margin:10px 0 0 45px; width:40px; height:28px; filter:alpha(opacity=90); opacity:0.9; -moz-border-radius:10px; border-radius:10px;} .notesbubble a{font-size:9pt; color:#110e0c;} .notesbubble a:hover{color:#635b53;} .portraitbubble{ margin:0 0 0 10px; width:64px; height:64px; filter:alpha(opacity=90); opacity:0.9;} .portraitbubble img{ -moz-border-radius:10px; border-radius:10px;} .clear{clear:both;} .bottom{ margin-top:20px; text-align:center;} .photo{text-align:center;} #footer{ clear:both; height:35px; width:630px margin:20px 0 20px 0; text-align:center; font-size:12pt; font-weight:bold; letter-spacing:-1px; color:#110e0c;} #footer a{color:#221d19!important;} #footer a:hover{color:#110e0c!important;} ul.chat{ list-style-type:none; margin:0 0 5px 0; padding:0;} li.odd{ font-weight:bold;} li.even{ font-weight:bold; color:#8b837a;} .quote{ line-height:18px; color:#635b53; letter-spacing:-2px; font-weight:bold; margin-bottom:5px; font-size:14pt; text-align:center;} .source, .caption{ text-align:center; font-weight:bold; font-size:11pt;} .audio{ padding:0; margin-left:10px; overflow:hidden; text-align:left; display:inline-block;} .ask{ background-color:#cac6c1; padding:10px; color:#110e0c!important; font-weight:bold; display:block; margin-bottom:5px; -moz-border-radius:10px; border-radius:10px;} .ask a:hover{ color:#110e0c!important;} h1, h1 a, a.link{ line-height:24px; font-size:20pt; letter-spacing:-2px; color:#ffffff !important; padding:0; margin-top:0; margin-bottom:5px; font-weight:bold;} h1 a:hover, a.link:hover{ color:#cac6c1 !important;} ul{list-style-type:dot;} blockquote{ font-style:normal !important; text-align:left !important; margin:0 0 0 10px; border-left:3px solid #8b837a; padding:0 0 0 6px;} ol.notes { margin:0 0 20px 60px; width:530px; list-style-type: none;} ol.notes li.note { color:#cac6c1; border:none; padding:4px; background-color:#110e0c; border-bottom:3px solid #221d19; filter:alpha(opacity=90); opacity:0.9; -moz-border-radius:3px; border-radius:3px;} ol.notes li.note img.avatar { vertical-align:-4px; margin-right:10px; width:16px; height:16px;} {CustomCSS} </style> </head> <body> <div id="container"> <div class="old"> {block:Pagination} {block:NextPage} <a href="{NextPage}"> » </a> {/block:NextPage} {/block:Pagination} </div> <div class="new"> {block:Pagination} {block:PreviousPage} <a href="{PreviousPage}"> « </a> {/block:PreviousPage} {/block:Pagination} </div> <div id="main"> <div id="mainbox"> <div id="info"> <div class="portraitbubble"> <img decoding="async" src="{PortraitURL-64}"> </div> </div> <div class="content"> <h1>{Title}</h1> {Description}<br><br> <center> <a class="nav" href="/">Home</a> <a class="nav" href="/archive">Archive</a> <a class="nav" href="{RSS}">RSS</a> <a class="nav" href="/ask">Ask</a> {block:HasPages} {block:Pages} <a class="nav" href="{URL}">{Label}</a> {/block:Pages} {/block:HasPages} </center> </div> </div> <div class="clear"></div> {block:Posts} <div id="mainbox"> <div id="info"> <div class="datebubble"> {block:Date} <a href="{Permalink}"> {MonthNumber}.{DayOfMonth}<br>{Year} </a> {/block:Date} </div> <div class="notesbubble"> {block:NoteCount} <a href="{Permalink}#notes">{NoteCount}</a> {/block:NoteCount} </div> </div> <div class="content"> {block:Text} {block:Title} <h1><a href="{Permalink}">{Title}</a></h1> {/block:Title} {Body} {/block:Text} {block:Photo} <div class="photo"> {LinkOpenTag}<img decoding="async" src="{PhotoURL-500}" alt="{PhotoAlt}" border="0"/>{LinkCloseTag} </div> {block:Caption} {Caption} {/block:Caption} {/block:Photo} {block:Photoset} <div class="photo"> {Photoset-500} </div> {block:Caption} {Caption} {/block:Caption} {/block:Photoset} {block:Quote} <div class="quote"> {Quote} </div> {block:Source} <div class="source"> {Source} </div> {/block:Source} {/block:Quote} {block:Link} <a href="{URL}" class="link" {Target}>{Name}</a> {block:Description} {Description} {/block:Description} {/block:Link} {block:Chat} {block:Title} <h2><a href="{Permalink}">{Title}</a></h2> {/block:Title} <ul class="chat"> {block:Lines} <li class="{Alt} user_{UserNumber}"> {block:Label} <span class="label">{Label}</span> {/block:Label} {Line} </li> {/block:Lines} </ul> </li> {/block:Chat} {block:Photoset} <div class="bigthings"> {Photoset-500} </div> {block:Caption} {Caption} {/block:Caption} {/block:Photoset} {block:Video} {Video-500} {block:Caption} {Caption} {/block:Caption} {/block:Video} {block:Answer} <div class="ask">{Asker} asked, “{Question}”</div> {Answer} {/block:Answer} {block:Audio} <table> <tr> <td> {block:AlbumArt} <img decoding="async" src="{AlbumArtURL}" style="width:120px; height:120px;"> {/block:AlbumArt} </td> <td> <div class="audio"> {AudioPlayerBlack}<br> {block:TrackName}”{TrackName}”{/block:TrackName} by {block:Artist}{Artist}{/block:Artist}<br> {block:Album}<strong>{Album}</strong>{/block:Album} </td></tr><tr><td colspan="2"> {block:Caption} {Caption} {/block:Caption} </td> </tr> </table> {/block:Audio} {block:HasTags} <div class="bottom"> {block:Tags} <a class="tags" href="{TagURL}">#{Tag}</a> {/block:Tags} </div> {/block:HasTags} </div></div><div class="clear"></div><div class="clear"></div> {PostNotes} {/block:Posts} </div> <div id="footer"> Designed by X Q U I S I T E K I S S E S. C O M <a href="http://xquisitekisses.com" target="_new"X Q U I S I T E K I S S E S . C O M</a>. Powered by <a href="http://tumblr.com" target="_new" rel="noopener noreferrer">Tumblr</a>. </div> </body> </html>

Preview Layout

Put this code under tumblr custom css

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>{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} <style type="text/css"> body{ background-image:url('https://res.cloudinary.com/girlycutegraphics/image/upload/v1604484012/autumn/thanks-bg08.png'); background-repeat:repeat; background-position:center; background-color:#8d847a; font:10pt arial; color:#ffffff; line-height:16px;} a,a:link,a:visited,a:active{ color:#ffffff; text-decoration:none;} a:hover{ color:#cac6c1; text-decoration:none;} .old a{ background-color:#110e0c; position:fixed; top:50%; right:50px; width:80px; height:57px; display:block; text-align:center; padding-top:23px; font-size:45pt; filter:alpha(opacity=90); opacity:0.9; -moz-border-radius:10px; border-radius:10px;} .old a:hover, .new a:hover{ color:#8b837a; background-color:#221d19;} .new a{ background-color:#110e0c; position:fixed; top:50%; left:50px; width:80px; height:57px; display:block; text-align:center; padding-top:23px; font-size:45pt; filter:alpha(opacity=90); opacity:0.9; -moz-border-radius:10px; border-radius:10px;} #container{ position:absolute; top:20px; left:50%; margin-left:-315px; width:630px; overflow:visible; background-color:transparent; border:none;} a.nav, .bottom a{ font-size:12pt; letter-spacing:-1px; padding:5px; background-color:#635b53; color:#110e0c; font-weight:bold; margin-right:5px; -moz-border-radius:5px; border-radius:5px;} a.nav:hover, .bottom a:hover{ background-color:#8d847a;} #main{margin:0;} #mainbox{ width:630px;} .content{ float:right; width:500px; background-color:#110e0c; padding:15px; margin-bottom:20px; border-bottom:10px solid #221d19; filter:alpha(opacity=90); opacity:0.9; -moz-border-radius:10px; border-radius:10px; min-height:80px;} #info{ float:left; width:100px;} .datebubble{ background-color:#221d19; padding:15px 0 0 0; text-align:center; font-weight:bold; margin:0 0 0 10px; width:64px; height:49px; filter:alpha(opacity=90); opacity:0.9; -moz-border-radius:10px; border-radius:10px;} .datebubble a{font-size:12pt;} .datebubble a:hover{color:#110e0c;} .notesbubble{ background-color:#cac6c1; padding:12px 0 0 0; text-align:center; font-weight:bold; margin:10px 0 0 45px; width:40px; height:28px; filter:alpha(opacity=90); opacity:0.9; -moz-border-radius:10px; border-radius:10px;} .notesbubble a{font-size:9pt; color:#110e0c;} .notesbubble a:hover{color:#635b53;} .portraitbubble{ margin:0 0 0 10px; width:64px; height:64px; filter:alpha(opacity=90); opacity:0.9;} .portraitbubble img{ -moz-border-radius:10px; border-radius:10px;} .clear{clear:both;} .bottom{ margin-top:20px; text-align:center;} .photo{text-align:center;} #footer{ clear:both; height:35px; width:630px margin:20px 0 20px 0; text-align:center; font-size:12pt; font-weight:bold; letter-spacing:-1px; color:#110e0c;} #footer a{color:#221d19!important;} #footer a:hover{color:#110e0c!important;} ul.chat{ list-style-type:none; margin:0 0 5px 0; padding:0;} li.odd{ font-weight:bold;} li.even{ font-weight:bold; color:#8b837a;} .quote{ line-height:18px; color:#635b53; letter-spacing:-2px; font-weight:bold; margin-bottom:5px; font-size:14pt; text-align:center;} .source, .caption{ text-align:center; font-weight:bold; font-size:11pt;} .audio{ padding:0; margin-left:10px; overflow:hidden; text-align:left; display:inline-block;} .ask{ background-color:#cac6c1; padding:10px; color:#110e0c!important; font-weight:bold; display:block; margin-bottom:5px; -moz-border-radius:10px; border-radius:10px;} .ask a:hover{ color:#110e0c!important;} h1, h1 a, a.link{ line-height:24px; font-size:20pt; letter-spacing:-2px; color:#ffffff !important; padding:0; margin-top:0; margin-bottom:5px; font-weight:bold;} h1 a:hover, a.link:hover{ color:#cac6c1 !important;} ul{list-style-type:dot;} blockquote{ font-style:normal !important; text-align:left !important; margin:0 0 0 10px; border-left:3px solid #8b837a; padding:0 0 0 6px;} ol.notes { margin:0 0 20px 60px; width:530px; list-style-type: none;} ol.notes li.note { color:#cac6c1; border:none; padding:4px; background-color:#110e0c; border-bottom:3px solid #221d19; filter:alpha(opacity=90); opacity:0.9; -moz-border-radius:3px; border-radius:3px;} ol.notes li.note img.avatar { vertical-align:-4px; margin-right:10px; width:16px; height:16px;} {CustomCSS} </style> </head> <body> <div id="container"> <div class="old"> {block:Pagination} {block:NextPage} <a href="{NextPage}"> » </a> {/block:NextPage} {/block:Pagination} </div> <div class="new"> {block:Pagination} {block:PreviousPage} <a href="{PreviousPage}"> « </a> {/block:PreviousPage} {/block:Pagination} </div> <div id="main"> <div id="mainbox"> <div id="info"> <div class="portraitbubble"> <img decoding="async" src="{PortraitURL-64}"> </div> </div> <div class="content"> <h1>{Title}</h1> {Description}<br><br> <center> <a class="nav" href="/">Home</a> <a class="nav" href="/archive">Archive</a> <a class="nav" href="{RSS}">RSS</a> <a class="nav" href="/ask">Ask</a> {block:HasPages} {block:Pages} <a class="nav" href="{URL}">{Label}</a> {/block:Pages} {/block:HasPages} </center> </div> </div> <div class="clear"></div> {block:Posts} <div id="mainbox"> <div id="info"> <div class="datebubble"> {block:Date} <a href="{Permalink}"> {MonthNumber}.{DayOfMonth}<br>{Year} </a> {/block:Date} </div> <div class="notesbubble"> {block:NoteCount} <a href="{Permalink}#notes">{NoteCount}</a> {/block:NoteCount} </div> </div> <div class="content"> {block:Text} {block:Title} <h1><a href="{Permalink}">{Title}</a></h1> {/block:Title} {Body} {/block:Text} {block:Photo} <div class="photo"> {LinkOpenTag}<img decoding="async" src="{PhotoURL-500}" alt="{PhotoAlt}" border="0"/>{LinkCloseTag} </div> {block:Caption} {Caption} {/block:Caption} {/block:Photo} {block:Photoset} <div class="photo"> {Photoset-500} </div> {block:Caption} {Caption} {/block:Caption} {/block:Photoset} {block:Quote} <div class="quote"> {Quote} </div> {block:Source} <div class="source"> {Source} </div> {/block:Source} {/block:Quote} {block:Link} <a href="{URL}" class="link" {Target}>{Name}</a> {block:Description} {Description} {/block:Description} {/block:Link} {block:Chat} {block:Title} <h2><a href="{Permalink}">{Title}</a></h2> {/block:Title} <ul class="chat"> {block:Lines} <li class="{Alt} user_{UserNumber}"> {block:Label} <span class="label">{Label}</span> {/block:Label} {Line} </li> {/block:Lines} </ul> </li> {/block:Chat} {block:Photoset} <div class="bigthings"> {Photoset-500} </div> {block:Caption} {Caption} {/block:Caption} {/block:Photoset} {block:Video} {Video-500} {block:Caption} {Caption} {/block:Caption} {/block:Video} {block:Answer} <div class="ask">{Asker} asked, “{Question}”</div> {Answer} {/block:Answer} {block:Audio} <table> <tr> <td> {block:AlbumArt} <img decoding="async" src="{AlbumArtURL}" style="width:120px; height:120px;"> {/block:AlbumArt} </td> <td> <div class="audio"> {AudioPlayerBlack}<br> {block:TrackName}”{TrackName}”{/block:TrackName} by {block:Artist}{Artist}{/block:Artist}<br> {block:Album}<strong>{Album}</strong>{/block:Album} </td></tr><tr><td colspan="2"> {block:Caption} {Caption} {/block:Caption} </td> </tr> </table> {/block:Audio} {block:HasTags} <div class="bottom"> {block:Tags} <a class="tags" href="{TagURL}">#{Tag}</a> {/block:Tags} </div> {/block:HasTags} </div></div><div class="clear"></div><div class="clear"></div> {PostNotes} {/block:Posts} </div> <div id="footer"> Designed by X Q U I S I T E K I S S E S. C O M <a href="http://xquisitekisses.com" target="_new"X Q U I S I T E K I S S E S . C O M</a>. Powered by <a href="http://tumblr.com" target="_new" rel="noopener noreferrer">Tumblr</a>. </div> </body> </html>

Preview Layout

Put this code under tumblr custom css

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>{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} <style type="text/css"> body{ background-image:url('https://res.cloudinary.com/girlycutegraphics/image/upload/v1604484012/autumn/thanks-bg09.png'); background-repeat:repeat; background-position:center; background-color:#8d847a; font:10pt arial; color:#ffffff; line-height:16px;} a,a:link,a:visited,a:active{ color:#ffffff; text-decoration:none;} a:hover{ color:#cac6c1; text-decoration:none;} .old a{ background-color:#110e0c; position:fixed; top:50%; right:50px; width:80px; height:57px; display:block; text-align:center; padding-top:23px; font-size:45pt; filter:alpha(opacity=90); opacity:0.9; -moz-border-radius:10px; border-radius:10px;} .old a:hover, .new a:hover{ color:#8b837a; background-color:#221d19;} .new a{ background-color:#110e0c; position:fixed; top:50%; left:50px; width:80px; height:57px; display:block; text-align:center; padding-top:23px; font-size:45pt; filter:alpha(opacity=90); opacity:0.9; -moz-border-radius:10px; border-radius:10px;} #container{ position:absolute; top:20px; left:50%; margin-left:-315px; width:630px; overflow:visible; background-color:transparent; border:none;} a.nav, .bottom a{ font-size:12pt; letter-spacing:-1px; padding:5px; background-color:#635b53; color:#110e0c; font-weight:bold; margin-right:5px; -moz-border-radius:5px; border-radius:5px;} a.nav:hover, .bottom a:hover{ background-color:#8d847a;} #main{margin:0;} #mainbox{ width:630px;} .content{ float:right; width:500px; background-color:#110e0c; padding:15px; margin-bottom:20px; border-bottom:10px solid #221d19; filter:alpha(opacity=90); opacity:0.9; -moz-border-radius:10px; border-radius:10px; min-height:80px;} #info{ float:left; width:100px;} .datebubble{ background-color:#221d19; padding:15px 0 0 0; text-align:center; font-weight:bold; margin:0 0 0 10px; width:64px; height:49px; filter:alpha(opacity=90); opacity:0.9; -moz-border-radius:10px; border-radius:10px;} .datebubble a{font-size:12pt;} .datebubble a:hover{color:#110e0c;} .notesbubble{ background-color:#cac6c1; padding:12px 0 0 0; text-align:center; font-weight:bold; margin:10px 0 0 45px; width:40px; height:28px; filter:alpha(opacity=90); opacity:0.9; -moz-border-radius:10px; border-radius:10px;} .notesbubble a{font-size:9pt; color:#110e0c;} .notesbubble a:hover{color:#635b53;} .portraitbubble{ margin:0 0 0 10px; width:64px; height:64px; filter:alpha(opacity=90); opacity:0.9;} .portraitbubble img{ -moz-border-radius:10px; border-radius:10px;} .clear{clear:both;} .bottom{ margin-top:20px; text-align:center;} .photo{text-align:center;} #footer{ clear:both; height:35px; width:630px margin:20px 0 20px 0; text-align:center; font-size:12pt; font-weight:bold; letter-spacing:-1px; color:#110e0c;} #footer a{color:#221d19!important;} #footer a:hover{color:#110e0c!important;} ul.chat{ list-style-type:none; margin:0 0 5px 0; padding:0;} li.odd{ font-weight:bold;} li.even{ font-weight:bold; color:#8b837a;} .quote{ line-height:18px; color:#635b53; letter-spacing:-2px; font-weight:bold; margin-bottom:5px; font-size:14pt; text-align:center;} .source, .caption{ text-align:center; font-weight:bold; font-size:11pt;} .audio{ padding:0; margin-left:10px; overflow:hidden; text-align:left; display:inline-block;} .ask{ background-color:#cac6c1; padding:10px; color:#110e0c!important; font-weight:bold; display:block; margin-bottom:5px; -moz-border-radius:10px; border-radius:10px;} .ask a:hover{ color:#110e0c!important;} h1, h1 a, a.link{ line-height:24px; font-size:20pt; letter-spacing:-2px; color:#ffffff !important; padding:0; margin-top:0; margin-bottom:5px; font-weight:bold;} h1 a:hover, a.link:hover{ color:#cac6c1 !important;} ul{list-style-type:dot;} blockquote{ font-style:normal !important; text-align:left !important; margin:0 0 0 10px; border-left:3px solid #8b837a; padding:0 0 0 6px;} ol.notes { margin:0 0 20px 60px; width:530px; list-style-type: none;} ol.notes li.note { color:#cac6c1; border:none; padding:4px; background-color:#110e0c; border-bottom:3px solid #221d19; filter:alpha(opacity=90); opacity:0.9; -moz-border-radius:3px; border-radius:3px;} ol.notes li.note img.avatar { vertical-align:-4px; margin-right:10px; width:16px; height:16px;} {CustomCSS} </style> </head> <body> <div id="container"> <div class="old"> {block:Pagination} {block:NextPage} <a href="{NextPage}"> » </a> {/block:NextPage} {/block:Pagination} </div> <div class="new"> {block:Pagination} {block:PreviousPage} <a href="{PreviousPage}"> « </a> {/block:PreviousPage} {/block:Pagination} </div> <div id="main"> <div id="mainbox"> <div id="info"> <div class="portraitbubble"> <img decoding="async" src="{PortraitURL-64}"> </div> </div> <div class="content"> <h1>{Title}</h1> {Description}<br><br> <center> <a class="nav" href="/">Home</a> <a class="nav" href="/archive">Archive</a> <a class="nav" href="{RSS}">RSS</a> <a class="nav" href="/ask">Ask</a> {block:HasPages} {block:Pages} <a class="nav" href="{URL}">{Label}</a> {/block:Pages} {/block:HasPages} </center> </div> </div> <div class="clear"></div> {block:Posts} <div id="mainbox"> <div id="info"> <div class="datebubble"> {block:Date} <a href="{Permalink}"> {MonthNumber}.{DayOfMonth}<br>{Year} </a> {/block:Date} </div> <div class="notesbubble"> {block:NoteCount} <a href="{Permalink}#notes">{NoteCount}</a> {/block:NoteCount} </div> </div> <div class="content"> {block:Text} {block:Title} <h1><a href="{Permalink}">{Title}</a></h1> {/block:Title} {Body} {/block:Text} {block:Photo} <div class="photo"> {LinkOpenTag}<img decoding="async" src="{PhotoURL-500}" alt="{PhotoAlt}" border="0"/>{LinkCloseTag} </div> {block:Caption} {Caption} {/block:Caption} {/block:Photo} {block:Photoset} <div class="photo"> {Photoset-500} </div> {block:Caption} {Caption} {/block:Caption} {/block:Photoset} {block:Quote} <div class="quote"> {Quote} </div> {block:Source} <div class="source"> {Source} </div> {/block:Source} {/block:Quote} {block:Link} <a href="{URL}" class="link" {Target}>{Name}</a> {block:Description} {Description} {/block:Description} {/block:Link} {block:Chat} {block:Title} <h2><a href="{Permalink}">{Title}</a></h2> {/block:Title} <ul class="chat"> {block:Lines} <li class="{Alt} user_{UserNumber}"> {block:Label} <span class="label">{Label}</span> {/block:Label} {Line} </li> {/block:Lines} </ul> </li> {/block:Chat} {block:Photoset} <div class="bigthings"> {Photoset-500} </div> {block:Caption} {Caption} {/block:Caption} {/block:Photoset} {block:Video} {Video-500} {block:Caption} {Caption} {/block:Caption} {/block:Video} {block:Answer} <div class="ask">{Asker} asked, “{Question}”</div> {Answer} {/block:Answer} {block:Audio} <table> <tr> <td> {block:AlbumArt} <img decoding="async" src="{AlbumArtURL}" style="width:120px; height:120px;"> {/block:AlbumArt} </td> <td> <div class="audio"> {AudioPlayerBlack}<br> {block:TrackName}”{TrackName}”{/block:TrackName} by {block:Artist}{Artist}{/block:Artist}<br> {block:Album}<strong>{Album}</strong>{/block:Album} </td></tr><tr><td colspan="2"> {block:Caption} {Caption} {/block:Caption} </td> </tr> </table> {/block:Audio} {block:HasTags} <div class="bottom"> {block:Tags} <a class="tags" href="{TagURL}">#{Tag}</a> {/block:Tags} </div> {/block:HasTags} </div></div><div class="clear"></div><div class="clear"></div> {PostNotes} {/block:Posts} </div> <div id="footer"> Designed by X Q U I S I T E K I S S E S. C O M <a href="http://xquisitekisses.com" target="_new"X Q U I S I T E K I S S E S . C O M</a>. Powered by <a href="http://tumblr.com" target="_new" rel="noopener noreferrer">Tumblr</a>. </div> </body> </html>

Preview Layout

Put this code under tumblr custom css

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>{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} <style type="text/css"> body{ background-image:url('https://res.cloudinary.com/girlycutegraphics/image/upload/v1604484012/autumn/thanks-bg11.png'); background-repeat:repeat; background-position:center; background-color:#8d847a; font:10pt arial; color:#ffffff; line-height:16px;} a,a:link,a:visited,a:active{ color:#ffffff; text-decoration:none;} a:hover{ color:#cac6c1; text-decoration:none;} .old a{ background-color:#110e0c; position:fixed; top:50%; right:50px; width:80px; height:57px; display:block; text-align:center; padding-top:23px; font-size:45pt; filter:alpha(opacity=90); opacity:0.9; -moz-border-radius:10px; border-radius:10px;} .old a:hover, .new a:hover{ color:#8b837a; background-color:#221d19;} .new a{ background-color:#110e0c; position:fixed; top:50%; left:50px; width:80px; height:57px; display:block; text-align:center; padding-top:23px; font-size:45pt; filter:alpha(opacity=90); opacity:0.9; -moz-border-radius:10px; border-radius:10px;} #container{ position:absolute; top:20px; left:50%; margin-left:-315px; width:630px; overflow:visible; background-color:transparent; border:none;} a.nav, .bottom a{ font-size:12pt; letter-spacing:-1px; padding:5px; background-color:#635b53; color:#110e0c; font-weight:bold; margin-right:5px; -moz-border-radius:5px; border-radius:5px;} a.nav:hover, .bottom a:hover{ background-color:#8d847a;} #main{margin:0;} #mainbox{ width:630px;} .content{ float:right; width:500px; background-color:#110e0c; padding:15px; margin-bottom:20px; border-bottom:10px solid #221d19; filter:alpha(opacity=90); opacity:0.9; -moz-border-radius:10px; border-radius:10px; min-height:80px;} #info{ float:left; width:100px;} .datebubble{ background-color:#221d19; padding:15px 0 0 0; text-align:center; font-weight:bold; margin:0 0 0 10px; width:64px; height:49px; filter:alpha(opacity=90); opacity:0.9; -moz-border-radius:10px; border-radius:10px;} .datebubble a{font-size:12pt;} .datebubble a:hover{color:#110e0c;} .notesbubble{ background-color:#cac6c1; padding:12px 0 0 0; text-align:center; font-weight:bold; margin:10px 0 0 45px; width:40px; height:28px; filter:alpha(opacity=90); opacity:0.9; -moz-border-radius:10px; border-radius:10px;} .notesbubble a{font-size:9pt; color:#110e0c;} .notesbubble a:hover{color:#635b53;} .portraitbubble{ margin:0 0 0 10px; width:64px; height:64px; filter:alpha(opacity=90); opacity:0.9;} .portraitbubble img{ -moz-border-radius:10px; border-radius:10px;} .clear{clear:both;} .bottom{ margin-top:20px; text-align:center;} .photo{text-align:center;} #footer{ clear:both; height:35px; width:630px margin:20px 0 20px 0; text-align:center; font-size:12pt; font-weight:bold; letter-spacing:-1px; color:#110e0c;} #footer a{color:#221d19!important;} #footer a:hover{color:#110e0c!important;} ul.chat{ list-style-type:none; margin:0 0 5px 0; padding:0;} li.odd{ font-weight:bold;} li.even{ font-weight:bold; color:#8b837a;} .quote{ line-height:18px; color:#635b53; letter-spacing:-2px; font-weight:bold; margin-bottom:5px; font-size:14pt; text-align:center;} .source, .caption{ text-align:center; font-weight:bold; font-size:11pt;} .audio{ padding:0; margin-left:10px; overflow:hidden; text-align:left; display:inline-block;} .ask{ background-color:#cac6c1; padding:10px; color:#110e0c!important; font-weight:bold; display:block; margin-bottom:5px; -moz-border-radius:10px; border-radius:10px;} .ask a:hover{ color:#110e0c!important;} h1, h1 a, a.link{ line-height:24px; font-size:20pt; letter-spacing:-2px; color:#ffffff !important; padding:0; margin-top:0; margin-bottom:5px; font-weight:bold;} h1 a:hover, a.link:hover{ color:#cac6c1 !important;} ul{list-style-type:dot;} blockquote{ font-style:normal !important; text-align:left !important; margin:0 0 0 10px; border-left:3px solid #8b837a; padding:0 0 0 6px;} ol.notes { margin:0 0 20px 60px; width:530px; list-style-type: none;} ol.notes li.note { color:#cac6c1; border:none; padding:4px; background-color:#110e0c; border-bottom:3px solid #221d19; filter:alpha(opacity=90); opacity:0.9; -moz-border-radius:3px; border-radius:3px;} ol.notes li.note img.avatar { vertical-align:-4px; margin-right:10px; width:16px; height:16px;} {CustomCSS} </style> </head> <body> <div id="container"> <div class="old"> {block:Pagination} {block:NextPage} <a href="{NextPage}"> » </a> {/block:NextPage} {/block:Pagination} </div> <div class="new"> {block:Pagination} {block:PreviousPage} <a href="{PreviousPage}"> « </a> {/block:PreviousPage} {/block:Pagination} </div> <div id="main"> <div id="mainbox"> <div id="info"> <div class="portraitbubble"> <img decoding="async" src="{PortraitURL-64}"> </div> </div> <div class="content"> <h1>{Title}</h1> {Description}<br><br> <center> <a class="nav" href="/">Home</a> <a class="nav" href="/archive">Archive</a> <a class="nav" href="{RSS}">RSS</a> <a class="nav" href="/ask">Ask</a> {block:HasPages} {block:Pages} <a class="nav" href="{URL}">{Label}</a> {/block:Pages} {/block:HasPages} </center> </div> </div> <div class="clear"></div> {block:Posts} <div id="mainbox"> <div id="info"> <div class="datebubble"> {block:Date} <a href="{Permalink}"> {MonthNumber}.{DayOfMonth}<br>{Year} </a> {/block:Date} </div> <div class="notesbubble"> {block:NoteCount} <a href="{Permalink}#notes">{NoteCount}</a> {/block:NoteCount} </div> </div> <div class="content"> {block:Text} {block:Title} <h1><a href="{Permalink}">{Title}</a></h1> {/block:Title} {Body} {/block:Text} {block:Photo} <div class="photo"> {LinkOpenTag}<img decoding="async" src="{PhotoURL-500}" alt="{PhotoAlt}" border="0"/>{LinkCloseTag} </div> {block:Caption} {Caption} {/block:Caption} {/block:Photo} {block:Photoset} <div class="photo"> {Photoset-500} </div> {block:Caption} {Caption} {/block:Caption} {/block:Photoset} {block:Quote} <div class="quote"> {Quote} </div> {block:Source} <div class="source"> {Source} </div> {/block:Source} {/block:Quote} {block:Link} <a href="{URL}" class="link" {Target}>{Name}</a> {block:Description} {Description} {/block:Description} {/block:Link} {block:Chat} {block:Title} <h2><a href="{Permalink}">{Title}</a></h2> {/block:Title} <ul class="chat"> {block:Lines} <li class="{Alt} user_{UserNumber}"> {block:Label} <span class="label">{Label}</span> {/block:Label} {Line} </li> {/block:Lines} </ul> </li> {/block:Chat} {block:Photoset} <div class="bigthings"> {Photoset-500} </div> {block:Caption} {Caption} {/block:Caption} {/block:Photoset} {block:Video} {Video-500} {block:Caption} {Caption} {/block:Caption} {/block:Video} {block:Answer} <div class="ask">{Asker} asked, “{Question}”</div> {Answer} {/block:Answer} {block:Audio} <table> <tr> <td> {block:AlbumArt} <img decoding="async" src="{AlbumArtURL}" style="width:120px; height:120px;"> {/block:AlbumArt} </td> <td> <div class="audio"> {AudioPlayerBlack}<br> {block:TrackName}”{TrackName}”{/block:TrackName} by {block:Artist}{Artist}{/block:Artist}<br> {block:Album}<strong>{Album}</strong>{/block:Album} </td></tr><tr><td colspan="2"> {block:Caption} {Caption} {/block:Caption} </td> </tr> </table> {/block:Audio} {block:HasTags} <div class="bottom"> {block:Tags} <a class="tags" href="{TagURL}">#{Tag}</a> {/block:Tags} </div> {/block:HasTags} </div></div><div class="clear"></div><div class="clear"></div> {PostNotes} {/block:Posts} </div> <div id="footer"> Designed by X Q U I S I T E K I S S E S. C O M <a href="http://xquisitekisses.com" target="_new"X Q U I S I T E K I S S E S . C O M</a>. Powered by <a href="http://tumblr.com" target="_new" rel="noopener noreferrer">Tumblr</a>. </div> </body> </html>

Preview Layout

Put this code under tumblr custom css

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>{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} <style type="text/css"> body{ background-image:url('https://res.cloudinary.com/girlycutegraphics/image/upload/v1604484012/autumn/thanks-bg12.png'); background-repeat:repeat; background-position:center; background-color:#8d847a; font:10pt arial; color:#ffffff; line-height:16px;} a,a:link,a:visited,a:active{ color:#ffffff; text-decoration:none;} a:hover{ color:#cac6c1; text-decoration:none;} .old a{ background-color:#110e0c; position:fixed; top:50%; right:50px; width:80px; height:57px; display:block; text-align:center; padding-top:23px; font-size:45pt; filter:alpha(opacity=90); opacity:0.9; -moz-border-radius:10px; border-radius:10px;} .old a:hover, .new a:hover{ color:#8b837a; background-color:#221d19;} .new a{ background-color:#110e0c; position:fixed; top:50%; left:50px; width:80px; height:57px; display:block; text-align:center; padding-top:23px; font-size:45pt; filter:alpha(opacity=90); opacity:0.9; -moz-border-radius:10px; border-radius:10px;} #container{ position:absolute; top:20px; left:50%; margin-left:-315px; width:630px; overflow:visible; background-color:transparent; border:none;} a.nav, .bottom a{ font-size:12pt; letter-spacing:-1px; padding:5px; background-color:#635b53; color:#110e0c; font-weight:bold; margin-right:5px; -moz-border-radius:5px; border-radius:5px;} a.nav:hover, .bottom a:hover{ background-color:#8d847a;} #main{margin:0;} #mainbox{ width:630px;} .content{ float:right; width:500px; background-color:#110e0c; padding:15px; margin-bottom:20px; border-bottom:10px solid #221d19; filter:alpha(opacity=90); opacity:0.9; -moz-border-radius:10px; border-radius:10px; min-height:80px;} #info{ float:left; width:100px;} .datebubble{ background-color:#221d19; padding:15px 0 0 0; text-align:center; font-weight:bold; margin:0 0 0 10px; width:64px; height:49px; filter:alpha(opacity=90); opacity:0.9; -moz-border-radius:10px; border-radius:10px;} .datebubble a{font-size:12pt;} .datebubble a:hover{color:#110e0c;} .notesbubble{ background-color:#cac6c1; padding:12px 0 0 0; text-align:center; font-weight:bold; margin:10px 0 0 45px; width:40px; height:28px; filter:alpha(opacity=90); opacity:0.9; -moz-border-radius:10px; border-radius:10px;} .notesbubble a{font-size:9pt; color:#110e0c;} .notesbubble a:hover{color:#635b53;} .portraitbubble{ margin:0 0 0 10px; width:64px; height:64px; filter:alpha(opacity=90); opacity:0.9;} .portraitbubble img{ -moz-border-radius:10px; border-radius:10px;} .clear{clear:both;} .bottom{ margin-top:20px; text-align:center;} .photo{text-align:center;} #footer{ clear:both; height:35px; width:630px margin:20px 0 20px 0; text-align:center; font-size:12pt; font-weight:bold; letter-spacing:-1px; color:#110e0c;} #footer a{color:#221d19!important;} #footer a:hover{color:#110e0c!important;} ul.chat{ list-style-type:none; margin:0 0 5px 0; padding:0;} li.odd{ font-weight:bold;} li.even{ font-weight:bold; color:#8b837a;} .quote{ line-height:18px; color:#635b53; letter-spacing:-2px; font-weight:bold; margin-bottom:5px; font-size:14pt; text-align:center;} .source, .caption{ text-align:center; font-weight:bold; font-size:11pt;} .audio{ padding:0; margin-left:10px; overflow:hidden; text-align:left; display:inline-block;} .ask{ background-color:#cac6c1; padding:10px; color:#110e0c!important; font-weight:bold; display:block; margin-bottom:5px; -moz-border-radius:10px; border-radius:10px;} .ask a:hover{ color:#110e0c!important;} h1, h1 a, a.link{ line-height:24px; font-size:20pt; letter-spacing:-2px; color:#ffffff !important; padding:0; margin-top:0; margin-bottom:5px; font-weight:bold;} h1 a:hover, a.link:hover{ color:#cac6c1 !important;} ul{list-style-type:dot;} blockquote{ font-style:normal !important; text-align:left !important; margin:0 0 0 10px; border-left:3px solid #8b837a; padding:0 0 0 6px;} ol.notes { margin:0 0 20px 60px; width:530px; list-style-type: none;} ol.notes li.note { color:#cac6c1; border:none; padding:4px; background-color:#110e0c; border-bottom:3px solid #221d19; filter:alpha(opacity=90); opacity:0.9; -moz-border-radius:3px; border-radius:3px;} ol.notes li.note img.avatar { vertical-align:-4px; margin-right:10px; width:16px; height:16px;} {CustomCSS} </style> </head> <body> <div id="container"> <div class="old"> {block:Pagination} {block:NextPage} <a href="{NextPage}"> » </a> {/block:NextPage} {/block:Pagination} </div> <div class="new"> {block:Pagination} {block:PreviousPage} <a href="{PreviousPage}"> « </a> {/block:PreviousPage} {/block:Pagination} </div> <div id="main"> <div id="mainbox"> <div id="info"> <div class="portraitbubble"> <img decoding="async" src="{PortraitURL-64}"> </div> </div> <div class="content"> <h1>{Title}</h1> {Description}<br><br> <center> <a class="nav" href="/">Home</a> <a class="nav" href="/archive">Archive</a> <a class="nav" href="{RSS}">RSS</a> <a class="nav" href="/ask">Ask</a> {block:HasPages} {block:Pages} <a class="nav" href="{URL}">{Label}</a> {/block:Pages} {/block:HasPages} </center> </div> </div> <div class="clear"></div> {block:Posts} <div id="mainbox"> <div id="info"> <div class="datebubble"> {block:Date} <a href="{Permalink}"> {MonthNumber}.{DayOfMonth}<br>{Year} </a> {/block:Date} </div> <div class="notesbubble"> {block:NoteCount} <a href="{Permalink}#notes">{NoteCount}</a> {/block:NoteCount} </div> </div> <div class="content"> {block:Text} {block:Title} <h1><a href="{Permalink}">{Title}</a></h1> {/block:Title} {Body} {/block:Text} {block:Photo} <div class="photo"> {LinkOpenTag}<img decoding="async" src="{PhotoURL-500}" alt="{PhotoAlt}" border="0"/>{LinkCloseTag} </div> {block:Caption} {Caption} {/block:Caption} {/block:Photo} {block:Photoset} <div class="photo"> {Photoset-500} </div> {block:Caption} {Caption} {/block:Caption} {/block:Photoset} {block:Quote} <div class="quote"> {Quote} </div> {block:Source} <div class="source"> {Source} </div> {/block:Source} {/block:Quote} {block:Link} <a href="{URL}" class="link" {Target}>{Name}</a> {block:Description} {Description} {/block:Description} {/block:Link} {block:Chat} {block:Title} <h2><a href="{Permalink}">{Title}</a></h2> {/block:Title} <ul class="chat"> {block:Lines} <li class="{Alt} user_{UserNumber}"> {block:Label} <span class="label">{Label}</span> {/block:Label} {Line} </li> {/block:Lines} </ul> </li> {/block:Chat} {block:Photoset} <div class="bigthings"> {Photoset-500} </div> {block:Caption} {Caption} {/block:Caption} {/block:Photoset} {block:Video} {Video-500} {block:Caption} {Caption} {/block:Caption} {/block:Video} {block:Answer} <div class="ask">{Asker} asked, “{Question}”</div> {Answer} {/block:Answer} {block:Audio} <table> <tr> <td> {block:AlbumArt} <img decoding="async" src="{AlbumArtURL}" style="width:120px; height:120px;"> {/block:AlbumArt} </td> <td> <div class="audio"> {AudioPlayerBlack}<br> {block:TrackName}”{TrackName}”{/block:TrackName} by {block:Artist}{Artist}{/block:Artist}<br> {block:Album}<strong>{Album}</strong>{/block:Album} </td></tr><tr><td colspan="2"> {block:Caption} {Caption} {/block:Caption} </td> </tr> </table> {/block:Audio} {block:HasTags} <div class="bottom"> {block:Tags} <a class="tags" href="{TagURL}">#{Tag}</a> {/block:Tags} </div> {/block:HasTags} </div></div><div class="clear"></div><div class="clear"></div> {PostNotes} {/block:Posts} </div> <div id="footer"> Designed by X Q U I S I T E K I S S E S. C O M <a href="http://xquisitekisses.com" target="_new"X Q U I S I T E K I S S E S . C O M</a>. Powered by <a href="http://tumblr.com" target="_new" rel="noopener noreferrer">Tumblr</a>. </div> </body> </html>

AFFILIATES