#html help

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

okay, thanks :)

update: problem solved!

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

I think im gonna delete the post and repost it with the full amount cause i am not sure how to link posts?

if anybody knows please send help. tumblr is so different than it was like 15 years ago.

I wanna be able to make links to the fics lke this

using my friends blog as an example

so I wanna be like Part 1 *here*

heyy it’s definitely not a weird question because i didn’t know how to do it at first either.

here is a step by step tutorial since i’ve gotten a few asks about this

i use a bbcode & html text colorizer, but to be able to use this you need to use tumblr on desktop website, or chrome on your phone/tablet/ipad.

the website i use it [here]

follow the instructions on the website, and put on your text, select your font, colours and effects ect.

copy the second box [html text] - it should look like some sort of coding

open tumblr on desktop website or on chrome, create a new post, or edit a draft/ pre-existing post, and find the settings cog icon.

scroll down until you find something called ‘rich text’ and change that setting to HTML

paste the html text into your post, you can use the preview button at the top to see what it looks like before proceeding

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)

I'm trying to customize my blog and it wont work!! Please please please help, yes its visible to everyone

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 💥💥💥