I was thinking about what new stuff I wanted to add to my website, and I thought back to when I sketched out a look for my main page, so I drew this on top of a screenshot (the first image is how it looks now, and the second image is how I want it to look).
but then I realized I have no idea how to do that, and any time I look up “how to add an image to a border” the only things that pop up are “how to add a border to an image” which I already know how to do and is not what I’m looking for. So I figured I’d turn to tumblr for help.
I’m gonna mention @ebulatheduck because I know she’s into coding (although I’ve mostly seen C++ and not html, lol, so idk how much she can help).
Are your quotes looking a little plain? Whether you are posting poetry, book excerpts, or just aesthetic ramblings, your blockquotes deserve to look as cute as the rest of your theme!
Today I’m sharing 5 New Blockquote Designs inspired by coquette, soft, and minimal aesthetics. We have washi tape, sparkles, and even a love letter style! ✨
SEE THE LIVE PREVIEW OF THE BLOCKQUOTE STYLES HERE
🛠️ How to Install
Go to your blog’s Customize page.
Click Edit HTML.
Scroll down to your CSS section (usually inside <style> tags).
Paste the code for your favorite style below!
⚠️ Please read until the end on how to customize the codes!
Style 1: The "Love Letter"
Perfect for soft/coquette themes. Features a tiny heart icon.
Option A: Make it your default style (Easiest) - If you want every quote on your blog to look like this, take the code you chose above and change the class name (e.g., .whereinmnl-bq-cute-v1) to simply blockquote. Then paste it at the bottom of your CSS!
Option B: Use it occasionally - Keep the code as is. When writing a post, switch to the HTML editor (the <> icon) and wrap your text like this: <div class="whereinmnl-bq-cute-v1">Your text here</div>
---
I designed these using soft pinks and blues, but they might not match your specific theme. Don't worry—changing the colors is super easy! You don't need to be a coding expert; you just need to know which "Hex Codes" to swap.
(Tip: Go to Google and search "Color Picker" to find the Hex code for the exact color you want, like #ff0000 for red.)
Here is a quick guide on what to change for each style:
🎀 For Style 1 (The Love Letter)
To change the box color: Look for background: #fff0f3; and border: 1px solid #ffccd5;.
To change the Heart Icon: Look inside the ::before section. Change color: #ff8fa3; to make the heart red, black, or whatever you like!
☁️ For Style 2 (The Dreamy Cloud)
To change the Shadow: This style relies on box-shadow to look cute. Find box-shadow: 5px 5px 0 #e0f2fe;. Change that code to a darker version of your border color.
To change the Border: Find border: 2px solid #bae6fd;.
🧵 For Style 3 (The Stitched Diary)
To change the "Stitches": Find border: 2px dashed #b197fc;.
To change the Text Color: Find color: #7950f2;.
✨ For Style 4 (The Sparkle)
To change the Sparkle: Look inside the ::before section. Change color: #fab005; (the star icon) and border: 1px solid #ffd43b; (the circle around it).
To change the Gradient: Look for background: linear-gradient(...). You can change #fff9db to another light pastel color.
🩹 For Style 5 (The Washi Tape)
To change the Tape Color: This one is a bit tricky! Look inside the ::before section.
Find background-color: #a5d8ff;. Change this to make the tape pink, green, or grey!
Note: Do not touch the "repeating-linear-gradient" part unless you want to remove the stripes on the tape.
💡 General CSS Cheat Sheet:
color: = The color of the text or icon.
background: = The background color of the box.
border: = The line around the box.
If you get stuck or the code breaks, just come back to this post, copy the original code again, and start fresh! Happy customizing! 🎨
I'm kind of a newbie at this, but I managed to mash together a workskin that I think would be interesting to share. I guess my question is, what do you think makes for a decent workskin guide/tutorial? Or do I just dump the code and trust people understand?
Also, thanks for running this event, defo a huge learning experience!
Even for long-time programmers, code written by someone else can be hard to follow. Guides of any kind can be helpful.
The key things to include are the CSS file and an example HTML usage of the code. Some tutorials put the HTML/CSS in a separate chapter (or each their own chapter), and some include the code and the tutorial in the same single chapter. Either way, a tutorial should explain to the reader what the skin does, and why they might want to use it. It's also useful to include what the code looks like when it's rendered, both so your reader knows if it's something they want for their own fic, and also so they know if it's rendering correctly on their end.
For the tutorial itself, it can be helpful for the reader if you walk them through the steps you'd take yourself, and explaining what pieces go where. This varies, depending on how complicated the code is, or how much editing the reader will need to do in order to use it. You might also want to mention easy pitfalls, or known bugs.
A general structure might be:
Explain what the skin is for, or what need it fills
Show what the skin looks like when it's complete
Provide the full CSS
Provide the full HTML, or example HTML usage
Walk through the steps of using the HTML
If the user needs to make edits, where do those edits go? What pieces can and can't they delete? What does the code absolutely need to function, and what can it live without?
Mention any known issues
This could issues you ran into while coding (especially if it's something the reader is likely to run into) or issues you know exist (maybe the layout breaks on Apple phones, or if a specific span element is given more than 20 words, it tries to open a portal to the demon realm)
Including comments in your code can also be really helpful for the next person who tries to use it. And if you have a specific way you'd like to be credited for your work, some authors will include that in their author's note.
One issue with writing HTML tutorials on AO3 is that any HTML code you put into AO3… will render as HTML. This is not helpful for tutorial purposes. One easy way to make HTML copy/paste-able is to use an HTML encoder. Here's the one from W3:
https://www.w3docs.com/tools/html-encoder/
Put your code in the box on the left, then hit the "Encode Entities" button and the box on the right will populate. Click "Copy", then you can paste directly into AO3.
(could you just use the rich text editor in AO3 and not worry about this? maybe. honestly forgot it existed until just now.)
This is how the HTML encoded text will render on AO3:
And that's it. Hope some of that was helpful. If you'd like some examples, here are some tutorials written by the mods/friends of the mods:
Texting tutorial in a single chapter with subsections
Fancy letter tutorial in a single chapter with subsections (and pretty colors!)
Character dialogue tutorial in multiple chapters (separate chapter for CSS)
Tabbing tutorial in a single chapter (with short but detailed author explanation)
They're varying degrees of complex and each use different structures to get their information across. Do whatever works for you! Any guide is better than no guide.
Anyone know how to deal with transparent images that refuses to be transparent? I'm not finding anything about it in forums and the tutorials are always talking about how to make the entire image transparent and not the bg
they only become transparent with each other when the position is set to absolute but the problem with that is this monstrosity with the nav bar 💥💥💥
