#Code Guide

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:

All themes are licensed under the MIT License, which means they’re free for you to use however you want. The only stipulation is that you retain attribution to me, which can be as simple as leaving credit in the HTML/CSS comments (hidden from public view.)
Page themes are platform agnostic layouts and can be used anywhere that supports (modern) HTML/CSS. They use CSS variables to manage user settings so you can swap out colors, images, fonts, etc. These variables are located in the :root element. If you’d like to know more about CSS variables, you can read this guide.
Page themes are meant to look identical to previews out-of-the-box, so they come shipped with web URL images rather than local links. I encourage you to link your content locally.
Page themes are stored in one messy file so you can easily drop it in and test it out, but this is not best practice. If you plan to use any themes across multiple pages, I strongly recommend separating the CSS and JS into their own files.
Themes are tested on Mozilla and Chrome on a variety of displays, but there’s no way I’ll catch all bugs. If anything is weird, let me know.
For instructions on installing a Tumblr theme, you can read their official documentation.

Feel free to email me (nenrikido@pm.me) with any questions/comments or leave a comment here.

Comments

Anonymous · Aug 16, 2025
<3>

Jack AKA Lang · June 16, 2025
Sup shawty, how you doing, looking kinda cute ;)

Distant · June 12, 2025
Hell fucking yeah this place is radical

Yuri and Arthur · June 4, 2025
Hi Dear, we are from brazil and see this is incredible

I'm lost for words, is so clean and polish
your work is so freaking awesome!!

steve2 · Mar 14, 2025
Omg your webpage looks awesome!!! 😍

Infiland · Feb 28, 2025
hi

Hany · Feb 26, 2025
Hi dear, do you consider to release a theme with journal retro inspired? I read your webring and think it would be cool if there is a theme. thank you for sharing many.

Anonymous · Aug 24, 2024
this helped a lot in making my page i appreciate it!!

Anonymous · July 1, 2024
how do you use this and is it on andiord or pc/windows only?
just asking btw

jay · Nov 28, 2023
OH MY GOD this is so incredible?!! so inspiring im awed

Showing 1 to 10

Rainbow Tumblr Theme

live preview

Finally converted the Rainbow Page Theme to a Tumblr theme. Happy pride!

Features:

500px posts
Pride flag theme toggler
Optional jukebox/badges boxes
Custom audio player for posts
Customizable title + title font size
Support for additional pages
User can add a link to any song for jukebox
Optional link 4 + 5
Optional background image or color
Semi-transparent posts
Custom permalink icon + favicon

	<!-- 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"></a>
	{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>

view raw rainbow-theme-tumblr.html hosted with

by GitHub

A theme preview. A retro style background with boxes overlaid. There is an 8 striped flag in the corner. As the user clicks each stripe, the color scheme of the box shadows, border, and text changes to match.

An alternate theme preview. This one has a sky background with a rainbow and an icon of Michiru Kaioh from Sailor Moon.

A zoomed-in preview of the sidebar boxes.

Rainbow Page Theme

live preview / tumblr post

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:

customizable background & sidebar images
pride flag theme toggler (uses javascript)
animated rainbow title
lightly styled audio player
responsive image class
…and other cool stuff!

	<!--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>

view raw rainbow-page-theme.html hosted with

by GitHub

A theme preview. It's a gif of a standalone page. It has a header of Sakura from Cardcaptor Sakura and a background image of cherry blossoms over a river. Two pixels are to the right and left of the header image. The gif shows someone clicking on the left pixel, which opens a pop-up box with more text.

A mobile preview of the theme. The pixels, rather than sitting besides the header image, rest beneath the main content.

An alternate theme preview, with brighter pinks and blues. The theme uses a different gif of Sakura.

Sakura Page Theme

live preview / tumblr post

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:

2 custom pixels that trigger pop-up boxes/modals
customizable fonts, images, and colors
title font supports english & japanese
header designed for 4:3 ratio gifs/images
mobile responsive (built with flexbox)

	<!-- 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>

view raw sakura.html hosted with

by GitHub

Sunflower Page Theme

live preview / tumblr post

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:

up to 2 side images (left & right)
customizable fonts, font sizes, images, and colors
mobile responsive (built with flexbox)
…and more!

	<!-- 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>

view raw sunflower-page.html hosted with

by GitHub

Preloader

blog post + codepen

“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>

view raw preloader.html hosted with

by GitHub

Toothache Theme

live preview / tumblr post

this is a re-release of my very first theme back in 2016…it’s cleaned up & a bit more comprehensible.

features:

400px posts
2 links w/ a customizable link divider
customizable post background color, permalink, favicon
dropdown font selection & customizable font size
options for rounded/square sidebar image
option to show/not show your description

	<!-- 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"></a></div>

	{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>

view raw toothache-theme.html hosted with

by GitHub

Pudding Theme

live preview / tumblr post

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:

500px posts
left or center aligned posts
links for ask & archive (if enabled)
customizable fonts (dropdown selection)
custom permalink icon or text
optional title, header image, & blockquote indentation

	<!-- 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>

view raw pudding-theme.html hosted with

by GitHub

#Code Guide

All themes are licensed under the MIT License, which means they’re free for you to use however you want. The only stipulation is that you retain attribution to me, which can be as simple as leaving credit in the HTML/CSS comments (hidden from public view.)

Page themes are platform agnostic layouts and can be used anywhere that supports (modern) HTML/CSS. They use CSS variables to manage user settings so you can swap out colors, images, fonts, etc. These variables are located in the :root element. If you’d like to know more about CSS variables, you can read this guide.

Page themes are meant to look identical to previews out-of-the-box, so they come shipped with web URL images rather than local links. I encourage you to link your content locally.

Page themes are stored in one messy file so you can easily drop it in and test it out, but this is not best practice. If you plan to use any themes across multiple pages, I strongly recommend separating the CSS and JS into their own files.

Themes are tested on Mozilla and Chrome on a variety of displays, but there’s no way I’ll catch all bugs. If anything is weird, let me know.

For instructions on installing a Tumblr theme, you can read their official documentation.

Feel free to email me (nenrikido@pm.me) with any questions/comments or leave a comment here.

Comments

Anonymous · Aug 16, 2025
<3>

Jack AKA Lang · June 16, 2025
Sup shawty, how you doing, looking kinda cute ;)

Distant · June 12, 2025
Hell fucking yeah this place is radical

Yuri and Arthur · June 4, 2025
Hi Dear, we are from brazil and see this is incredible

I'm lost for words, is so clean and polish
your work is so freaking awesome!!

steve2 · Mar 14, 2025
Omg your webpage looks awesome!!! 😍

Infiland · Feb 28, 2025
hi

Hany · Feb 26, 2025
Hi dear, do you consider to release a theme with journal retro inspired? I read your webring and think it would be cool if there is a theme. thank you for sharing many.

Anonymous · Aug 24, 2024
this helped a lot in making my page i appreciate it!!

Anonymous · July 1, 2024
how do you use this and is it on andiord or pc/windows only?
just asking btw

jay · Nov 28, 2023
OH MY GOD this is so incredible?!! so inspiring im awed

Showing 1 to 10

Rainbow Tumblr Theme

live preview

Finally converted the Rainbow Page Theme to a Tumblr theme. Happy pride!

Features:

500px posts
Pride flag theme toggler
Optional jukebox/badges boxes
Custom audio player for posts
Customizable title + title font size
Support for additional pages
User can add a link to any song for jukebox
Optional link 4 + 5
Optional background image or color
Semi-transparent posts
Custom permalink icon + favicon

	<!-- 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"></a>
	{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>

view raw rainbow-theme-tumblr.html hosted with

by GitHub

#Code Guide

Comments

Rainbow Tumblr Theme

Rainbow Page Theme

Sakura Page Theme

Sunflower Page Theme

Preloader

Toothache Theme

Pudding Theme

START MENU

#Code Guide

Comments

Rainbow Tumblr Theme

Rainbow Page Theme

Sakura Page Theme

Sunflower Page Theme

Preloader

Toothache Theme

Pudding Theme

START MENU