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.
F.A.Q. + inbox page (optional, more details under read more)
live preview | code
masonry navigation by maziekeen
ABOUT PAGE
live preview | code
credits on the code
i am accepting theme commissions. for more information, dm me on here or on @lizzies. making content/resources is my main source of income on the internet, so if you’d like to support me, buy me a coffee?
↓ theme customizations under the read more. ↓
CUSTOMIZATION OF THE THEME:
make sure to add #!“ class="click to the Pop Up box in the customization page to make sure the Pop up search engine works on your theme, if you need a visual ref:
if you want to change the icons on the sidebar navigation, go to boxicons, find the icon you want, and on the small pop-up window that will show up on the bottom right corner, click on the tab that says “Font” by the side of Web Component and copy the line of code there. if you need visual reference:
if you don’t want to use a faq/inbox page and don’t want a different /ask page, ctrl+f your code and find the following code and delete it. if you want your faq or inbox url to be different from /msg, you can just change it on the line with location.replace.
create a new page, select the type as standard layout. on the text box, paste the code of the page on there, but make sure that <html> is pressed. if you need visual reference:
TO CUSTOMIZE THE ABOUT PAGE:
and if you want to change the sidebar links icons, head to cappuccicons, find the icon you want, and using ctrl+f find the icon you want to replace and on the line of code replace the name of the icon with the new one you want (keep the hyphens).
for ex: <i class=“cp cp-twitter”></i> you can change to <i class=“cp cp-facebook”>
if you need any help customizing the theme at all, just shoot me a message eiither here or on my main blog @lizzies & i will try my best to help you out!
Popup links for the ask, an about or rules, ect., and Navigation with up to 24 links (you’ll have to disable “always run blog through SSL for the Pop ups to work)
Customisable colours
New tumblr controls by cyantists
About Page Features —
Live Preview ][ Download
Container
Title on the Side
Labels in the code for easy editing
Sidebar
Sidebar Image
Links using font awesome icons
About Stats
Any glitches, or questions or what not tell me please!
DON’T REMOVE CREDIT
Like or reblog if you use, please! I want to know if people are using it; it’d make my day
if you need any help customizing it, just shoot me a message and i’ll be glad to help you!
~
i am accepting theme commissions. for more information, dm me on here or on @lizzies. making content/resources is my main source of income on the internet, so if you’d like to support me, buy me a coffee?
please like and reblog if you enjoy the code and/or want to use it! as this is my first code, i'd also appreciate feedback :)
features:
darkmode/lightmode toggle
icon change on darkmode toggle
details section
quick nav
likes/dislikes
skills list
elsewhere section
notes:
i owe a huge thanks to @vitaminholland for letting me use her tooltip code as a reference, it really helped me out :) please give her some love on her blog!!
i do not claim ownership of any scripts, icons, fonts, etc in this code that i did not create. i only claim ownership of my creations. please contact me if i have used your creation as a reference and you would like me to remove it.
have you always wanted to represent your character with morrowind’s interface..... except on tumblr? well now you can!
code here!
please like or reblog if you use it, if you have any questions about the code feel free to ask, please do not delete the credit this took forever, please enjoy!
