This page is completely free. Please support me and my work by liking and reblogging this post!
[ INFORMATION ]
THIS CODE IS 100% JAVASCRIPT FREE!!!
You can add as many gif boxes as you want, there is no restriction.
The theme is very responsive and doesn't need much editing!
All colors, sizes and effects are easy editable in the root section on top of the css part.
The theme has filters!!!!!!!!
The sizes of the boxes and gifs are also easily editable and responsive. However, if you use the theme for icons/gif icons, it might need more editing.
Comes with a Rules Pop-up that can be deactivated in the root section as well.
The corners of all boxes can be adjusted to round or square borders. Same goes for the icon and links in the sidebar
[ GUIDELINES ]
Do not claim as your own.
Do not remove the credit!
Do not use as a base code or take parts of this code for your theme.
Feel free to edit as much as you want!
Click the SOURCE LINK to be redirected to the preview and the codes!
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 kinda like the vibes of you about me page, will you be designing a theme page like this? also, you're tutorials are amazing, with live preview and very easy to follow steps.
Thank you so much! 🤍 I’m really happy to hear that you’re finding the tutorials and live previews helpful—making them easy to follow is my top priority!
As for the 'About Me' page, I actually saw your message earlier and had already started working on something! Since you liked the vibe, I just finished coding a minimalist static page theme that replicates that exact look. It’s designed to be clean, soft, and super customizable—so I thought this would be the perfect time to finally release it!
THEME PAGE RELEASE: GLACIAL
GLACIAL is a clean, minimalist static page theme designed for clarity and elegance. Inspired by academic aesthetics and cold winter palettes, it features a centered card layout with soft blue accents and distinct typography. It is perfect for use as an About Me, FAQ, Navigation, or Masterlist page. The code uses modern CSS variables, making it incredibly easy to recolor to match any season or aesthetic.
LIVE PREVIEW // CODE
Key Features:
❄️ "Soft Card" Aesthetic: The container features a unique double-border design with a white outline and soft shadows, giving it a polished, scrapbooked feel.
✨ Interactive Profile Image: The circular sidebar image includes a custom hover animation that slightly zooms and tilts the image while deepening the shadow, making your profile pop.
📂 Organized FAQ Section: A dedicated area for questions and answers with a left-border hover effect that highlights the specific item the reader is looking at.
🏷️ Tag Cloud/Directory: A pill-shaped tag section at the bottom, perfect for linking to your specific tags, interests, or blog categories.
🎨 Fully Customizable (CSS Variables): All colors (backgrounds, text, accents, borders) and fonts are grouped at the top of the code in the :root section. You can change the entire color scheme by editing just a few lines.
🛠️ Important Setup: How to Fix the Ask Box
This theme comes with a built-in Ask Box at the bottom. For the messages to go to your inbox, you must change one small part of the code.
Scroll down to the bottom of the HTML code until you see the <iframe> tag (usually near line 250).
Look for this specific line: <iframe src="https://www.tumblr.com/ask_form/{YOUR URL HERE}" id="ask_form"></iframe>
Replace {YOUR URL HERE} with your actual Tumblr username.
Example: If your URL is ilovekpop.tumblr.com, change it to: <iframe src="https://www.tumblr.com/ask_form/ilovekpop" id="ask_form"></iframe>
Save the code, and the ask box will now successfully deliver messages to you!
🖼️ How to Change the Avatar
Since this is a standalone CSS theme, the profile picture won't automatically grab your Tumblr avatar. You will need to manually link the image you want to use. Here is how:
Find the image you want to use (it looks best if it's a square!) and upload it to a site like imgur.com or pinterest or even your own Tumblr private post to get the image link.
Copy the Image Address (it should end in .jpg, .png, or .gif).
In the theme code, search (Ctrl + F) for the word: sidebar-img.
You will find this line: <img src="{YOUR AVATAR HERE" class="sidebar-img">
Replace the URL inside the src=" " with your own image link.
Tip: If you want to change the shape, you can find .sidebar-img in the CSS (top part) and change border-radius: 50%; to border-radius: 0%; for a square or 10px for soft corners!
Disclaimer: This is a free-to-use page theme created for personal use. Please do not remove the credit link at the bottom or redistribute this code as your own. While you are welcome to customize the colors and fonts to suit your aesthetic, please do not use this code for commercial purposes. Since this is a static page theme, it is built with custom CSS and HTML and will not automatically sync with your blog’s main theme settings—all edits must be made manually within the code.
in physical pain over the fact that i cannot edit any of my tumblr pages because of the javascript error. what i am i supposed to do? get actual work done?
