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