Hii, I just wrote a fanfiction about Norman Jayden and Carter Blake and usually I don't like my writing but I am proud of this one. Maybe someone will be interested in reading it 💗💗
This AO3 skin was inspired by antique books featuring elegant gold foil stamping.
Truth be told, I am not entirely satisfied with the day mode. It might not be as comfortable for extended reading as some of my past designs. However, I am absolutely in love with this purple and background color combination—it evokes the feeling of writing and sketching with purple ink on old parchment. The purple foiled motifs also carry a slightly mottled texture, as if gently faded by the passage of time. Perhaps I will update the palette if I discover a better match one day?
I actually began with the night mode and tested several color schemes. I attempted a red, gold, and black palette, but it was a miss. During the process, the contrast felt far too glaring, and the black background was suffocatingly heavy. This purple and gold, on the other hand, reminds me of the beautiful gowns of noble girls in classical oil paintings. I am truly delighted with how it finally came together.
⚙️ Quick Installation Guide
The installation process is almost identical to the famous "🌹 𝕸𝖎𝖉𝖓𝖎𝖌𝖍𝖙 𝕭𝖑𝖔𝖔𝖒 🌹" skin, but with just one extra step: the base file.
You will need to create 4 skins in total. First, create the base, the Day skin (Violet Parchment with light mode checked), and the Night skin (Gilded Velvet with dark mode checked). Finally, when creating your Master Auto-Switch Skin, add them as Parent Skins in this exact order:
Faded Gilt - base
Faded Gilt - Violet Parchment
Faded Gilt - Gilded Velvet
📌 A Quick Note
Just a quick heads-up: Since this skin is highly optimized for mobile devices, the position of some decorative assets might shift slightly if you use it on a desktop or a larger screen. Please don't mind it too much! The layout and immersive reading experience are absolutely at their most perfect on a mobile phone. 📱✨
📢 Disclaimer
Non-Commercial: This skin was created purely for fun and personal interest. It is shared for free and is not intended for any commercial activity or profit.
Language: Please note that English is not my native language. There might be some grammatical errors or awkward phrasing. No offense is intended—if any wording feels inappropriate, it is purely unintentional.
Assets: All visual materials and decorative assets used in this skin were sourced from the internet. All credits go to the original creators.
Content: The works shown in the screenshots are for demonstration purposes only. They are not my own writing; I have only used them to showcase the visual effects of the skin.
Contribute to lovewithless/Faded-Gilt development by creating an account on GitHub.
I’ve heard a rumor online that sometimes supermarket strawberries look beautiful but aren't very sweet. Is that true where you live? 🍓
Anyway, I hope this skin brings 100% strawberry sweetness to your AO3! For this update, I also made custom bookmark icons. I think they look like cute little stamps on the work page! Go ahead and give your favorite fics a special strawberry seal of approval! 🧺✨ Hope you like it!
🛠️ Installation Guide
I have uploaded the codes to my GitHub. You will find two files there:
🍓base: This file contains the foundation code (Base Code).
🍓🧺✨: This file contains the strawberry color theme code (Theme Code).
Here is how to use them:
Step 1: Create the Base Skin
Open the 🍓base file on my GitHub and copy all the code.
On AO3, create a new site skin. (You can name it whatever you like, as AO3 skin names must be unique for everyone).
Paste the copied code into the CSS box.
Scroll down to the "Advanced" section and check the box for "Parent Only".
Click "Submit" to save.
Step 2: Create the Color Theme Skin
Open the 🍓🧺✨ file on my GitHub and copy all the code.
On AO3, create another new site skin (again, name it whatever you prefer).
Paste the copied code into the CSS box.
Scroll down to the "Advanced" section again.
Find "Parent Skins" and click the "Add parent skin" button.
In the input field that appears, search for the exact name you gave to your Base Skin in Step 1, and select it.
Click "Submit" to save and apply.
⚠️ Important Note:
If you are using Google Chrome and encounter issues adding the parent skin (e.g., the search box doesn't respond), please try switching to a different browser, such as Microsoft Edge, to complete this step.
📝 Notes:
English is not my first language, so please forgive any awkward phrasing or errors in my explanation.
The image materials used to build this skin were found online. This is a completely free, passion project meant for sharing, and will never be used for any profit.
The fanfictions shown in the preview images belong entirely to their respective amazing authors. I only used them to demonstrate the skin layout.
Contribute to lovewithless/-100-Sweet-A-Strawberry-Themed-AO3-Skin development by creating an account on GitHub.
𓆉 𓆝𓂂𓏸 𓆟 𓇼 𓂂 Disclaimers : I take no request. This one skin is specifically for handphone user only, for other devices unfortunately the skin would be too messy. But if you want to tinker with the skin and make the other devices friendly version, feel free, just credit me. I used this berry/reversi blue tag icons and followed little bits of this for header & this for some of the buttons. Images and pngs are from Tumblr and Pinterest. Dividers used in this post are from @uzmacchiato
﹏𓊝﹏ When i made my latest ao3 skin i stumble upon this beautiful aesthetic dividers by @rmstitanics and that's the origin of my motivation to make this skin–the light mode for Serene Antipathy(more about that below the basic tutorial). I used some of her nautical set and edited it to fit my skin(i hope you don't mind, miss😶🌫️). Yes some of the images in this skin are moving like the og divider.
my ao3 skins masterlist
Tutorial how to activate the skin :
Copy the code i provided in this GitHub, there is a copy button at the top right(•••) of the code box. And here if you prefer Google doc.
Sign to your AO3 account, after that go to "Dashboard".
On your "Dashboard", tap on a section called "Skins".
On the "Skins" page, tap on the button labelled "Create Site Skin".
Give your site skin a unique title, i usually use 2-4 word for the skins that i saved. IF YOUR SKIN NAME IS NOT UNIQUE, YOU CAN'T SAVE THE SKIN.
Paste the codes you copied from my GitHub into the "CSS" box.
When you're done, scroll to the bottom of the page and click a button labelled "Submit". This will save your site skin and take you to a new page where you can see the title of your skin as well as all of the code.
Click "My Site Skin" and you can see the skin are added, press "Use" to activate it.
Added steps for those who want to have light mode[Sirens' Sailors] and dark mode[Serene Antipathy] auto-switch skins ↓
(short explanation: basically if your phone is on light mode, then Sirens' Sailors will be put, and if you're on dark mode then it's Serene Antipathy instead. I will do a step by step tutorial assuming you already have the Serene Antipathy and Sirens' Sailors skins saved in your ao3.)
Go to your Serene Antipathy skin and click "Edit".
Scroll to "Advanced" and click "Show↓".
✓ the "Parent Only". And in "Media" scroll and choose "(prefers-color-scheme: dark)". Then click "Update".
Now go to your Sirens' Sailors and click "Edit".
Go to "Advanced" and click "Show↓". And go straight to "Media" and choose "prefers-color-scheme: light)" this time.
In "Parents Skins" click "Add Parent Skin" and type the name of your Serene Antipathy skin.
[Parent Skins is to mend the two skins together]
After that click "Update" and "Use" your Sirens' Sailors skin.
Someone recently asked me if I would ever make a sage-green themed AO3 skin, and that question immediately reminded me of this green design — one of my early experimental works, so it might not be as polished as my cream archival-card skin, but it has its own little charm. 💚✨
For this green version, I added decorative floral borders to both the works list and the reading view, giving it the feeling of vintage floral letter paper. 🌼💌
Following that idea, I redesigned the kudos list icon so it looks like a tiny letter of appreciation, and rearranged the layout to match this soft “letter paper” theme. ✉️🌿
For the tag boxes, I used a four-shade green gradient, which feels gentle and easy on the eyes. 🍃
And if you click on the tag area… there’s a little hidden easter egg I added just for fun. ♡🌟
English isn’t my first language, so please excuse any awkward phrasing.
This skin is shared purely for fun and non-commercial use. All visual elements come from publicly available materials and are used only for aesthetic layout purposes.
Any screenshots containing text are for demonstration only — the works shown in the images are not mine. 📎
Source / code (GitHub):
Contribute to lovewithless/Vintage-Letter-Green-AO3-Skin development by creating an account on GitHub.
AO3 Site Skin: Fulfilling Meal +little pokemons because i wanted to
A '(Guest)' pfp
‧₊˚⋅𓐐𓎩 ˚ ⋅ Disclaimers : I only use my handphone when making this skin so if other devices look a little odd i can't help you with that i'm sorry. I made this skins for the fun of it and not at all make/take any profit. Arts by @artoffajarr, and some bits from Pinterest. I use this, this and this pieces of coding when making this skin. dividers by @uzmacchiato. I take no requests.
𐂐⋆.˚ I was inspired to make this skin when i unconsciously staring at Pecel Lele for fifteen minutes straight during my fasting lol. And i knoww i misspelled Fulfilling to Fullfilling on my GitHub yikes😬 pls ignore that💔
my ao3 skins masterlist
Tutorial how to activate the skin :
Copy the code i provided in this GitHub, there is a copy button at the top right(•••) of the code box. And here if you prefer Google doc.
Sign to your AO3 account, after that go to "Dashboard".
On your "Dashboard", tap on a section called "Skins".
On the "Skins" page, tap on the button labelled "Create Site Skin".
Give your site skin a unique title, i usually use 2-4 word for the skins that i saved. IF YOUR SKIN NAME IS NOT UNIQUE, YOU CAN'T SAVE THE SKIN.
Paste the codes you copied from my GitHub into the "CSS" box.
When you're done, scroll to the bottom of the page and click a button labelled "Submit". This will save your site skin and take you to a new page where you can see the title of your skin as well as all of the code.
Click "My Site Skin" and you can see the skin are added, press "Use" to activate it.
I customized a night mode version based on the previous cream-colored archive card style skin. It features glowing shadows that make the decorative patterns look like luminescent flowers.
🌿 ━━━━━━━━━━━━━━━ 🌿
📖 How to set up the Auto-Switch Mode
If you want the skin to automatically switch between light and dark modes based on your device settings, follow these steps:
❧ Step 1:
Create a new skin for the Light theme. Check the box for Parent Only, and under the Advanced options, check `prefers-color-scheme: light`. Then, save (Submit) the skin.
❧ Step 2:
Create a new skin for the Dark theme. Check Parent Only, and under the Advanced options, check `prefers-color-scheme: dark`. Save (Submit) this skin as well.
❧ Step 3:
Create a new master skin to combine the previous ones (name it "Auto-Switch Master"). Copy the code for Auto-Switch Master into the CSS box. Then, in the Parent Skins field, search for and add the "Light" and "Dark" skins you just created. Finally, save.
Note: Chrome users might encounter a bug where the "Parent Skins" fail to load or add properly. If this happens, please try using a different browser to complete this step.
🌿 ━━━━━━━━━━━━━━━ 🌿
📝 Notes & Disclaimers
• Language:English is not my native language, so please bear with me if there are any mistakes.
• Non-Profit:This skin is created purely for fun and shared for free. No profit is intended.
• Credits: All decorative assets and patterns were found online and belong to their respective owners.
• Screenshots: The fanfiction featured in the preview images is not mine; it is included solely to demonstrate the skin's visual effects.
Contribute to lovewithless/ao3-skin- development by creating an account on GitHub.
In my local fandom culture, we have an affectionate nickname for fanfiction writers: we call them "Chefs."
With that in mind, I feel AO3 is like a luxury Grand Hotel: it has every cuisine imaginable, and you can order whatever dish your heart craves.
🍽️ The Menu-Style Design
Since this is a hotel, I designed the work listing cards entirely as Menus.
Each work functions like a specific order. I also renamed the category headers and the statistics area using menu-themed terminology.
For the tags, I created a staggered left-right layout. This prevents them from blurring into a solid block of text when there are many tags, making the scanning process feel more like flipping through a physical hotel menu.
🎨 The Color Schemes
I created two versions for this skin:
☕️ Cream Cocoa:
This is the versatile "safe card." It offers high reading comfort, like a classic menu you can open at any time to find something familiar and soothing.
🎀 Grand Budapest (Pink & Blue):
This feels like a "Special Edition."
Someone asked if I could make a pink skin, and I immediately thought of The Grand Budapest Hotel.
I added many blue ribbon and bow decorations, mimicking the iconic blue ribbon on a Mendl’s box. The header divider uses wavy lines to simulate that ribbon, the purple text resembles the hotel uniforms, and I included elements of keys throughout.
🗝️ A Personal Note
I had a deeper reason for choosing The Grand Budapest Hotel as inspiration.
I feel the movie’s core resonates deeply with fanfiction and its writers. On the surface, it is glamorous and meticulous, like a well-run hotel. But what truly holds it up is memory, obsession, human connection, and that stubborn refusal: "To simply keep what you love, even when you know the world is changing."
The movie features the "Society of the Crossed Keys"—people holding keys, helping each other for a shared belief. This feels exactly like the fandom community.
Sometimes, Canon slams the door shut, but we hold the keys.
We can reopen that door, clean up the room named "Regret," and let our favorite characters live inside, happily ever after.
To me, this is the true meaning of fanfiction. It isn’t just about fixing things; it’s about taking a world we love, re-organizing it, re-plating it, and serving it to others who love this pairing just as much.
So, the Budapest theme is more than just a pretty design; it’s a small gesture of my appreciation.
Writing is never easy, especially fanfiction. Often there is no applause or reward—only love keeps us moving forward.
Because writing is never easy, I hope every author can keep going.
Just as I imagine it: The Fandom Grand Hotel (AO3) will always leave a light on for you, waiting for you to serve your next dish.
📌 Tag Categories (Menu Sections)
🧾 Warnings → Today’s Taboos
Warnings feel like that little blackboard next to a menu. Some restaurants list every allergen and taboo clearly, while others choose not to spoil the surprise until the first bite. "Today’s Taboos" serves as a gentle hint zone—those who want to avoid "landmines" can take a quick look, while those who hate spoilers won't have the answers forced upon them.
🍝 Relationship → Main Course Pairing
The Relationship tag is always the "dominant flavor" of a work, so it belongs in the Main Course, standing right in the center of the menu. The word "Pairing" fits the dining atmosphere perfectly.
(Note: I placed the pairing tags on the far right with a staggered layout to match scanning habits, making it easy to instantly spot if this is the couple you want to order.)
🥗 Characters → Side Dishes
To me, characters are like a list of Side Dishes. The Pairing is the main course, but I also want to know which familiar faces will be served alongside it. "Side Dishes" lists these supporting ingredients to make the information intuitive.
🧂 Freeform → Extra Toppings
Freeform tags are the seasoning and Extra Toppings station. They determine the final flavor profile of the dish and help you avoid things you dislike. Settings, tropes, kinks, and vibes all go here. One look at the "Extra Toppings" tells you the texture of the meal and whether it suits your palate.
📝 Chef’s Note (Summary)
The Summary isn't technically a tag, but I wanted to give it a menu-style header, so I called it the Chef’s Note. It’s like a brief introduction from the head chef before you order, helping you quickly decide if this is the dish for you.
📖 Metadata Card (Above the Work)
🌶️ Rating → Spice Level
To me, Rating is the Spice Level. It doesn't tell you if the food is good, but rather how "hot" it is. Mild, medium, spicy... anything above that might belong on the "Late Night Menu." One look before ordering tells you if you can handle the heat.
🏨 Fandom → House Special
Fandom is the "House Special"—the theme of the day. Seeing this tells you which world or IP the dish comes from: Harry Potter, Star Wars, Superman... they are all like the signature themed halls of the hotel.
🍱 Category → Combo Set
Category feels like a Combo Set designation. It’s not about the flavor, but the structural composition of the meal (M/M, F/F, Gen, etc.).
🍜 Language → Cuisine
Language represents the "Cuisine Style." It doesn't indicate the content, but rather the language in which the dish is served—telling you which country's chef is cooking and what style of preparation is used.
📚 Series → Series Menu
Series hints at a "Series Menu" or tasting menu. It tells you this isn't a standalone dish; there are accompanying courses to follow. If you like the taste, you can keep ordering down the line.
📊 Stats & Popularity (Kitchen Report)
🧾 Stats → Kitchen Report
I renamed the statistics area to Kitchen Report, treating these numbers as daily logs from the back of house: dishes served, compliments received, reviews written... like a hotel's daily operation notes. They are still numbers, but they look more like "what happened with this dish today."
💌 Kudos → Compliments
Kudos are like a silent compliment to the chef—a nod that says, "this was delicious." I renamed it Compliments: a simple click is precious, but if you leave a review, it’s often an even bigger surprise for the chef.
👀 Hits → Tastings
Hits feel more like how many times a dish has been tasted. It records the count, not just the number of guests. Tastings makes it read more like a "sampling count" on a menu.
💬 Comments → Reviews
Comments are the food critiques. It’s feedback left for the chef after the meal. Calling them Reviews fits perfectly into the menu column concept.
🔖 Bookmarks → To Try List
Bookmarks are like a "To Try List" or a saved menu. You tuck away the dishes you love so you can re-order and savor them anytime.
📏 Words → Portion Size
Words indicate the Portion Size. One glance tells you if this is a delicate appetizer, a standard meal, or a massive banquet that will fill you up.
🍽️ Chapters → Dishes
Chapters are the number of "Dishes" in the course: how many total, how many have been served, and how many are still waiting to be brought to the table.
🛠️ Installation Guide
Step 1: Create the Base Skin
Create a new site skin.
Copy and paste the Base Code into the CSS box.
Scroll down to the "Advanced" section and check the box for "Parent Only".
Click "Submit" to save.
Step 2: Create the Color Theme Skin
Create another new site skin (choose either Cream Cocoa or Grand Budapest).
Copy and paste the Color Code of your choice into the CSS box.
Scroll down to the "Advanced" section again.
Find "Parent Skins" and click the "Add parent skin" button.
In the input field that appears, search for the name of the Base Skin you just created in Step 1, and select it.
Click "Submit" to save and apply.
⚠️ Important Note:
If you are using Google Chrome and encounter issues adding the parent skin (e.g., the search box doesn't respond), please try switching to a different browser, such as Microsoft Edge, to complete this step.
📝 Notes
English is not my first language, so please forgive any awkward phrasing or errors in my explanation.
The fanfictions shown in the preview images are for demonstration purposes only. They do not belong to me, and all credit goes to their original authors.
The design assets used in this skin were collected from the internet.
This project is shared purely for fun and is non-profit. Please do not use it for commercial purposes.
Contribute to lovewithless/Fandom-Grand-Hotel-AO3skin development by creating an account on GitHub.
AO3 Skin based on @reignpage jjk fanfic "Crash Landing On That D!ck!" MDNI
A '(Guest)' pfp! I tried to put an image for account without pfp too but it broke my coding lmao
╰┈➤ thank you nan11 they had been helping me throughout the last touch working on this skin, if not then i don't think the skin would be as polished as this(they spend approximately 2 days patiently guide me).
╰┈➤ Disclaimers : This is my first AO3 skin so the coding are unorganized, first time attempted coding too, kinda nervous. I don't take request. pngs & icons are from Pinterest and Tumblr, no AI used on this skin. All fics mentioned does not belong to me, nor the beautiful dividers that i used on this post, credit to @andromeda-graphics for the dividers. I made this skin on mobile, so if other versions(iPad, laptop, etc.) are messed up, i can't help you with that😔 i'm broke. I followed this css in the beginning of my coding.
・✿ i include all 5 love interests main colors, most are more hidden, except To-Ji his color is green the same as the masterlist aesthetic so he automatically more prominent than others. There's a few easter eggs thrown around in this skin that CLOTD readers might notice.
my ao3 skins masterlist
Tutorial how to activate the skin :
Copy the code i provided in this GitHub, there is a copy button at the top right(•••) of the code box. And here if you prefer Google doc.
Sign to your AO3 account, after that go to "Dashboard".
On your "Dashboard", tap on a section called "Skins".
On the "Skins" page, tap on the button labelled "Create Site Skin".
Give your site skin a unique title, i usually use 2-4 word for the skins that i saved, for example i named this CLOTD skin "EdenX Pheromones"(don't ask😹). IF YOUR SKIN NAME IS NOT UNIQUE, YOU CAN'T SAVE THE SKIN.
Paste the codes you copied from my GitHub into the "CSS" box.
When you're done, scroll to the bottom of the page and click a button labelled "Submit". This will save your site skin and take you to a new page where you can see the title of your skin as well as all of the code.
Click "My Site Skin" and you can see the skin are added, press "Use" to activate it.
And if you don't want the blob fish and dodo bird borders erase this code ↓
⋆。𓆝 𓆟 𓆞·。 Disclaimers : I only use my handphone when making this skin and not an expert so i apologize if there's some places that look odd and some texts are hard to read. Images and pngs are from Tumblr and Pinterest, i tried to pick carefully so there's no AI used. I used this, this and followed very little bits of this CSS codes. I take no request. Dividers by @huraxy-dividers @pixopix
𖦹˚𓇼˚‧ Orca and Whale–especially Humpback Whale–are known to have deep hatred towards one another. Ironically i love them both, and i want to make a skin in reverence for those beautiful creatures where they seem to coexist with each other. Blue is my favorite color and i have been in love with ocean so i'm a little bewildered how i didn't make blue/sea theme skin until now lol! Easily this is my personal favorite skin out of all the others that i made.
light mode version🦪🪸
my ao3 skins masterlist
Tutorial how to activate the skin :
Copy the code i provided in this GitHub, there is a copy button at the top right(•••) of the code box. And here if you prefer Google doc.
Sign to your AO3 account, after that go to "Dashboard".
On your "Dashboard", tap on a section called "Skins".
On the "Skins" page, tap on the button labelled "Create Site Skin".
Give your site skin a unique title, i usually use 2-4 word for the skins that i saved. IF YOUR SKIN NAME IS NOT UNIQUE, YOU CAN'T SAVE THE SKIN.
Paste the codes you copied from my GitHub into the "CSS" box.
When you're done, scroll to the bottom of the page and click a button labelled "Submit". This will save your site skin and take you to a new page where you can see the title of your skin as well as all of the code.
Click "My Site Skin" and you can see the skin are added, press "Use" to activate it.
If the Whale and Orca background image in the right border makes the texts unreadable to you when reading a fic, you can make it smaller by simply find this code ↓