Meet Blush — first of all, it now fully supports new format!
It’s time for a major makeover! I’ve spent some time overhauling the Blush Theme to make it more interactive, customizable, and modern. While it keeps that soft, aesthetic charm you love, under the hood, it’s a whole new experience.
Please note that I’ll be removing all old versions of this theme, and this will be the main updated version moving forward. If you’re currently using an older version, I highly recommend updating to avoid compatibility issues with newer tumblr post formats.
questions regarding the old version will be ignored, sorry :(
Remember to toggle the buttons on the header to see all the features!
✨ WHAT’S NEW?
Dark Mode Toggle: Switch between a soft blush morning and a cozy midnight aesthetic with one click.
Integrated Modals: The About and Message sections now open in beautiful, centered pop-up modals.
FAQ Accordion: Keep your inbox clean with a built-in FAQ section inside the Message modal.
Status Bubble: A new "Status" feature in the header to share what you’re currently doing, watching, or feeling.
Iconic Navigation: Choose between classic text links or sleek icons (powered by Phosphor Icons) for your header.
Flexible Layouts: Toggle between a 2-column masonry grid or a Single Column layout for a more focused reading experience.
Infinite Scroll: Optional infinite scroll support for that endless browsing vibe.
Cute Custom Tooltips: Replaced the boring browser tooltips with tiny, stylish ones that match your accent color.
Full NPF Support: Better handling of the New Post Format, ensuring reblogs and complex posts look perfect every time.
📝 HOW TO USE THE NEW FEATURES
Modals & FAQ: > To set up your FAQ, simply fill in the "FAQ Question" and "FAQ Answer" variables in the customize panel. To edit your About section, use the "About Me Text" box.
Status Message: Update your "Status Message" text variable whenever you want to give your followers a quick update!
Navigation Icons: If you prefer icons over text, simply check the "Header Links As Icons" box.
Rules
Keep the Credit: The footer credit must stay visible and unaltered at all times.
Personal Use Only: Do not resell, redistribute, or claim any part of the code as your own.
No Base Coding: Don't use this code as a foundation for your own theme releases or templates.
Customize Freely: Colors, fonts, images — make it yours! Alter the aesthetics as much as you like.
No Re-hosting: If sharing this theme elsewhere, always link back to the original post.
Need Help? If you break the code while customizing or need help tweaking a layout, send an ask — happy to help ♡
Credits:
Icons by Phosphor Icons
Base code for NPF format by Eggdesign
Audio scripts by Mournstera
Fonts via Google Fonts
Infinite Scroll by Metafizzy
If you enjoy the theme, consider supporting my work! It helps keep the codes free and new themes coming ✿
my current desktop theme is incomplete at the moment, but i just wanted to shout out the wonderful and amazingly talented @whereinmnl (rela) 💜 💜. she made me a theme that i completely adore and bonus, it's so fun to play around with (click all the links - they pop out!!! it's magical!!!!) a huge thank you for your patience and immense kindness!!! keep an eye out for more themes from her in the future ✨✨✨✨✨✨
THEME RELEASE: SUPERNATURAL (NEW JEANS-INSPIRED THEME)
Hi everyone! 🐰 I’m so excited to finally release my new theme, Supernatural. It’s a NewJeans-inspired, retro desktop theme designed to make your blog look like a Y2K operating system.
I wanted something that felt nostalgic but clean, so I included a hidden "Bento Grid" dashboard that holds your bio, status, and playlist!
[ Static Preview ] [ Get the Code ]
✨ Features:
Custom Playlist Modal: Fully customizable through the dashboard (Song title, artist, status, and profile text).
ID-Card Sidebar: Features a sticky profile card with navigation buttons.
Y2K Aesthetic: Spinning CD animation, pixel-style fonts (VT323), and "Window" bar headers for every post.
Clean Footer: Organized tags and meta-info (Via/Source) aligned with action buttons.
Responsive: Works on mobile and desktop.
Custom Colors: Change all accents (Blue, Green, Pink) to fit your own palette.
Rules of Use:
Do Not Remove Credit: Please keep the credit link in the footer visible.
Personal Use Only: No reselling or redistributing the code.
No Base Coding: Do not use this as a base for your own theme releases.
Editing: Feel free to customize colors and fonts!
Let me know if you use it! Reblogs and likes are highly appreciated! 👖💙
Check out my other themes here, and my tutorials here.
⚠️ DISCLAIMER: This theme is for personal use only. Please do not remove the credit link to @whereinmnl or redistribute the code as your own. I do not own the images used in the preview; all credits go to their rightful owners.
Welcome to the Shadow Theme, an atmospheric about-me page. I call it this because it thrives in the dark—built on high-contrast monochromes, subtle hidden tooltips, and an aesthetic that feels like a forgotten terminal operating in the digital underground.
STATIC PREVIEW // CODE
The Features
01. Layout & Grid
Locked Terminal Layout: A fixed, single-screen dashboard design on desktop with hidden main scrollbars for an ultra-clean, app-like feel.
Fully Responsive: Automatically stacks into a clean, scrollable column layout on mobile devices so your content is never cut off.
02. Interface & Customization
Cyberpunk/Noir UI: Comes with a custom crosshair cursor, styled inner scrollbars for your text boxes, and stark black-and-white text selection colors to match the aesthetic.
CSS Glitch Animations: Features a pure CSS chromatic/monochrome glitch effect on the main header that requires no external scripts.
Interactive Elements: The avatar frame features a smooth, animated grayscale-to-color reveal when hovered over.
03. Navigation & Links
Minimalist Nav & Socials: Clean, sticky top navigation paired with a "system log" style social media node using FontAwesome 6 icons.
Subtle Widget: Includes an unobtrusive, floating initial widget in the corner with a custom, smooth-sliding CSS tooltip.
04. Profile & Data
System Log Attributes: A unique data block to display your "stats" (like Class, Location, Status, MBTI, or any custom text you want).
Contained Bio Block: A dedicated, scrollable text area for your bio or manifesto that keeps the main page locked and perfectly framed.
Important Info
100% PURE CSS: This theme contains zero JavaScript. Since Tumblr custom pages often restrict or strip out scripts, I built every single animation—from the glitching text to the hover tooltips—using only CSS.
For the CSS Glitch Header to work properly, please find this code: <span class="glitch-line" data-text="YOUR">YOUR</span> You MUST change both the visible text AND the data-text attribute to match your desired word. If they do not match, the glitch masking animation will break.
To change your avatar, simply locate the <img src="..."> tag inside the avatar-frame div and replace the URL with your own direct image link.
Disclaimer
Credits: Please do not remove the floating widget in the corner or the hidden credit in the code. It helps creators like me continue making themes!
Editing: You are free to edit the colors, fonts, and images to match your aesthetic! However, do not use this code as a “base” to build your own theme for release.
Support: If you find a bug, feel free to send me an Ask.
Hi everyone! 👋 If you’ve been scrolling through other blogs thinking, "How did they do that?" but you’re too scared to touch your theme's HTML, this post is for you.
You don't need to be a coder to make your theme look cute. I’ve put together a collection of 12 Simple CSS Codes that you can just copy and paste.
🌸 Want to see them in action first?
CLICK HERE TO VIEW THE LIVE PREVIEW
(Check out the preview to see exactly how these move and look!)
🛠️ How to Add These Codes
It is completely safe! If you don't like the result, you can just delete the code and your theme returns to normal.
Go to your blog and click Edit Appearance (the palette icon).
Click Edit Theme.
Scroll down the sidebar and look for "Advanced Options" or "Add Custom CSS". You may also put this under your <style> tag.
Paste ONE of the codes below into that box.
The Design Collection
01. Soft Corners
If your theme feels too "sharp," this softens the edges of every image.
img { border-radius: 30px; }
02. The Noir (B&W Reveal)
A classic look. Images are black & white until you hover over them.
Don't paste them all! Pick just one effect for the best result.
Customize: You can change the numbers! For example, change 0.6s to 1s for a slower movement, or 30px to 10px for less rounded corners.
Happy editing! Let me know which one is your favorite! 💖
⚠️ Disclaimer: These codes target the standard img tag, which means they will affect most images on your blog. Depending on how your specific theme was coded by its creator, these snippets might interact differently with your layout (e.g., sidebar icons or header images). If something looks wrong, simply delete the code from the Custom CSS box and save, and your theme will return to its original state. Always back up your theme code before making major changes!
A minimalist, editorial "About Me" hub for urban explorers and digital curators.
Hello everyone! I am so happy to finally share a project I’ve been working on: Monograph. This isn't just a bio page; it’s a seamless, interactive archive designed to give your followers a deep dive into your world without ever leaving the page.
It was a labor of love to get that "no-refresh" feel just right, and I hope you love the clean, architectural vibe as much as I do!
LIVE PREVIEW // CODE
✨ Key Features:
Seamless Navigation: Switch between Home, Bio, FAQ, and Tags instantly. No loading screens, just pure CSS magic.
Vitals Sidebar: A dedicated spot for your current status, location, and mood.
Interactive FAQ: Sleek, accordion-style questions to keep things tidy.
Built-in Ask Box: Let your followers message you directly from the FAQ page.
"Cute" Tag Directory: Organized pill-shaped tags with a playful "pop" hover effect.
The Aesthetic: Subtle film grain texture, high-end editorial fonts, and a custom crosshair cursor for that precision-design feel.
🛠️ Quick Installation Guide
Create a Standard Page on your Tumblr.
Toggle to the HTML View (< >).
Paste the code and replace YOUR-USER-NAME (around line 186) with your actual handle so your Ask Box works!
🛠️ Customization Tutorial
If you’re new to coding, don't worry! Here is how to make Monograph your own:
1. Changing your Avatar & Title
Avatar: Look for line 145. Replace the URL inside src="..." with your own image link.
Title & Description: Around lines 146-147, you can change "monograph." and the "Architectural fragments..." text to your own blog name and bio.
2. Updating your "Vitals" (Status)
Scroll to the section (around line 149).
Change the text inside the tags to update your Status, Mood, and Coordinates.
3. Activating the Ask Box
Go to line 186.
Find YOUR-USER-NAME inside the iframe link and replace it with your actual Tumblr username.
Note: Ensure "Allow people to ask questions" is turned ON in your blog settings.
4. Setting up your Tags
Search for the sections (around line 197).
Change the /tagged/korea links to match your blog’s actual tags, and change the "Manila" text to the name you want displayed on the button.
This theme is free to use and customize! You are welcome to change the colors, fonts, and internal sections to fit your blog's aesthetic.
A Note on Originality: Because of the minimalist and editorial nature of this design, you may notice similarities to other theme pages in the community. However, these codes were built from the ground up by me with a lot of hardship and late-night trial and error. I’ve put a lot of heart into the specific logic and structure of this layout.
Credit: Please do not remove or hide the floating "W" signature in the top-left corner.
Support: If you use this theme, a reblog, a like or a shout-out would mean the world to me!
I've been using these cute effects on my own themes and pages recently, so I decided to share the codes with everyone! 🌸
They are super easy to add and make your blog look extra special. You can see how they look in the preview above! These are "plug and play"—just copy the code block and paste it into your theme's description or a custom page or anywhere you would like this to appear.
1 ) The Gradient Text A simple way to make your text pop with a pink & blue gradient.
<style> .whereinmnl-gradient-text { font-family: sans-serif; font-weight: 800; font-size: 30px; text-transform: uppercase; /* The Magic Gradient Logic */ background: linear-gradient(45deg, #00b4d8, #ffc8dd); -webkit-background-clip: text; /* Clips the background to the text shape */ -webkit-text-fill-color: transparent; /* Makes the text see-through */ display: inline-block; } </style>
<span class="whereinmnl-gradient-text">Welcome Home</span>
2 ) The Glitch Effect Header A cool animated glitch effect. Remember to change the data-text="EO" part to match your text so the layers align!
3 ) The Clickable FAQ (Accordion) Click to expand! Great for "About Me" or "Commission" pages. No Javascript needed.
<style> .whereinmnl-details { background: #fff; border: 1px solid #e3f2fd; border-radius: 10px; margin-bottom: 10px; overflow: hidden; font-family: sans-serif; } /* The Clickable Header */ .whereinmnl-details summary { background: #e3f2fd; /* Light Blue */ padding: 10px 15px; cursor: pointer; font-weight: bold; color: #5f6c7b; list-style: none; /* Hides default arrow */ position: relative; transition: 0.3s; } /* Hide default marker in Safari */ .whereinmnl-details summary::-webkit-details-marker { display: none; } /* Custom Plus Icon */ .whereinmnl-details summary::after { content: '+'; position: absolute; right: 15px; font-weight: bold; color: #00b4d8; } /* When Open */ .whereinmnl-details[open] summary { background: #ffc8dd; /* Turns Pink */ color: #fff; } .whereinmnl-details[open] summary::after { content: '-'; color: #fff; } /* The Content Inside */ .whereinmnl-details p { padding: 15px; margin: 0; font-size: 12px; line-height: 1.5; color: #555; } </style>
<details class="whereinmnl-details"> <summary>Can I use this as a base code?</summary> <p>No, please do not use my themes as a base. You can edit them for personal use only!</p> </details>
<details class="whereinmnl-details"> <summary>Do you take commissions?</summary> <p>Yes! My ask box is open for custom requests.</p> </details>
📝 A Little Note: These codes are for personal use only (to decorate your own blog). Please do not use them as a base for themes you intend to redistribute or sell. If you run into issues, double-check that you copied the whole block! Happy coding! 🌸
TUTORIAL: CSS "Curtain" Reveal Effect for Theme Cards
Hi everyone! 💖
I received a request asking how to code the specific hover effect I used on my previous theme boutique, so I decided to make a quick tutorial for it!
This is a "Curtain" Reveal Effect. When you hover over the card, a pink overlay opens up in a circular motion (like a curtain!) to reveal your links, while the image zooms in slightly. It’s perfect for theme creators who want a cute, interactive way to display their work.
🎥 Check out the video attached to see the live preview!
How to use it: It’s super simple. You don't need to install any heavy scripts. Just COPY + PASTE the code below into your HTML where you want the effect to appear.
To change the Image: Look at the very bottom of the code in the HTML part. Find the line that says background-image: url('...'). Simply replace the link inside the quotation marks with the direct link to your own image.
To change the "Curtain" Color (Pink): Scroll up to the section and look for .theme-links. Find the line background: rgba(255, 200, 221, 0.9);. You can change the RGB numbers or replace the whole code with a hex code (like #000000) of your choice!
To change the Text Color: Look for #00b4d8 (the blue color) inside .theme-name and .theme-links a. Replace this code with any color you want for the title and the buttons.
DISCLAIMER: This code was written by me based on a design I previously used for my own projects. While the concept of a circular reveal exists in web design, this specific implementation is my own coding. You are free to use this in your personal or commercial themes! Credits to whereinmnl are appreciated but not strictly required. Please do not repost this tutorial or claim the code as your own.
