The Yellow Archive

A curated collection of web development resources and themes.

[the-yellow-archive]

Hello and Welcome to the Yellow Archive!

This blog is a curated space dedicated to themes, tutorials, coding snippets, and other resources for the Tumblr community. Its goal is to provide an organized, easy-to-navigate hub where creators — whether beginners or advanced users — can find tools and inspiration for customizing their blogs.

Currently, the archive is in beta, so most links and resources are still being added and may not be fully functional yet. I’m actively working to expand and organize the content, so check back often for updates and new additions.

Here’s what you can expect from the Yellow Archive:

Theme Layouts: Carefully designed for intuitive browsing, with dynamic badging, difficulty indicators, and external link overlays.

Categorized Resources: From CSS and JS snippets to full themes, animations, and typography templates.

Enhanced Navigation: Search and filter functions to help you quickly find the resources you need.

This blog is meant to be a central place for learning, experimenting, and discovering Tumblr customization tools. I hope it can serve as a helpful starting point for anyone looking to explore and implement creative ideas.

Feel free to explore, reblog, and share resources, and I welcome any suggestions for future updates.

Thank you for visiting — I’m excited to build this archive with you!

[fukuo]

How to make a featured post using Tumblr API

As you probably already know, Tumblr doesn’t have the ability to have featured posts. Just imagine you have an important post that needs to be pinned on your blog that is dynamically updated with no efforts (no need to directly tweak your posts in your HTML editor, just tag the post with “featured” and it will automatically show up). You can see the example on my blog with the title named “latest posts”. In it, you can see four posts that are dynamically added if I tag them with a specific tag. Cool, isn’t? You can see the example here

Thus, I am here sharing my way on how to make it possible using jQuery and Tumblr API (I am sure there will another way to make this happen using vanilla JS, but since I am not good at this, I consider using jQuery instead). Hopefully, it will help you guys

Keep reading

[octomoosey]

meta tags - how to add basic customisation options into your theme

for example giving options to change colour:

add text:

add images:

etc… tutorial under the cut!

Keep reading

[glenthemes]

mini spotify player tutorial

🌟 This fix is for custom themes, not the Tumblr dashboard.

Whilst spotify has options for large and compact players when you share songs on other platforms, tumblr sometimes defaults it to the large player on blog themes, which can be visually unpleasant. I wrote a quick fix that always shows the mini player if it’s a song ＾▽＾/° (I’ve left playlists & albums untouched, because minimizing the player would make them look like a single song.)

Paste the following before </style>in your theme:

iframe[src*='open.spotify.com'][src*='track'], figure[data-npf*='open.spotify.com'][data-npf*='track']{ height:80px!important; }

That should work. But in case it doesn’t, you can also paste this before </body> in your theme:

<script> var spotsongs = document.querySelectorAll("iframe[src*='open.spotify.com'][src*='track'], figure[data-npf*='open.spotify.com'][data-npf*='track']"); Array.prototype.forEach.call(spotsongs,function(minitrack){ minitrack.setAttribute("height","80"); }); </script>

credit isn’t required, but I’d appreciate a share to this link in case anyone else finds the large player annoying ✧_✧

if you run into any problems let me know 🤙

[whereinmnl]

THEME RELEASE: SINING

sining (n.) — art; the expression or application of human creative skill and imagination.

I've actually been working on this theme for the past week, and I'm so happy to finally share it! 💛

Since my last release, Ala-ala, reached over 150 notes, I realized many bloggers enjoy this kind of aesthetic. It inspired me to create another one. Ala-ala was inspired by NewJeans, and now I'm excited to introduce my new theme, SINING.

A grunge, zine-inspired Tumblr theme built with paper textures, tape accents, neon pop colors, and a raw punk aesthetic. Designed to feel like a hand-crafted collage, Sining gives your blog a bold identity without sacrificing functionality.

STATIC PREVIEW // CODES: GITHUB / KO-FI / PAYHIP

FEATURES

Sidebar: Sticky polaroid/flyer layout featuring a custom badge, tape accents, and an auto-scrolling description box.

Interactive Menu Pop-ups: Sleek pop-out panels for your Status, Ask Form, and Custom Links to keep your layout clean.

Floating Avatar Side-Stack: Hovering status tooltips for up to 3 customizable floating avatars on the side.

Seamless Mobile Design: Fully responsive layout with mobile-optimized post headers, note counts, and scaling elements.

RULES:

Keep the Credits: Please keep the credit intact. It’s located on the “W” logo in the corner.

Personal Use Only: No reselling, redistributing, or claiming the theme as your own.

No Base Coding: Do not use this code as a foundation for your own theme releases.

Total Customization: Edit to your heart’s content! Feel free to change fonts, colors, and tweak the code to fit your aesthetic.

No Re-hosting: If sharing, please always link back to the original post.

As always, feel free to message me if you run into any problems or need help customizing it 💌 I put a lot of love into this one, and I really hope you enjoy using it! 🍵

Support me: Themes / Tutorials / Buy me kofi

Likes and reblogs are widely appreciated! Let me know what you think! 👇

[ghcstfaec]

theme: calling out to you by ghsctfaec / preview: sidebar version, header version & download

features: sidebar version: 300x250px sidebar image, header version: 552x250px header image, 50x50px icon image, modal: five custom links, 180x180px about image, user information section, about section, 550px text posts, option for hide or show tags, option for back to top

notes: a remix of theme: love me like this. you will recieve a .zip file when you download. please check your settings if you allow people to ask you questions or submit to you things. otherwise, your ask and submit links won't show. npf posts friendly (+ among other things!). full credits to the resources, scripts and tutorials are found on the bottom right corner. if you found any coding bugs in my work, please send me a message. i will get back to your shortly.

quick links: terms of use, commissions, full credits, tip me, contact

[pouthongwon]

an about page pack by pouthongwon

hyeyul: preview / code: github

chaeyul: preview / code: github

shared features: - two tabs, 'about' and 'misc'. one containing a biography, stats, likes and dislikes list. while the other has before you follow/don't interact critera, and updates - a sidebar image - light/dark toggle - tumblr controls on click - scroll to top button

hyeyul's features: - dual sidebars, one with standard links and the other with custom links - header image and icon (instructions on how to change them are in the code)

chaeyul's features: - dual sidebars, one with tab buttons and the other with standard and custom links on click - tasklist in the second tab (instructions on how to add more are in the code as well) - sideblog section (four is the default, feel free to add more or get rid of some)

note: once again, there are instructions in the code on how to enable javascript on your blog, changing images, and changing icons. read everything thoroughly before asking any questions.

[whereinmnl]

THEME RELEASE: ALA-ALA

Hi everyone! I’ve officially rebuilt one of my very first theme (previously known as Ditto Digital), and I’m so happy to introduce it as Ala-ala ✨

[ STATIC PREVIEW ] [ GITHUB INSTALL ] [ KO-FI INSTALL ]

Why "Alala"? I chose the name Ala-ala— (Tagalog for "memory" or "to remember")—because this theme is inspired by the Y2K era, a time that feels so nostalgic and digital. Much like how the early internet was a place where we kept our first digital memories, this theme is designed to help you capture and display your own moments. It’s about the beauty of looking back while moving forward.

What’s New?

Full Native NPF Support: The old code relied on legacy post blocks that struggled with modern Tumblr uploads.

Theme Features:

Dark & Light Mode: Includes a built-in toggle.

Sidebar Modals: “About Me” and “Ask/FAQ” and etc windows that open right on your homepage—no loading required!

Slide-out Link Menu: A clean, organized sidebar panel where you can add up to 10 custom links.

Fully Responsive: Your blog will look perfect on everything from large desktop monitors to mobile phones.

Highly Customizable: Change your colors, fonts, and images directly through the Tumblr customization menu.

Rules:

Keep the Credits: Do not remove or hide the footer credit.

Personal Use Only: No reselling, redistributing, or claiming the theme as your own.

No Base Coding: Do not use this code as a foundation for your own theme releases.

Total Customization: Feel free to change colors, fonts, and images to make it yours!

No Re-hosting: If sharing, please always link back to the original post.

As always, feel free to message me if you run into any problems or need help customizing it 💌

Thank you so much for the continuous love and support!!

Support me: Themes / Tutorials / Buy me kofi

Likes and reblogs are appreciated!

[pneuma-themes]

Theme #10: Aether by @pneuma-themes [Support me @ Ko-Fi?]

Even if I now saw you only once, I would long for you through worlds, worlds.

Live Preview (Temporary) / Static Preview: [Index] [Permalink] / Get the code: [Github] [Pastebin]

A month late, but happy new year, my friends! This is a minimalist and sleek header theme inspired by the clean aesthetic commonly found on WordPress templates. Suitable for most blog types, and works well for writing-heavy blogs too. This theme finally sees the light of day after being stuck in development hell for probably 3 months or something, ahaha...

Features:

Customizable post widths and font sizes. The live preview uses 650px post width and 13px font size. Enter the desired post width on the post width field and the desired font size on the font size field on the Customization page.

One accent color, 5 color options.

Sticky navigation links.

4 custom links.

A 36 x 36px sized icon on the top bar, should automatically resize to fit.

Should be mostly NPF-friendly.

Notes:

Usual discretion applies.

Now that Tumblr has rolled out ads for non-premium users, the ads might mess with the layout, especially at the bottom of the page. This may result in a different viewing experience for visitors and you, and unfortunately, I can't do anything about it.

As noted in my F.A.Q, please enter the size of the post and the font size first if your layout looks wonky!

Credits:

Icon: @acuite

Fonts: Lora, Lato @ bunny.net

Un-blue polls, NPF audio player, NPF image fix by @glenthemes

photoset.css by @annasthms and @eggdesign

Tooltip: tippy.js

NPF reverse compatible template: @eggdesign

Icon fonts: Boxicons

Please like and reblog if you like or are using this!

[pouthongwon]

yet: a header and dual sidebar theme by pouthongwon

live preview / code

features: - 400px - 540px posts - header and sidebar images that change depending on the theme (light or dark) - dual sidebars: one with a custom description and the other with five tabs - tab buttons can be positioned at the either the left, center, or right of the screen - tab panels: custom title and optional subtitle and extra links, six user stats, ten likes/dislikes, five updates, and five tasks in the tasklist - six custom links and six more extra links

note: if you want to add more likes/dislikes and tasks to the tasklist, please follow the theme guide.

[phantomcodes]

willow | theme by sage

get the code: static preview sidebar theme i made for my main blog! live preview @tina-snow

features (more info below the cut):

select: post width (540px / 600px / 500px), corners (4 options), tags default or on click

sidebar includes an uploadable image with a custom description, 3 info stats, updates button, up to 4 extra links, fixed pagination

customizable: colors, body & title fonts, and font size

npf supported, responsive design, day/night, scroll to top, tumblr controls, tabler icons

nothing needs to be changed in the code, everything can be changed in the customize panel!

terms:

reblog if using

do not touch the credit

all terms / faq

credits listed in the code / credits page

please consider supporting me ♡

blog name !! important

make sure you fill out the blog name field, this is what will show on the top of all your original posts. to clarify: your blog name is your blog’s url - for example: phantomcodes

responsiveness

when the browser window gets too small the sidebar will disappear and become toggleable, the sidebar toggle button will appear on the top right below the day/night button the pagination will move to the bottom of the page below the posts

updates tab

the updates tab has up to 6 updates each with an icon, optional title, & text and space for a separate text section leave the 'update 1' field blank if you don't want the updates tab

general notes

many things will not show up if they’re left empty, for example: if you don’t want the title stats leave the title stat fields blank, etc.

reminders

remember tumblr’s customize panel is buggy, toggle the options on/off before saving. similarly some things will not appear in the customize panel preview - save and exit to view your changes

i’m still on semi-hiatus, i’ll be around for questions but please check my faq, answered asks, etc. before asking.

[enbythemes]

Theme 5.2: Cold by enbythemes static + live preview | code

features and options:

Two color gradient accents

Left or right sidebar position

Three custom sidebar links, as well as endless with Tumblr Pages

Custom sidebar title and description

Posts Sizes: 400px / 450px / 500px / 540px

Responsive

Light/Dark toggle

NPF support

Optional rounded corners, box shadows and full width sidebar links

Optional dark mode image filter(s) that slightly takes down the brightness on dark mode

notes:

ask and submit link in header will only appear if you have them enabled in your settings

the tumblr customization page is buggy. you may have to toggle the options on/off first. be sure to save and view on your blog before sending me any message about problems

terms:

full terms page

please reblog if using

do not touch the credit

full credits in code / credits page

[the-yellow-archive]

hi! how were you able to code the featured on your sidebar?

hey there anon, all thanks to fukuo.

[whereinmnl]

PAGE THEME RELEASE: PERSONA

“The persona is a kind of mask, designed on the one hand to make a definite impression upon others, and, on the other, to conceal the true nature of the individual.” — Carl Jung

Meet Persona, the second release in my Psych Series! Inspired by Jungian archetypes, a persona is the literal mask we wear for the outside world—making it the ultimate concept for a character directory.

Persona, a clean, modular directory theme designed meticulously for roleplayers, writers, and worldbuilders who need an elegant space to showcase their characters.

PREVIEW // CODES: GITHUB // KO-FI // PAYHIP

Features

Pure CSS Pop-up Portfolios: No JavaScript used!

Built-in Filtering System: Easily sort your characters by status and toggle between "Show All", "Active", and "Hiatus" instantly.

Floating Navigation Menu: A sleek, out-of-the-way hamburger menu sits at the bottom left of the screen. When clicked, it expands into a stylish panel with tooltips.

Connections Grid: Inside each character's pop-up portfolio is a dedicated space to link their allies, familiars, and friends using neat, circular profile pictures.

Fully Responsive: Looks stunning on desktop, tablets, and mobile devices. The CSS grid automatically adjusts from a multi-column layout to a clean, single-column scroll on smaller screens.

Credits & Inspiration:

Typography: Playfair Display and Inter

Icons: Feather Icons by Cole Bemis

Images: Pinterest

Coding Techniques: CodePen and CSS-Tricks.

Rules:

Keep the Credits: Please keep the credit intact. It’s located on the “W” logo in the corner.

Personal Use Only: No reselling, redistributing, or claiming the theme as your own.

No Base Coding: Do not use this code as a foundation for your own theme releases.

Total Customization: Edit to your heart’s content! Feel free to change fonts, colors, and tweak the code to fit your aesthetic.

No Re-hosting: If sharing, please always link back to the original post.

As always, feel free to message me if you run into any problems or need help customizing it 💌 I put a lot of love into this one, and I really hope you enjoy using it! 🍵

Support me: Themes / Tutorials / Buy me kofi / Payhip / Commissions

Likes and reblogs are widely appreciated! Let me know what you think! 👇

[kosmique]

céu

a theme with a cool header.

live preview / install

features:

responsive.

npf support.

five font size options.

up to six custom links and unlimited pages.

custom header.

notes:

to change the font, go to the google fonts website and choose the one you prefer. copy and paste the font name into the field provided

credits: full credits list

[yeoli-thm]

tutorial: removing tumblr app button on mobile themes

for anyone making responsive themes, the tumblr app button popping up on mobile devices and then having to manual close it each time can be annoying, so i figured out a way to remove it.

just copy and paste the following to your css section (can be through the ‘Add Custom CSS’ feature in your tumblr theme editor or between the <style> and </style> tags in your code)

.tmblr-iframe--app-cta-button {     display: none!important; }

and that’s it, you’re done!

[beanswithbones]

So you wanna make gradient text?

this was originally made just to help a friend but she suggested I post this publicly to help bcs the other tutorials out there aren't very straight forward. with that said pls ignore typos:

↓↓ Site Link ↓↓

↓↓ Site Link ↓↓

Note: you can still continue typing in the preview

Hope some peeps find this helpful