This is a list of pre-made layouts and code snippets that are free for you to use. Check individual posts for details on how to use them. There’s also a Github repository listing them here. A few notes:
Feel free to email me (nenrikido@pm.me) with any questions/comments or leave a comment here.
Finally converted the Rainbow Page Theme to a Tumblr theme. Happy pride!
Features:
<!-- rainbow theme (for tumblr) by negg.tumblr.com / nenrikido.neocities.org --> | |
<html> | |
<head> | |
<title>{Title}</title> | |
<link rel="shortcut icon" href="{image:Favicon}"> | |
<link rel="alternate" type="application/rss+xml" href="{RSS}"> | |
{block:Description} | |
<meta name="description" content="{MetaDescription}" /> | |
{/block:Description} | |
<link rel="stylesheet" href="https://static.tumblr.com/wqgcz53/ld7s5ojfx/normalize.css"> | |
</head> | |
<meta name="image:Sidebar image" content=""/> | |
<meta name="image:Background image" content=""/> | |
<meta name="image:Permalink" content=""/> | |
<meta name="image:Favicon" content=""> | |
<meta name="image:Badge 1" content=""/> | |
<meta name="image:Badge 2" content=""/> | |
<meta name="image:Badge 3" content=""/> | |
<meta name="image:Badge 4" content=""/> | |
<meta name="color:Background" content="#fff"/> | |
<meta name="color:Post background color" content="#fff"/> | |
<meta name="text:Title font size" content="7"/> | |
<meta name="text:Link 1 Title" content="Link 1"/> | |
<meta name="text:Link 1 URL" content="" /> | |
<meta name="text:Link 2 Title" content="Link 2"/> | |
<meta name="text:Link 2 URL" content="" /> | |
<meta name="text:Link 3 Title" content="Link 3"/> | |
<meta name="text:Link 3 URL" content="" /> | |
<meta name="text:Link 4 Title" content="Link 4"/> | |
<meta name="text:Link 4 URL" content="" /> | |
<meta name="text:Link 5 Title" content="Link 5"/> | |
<meta name="text:Link 5 URL" content="" /> | |
<meta name="text:Song URL" content="https://dl.dropbox.com/s/upv9nfvx2b9gfpo/ifeellove.mp3?dl=0"/> | |
<meta name="if:Jukebox" content="" /> | |
<meta name="if:Show Captions" content="1" /> | |
<meta name="if:Show Tags" content="1" /> | |
<meta name="if:Badges" content="" /> | |
<meta name="if:Link 4" content="" /> | |
<meta name="if:Link 5" content="" /> | |
<style type="text/css"> | |
:root, | |
:root.red { | |
--main: #d92f38; | |
--muted: #d92f38b0; | |
} | |
:root.hotpink { | |
--main: #cf3480; | |
--muted: #cf347fbd; | |
} | |
:root.orange { | |
--main: #f8601a; | |
--muted: #f76e2ec5; | |
} | |
:root.yellow { | |
--main: #dfa505; | |
--muted: #e9da68d7; | |
} | |
:root.green { | |
--main: #439d81; | |
--muted: #439d81c0; | |
} | |
:root.turquoise { | |
--main: #0e8ea5; | |
--muted: #0fa8c3c5; | |
} | |
:root.indigo { | |
--main: #0269a4; | |
--muted: #0269a4ce; | |
} | |
:root.violet { | |
--main: #533664; | |
--muted: #3e254db9; | |
} | |
@font-face { | |
font-family: Pretty Kelly; | |
src: url(https://static.tumblr.com/wqgcz53/hfGs5ojja/prettykelly.ttf); | |
} | |
@font-face { | |
font-family: National Park; | |
src: url(https://static.tumblr.com/wqgcz53/Yjps5owpq/nationalpark-regular.otf); | |
} | |
/* THEME SWITCHER */ | |
#flag { | |
display: flex; | |
flex-direction: column; | |
width: 100%; | |
margin: 0.5em auto; | |
} | |
.theme-button { | |
height: 1.2em; | |
border: none; | |
} | |
#hotpink { background-color: #cf3480; } | |
#red { background-color: #d92f38; } | |
#orange { background-color: #f76d2e; } | |
#yellow { background-color: #e9d968; } | |
#green { background-color: #439d81; } | |
#turquoise { background-color: #0fa9c3; } | |
#indigo { background-color: #0269a4; } | |
#violet { background-color: #3e254d; } | |
body, html { | |
width: 100%; | |
height: 100%; | |
margin: 0; | |
padding: 0; | |
overflow-x: hidden; | |
line-height: 1.15; | |
text-size-adjust: 100%; | |
-webkit-text-size-adjust: 100%; | |
} | |
body { | |
background: url('{image:Background image}') top / cover no-repeat; | |
background-color: {color:Background}; | |
font-family: National Park, sans-serif; | |
color: var(--main); | |
font-size: 0.95em; | |
} | |
blockquote { | |
border-left: 1px solid var(--main); | |
padding-left: 0.5em; | |
margin-left: 1em; | |
min-width: 90%; | |
} | |
button { | |
transition: all .3s ease-in-out; | |
cursor: pointer; | |
padding: 0; | |
margin: 0; | |
} | |
button:hover, button.active { | |
filter: brightness(140%); | |
} | |
a { | |
color: var(--main); | |
} | |
ul { | |
margin: 0; | |
} | |
hr { | |
border: 1px solid var(--muted); | |
} | |
code { | |
background-color: var(--main); | |
color: var(--background); | |
padding: 0 3px; | |
border-radius: 3px; | |
} | |
p { | |
margin: 5px 0 10px 5px; | |
} | |
h1, h2, h3, h4, h5, h6, .title { | |
margin: 0.2em; | |
font-family: Pretty Kelly; | |
} | |
.title { | |
font-size: 2em; | |
} | |
::selection { | |
background-color: var(--muted); | |
color: var(--background); | |
} | |
.permalink { | |
max-height: 1em; | |
} | |
audio, | |
audio::-webkit-media-controls-panel { | |
max-width: 100%; | |
background-color: var(--main); | |
filter: brightness(120%); | |
border-radius: 30px; | |
} | |
/* SCROLLBAR */ | |
::-webkit-scrollbar { | |
width: 8px; | |
height: 8px; | |
position: fixed; | |
right: 12px; | |
z-index: 1; | |
} | |
::-webkit-scrollbar-track { | |
box-shadow: 0; | |
border-radius: 0px; | |
background-color: var(--background); | |
} | |
::-webkit-scrollbar-thumb { | |
background: var(--muted); | |
border-radius: 0px; | |
} | |
/* WRAPPERS */ | |
.wrapper { | |
display: flex; | |
flex-direction: row; | |
align-items: start; | |
justify-content: center; | |
margin: 0 auto 5vh auto; | |
width: 775px; | |
padding: 15px; | |
gap: 2em; | |
} | |
.side-wrapper { | |
display: flex; | |
flex-direction: column; | |
flex-wrap: nowrap; | |
gap: 2em; | |
} | |
/* POSTS & SIDEBAR */ | |
.side-wrapper>div, .post, #footer { | |
background-color: {color:Post background color}; | |
opacity: 0.9; | |
border: 2px solid var(--main); | |
box-shadow: 0.5em 0.5em var(--muted); | |
padding: 1em; | |
border-radius: 5px; | |
} | |
.post { | |
max-width: 500px; | |
margin: 0 auto 2.5em auto; | |
} | |
.post img { | |
max-width: 100%; | |
} | |
.post-footer { | |
text-align: center; | |
padding: 0.75em 0; | |
} | |
.main { | |
flex-grow: 1; | |
} | |
.side p { | |
text-align: center; | |
margin: 0.5em; | |
} | |
#side-img { | |
height: 11em; | |
max-width: 100%; | |
background: url('{image:Sidebar image}') center / contain no-repeat; | |
margin: 0.5em auto; | |
} | |
/* NAVLINKS */ | |
#navlinks { | |
color: {color:Post background color}; | |
display: flex; | |
flex-wrap: wrap; | |
align-items: center; | |
justify-content: center; | |
align-content: flex-start; | |
} | |
#navlinks a { | |
background-color: var(--main); | |
color: var(--background); | |
padding: 8px; | |
margin: 5px; | |
border-radius: 20px; | |
text-decoration: none; | |
} | |
/* MUSIC */ | |
.audio-player { | |
display: flex; | |
align-items: stretch; | |
border: 2px solid var(--main); | |
} | |
.album-art { | |
position: relative; | |
flex-shrink: 0; | |
} | |
.album-art img { | |
display: block; | |
height: 6em; | |
border-right: 2px solid var(--main); | |
} | |
.play-button { | |
position: absolute; | |
top: 50%; | |
left: 50%; | |
transform: translate(-50%, -50%); | |
width: 33px; | |
height: 30px; | |
overflow:hidden; | |
} | |
.song-info { | |
background-color: var(--muted); | |
color: {color:Post background color}; | |
display: flex; | |
align-items: center; | |
flex-grow: 1; | |
} | |
.song-title { | |
padding: 1em; | |
} | |
/* PAGE TITLE */ | |
ul#title { | |
padding-left: 0; | |
margin: 0 auto; | |
max-width: 75vw; | |
font-size: {text:Title font size}em; | |
flex-wrap: wrap; | |
display: flex; | |
flex: auto 1 1; | |
justify-content: center; | |
font-family: Pretty Kelly; | |
-webkit-text-stroke: 1px var(--main); | |
} | |
#title li { | |
display: inline-flex; | |
margin: 0.25em; | |
background-size: 200vw auto; | |
background-image: repeating-linear-gradient(to right, #cf3480, #d92f38, #f76d2e, #e9d968, #439d81, #0fa9c3, #3e254d); | |
-webkit-animation: rainbow 10s linear reverse infinite; | |
animation: rainbow 10s linear reverse infinite; | |
-webkit-text-fill-color: transparent; | |
background-clip: text; | |
-webkit-background-clip: text; | |
} | |
#title li:nth-child(3n) { transform: rotate(20deg); } | |
#title li:nth-child(3n + 1) { transform: rotate(-20deg); } | |
#title li:nth-child(3n + 2) { transform: rotate(10deg); } | |
@keyframes rainbow { | |
0% { background-position: 0% 50%; } | |
50% { background-position: 100% 50%; } | |
100% { background-position: 0% 50%; } | |
} | |
@-webkit-keyframes rainbow { | |
0% { background-position: 0% 50%; } | |
50% { background-position: 100% 50%; } | |
100% { background-position: 0% 50%; } | |
} | |
/* BADGES */ | |
#badge-img { | |
display: grid; | |
grid-template-columns: repeat(2, 88px); | |
gap: 6px; | |
justify-content: center; | |
margin: 0 auto; | |
} | |
/* FOOTER */ | |
#footer { | |
display: flex; | |
justify-content: space-between; | |
} | |
#credit { | |
text-decoration: none; | |
} | |
</style> | |
<body> | |
<a href="/" style="text-decoration:none;"><ul id="title">{Title}</ul></a> | |
<div class="wrapper"> | |
<div class="main"> | |
{block:Posts} | |
<div class="post"> | |
{block:Text} | |
{block:Title}<div class="title">{Title}</div>{/block:Title} | |
{Body} | |
{/block:Text} | |
{block:Photo} | |
{linkOpenTag}<img src="{PhotoURL-500}" alt="{PhotoAlt}"/>{linkCloseTag} | |
{block:IfShowCaptions}{block:Caption}{Caption}{/block:Caption}{/block:IfShowCaptions} | |
{/block:Photo} | |
{block:Photoset} | |
{Photoset-500} | |
{block:IfShowCaptions}{block:Caption}{Caption}{/block:Caption}{/block:IfShowCaptions} | |
{/block:Photoset} | |
{block:Quote} | |
<div class="quote">"{Quote}"</div> | |
{block:Source} | |
<div class="quotesource">{Source}</div> | |
{/block:Source} | |
{/block:Quote} | |
{block:link} | |
<div class="title"><a href="{URL}">{Name}</a></div> | |
{block:Description} | |
{Description} | |
{/block:Description} | |
{/block:link} | |
{block:Chat} | |
{block:Title} | |
<div class="title">{Title}</div> | |
{/block:Title} | |
{block:Lines} | |
<div class="{Alt} user_{UserNumber}"> | |
{block:Label} | |
<b>{Label}</b>{/block:Label} | |
{Line} | |
</div> | |
{/block:Lines} | |
{/block:Chat} | |
{block:Video} | |
{Video-500} | |
{block:IfShowCaptions}{block:Caption}{Caption}{/block:Caption}{/block:IfShowCaptions} | |
{/block:Video} | |
{block:Audio} | |
{block:AudioPlayer} | |
<div class="audio-player"> | |
<div class="album-art">{block:AlbumArt}<img src="{AlbumArtURL}" alt="Album Art">{/block:AlbumArt} | |
<div class="play-button">{AudioPlayerWhite}</div> | |
</div> | |
<div class="song-info"> | |
<div class="song-title"> | |
{block:TrackName}<i>{TrackName}</i>{/block:TrackName}<br> | |
{block:Artist}{Artist}{/block:Artist}<br> | |
{block:Album}{Album}{/block:Album} | |
</div> | |
</div> | |
</div> | |
{block:IfShowCaptions}{block:Caption}{Caption}{/block:Caption}{/block:IfShowCaptions} | |
{/block:AudioPlayer} | |
{/block:Audio} | |
{block:Answer}{Asker} asked: {Question}<br> <br>{Answer}{/block:Answer} | |
{block:Indexpage} | |
<div class="post-footer"> | |
<a href="{Permalink}">{block:NoteCount} {NoteCountWithLabel}{/block:NoteCount}</a> | |
<img class="permalink" src="{image:permalink}"/> | |
{block:Date}<a href="{Permalink}">{ShortMonth} {DayOfMonth}, {Year}</a>{/block:Date} | |
{block:IfShowTags} | |
{block:HasTags}<br></text>{block:Tags}#<a href="{TagURL}">{Tag}</a> {/block:Tags}{/block:HasTags} | |
{/block:IfShowTags} | |
</div> | |
{/block:Indexpage} | |
{block:PermalinkPage} | |
{block:Date} Posted on {ShortDayOfWeek}. {Month} {DayOfMonth}, {Year} at {12Hour}:{Minutes}{CapitalAmPm} with {NoteCountWithLabel}{/block:Date} | |
{block:HasTags}<br></text>Tagged as {block:Tags}#<a href="{TagURL}">{Tag}</a> {/block:Tags}{/block:HasTags} | |
{block:NoteCount}{block:PostNotes}{PostNotes}{/block:PostNotes}{/block:NoteCount} | |
{/block:PermalinkPage} | |
</div> | |
{/block:Posts} | |
{block:Indexpage} | |
<div id="footer"> | |
{block:PreviousPage}<a href="{PreviousPage}">← Previous</a>{/block:PreviousPage} | |
<a id="credit" href="http://negg.tumblr.com/" title="Rainbow Theme">![]() |
|
{block:NextPage}<a href="{NextPage}">Next →</a>{/block:NextPage} | |
</div> | |
{/block:Indexpage} | |
</div> | |
{block:Indexpage} | |
<div class="side-wrapper"> | |
<div class="side"> | |
<h1>Navigation</h1> | |
<div id="side-img"></div> | |
<p> {Description} </p> | |
<div id="navlinks"> | |
<a href="{text:Link 1 URL}">{text:Link 1 Title}</a> | |
<a href="{text:Link 2 URL}">{text:Link 2 Title}</a> | |
<a href="{text:Link 3 URL}">{text:Link 3 Title}</a> | |
{block:IfLink4}<a href="{text:Link 4 URL}">{text:Link 4 Title}</a>{/block:IfLink4} | |
{block:IfLink5}<a href="{text:Link 5 URL}">{text:Link 5 Title}</a>{/block:IfLink5} | |
</div> | |
</div> | |
<div id="theme"> | |
<h1>Theme</h1> | |
<p>Click a flag stripe.</p> | |
<div id="flag"> <button id="hotpink" title="hot pink (sex)" class="theme-button" onclick="handleThemeButtonClick('hotpink', this)"></button> <button id="red" title="red (life)" class="theme-button" onclick="handleThemeButtonClick('red', this)"></button> <button id="orange" title="orange (healing)" class="theme-button" onclick="handleThemeButtonClick('orange', this)"></button> <button id="yellow" title="yellow (sunlight)" class="theme-button" onclick="handleThemeButtonClick('yellow', this)"></button> <button id="green" title="green (nature)" class="theme-button" onclick="handleThemeButtonClick('green', this)"></button> <button id="turquoise" title="turquoise (magic/art)" class="theme-button" onclick="handleThemeButtonClick('turquoise', this)"></button> <button id="indigo" title="indigo (serenity)" class="theme-button" onclick="handleThemeButtonClick('indigo', this)"></button> <button id="violet" title="violet (spirit)" class="theme-button" onclick="handleThemeButtonClick('violet', this)"></button> </div> | |
</div> | |
{block:IfJukebox} | |
<div id="audio"> | |
<h1>Jukebox</h1> <audio controls> | |
<source src="{text:Song URL}" type="audio/mp3"> | |
</audio> | |
</div> | |
{/block:IfJukebox} | |
{block:IfBadges} | |
<div id="badges"> | |
<h1>Badges</h1> | |
<div id="badge-img"> | |
<img src="{image:Badge 1}"> | |
<img src="{image:Badge 2}"> | |
<img src="{image:Badge 3}"> | |
<img src="{image:Badge 4}"> | |
</div> | |
</div> | |
{/block:IfBadges} | |
</div> | |
{/block:Indexpage} | |
</div> | |
</body> | |
<script src="https://static.tumblr.com/wqgcz53/jzrs5oy9z/theme.js"></script> | |
<script> | |
document.addEventListener('DOMContentLoaded', () => { | |
const titleElement = document.getElementById('title'); | |
const titleText = titleElement.textContent.trim(); | |
const letters = titleText.split(''); | |
titleElement.textContent = ''; | |
letters.forEach((letter, index) => { | |
const li = document.createElement('li'); | |
li.textContent = letter; | |
titleElement.appendChild(li); | |
}); | |
}); | |
</script> | |
</html> |
made a theme for pride month based on the original 70s rainbow flag! you can click on stripes of the flag to swap color schemes.
features:
<!--RAINBOW PAGE THEME by nenrikido.neocities.org--> | |
<!--NOTES | |
1. This theme assumes you're already comfortable with HTML and CSS. CTRL F 'SAFE TO EDIT' to quickly jump to places for you to customize. | |
2. I've left notes throughout the CSS in case anyone wants to heavy edit. Hopefully it's fairly readable. | |
3. If you use this page theme for a full website (not just one page), be sure to separate the Javascript and CSS and then link them. | |
4. HAPPY PRIDE!!!! | |
--> | |
<!DOCTYPE html> | |
<html lang="en"> | |
<head> | |
<meta charset="UTF-8"> | |
<meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
<!--SAFE TO EDIT - TITLE & SHORTCUT ICON--> | |
<link rel='shortcut icon' type='image/x-icon' href='https://dl.dropbox.com/s/qklbio07u9m3aiw/rainbow.png?dl=0' /> | |
<meta http-equiv="X-UA-Compatible" content="ie=edge"> | |
<title>Pride theme</title> | |
<style> | |
/* SAFE TO EDIT - CSS VARIABLES */ | |
:root { | |
--title-font-size: 7vw; | |
--bg-image: url('https://dl.dropbox.com/s/uilkov5ayv3bizh/70s-rainbow-wave-retro-wallpaper-mural-Plain-scaled.webp?dl=0'); | |
--side-image: url('https://dl.dropbox.com/s/j87r8p2iqerrl8y/rb.jpeg?dl=0'); | |
--box-bg: #f5ecdfe5; | |
--background: #f5e2df; | |
} | |
/* THEME SETTINGS */ | |
:root, | |
:root.red { | |
--main: #d92f38; | |
--muted: #d92f38b0; | |
} | |
:root.hotpink { | |
--main: #cf3480; | |
--muted: #cf347fbd; | |
} | |
:root.orange { | |
--main: #f8601a; | |
--muted: #f76e2ec5; | |
} | |
:root.yellow { | |
--main: #dfa505; | |
--muted: #e9da68d7; | |
} | |
:root.green { | |
--main: #439d81; | |
--muted: #439d81c0; | |
} | |
:root.turquoise { | |
--main: #0e8ea5; | |
--muted: #0fa8c3c5; | |
} | |
:root.indigo { | |
--main: #0269a4; | |
--muted: #0269a4ce; | |
} | |
:root.violet { | |
--main: #533664; | |
--muted: #3e254db9; | |
} | |
/* THEME SWITCHER */ | |
#flag { | |
display: flex; | |
flex-direction: column; | |
width: 12vw; | |
margin: 0.5em auto; | |
} | |
.theme-button { | |
height: 1.2em; | |
border: none; | |
} | |
#hotpink { background-color: #cf3480; } | |
#red { background-color: #d92f38; } | |
#orange { background-color: #f76d2e; } | |
#yellow { background-color: #e9d968; } | |
#green { background-color: #439d81; } | |
#turquoise { background-color: #0fa9c3; } | |
#indigo { background-color: #0269a4; } | |
#violet { background-color: #3e254d; } | |
@font-face { | |
font-family: Pretty Kelly; | |
src: url(https://dl.dropbox.com/s/rqxfzjivgousq18/PrettyKelly.ttf?dl=0); | |
} | |
@font-face { | |
font-family: National Park; | |
src: url(https://dl.dropbox.com/s/jox00bymodcheoy/NationalPark-Regular.otf?dl=0); | |
} | |
/* BASE STYLING */ | |
*, *::before, *::after { | |
box-sizing: border-box; | |
} | |
body, html { | |
width: 100%; | |
height: 100%; | |
margin: 0; | |
padding: 0; | |
overflow-x: hidden; | |
line-height: 1.15; | |
text-size-adjust: 100%; | |
-webkit-text-size-adjust: 100%; | |
} | |
body { | |
background: var(--bg-image) top / cover no-repeat; | |
font-family: National Park, sans-serif; | |
color: var(--main); | |
font-size: 0.95em; | |
scrollbar-color: var(--main) var(--background); /* Mozilla scrollbar fallback */ | |
} | |
blockquote { | |
border-left: 1px solid var(--main); | |
padding-left: 0.5em; | |
margin-left: 1em; | |
font-style: italic; | |
} | |
button { | |
transition: all .3s ease-in-out; | |
cursor: pointer; | |
padding: 0; | |
margin: 0; | |
} | |
button:hover, button.active { | |
filter: brightness(140%); | |
} | |
mark { | |
background-color: var(--main); | |
color: var(--background); | |
padding: 0 5px; | |
border-radius: 2px; | |
} | |
figcaption { | |
font-style: italic; | |
font-size: smaller; | |
} | |
a { | |
color: var(--main); | |
} | |
a:hover { | |
filter: brightness(130%); | |
} | |
ul { | |
margin: 0; | |
} | |
hr { | |
border: 1px solid var(--muted); | |
} | |
code { | |
background-color: var(--main); | |
color: var(--background); | |
padding: 0 3px; | |
border-radius: 3px; | |
} | |
.img-fluid { | |
max-width: 25rem; | |
height: auto; | |
} | |
p { | |
margin: 5px 0 10px 5px; | |
} | |
h1, h2, h3, h4, h5, h6 { | |
margin: 0.2em; | |
font-family: Pretty Kelly; | |
} | |
::selection { | |
background-color: var(--muted); | |
color: var(--background) | |
} | |
audio, | |
audio::-webkit-media-controls-panel { | |
max-width: 12vw; | |
background-color: var(--main); | |
filter: brightness(120%); | |
border-radius: 30px; | |
} | |
/* SCROLLBAR */ | |
::-webkit-scrollbar { | |
width: 8px; | |
height: 8px; | |
position: fixed; | |
right: 12px; | |
z-index: 1; | |
} | |
::-webkit-scrollbar-track { | |
box-shadow: 0; | |
border-radius: 0px; | |
background-color: var(--background); | |
} | |
.post ::-webkit-scrollbar-track { | |
border-left: 0px solid var(--main); | |
} | |
::-webkit-scrollbar-thumb { | |
background: var(--muted); | |
border-radius: 0px; | |
} | |
/* WRAPPERS */ | |
.wrapper { | |
display: flex; | |
flex-direction: row; | |
align-items: start; | |
justify-content: center; | |
margin: 0 auto 5vh auto; | |
width: 50vw; | |
padding: 15px; | |
gap: 2em; | |
} | |
.side-wrapper { | |
display: flex; | |
flex-direction: column; | |
flex-wrap: wrap; | |
justify-content: center; | |
width: 15em; | |
gap: 2em; | |
} | |
/* BOXES & SIDEBAR */ | |
.side-wrapper>div, .main { | |
background-color: var(--box-bg); | |
border: 2px solid var(--main); | |
box-shadow: 0.5em 0.5em var(--muted); | |
padding: 1em; | |
border-radius: 5px; | |
} | |
.main { | |
flex-grow: 1; | |
} | |
.side p { | |
text-align: center; | |
margin: 0.5em; | |
} | |
#side-img { | |
height: 11em; | |
max-width: 100%; | |
background: var(--side-image) center / contain no-repeat; | |
margin: 0.5em auto; | |
} | |
/* NAVLINKS */ | |
#navlinks { | |
display: flex; | |
flex-wrap: wrap; | |
align-items: center; | |
justify-content: center; | |
align-content: flex-start; | |
} | |
#navlinks a { | |
background-color: var(--main); | |
color: var(--background); | |
padding: 8px; | |
margin: 5px; | |
border-radius: 20px; | |
text-decoration: none; | |
} | |
/* PAGE TITLE */ | |
ul#title { | |
padding-left: 0; | |
margin: 0 auto; | |
width: 55vw; | |
font-size: var(--title-font-size); | |
flex-wrap: wrap; | |
display: flex; | |
flex: auto 1 1; | |
justify-content: center; | |
font-family: Pretty Kelly; | |
-webkit-text-stroke: 1px var(--main); | |
} | |
#title li { | |
display: inline-flex; | |
margin: 0.25em; | |
background-size: 200vw auto; | |
background-image: repeating-linear-gradient(to right, #cf3480, #d92f38, #f76d2e, #e9d968, #439d81, #0fa9c3, #3e254d); | |
-webkit-animation: rainbow 10s linear reverse infinite; | |
animation: rainbow 10s linear reverse infinite; | |
-webkit-text-fill-color: transparent; | |
background-clip: text; | |
-webkit-background-clip: text; | |
} | |
#title li:nth-child(3n + 0) { transform: rotate(20deg) } | |
#title li:nth-child(3n + 1) { transform: rotate(-20deg) } | |
#title li:nth-child(3n + 2) { transform: rotate(10deg) } | |
@keyframes rainbow { 0% { background-position: 0% 50% } 50% { background-position: 100% 50% } 100% { background-position: 0% 50% } } | |
/* BADGES */ | |
#badge-img { | |
display: grid; | |
margin: auto auto; | |
grid-template-columns: repeat(auto-fill, minmax(80px, 1fr)); | |
grid-column-gap: 6px; | |
grid-row-gap: 6px; | |
align-items: center; | |
justify-items: center; | |
} | |
/* MOBILE STYLING */ | |
@media only screen and (max-width: 768px) { | |
.wrapper { | |
flex-direction: column; | |
width: 100%; | |
padding: 0; | |
} | |
audio, audio::-webkit-media-controls-panel { | |
max-width: 100%; | |
} | |
#flag { | |
width: 50vw; | |
} | |
figure { | |
margin: 0; | |
} | |
.img-fluid { | |
max-width: 100%; | |
} | |
.side-wrapper, .main { | |
width: 80vw; | |
margin: 0 auto; | |
} | |
ul#title { | |
width: 100vw; | |
font-size: calc(var(--title-font-size) * 1.6); | |
margin: 3vh auto; | |
} | |
} | |
</style> | |
</head> | |
<body> | |
<!--SAFE TO EDIT - to make a space just leave empty <li> tags. title wraps when it gets too long --> | |
<ul id="title"> | |
<li>R</li> | |
<li>A</li> | |
<li>I</li> | |
<li>N</li> | |
<li>B</li> | |
<li>O</li> | |
<li>W</li> | |
</ul> | |
<div class="wrapper"> | |
<div class="main"> | |
<!--SAFE TO EDIT | |
Note: theme only supports one main class. if you'd like to add more "main" boxes you can add a main-wrapper class that uses flex columns (like the side-wrapper) --> | |
<h1>Celebrating pride</h1> | |
<blockquote>June 09, 2023</blockquote> | |
<p>Welcome to the <mark>Rainbow page theme</mark> preview! This theme is based on the original 1978 rainbow flag designed by Gilbert Baker. It has eight stripes, two more than the popular modern iteration.</p> | |
<figure> <img class="img-fluid" src="https://images.squarespace-cdn.com/content/v1/5b53b13285ede173115cb784/1623105145619-H2XVFVY8R1T9EPC1WADE/Rainbow+flag+courtesey+of+Baker+estate.jpg"> | |
<figcaption>An image of the original flag, courtesy of the Baker estate.</figcaption> | |
</figure> | |
<p>Each stripe's color is symbolic: Hot pink is for sex, red for life, orange for healing, yellow for sunlight, green for nature, turquoise for magic/art, indigo for serenity, and violet for spirit. </p> | |
<p>Due to dye cost issues that prevented mass production of the flag and subsequent practical considerations, the hot pink and turquoise stripes were both dropped. But this is the internet, where these are non-issues, so long live sex and magic!</p> | |
<hr> | |
<h1>Theme features</h1> | |
<ul> | |
<li>Pride flag theme switcher (uses Javascript)</li> | |
<li>Mobile responsive layout</li> | |
<li>Customizable sidebar image</li> | |
<li>Customizable background image</li> | |
<li>Customizable box background color</li> | |
<li>Custom responsive image class <code>img-fluid</code></li> | |
<li>Styling of default HTML elements such as the blockquote, hr, code, audio, and mark tags.</li> | |
<li>Make new sidebar boxes by creating a div within the side-wrapper class. You can name it whatever you want; it will inherit the sidebar box styling.</li> | |
</ul> | |
<hr> | |
<h1>Credits</h1> | |
<ul> | |
<li>Body font: <a href="https://nationalparktypeface.com/">National Park</a></li> | |
<li>Title font: <a href="https://www.fontspace.com/pretty-kelly-font-f93692">Pretty Kelly</a></li> | |
<li>Background mural: <a href="https://www.hovia.com/products/70s-rainbow-wave-retro-wallpaper-mural-m/">Hovia</a></li> | |
<li>Jukebox song: <a href="https://youtu.be/Nm-ISatLDG0">"I Feel Love"</a> - Donna Summer</li> | |
<li>Pride badge: <a href="https://web.badges.world/">Web Badges World</a></li> | |
<li>Favicon emoji: <a href="https://twemoji.twitter.com/">Twemoji</a></li> | |
</ul> | |
</div> | |
<div class="side-wrapper"> | |
<div class="side"> | |
<!--SAFE TO EDIT - add your sidebar title, bio, and links here--> | |
<h1>Navigation</h1> | |
<div id="side-img"></div> | |
<p>Some sidebar text</p> | |
<div id="navlinks"> <a href="#">home</a> <a href="#">about</a> <a href="#">blog</a> <a href="#">gallery</a> <a href="#">guestbook</a> </div> | |
</div> | |
<div id="theme"> | |
<h1>Theme</h1> | |
<p>Click a flag stripe.</p> | |
<div id="flag"> <button id="hotpink" title="hot pink (sex)" class="theme-button" onclick="handleThemeButtonClick('hotpink', this)"></button> <button id="red" title="red (life)" class="theme-button" onclick="handleThemeButtonClick('red', this)"></button> <button id="orange" title="orange (healing)" class="theme-button" onclick="handleThemeButtonClick('orange', this)"></button> <button id="yellow" title="yellow (sunlight)" class="theme-button" onclick="handleThemeButtonClick('yellow', this)"></button> <button id="green" title="green (nature)" class="theme-button" onclick="handleThemeButtonClick('green', this)"></button> <button id="turquoise" title="turquoise (magic/art)" class="theme-button" onclick="handleThemeButtonClick('turquoise', this)"></button> <button id="indigo" title="indigo (serenity)" class="theme-button" onclick="handleThemeButtonClick('indigo', this)"></button> <button id="violet" title="violet (spirit)" class="theme-button" onclick="handleThemeButtonClick('violet', this)"></button> </div> | |
</div> | |
<div id="audio"> | |
<h1>Jukebox</h1> <audio controls> <!--SAFE TO EDIT - replace with a link to any song you like.--> | |
<source src="https://dl.dropbox.com/s/upv9nfvx2b9gfpo/ifeellove.mp3?dl=0" type="audio/mp3"> | |
</audio> | |
</div> | |
<div id="badges"> <!--SAFE TO EDIT - you can add as many badges as you want.--> | |
<h1>Badges</h1> | |
<div id="badge-img"> | |
<img src="https://dl.dropbox.com/s/5nkjlo83yf3lgpi/lesbianbadge.jpg?dl=0"> | |
<img src="https://dl.dropbox.com/s/toxufxxsmazls83/pride2.gif?dl=0"> </div> | |
</div> | |
</div> | |
</div> | |
<script> | |
document.addEventListener("DOMContentLoaded", () => { | |
const theme = getTheme(); | |
applyTheme(theme); | |
}); | |
function applyTheme(color) { | |
console.log(`Applying theme "${color}".`); | |
const button = getColorButton(color); | |
document.documentElement.className = color; | |
} | |
function handleThemeButtonClick(color, element) { | |
element.blur(); | |
saveThemeToLocalStorage(color); | |
applyTheme(color); | |
} | |
function getTheme() { | |
return localStorage.getItem("theme") || "red"; // SAFE TO EDIT - can change red to any color you want to be default | |
} | |
function getColorButton(color) { | |
return document.getElementById(color); | |
} | |
function saveThemeToLocalStorage(color) { | |
localStorage.setItem("theme", color); | |
} | |
</script> | |
</body> | |
</html> |
re-coded an unreleased page theme an anon asked me to release like 5 years ago (example of the original). realized i actually hated a lot of how it was originally handled and now…it is ready to be unfurled!
features:
<!-- sakura: a page theme by nenrikido.neocities.org --> | |
<!-- NOTES: | |
1. This theme was meant to be used with gifs/images with a ratio of 4:3. Many gifs on Tumblr are 540px x 405px, so this theme was designed around those dimensions. If you need to change those dimensions, ctrl + f "#header" and adjust the height until you're satisfied. Note that you will also want to adjust the mobile #header element (which can be located by ctrl + f MOBILE) | |
2. The icons that trigger the pop-up boxes are meant to be square-ish and large enough to comfortably click/tap. Try to get pixels that are at least 50px wide and tall. (A good resource: https://foollovers.com/mat/menumenu.html) | |
3. This theme uses CSS variables to manage your settings. Navigate to the :root element and modify anything you like. If you want to replace the fonts, ctrl + f @font-face to see examples of how to import them. (Note that this theme also uses Google fonts--if you choose not to use Darumadrop, you can safely delete that entire line.) | |
4. Please note that the pop-ups/modals require Javascript! | |
5. Change your favicon (icon in the tab) by changing the "shortcut icon" url | |
6. ctrl + f 'ADD YOUR CONTENT HERE' here to quickly navigate to the three major content sections. | |
--> | |
<!DOCTYPE html> | |
<html lang="en"> | |
<head> | |
<meta charset="UTF-8"> | |
<meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
<meta http-equiv="X-UA-Compatible" content="ie=edge"> | |
<link rel='shortcut icon' type='image/x-icon' href='https://dl.dropbox.com/s/y8dfpdr0zioe8jd/cb1.gif' /> | |
<title>Sakura</title> | |
<link href="https://fonts.googleapis.com/css2?family=Darumadrop+One&display=swap" rel="stylesheet"> | |
</head> | |
<body> | |
<style> | |
:root { | |
--title-color: #ffc1d8; | |
--title-border: #ff4b78; | |
--title-font-size: 6em; | |
--title-font: 'Darumadrop One'; | |
--body-font: 'National Park'; | |
--body-font-color: #671d5c; | |
--box-color: #fff4f4e8; | |
--header-image: url('https://dl.dropbox.com/s/q8yecsdxvctnz1g/sakura.gif'); | |
--bg-image: url('https://dl.dropbox.com/s/m9k6hfosjlww8na/bg.jpg'); | |
--left-pixel: url('https://dl.dropbox.com/s/kgqiw9lk5yb8eos/abt.gif'); | |
--right-pixel: url('https://dl.dropbox.com/s/yoqvxhwhek1btdq/bm.gif'); | |
} | |
body, html { | |
scroll-behavior: smooth; | |
margin: 0; | |
padding: 0; | |
} | |
*, *::before, *::after { | |
box-sizing: border-box; | |
} | |
body { | |
height: 100vh; | |
background: var(--bg-image) center / cover no-repeat; | |
font: 0.9em var(--body-font); | |
color: var(--body-font-color); | |
scrollbar-color: var(--box-border-color) var(--title-color); /* Mozilla scrollbar fallback */ | |
} | |
/* For Tumblr users - you can remove if that isn't you */ | |
body > iframe:first-child { display: none !important; } | |
@font-face { | |
font-family: 'National Park'; | |
src: url('https://dl.dropbox.com/s/jox00bymodcheoy/NationalPark-Regular.otf'); | |
} | |
a { | |
color: var(--title-border); | |
} | |
a:hover { | |
color: var(--title-color); | |
} | |
h1, h2, h3, h4, h5, h6 { | |
font-family: var(--title-font); | |
color: var(--title-border); | |
} | |
::selection { | |
color: var(--title-border); | |
background: var(--title-color); | |
} | |
code { | |
background-color: var(--title-color); | |
color: var(--title-border); | |
padding: 0 5px; | |
border: 1px solid var(--title-border); | |
border-radius: 5px; | |
} | |
#title { | |
font-family: var(--title-font); | |
color: var(--title-color); | |
font-size: var(--title-font-size); | |
-webkit-text-stroke: 2px var(--title-border); | |
text-align: center; | |
letter-spacing: 5px; | |
} | |
#header { | |
height: 45vh; | |
max-width: 100%; | |
margin: 1em; | |
background: var(--header-image) center / contain no-repeat; | |
} | |
::-webkit-scrollbar { | |
width: 0.5em; | |
} | |
::-webkit-scrollbar-thumb { | |
background-color: var(--title-color); | |
outline: 1px solid var(--title-border); | |
} | |
.container { | |
max-height: 100vh; | |
display: flex; | |
justify-content: center; | |
align-items: center; | |
flex-direction: row; | |
flex-wrap: nowrap; | |
gap: 1em; | |
} | |
.container > div { | |
flex: 0 1 auto; | |
} | |
#middle { | |
width: 33vw; | |
} | |
#box { | |
background-color: var(--box-color); | |
border: 2px dashed var(--title-border); | |
overflow-y: scroll; | |
max-height: 10em; | |
width: 30vw; | |
padding: 0em 1em; | |
margin: auto; | |
} | |
#right-pixel, #left-pixel { | |
width: 4em; | |
height: 4em; | |
} | |
#right-pixel { | |
float: left; | |
background: var(--right-pixel) center / contain no-repeat; | |
} | |
#left-pixel { | |
float: right; | |
background: var(--left-pixel) center / contain no-repeat; | |
} | |
#right-pixel > p, #left-pixel > p { | |
text-align: center; | |
font-style: italic; | |
background-color: var(--box-color); | |
} | |
.modal { | |
display: none; | |
position: fixed; | |
z-index: 1; | |
padding: 10em 0; | |
left: 0; | |
top: 0; | |
width: 100%; | |
height: 100%; | |
overflow: auto; | |
background-color: rgba(0,0,0,0.4); | |
} | |
.modal-content { | |
position: relative; | |
background-color: var(--box-color); | |
margin: auto; | |
overflow: auto; | |
padding: 0; | |
border: 2px solid var(--title-border); | |
width: 36vw; | |
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19); | |
-webkit-animation-name: animatetop; | |
-webkit-animation-duration: 0.4s; | |
animation-name: animatetop; | |
animation-duration: 0.4s; | |
} | |
@-webkit-keyframes animatetop { | |
from { | |
top: -30vh; | |
opacity: 0; | |
} | |
to { | |
top: 0; | |
opacity: 1; | |
} | |
} | |
@keyframes animatetop { | |
from { | |
top: -30vh; | |
opacity: 0; | |
} | |
to { | |
top: 0; | |
opacity: 1; | |
} | |
} | |
.modal-header { | |
padding: 0 1.5em; | |
border-bottom: 1px solid var(--title-border); | |
} | |
.modal-body { | |
overflow-y: scroll; | |
padding: 0.5em 1em; | |
max-height: 45vh; | |
} | |
.modal-button { | |
padding: 1em; | |
background: none; | |
color: inherit; | |
outline: inherit; | |
border: none; | |
cursor: pointer; | |
height: inherit; | |
width: inherit; | |
} | |
.modal-img { | |
max-height: 30vh; | |
max-width: 100%; | |
padding: 5px; | |
float: right; | |
} | |
.close { | |
color: var(--title-border); | |
float: right; | |
font-size: 2.5em; | |
font-weight: bold; | |
} | |
.close:hover, .close:focus { | |
color: var(--title-color); | |
text-decoration: none; | |
cursor: pointer; | |
} | |
/* MOBILE */ | |
@media only screen and (max-width: 800px) { | |
.container { | |
max-width: 100%; | |
padding: 1em; | |
margin: 0 auto; | |
flex-wrap: wrap; | |
} | |
.container > div { | |
max-width: 90vw; | |
} | |
#header { | |
max-height: 30vh; | |
max-width: 100%; | |
} | |
.modal-content { | |
width: 90vw; | |
} | |
.modal-img { | |
height: 100%; | |
max-width: 35vw; | |
} | |
#box { | |
width: 85vw; | |
} | |
#middle { | |
order: 1; | |
width: 90vw; | |
} | |
#left { | |
order: 2; | |
} | |
#right { | |
order: 3; | |
} | |
#right-pixel, #left-pixel { | |
width: 3.5em; | |
height: 3.5em; | |
} | |
} | |
</style> | |
<div class="container"> | |
<div id="left"> | |
<!-- Icon/button to open the left modal (and optional caption) --> | |
<div id="left-pixel"><button class="modal-button" href="#left-modal"></button> <!-- <p>caption 1</p> --> | |
</div> <!-- Left modal: ADD YOUR CONTENT HERE --> | |
<div id="left-modal" class="modal"> | |
<div class="modal-content"> | |
<div class="modal-header"> <span class="close">×</span> | |
<h2>About this theme</h2> | |
</div> | |
<div class="modal-body"> | |
<p>a theme for people who want an uncluttered layout, but also have a lot to say! check the code for full instructions and notes. <img class="modal-img" src="https://dl.dropbox.com/s/fwtvge3o467bc2v/snoopy1.png"> | |
<ul> | |
<li>this theme uses CSS variables to control your settings.</li> | |
<li>the title font supports english and japanese (but not kanji)</li> | |
<li>the header dimensions are intended for a 4:3 ratio image.</li> | |
<li>you can use the <code>modal-img</code> class to include right-aligned images in your modals.</li> | |
<li>this preview does not use captions for the modal icons, but you can add them by searching for <code>caption 1</code> and <code>caption 2</code> and deleting the HTML comment tags (<code><-- --></code>)</li> | |
</ul> if you have any questions, you can email me at <a href="mailto:nenrikido@pm.me">nenrikido@pm.me</a> <img src="https://dl.dropbox.com/s/gmwv7ibxfjb0ry9/cb2.gif"> </p> | |
</div> | |
</div> | |
</div> | |
</div> | |
<div id="middle"> | |
<!-- Center section: ADD YOUR CONTENT HERE --> | |
<div id="title">さくら </div> | |
<div id="header"></div> | |
<div id="box"> | |
<p align="center">welcome to the <strong>sakura page theme</strong>! <img src="https://dl.dropbox.com/s/y8dfpdr0zioe8jd/cb1.gif"></p> | |
<p>click the icons to the left and right to open the modals (pop-up boxes). the left modal displays information about this theme and the right contains a list of credits.</p> | |
<p>this box grows as you type, and once you hit the max height, it will automatically scroll. the same is true for the modal boxes.</p> | |
</div> | |
</div> | |
<div id="right"> | |
<!-- Icon/button to open the right modal (and optional caption) --> | |
<div id="right-pixel"><button class="modal-button" href="#right-modal"></button> <!-- <p>caption 2</p> --> | |
</div> <!-- Right modal: ADD YOUR CONTENT HERE --> | |
<div id="right-modal" class="modal"> | |
<div class="modal-content"> | |
<div class="modal-header"> <span class="close">×</span> | |
<h1>Credits</h1> | |
</div> | |
<div class="modal-body"> | |
<p> <img class="modal-img" src="https://dl.dropbox.com/s/82bs65tjlesbjgf/snoopy2.png" alt="A transparent PNG of Snoopy and Woodstock lounging in a watering can with yellow gardening hats."> it takes a village to craft a theme...and all tools used in the creation of this theme are free for public use, so go check them out. | |
<ul> | |
<li>Body font: <a href="https://nationalparktypeface.com/">National Park</a></li> | |
<li>Header font: <a href="https://fonts.google.com/specimen/Darumadrop+One">Darumadrop One</a></li> | |
<li>Cardcaptor Sakura gif: <a href="https://yonkou.tumblr.com/">Yonkou</a></li> | |
<li>Theme pixels: <a href="https://foollovers.com/mat/i-s-sp02.html">Fool Lovers</a></li> | |
<li>Background photo: <a href="https://unsplash.com/photos/NMLv5HQZnK4">Mark Tegethoff</a></li> | |
<li>Modal base code: <a href="https://www.w3schools.com/howto/howto_css_modals.asp">W3 Schools</a></li> | |
<li>Modal images: my renders of <a href="https://www.re-ment.co.jp/product/r25109">Snoopy's life in a bottle</a> products</li> | |
</ul> | |
</p> | |
</div> | |
</div> | |
</div> | |
</div> | |
</div> | |
<script> | |
// Get the button that opens the modal | |
var btn = document.querySelectorAll("button.modal-button"); | |
// All page modals | |
var modals = document.querySelectorAll('.modal'); | |
// Get the <span> element that closes the modal | |
var spans = document.getElementsByClassName("close"); | |
// When the user clicks the button, open the modal | |
for (var i = 0; i < btn.length; i++) { | |
btn[i].onclick = function(e) { | |
e.preventDefault(); | |
modal = document.querySelector(e.target.getAttribute("href")); | |
modal.style.display = "block"; | |
} | |
} | |
// When the user clicks on <span> (x), close the modal | |
for (var i = 0; i < spans.length; i++) { | |
spans[i].onclick = function() { | |
for (var index in modals) { | |
if (typeof modals[index].style !== 'undefined') modals[index].style.display = "none"; | |
} | |
} | |
} | |
// When the user clicks anywhere outside of the modal, close it | |
window.onclick = function(event) { | |
if (event.target.classList.contains('modal')) { | |
for (var index in modals) { | |
if (typeof modals[index].style !== 'undefined') modals[index].style.display = "none"; | |
} | |
} | |
} | |
</script> | |
</body> | |
</html> |
completely re-coded and re-vamped a page theme from 2018 i made for tumblr. (original is here.) added a few features, made it behave on mobile, and it is now published for use anywhere.
features:
<!-- sunflower: a page theme by nenrikido.neocities.org --> | |
<!-- NOTES #1: | |
- Change the favicon (tab icon) by swapping the link after 'shortcut icon'. | |
- If you'd like to use a tiled background instead of an image, navigate to body -> background and change the property to 'background: var(--bg-image) center / auto repeat' | |
- On that note: You can also change the background image positioning to suit your image. This is also true for the right and left images! More info: https://www.w3schools.com/cssref/pr_background-position.php | |
- If you'd like a solid color background, delete the line entirely and create a new background-color property | |
- ctrl + f NOTES to read the next two instruction sections. | |
- Feel free to email me at nenrikido@pm.me with questions, comments, or to show me how you use this! --> | |
<!DOCTYPE html> | |
<html lang="en"> | |
<head> | |
<meta charset="UTF-8"> | |
<meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
<meta http-equiv="X-UA-Compatible" content="ie=edge"> | |
<link rel='shortcut icon' type='image/x-icon' href='https://dl.dropbox.com/s/bssyspzas71kdhq/m02-flower-sunflower.gif' /> | |
<title>Sunflower</title> | |
</head> | |
<body> | |
<style> | |
/* NOTES #2: | |
- CHANGE YOUR VARIABLES HERE (:root) I tried to keep these simple, but flexible. If you need more, you can make as many as you like. | |
- Links can be local; I only chose web links so this page would display immediately upon copy and pasting the code. | |
- If you want to remove a side image, simply remove the image URL. The left image is left blank in this preview, but if you add a url, both images will show. | |
- If you'd like to change the fonts, remember to import your custom fonts first. (See @font-face to see how these fonts were imported). */ | |
:root { | |
--title-color: #ffe14b; | |
--title-border: #d69721; | |
--title-font-size: 4.5em; | |
--title-font: 'PORKYS'; | |
--body-font: 'National Park'; | |
--body-font-color: #20550f; | |
--box-color: #effae7ee; | |
--bg-image: url('https://dl.dropbox.com/s/sdsvmkz4mus7pn4/sunflower.jpg'); | |
--left-image: url(''); | |
--right-image: url('https://dl.dropbox.com/s/8s4n1o0yneyd2rs/rm7.png'); | |
--divider-image: url('https://dl.dropbox.com/s/hw0ihvypgg4vjwr/s10-sunflower-line.gif'); | |
} | |
body, html { | |
width: 100%; | |
height: 100%; | |
margin: 0px; | |
padding: 0px; | |
overflow-x: hidden; | |
} | |
*, *::before, *::after { | |
box-sizing: border-box; | |
} | |
body { | |
background: var(--bg-image) top / cover no-repeat; | |
text-align: justify; | |
font: 1em var(--body-font); | |
color: var(--body-font-color); | |
scrollbar-color: var(--title-color) var(--box-color); /* Mozilla scrollbar fallback */ | |
} | |
/* For Tumblr users - you can remove if that isn't you */ | |
body > iframe:first-child { display: none !important; } | |
h1, h2, h3, h4, h5, h6 { | |
font-family: var(--title-font); | |
color: var(--title-color); | |
-webkit-text-stroke: 1px var(--title-border); | |
} | |
a { | |
color: var(--title-border); | |
} | |
@font-face { | |
font-family: 'PORKYS'; | |
src: url('https://dl.dropbox.com/s/o15z0l76kqbi8jq/PORKH.ttf'); | |
} | |
@font-face { | |
font-family: 'National Park'; | |
src: url('https://dl.dropbox.com/s/jox00bymodcheoy/NationalPark-Regular.otf'); | |
} | |
::-webkit-scrollbar { | |
width: 0.5em; | |
} | |
::-webkit-scrollbar-track { | |
box-shadow: inset 0 0 8px var(--title-color); | |
} | |
::-webkit-scrollbar-thumb { | |
background-color: var(--title-color); | |
outline: 1px solid var(--title-border); | |
} | |
.container { | |
padding: 15px; | |
display: flex; | |
align-items: stretch; | |
flex-wrap: nowrap; | |
justify-content: center; | |
} | |
.container > div { | |
flex: 1 1 auto; | |
width: 33vw; | |
} | |
#divider { | |
height: 2.5em; | |
max-width: 100%; | |
margin: 1em; | |
background: var(--divider-image) center / contain no-repeat; | |
} | |
#title { | |
font-family: var(--title-font); | |
color: var(--title-color); | |
font-size: var(--title-font-size); | |
text-align: center; | |
letter-spacing: 5px; | |
} | |
#title a { | |
text-decoration: none; | |
color: inherit; | |
-webkit-text-stroke: 2px var(--title-border); | |
} | |
#title a:hover { | |
filter: drop-shadow(2px 2px 5px var(--title-border)); | |
} | |
nav ul { | |
list-style-type: none; | |
display: flex; | |
flex-wrap: wrap; | |
justify-content: center; | |
margin: auto; | |
padding: 0; | |
} | |
nav ul li { | |
padding: 10px; | |
} | |
#left { | |
transform: translateX(15%); | |
z-index: 1; | |
background: var(--left-image) center / contain no-repeat; | |
} | |
#main { | |
z-index: 0; | |
} | |
#box { | |
margin: 5em auto; | |
width: 25vw; | |
height: 35vh; | |
padding: 5px; | |
overflow-x: hidden; | |
overflow-y: scroll; | |
border-radius: 5px; | |
background-color: var(--box-color); | |
box-shadow: 0px 0px 20px 50px var(--box-color); | |
} | |
#right { | |
transform: translateX(-10%); | |
z-index: 1; | |
background: var(--right-image) center / contain no-repeat; | |
} | |
/* Mobile */ | |
@media only screen and (max-width: 800px) { | |
#title { | |
font-size: calc(var(--title-font-size) / 1.4); | |
} | |
#left, #right { | |
display: none; | |
} | |
#box { | |
width: 70vw; | |
height: 40vh; | |
} | |
} | |
</style> | |
<div class="container"> | |
<div id="left"></div> | |
<div id="main"> | |
<div id="divider"></div> | |
<!--NOTES #3: | |
- ADD YOUR CONTENT (title, navigation links, box text) HERE! | |
- The navigation will wrap if you add more links! --> | |
<div id="title"><a href="#">SUNFLOWER</a></div> | |
<nav> | |
<ul> | |
<li><a href="#"> <img src="https://dl.dropbox.com/s/gr7s5m60dgxqr74/63a-home.gif"> </a></li> | |
<li><a href="#"> <img src="https://dl.dropbox.com/s/r2uobnug7specsf/63a-about.gif"> </a></li> | |
<li><a href="#"> <img src="https://dl.dropbox.com/s/x8wr60d165c88md/63a-mail.gif"> </a></li> | |
</ul> | |
</nav> | |
<div id="box"> | |
<h2 align="center">welcome! <img src="https://dl.dropbox.com/s/x6cnnyiah2pa0gx/mb06-flower-sunflower.gif" alt="A small sunflower pixel"> </h2> | |
<p>this is a preview for the <strong>sunflower page theme.</strong> </p> | |
<p> this is some sample text. if you keep typing, the box will become scrollable. check the code for more details on how to use this theme.</p> | |
<p> credits: | |
<ul> | |
<li>background image - <a href="https://unsplash.com/photos/MQAtUT_TJpU">Olga Subach</a></li> | |
<li>right side image - <a href="https://www.pseweb.com/">Range Murata</a></li> | |
<li>sunflower pixels - <a href="https://foollovers.com/mat/index.html">Fool Lovers</a></li> | |
<li>header font - <a href="https://www.dafont.com/porky-s.font">Porky's</a></li> | |
<li>body font - <a href="https://nationalparktypeface.com/">National park</a></li> | |
</ul> | |
</p> | |
</div> | |
</div> | |
<div id="right"></div> | |
</div> | |
</body> | |
</html> |
“I recently decided it might improve user experience to get a loading screen instead of watching the grid unceremoniously disentangle itself. A few experiments later, and here we are.”
<!-- Preloader HTML. Insert this this div before your main content. --> | |
<div id="preloader"></div> | |
<style> | |
/* Preloader CSS. Change the background color by swapping out #fff in the background property. You can also find more preloader icons here: https://samherbert.net/svg-loaders/ */ | |
#preloader { | |
align-items: center; | |
justify-content: center; | |
width: 100%; | |
display: flex; | |
position: fixed; | |
height: 100vh; | |
left: 0; | |
top: 0; | |
background: #fff | |
url("https://samherbert.net/svg-loaders/svg-loaders/spinning-circles.svg") | |
no-repeat center; | |
z-index: 9999; | |
} | |
</style> | |
<script> | |
// Preloader JS | |
var loader = document.getElementById("preloader"); | |
window.addEventListener("load", function () { | |
loader.style.display = "none"; | |
}); | |
//Fade out, optional | |
var s = document.getElementById("preloader").style; | |
s.opacity = 1; | |
(function fade() { | |
(s.opacity -= 0.1) < 0 ? (s.display = "none") : setTimeout(fade, 40); | |
})(); | |
</script> |
this is a re-release of my very first theme back in 2016…it’s cleaned up & a bit more comprehensible.
features:
<!-- toothache: a theme edit by negg.tumblr.com | |
base code: https://animecharacter.tumblr.com/basecode --> | |
<!DOCTYPE html> | |
<head> | |
<meta charset="utf-8"> | |
<meta https-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> | |
{block:Description} | |
<meta name="description" content="{MetaDescription}" /> | |
{/block:Description} | |
<title>{Title}</title> | |
<link rel="shortcut icon" href="{image:favicon}"> | |
<link rel="alternate" type="application/rss+xml" href="{RSS}"> | |
<link rel="stylesheet" href="https://static.tumblr.com/qxrkgx6/RWPmgn2qa/normalize.min.css"> | |
<script src="https://static.tumblr.com/qxrkgx6/LuRmgn2rm/modernizr-2.6.2.min.js"></script> | |
<meta name="image:sidebar img" content=""/> | |
<meta name="image:bg" content=""/> | |
<meta name="image:permalink" content=""/> | |
<meta name="image:favicon" content=""> | |
<meta name="color:bg" content="#fff"/> | |
<meta name="color:text color" content=""/> | |
<meta name="color:link color" content=""/> | |
<meta name="color:link border" content=""/> | |
<meta name="color:link hover" content=""/> | |
<meta name="color:post bg" content=""/> | |
<meta name="text:font size" content="13" /> | |
<meta name="font:font" content="Helvetica"/ > | |
<meta name="if:show title" content="" /> | |
<meta name="if:circle sidebar img" content="" /> | |
<meta name="if:show description" content="" /> | |
<meta name="if:post bg" content="" /> | |
<meta name="text:link divider" content="![]() |
|
<meta name="text:link 1" content=""/> | |
<meta name="text:link 1 URL" content="" /> | |
<meta name="text:link 2" content=""/> | |
<meta name="text:link 2 URL" content="" /> | |
<style type="text/css"> | |
body { | |
color:{color:text color}; | |
background-color:{color:bg}; | |
background-image:url('{image:bg}'); | |
font: {text:font size}px {font:font}; | |
} | |
p{ | |
margin:0 0 10px 0; | |
padding:0; | |
} | |
pre { | |
white-space: pre-wrap; | |
white-space: -moz-pre-wrap; | |
white-space: -pre-wrap; | |
white-space: -o-pre-wrap; | |
word-wrap: break-word; | |
} | |
a{ | |
color:{color:link color}; | |
text-shadow: -1px 0 {color:link border}, 0 1px {color:link border}, 1px 0 {color:link border}, 0 -1px {color:link border}; | |
text-decoration:none; | |
letter-spacing:1px; | |
font-size:{text:font size}; | |
} | |
a:hover{ | |
color:{color:link hover}; | |
} | |
li{ | |
margin-left:-15px; | |
} | |
/* | |
containers etc | |
*/ | |
#wrapper{ | |
width:600px; | |
margin:50px auto; | |
height:100%; | |
} | |
#sidebar{ | |
width:180px; | |
position:fixed; | |
margin-top:20px; | |
margin-left:-90px; | |
padding:25px; | |
text-align:center; | |
} | |
#sidebar img{ | |
width:100%; | |
max-width:100%; | |
{block:ifcirclesidebarimg}border-radius:100px;{/block:ifcirclesidebarimg} | |
margin-left:-10px; | |
margin-bottom:10px; | |
} | |
#links { | |
margin-top:10px; | |
font-size:{text:font size}; | |
width:100%; | |
text-align:center; | |
} | |
#credit{ | |
position:fixed; | |
bottom:10px; | |
left:10px; | |
font-family:{select:font}; | |
} | |
#content{ | |
width:500px; | |
margin-left:200px; | |
overflow:hidden; | |
} | |
.post{ | |
font:{color:text color}; | |
width:400px; | |
margin:0 50px 50px 0; | |
text-align:left; | |
overflow:visible; | |
padding:20px; | |
border-radius:7px; | |
line-height: 1.3; | |
{block:ifpostbg}background:{color:post bg};{/block:ifpostbg} | |
} | |
#sidebar img, .post img{ | |
max-width:100%; | |
} | |
#nav{ | |
margin:50px 0 0 0; | |
} | |
#footer{ | |
text-align: center; | |
margin-left: auto; | |
margin-right: auto; | |
} | |
/* | |
content in the body of the posts - quotes, asks, etc | |
"media" contains photos, photosets, videos, audio posts | |
*/ | |
.media{ | |
margin:0 0 10px 0; | |
} | |
#audio { | |
width:100%; | |
height:50px; | |
margin-bottom:10px; | |
display:block; | |
padding:5px; | |
} | |
#ask_form{ height: 255px!important;} | |
#audio .player{background:#FFF;height:25px;width:25px;padding:2px;overflow:hidden;position:absolute;margin-top:8px;margin-left:8px;border:2px solid #fff;opacity:0.8;z-index:2;} | |
.art{width:55px;height:55px; position:absolute;display:block;z-index:1;} | |
.art img{width:50px;height:50px;} | |
.songtitle{margin-left:60px;height:40px;padding:5px 10px;line-height:13px;overflow:auto;font-size:{text:font size}px;} | |
.title{ | |
font-weight:normal; | |
font-size:18px; | |
margin:0 0 10px 0; | |
} | |
.quote{ | |
font-weight:normal; | |
font-size:16px; | |
font-style:italic; | |
margin:0 0 10px 0; | |
} | |
.question{ | |
margin-bottom:10px; | |
} | |
blockquote{ | |
margin:0 0 10px 10px; | |
padding:0 0 0 10px; | |
border-left:solid 1px #000; | |
} | |
/* | |
post footers - date, tags, via and source | |
*/ | |
.post .footer{ | |
margin:0; | |
text-align:center; | |
} | |
/* | |
post notes | |
*/ | |
ol.notes{ | |
list-style-type:none; | |
padding:0; | |
margin:0; | |
} | |
ol.notes li.note img{ | |
width:16px; | |
height:16px; | |
} | |
ol.notes li.note{ | |
margin:0px; | |
} | |
{CustomCSS} | |
</style> | |
</head> | |
<body> | |
<div id="wrapper"> | |
<div id="sidebar"> | |
{block:ifshowtitle}<div id="title"><div class="title"><a href="/"><h2>{Title}</h2></a></div></div>{block:ifshowtitle} | |
<a href="/"> | |
<img src="{image:sidebar img}"></a> | |
{block:ifshowdescription}<div id="description">{Description}</div> {/block:ifshowdescription} | |
<div id="links"> | |
<a href="{text:link 1 url}" title="{text:link 1}">{text:link 1}</a> {text:link symbol} {text:link divider} <a href="{text:link 2 url}" title="{text:link 2}">{text:link 2} </a> | |
</div> </div> | |
<div id="content"> | |
{block:Posts} | |
<div class="post"> | |
{block:Text} | |
{block:Title} | |
<div class="title">{Title}</div> | |
{/block:Title} | |
{Body} | |
{/block:Text} | |
{block:Photo} | |
<div class="media">{linkOpenTag}<img src="{PhotoURL-500}" alt="{PhotoAlt}"/>{linkCloseTag}</div> | |
{block:Caption}<div class="caption">{Caption}</div>{/block:Caption} | |
{/block:Photo} | |
{block:Photoset} | |
<div class="media">{Photoset-400}</div> | |
{block:Caption}<div class="caption">{Caption}</div>{/block:Caption} | |
{/block:Photoset} | |
{block:Quote} | |
<div class="quote">"{Quote}"</div> | |
{block:Source} | |
<div class="quotesource">{Source}</div> | |
{/block:Source} | |
{/block:Quote} | |
{block:link} | |
<div class="title"><a href="{URL}">{Name}</a></div> | |
{block:Description} | |
<div class="description">{Description}</div> | |
{/block:Description} | |
{/block:link} | |
{block:Chat} | |
{block:Title} | |
<div class="title">{Title}</div> | |
{/block:Title} | |
{block:Lines} | |
<div class="{Alt} user_{UserNumber}"> | |
{block:Label} | |
<b>{Label}</b>{/block:Label} | |
{Line} | |
</div> | |
{/block:Lines} | |
{/block:Chat} | |
{block:Video} | |
<div class="media">{Video-400}</div> | |
{block:Caption}<div class="caption">{Caption}</div>{/block:Caption} | |
{/block:Video} | |
{block:Audio} | |
<div id="audio"> | |
<div class="art">{block:AlbumArt}<img src="{AlbumArtURL}">{/block:AlbumArt}</div> | |
<div class="player">{AudioPlayerWhite}</div> | |
<div class="songtitle"> | |
{block:TrackName}<i>{TrackName}</i>{/block:TrackName}<br> | |
{block:Artist}{Artist}{/block:Artist}<br> | |
{block:Album}{Album}{/block:Album}</div></div> | |
{block:Caption}{Caption}{/block:Caption} | |
{/block:Audio} | |
{block:Answer}{Asker} asked: {Question}<br> <br>{Answer}{/block:Answer} | |
{block:Date} | |
<div class="footer"> | |
<a href="{Permalink}">{block:NoteCount} {NoteCountWithLabel}{/block:NoteCount}</a> | |
<img src="{image:permalink}"/> <a href="{ReblogURL}" target="_blank" class="details">reblog</a>{block:HasTags}<br></text>{block:Tags}#<a href="{TagURL}">{Tag}</a> {/block:Tags}{/block:HasTags} | |
</div> | |
{block:PermalinkPage} | |
{block:NoteCount} | |
{block:PostNotes}{PostNotes}{/block:PostNotes} | |
{/block:NoteCount} | |
{/block:PermalinkPage} | |
{/block:Date} | |
</div> | |
{/block:Posts} | |
<div id="credit"><a href="http://negg.tumblr.com/" title="toothache theme">![]() |
|
{block:Pagination} | |
<div id="nav"> | |
{block:PreviousPage}<a href="{PreviousPage}"> << </a>{/block:PreviousPage} | |
{block:NextPage}<a href="{NextPage}"> >> </a>{/block:NextPage} | |
</div> | |
{/block:Pagination} | |
</div> | |
</div> | |
</div> | |
</div> | |
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> | |
<script>window.jQuery || document.write('<script src="https://static.tumblr.com/qxrkgx6/q6kmgn2w2/jquery-1.8.3.min.js"><\/script>')</script> | |
</body> | |
</html> |
i love the plain times theme and have made lots of customizations over the years. so i decided to finally tidy it up and release it as a formal edit.
features:
<!-- pudding: a plain times theme edit by negg.tumblr.com --> | |
<!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"> | |
<head profile="http://gmpg.org/xfn/11"> | |
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> | |
<meta name="viewport" content="width=550"> | |
<meta name="color:Background" content="#ffffff" /> | |
<meta name="color:Text" content="#000000" /> | |
<meta name="color:Link" content="#0000FF" /> | |
<meta name="color:Link Hover" content="#0000FF" /> | |
<meta name="color:Chat name one" content="#000000" /> | |
<meta name="color:Chat name two" content="#0000FF" /> | |
<meta name="font:Body" content="Times New Roman"/ > | |
<meta name="text:Permalink" content="x" /> | |
<meta name="text:Next Page" content="x" /> | |
<meta name="text:Previous Page" content="x" /> | |
<meta name="image:Background Image" content=""/> | |
<meta name="image:Permalink Icon" content=""/> | |
<meta name="image:Header Image" content=""/> | |
<meta name="if:Show title" content="1" /> | |
<meta name="if:Circle Icon" content="1" /> | |
<meta name="if:Blockquote" content="1" /> | |
<meta name="if:Underline links" content="1" /> | |
<meta name="if:Show date" content="0" /> | |
<meta name="if:Show tags" content="1" /> | |
<meta name="if:Show reblogs" content="0" /> | |
<meta name="if:Left align everything" content="0" /> | |
<meta name="if:Center Posts" content="0" /> | |
<meta name="if:Center permalink" content="1" /> | |
<meta name="if:Show Archive Link" content="1" /> | |
{block:Description}<meta name="description" content="{MetaDescription}" />{/block:Description} | |
<title>{Title}</title> | |
<link rel="shortcut icon" href="{Favicon}"> | |
<link rel="alternate" type="application/rss+xml" href="{RSS}"> | |
<style type="text/css"> | |
/* base elements */ | |
html, body, h1, h2, h3, h4, h5, h6, p, ol { | |
margin:0; | |
padding:0; } | |
blockquote{ | |
{block:IfNotBlockquote} | |
margin:0 0 10px 0px; | |
padding:0; | |
{/block:IfNotBlockquote} | |
{block:IfBlockquote} | |
margin:0 0 10px 10px; | |
padding:0 0 0 10px; | |
border-left:solid 1px {color:Text}; | |
{/block:IfBlockquote} } | |
body { | |
font: .88em {Font:Body}; | |
color: {color:Text}; | |
background-color: {color:Background}; | |
background-image: url('{image:Background Image}');} | |
a { | |
color: {color:Link}; } | |
a:hover { color: {color:Link Hover}; } | |
{block:IfUnderlineLinks} a { text-decoration: underline; } | |
{/block:IfUnderlineLinks} | |
{block:IfNotUnderlineLinks} a { text-decoration:none; } | |
{/block:IfNotUnderlineLinks} | |
#container { | |
width: 500px; | |
{block:IfNotLeftAlignEverything} margin: 0 auto; | |
{/block:IfNotLeftAlignEverything} margin-top: 25px; margin-bottom: 25px; | |
{block:IfLeftAlignEverything} margin-left: 25px; | |
{/block:IfLeftAlignEverything} } | |
/* header */ | |
#top { | |
margin-bottom: 15px; | |
{block:IfNotLeftAlignEverything} text-align: center; | |
{/block:IfNotLeftAlignEverything} } | |
#top img { | |
max-height: 220px; | |
{block:IfCircleIcon} border-radius:50%; {/block:IfCircleIcon} } | |
#top h1 a { color: {color:Link}; text-decoration: none; } | |
#top h1 a:hover { color: {color:Link Hover}; text-decoration: none; } | |
.arch-rss-links { margin-top: 10px; } | |
.links { | |
margin-top: 10px; } | |
/* posts */ | |
.post { | |
line-height: 1.5em; | |
margin-bottom: 20px; | |
padding-bottom: 25px; | |
clear: both; } | |
.post h3 { font-size: 1em; } | |
.post p { padding-bottom: 10px; } | |
.caption blockquote { padding-left: 20px; } | |
{block:IfCenterPermalink} | |
.permalink { | |
text-align: center; } | |
{/block:IfCenterPermalink} | |
.permalink img{ | |
max-width: 60px; } | |
/* text posts */ | |
.text-post { | |
{block:IfNotCenterPosts} text-align: justify; {/block:IfNotCenterPosts} | |
{block:IfCenterPosts} text-align: center; {/block:IfCenterPosts} } | |
.text-post img { max-width: 100%; } | |
/* photo posts */ | |
.photo-post { margin-bottom: 5px; {block:IfNotCenterPhotos} text-align: justify; {/block:IfNotCenterPhotos} | |
{block:IfCenterPhotos} text-align: center; {/block:IfCenterPhotos} } | |
.photo-post img { border: 0; } | |
/* quote posts */ | |
.quote-post { | |
{block:IfNotCenterQuotes} text-align: justify; {/block:IfNotCenterQuotes} | |
{block:IfCenterQuotes} text-align: center; {/block:IfCenterQuotes} } | |
{block:IfItalicizeQuotes} | |
.quote-post q { font-style: italic; } | |
.quote-post i { font-style: normal; } | |
{/block:IfItalicizeQuotes} | |
.quote-post .source { | |
font-size: .82em; } | |
/* link posts */ | |
.link-post { | |
{block:IfNotCenterLinks} text-align: justify; | |
{/block:IfNotCenterLinks} {block:IfCenterLinks} text-align: center; | |
{/block:IfCenterLinks} } | |
/* chat posts */ | |
.chat-post { | |
{block:IfNotCenterChats} | |
text-align: center; | |
{/block:IfNotCenterChats} | |
{block:IfCenterChats} | |
text-align: center; {/block:IfCenterChats} } | |
.chat-post ul, .chat-post li { margin: 0; padding: 0; } | |
.chat li { list-style-type: none; } | |
li span.user_1 { font-weight: bold; color: {color:Chat name one}; } | |
li span.user_2 { font-weight: bold; color: {color:Chat name two}; } | |
/* audio posts */ | |
.audio-post { | |
{block:IfNotCenterAudioPosts} text-align: justify; {/block:IfNotCenterAudioPosts} | |
{block:IfCenterAudioPosts} text-align: center; {/block:IfCenterAudioPosts} } | |
/* video posts */ | |
.video-post { {block:IfNotCenterVideoPosts} text-align: justify; {/block:IfNotCenterVideoPosts} {block:IfCenterVideoPosts} text-align: center; {/block:IfCenterVideoPosts} } | |
/* qa posts */ | |
.answer-post { {block:IfNotCenterAnswerPosts} text-align: justify; {/block:IfNotCenterAnswerPosts} {block:IfCenterAnswerPosts} text-align: center; {/block:IfCenterAnswerPosts} } | |
.question { margin-bottom: 10px; } | |
.answered { margin-top: 10px; } | |
/* post metadata */ | |
#post-info { margin-top: 15px; } | |
.all-notes { margin-top: 10px; } | |
ol.notes { margin-left: 1em; padding-left: 1em; } | |
/* navigation */ | |
.navigation { padding-bottom: 25px; } | |
.alignright { float: right; } | |
.alignleft { float: left; } | |
/* footer */ | |
#footer { text-align: center; margin-top: 25px; font-size: .82em; } | |
/*custom css */ | |
{CustomCSS} | |
</style> | |
</head> | |
<body> | |
<div id="container"> | |
<div id="top"> | |
<a href="/"><img src={image:Header Image}></a> | |
{block:IfShowTitle}<h1><a href="/">{Title}</a></h1> | |
{/block:IfShowTitle} | |
<p><em>{Description}</em></p> | |
<div class="links"> | |
{block:HasPages} | |
{block:Pages}<a href="{URL}">{Label}</a>{/block:Pages} | |
{/block:HasPages} | |
<div class="arch-rss-links"> | |
{block:HasPages} | |
{block:Pages}<a href="{URL}">{Label}</a> | |
{block:IfShowCommas},{/block:IfShowCommas} {/block:Pages} | |
{/block:HasPages} | |
{block:AskEnabled} | |
<a href="/ask">{AskLabel}</a>{block:IfShowCommas},{/block:IfShowCommas} | |
{/block:AskEnabled} | |
{block:SubmissionsEnabled} | |
<a href="/submit">{SubmitLabel}</a>{block:IfShowCommas},{/block:IfShowCommas} | |
{/block:SubmissionsEnabled} | |
{block:IfShowArchiveLink}<a href="/archive">archive</a>{/block:IfShowArchiveLink} | |
</div> | |
</div> | |
<br /> | |
</div> | |
<div id="content"> | |
{block:Posts} | |
<div class="post"> | |
{block:Text} | |
<div class="text-post"> | |
<h3>{Title}</h3> | |
{Body} </div> | |
{/block:Text} | |
{block:Photo} | |
<div class="photo-post"> | |
{LinkOpenTag}<img src="{PhotoURL-500}" alt="{PhotoAlt}" />{LinkCloseTag} | |
{block:Caption}<div class="caption">{Caption}</div>{/block:Caption}</div> | |
{/block:Photo} | |
{block:Photoset} | |
<div class="photo-post"> | |
{Photoset-500} | |
{block:Caption}<div class="caption">{Caption}</div> | |
{/block:Caption} </div> | |
{/block:Photoset} | |
{block:Quote} | |
<div class="quote-post"> | |
<q class="{Length}">{Quote}</q> | |
{block:Source}<div class="source">—{Source}</div> | |
{/block:Source} </div> | |
{/block:Quote} | |
{block:Link} | |
<div class="link-post"> | |
<h3><a href="{URL}" {Target}>{Name}</a></h3> | |
{block:Description}<div class="caption">{Description}</div> | |
{/block:Description}</div> | |
{/block:Link} | |
{block:Chat} | |
<div class="chat-post"> | |
{block:Title} | |
<h3><a href="{Permalink}">{Title}</a></h3> | |
{/block:Title} | |
<ul class="chat"> | |
{block:Lines} | |
<li class="{Alt}"> | |
<span class="user_{UserNumber}"> | |
{block:Label} <span class="label">{Label}</span> | |
{/block:Label} </span> | |
{Line} | |
</li> | |
{/block:Lines} | |
</ul> | |
</div> | |
{/block:Chat} | |
{block:Audio} | |
<div class="audio-post"> | |
{AudioPlayerBlack} | |
{block:Caption}<div class="caption">{Caption} ({PlayCountWithLabel})</div>{/block:Caption} | |
</div> | |
{/block:Audio} | |
{block:Video} | |
<div class="video-post"> | |
{Video-500} | |
{block:Caption}<div class="caption">{Caption}</div> | |
{/block:Caption}</div> | |
{/block:Video} | |
{block:Answer} | |
<div class="answer-post"> | |
<div class="question"><strong>{Asker} asks:</strong> <em>{Question}</em></div> | |
<div class="answered">{Answer}</div></div> | |
{/block:Answer} | |
{block:IndexPage} | |
<div class="permalink"> | |
<h3><a href="{Permalink}">{text:Permalink} | |
<img src="{image:Permalink Icon}"></a></h3></div> | |
{/block:IndexPage} | |
{block:PermalinkPage} | |
<div id="post-info"> | |
{block:IfShowDate} | |
{block:Date} | |
<div class="post-date"></div> | |
{/block:Date} | |
{/block:IfShowDate} | |
{block:IfShowTags} | |
{block:HasTags} | |
<div class="tags"> | |
<strong>tags:</strong> {block:Tags}<a href="{TagURL}">{Tag}</a> {/block:Tags} | |
</div> | |
{/block:HasTags} | |
{/block:IfShowTags} | |
{block:IfShowReblogs} | |
{block:RebloggedFrom} | |
<div class="reblogged-from"> | |
<strong>reblogged from:</strong> <a href="{ReblogParentURL}">{ReblogParentName}</a> | |
</div> | |
{/block:RebloggedFrom} | |
{block:NoteCount}<div class="note-count"><strong># of notes:</strong> {NoteCount}</div> | |
{/block:NoteCount} | |
{block:PostNotes} | |
<div class="all-notes"> | |
<strong>notes</strong> | |
{PostNotes} | |
</div> | |
{/block:PostNotes} | |
{/block:IfShowReblogs} | |
</div> | |
{/block:PermalinkPage} | |
</div> | |
{/block:Posts} | |
</div> | |
{block:Pagination} | |
<div class="navigation"> | |
{block:NextPage} | |
<div class="alignright"><a href="{NextPage}">{text:Next Page} > </a></div> | |
{/block:NextPage} | |
{block:PreviousPage} | |
<div class="alignleft"><a href="{PreviousPage}"> < {text:Previous Page}</a></div> | |
{/block:PreviousPage} | |
</div> | |
{/block:Pagination} | |
<div id="footer"> | |
Tumbling from {CopyrightYears}.<br/> | |
Pudding (Plain Times Edit) by <a href="https://negg.tumblr.com">negg</a>. | |
</div> | |
</div> | |
</body> | |
</html> |