#html tutorial

this post is being written for archival reasons; this does not cover gradients. no nuance, just an explanation of my process that i find easier than, say, using roleplay formatters or color changer websites. this process should work on mobile browser and not app, as the app does not let you use other text editors at the time of writing. do not derail - make your own tutorial post if you don't like this method at all, hotshot. peace and planet earth <3

firstly, i write out my plain sentence that i want to format, i colourise the parts i want to colour by using the tumblr's default colour options

2. i go to the post settings (gear icon on the top right), scroll down 'til i see text editor | rich text, then i switch my editor format to html*

markdown is also possible, i just find it easier & more stable to use html personally!

3. as you can see in the following screenshot, i have already picked out my hex codes that fit my blog's colour palettes and correspond to the tumblr default codes; i have saved them in my notes app (and in the permanent pinned section of my phone's clipboard) for ease of access

4. what we will do now is just replace all <span class="npf_color_name"> to "<span style="color: #hexcode">

5. done! look at preview to see if it worked out or if tumblr's being a homophobic demon against your beautiful code

6. instead of manually changing all the colour codes in your post code, you can make use of an online text finder/changer! here is my set-up on this website: (https://www.joydeepdeb.com/tools/find-replace.html#google_vignette)

other things:

1) always preview your text code after the fact; always back up your codes by copying the whole thing before you change it so if something goes wrong, you don't have to start from scratch, your copies are your check points 2) it doesn't have to be html, markdown works too, but html is a lot easier to work with imo; 3) this isn't the only way, there are tons of fancy websites dedicated to just custom colour fonts, roleplay formatting, and even gradients! however, i just am happy with my two colours 4) there are other sites you can try out if you find it easier than manually doing it yourself; --- https://roleplayformatter.carrd.co/ --- https://patorjk.com/text-color-fader/ --- https://spacegen.carrd.co/ and so much more if you google "tumblr color change tutorial" or "tumblr text color changer", you'll find tutorials on this site or websites that do the process for you if you just give them the hex codes & what you wanna colour

ultimately, the essence is, you have to go down and edit the html code yourself to give it the colour you want!

and html is your best friend :)

note: this is for my bb @tobaccosunbxrst but also just wanted to post it to public for anyone curious on how to do custom fonts w html on tumblr. i originally made this tutorial privately for my mutual @certainlysyko so apologies for the silly choice of example text that i used lol. anyways.

so as we know, tumblr only has the following default color options for text:

but what if we want some other cool colors like coral pink or cerulean blue or barf green?

For newbies (or people like me who last did CSS/HTML editing when Piczo websites were all the rage) I highly recommend testing with an environment that isn't the AO3 workskin/draft preview, because I've accidentally posted a fic and had to quickly delete it. I'm not familiar with all the different options but CodePen has done the job for me so far

Glad to have you this year!

We also highly recommend not using the AO3 platform to code things in. There is no auto-save, and it's very easy to lose a lot of your hard work for a lot of different reasons. It's simply not meant for coding.

CodePen is an online code editor you can use to write and save your HTML/CSS to, and it autosaves! Though some of the mods here favor JSBin over CodePen, which is a very similar tool.

Tired of scrolling back up when you've hit the bottom of your blog?

Here is a quick guide on how to add a cute, floating scroll-to-top button to your Tumblr theme. It fades in when you scroll down and glides smoothly back to the top when clicked!

The best part? You only need to copy and paste one thing.

The Step-by-Step

Go to Edit Appearance > Edit Theme > Edit HTML.

Click inside the code box and press Ctrl+F (or Cmd+F on Mac).

Search for (it is usually at the very bottom).

Paste the code below right before the tag.

Update Preview and Save!

-> from this reference work on ao3: A Complete Guide to 'Limited HTML' on AO3 by CodenameCarrot (please go leave a comment if you find anything here useful !!!)

EDIT: OMG Y'ALL I HAVE BEEN HAVING SO MUCH NERDY GEEKY FUN TWEAKING MY PODFIC HOW-TO GUIDE WITH THIS STUFF

headings, blockquote, div

----

-----

html currently allowed by ao3 html sanitizer

a. abbr. acronym. address. b. big. blockquote. br. caption. center. cite. code. col. colgroup. details. dd. del. dfn. div. dl. dt. em. figcaption. figure. h1. h2. h3. h4. h5. h6. hr. i. img. ins. kbd. li. ol. p. pre. q. rp. rt. ruby. s. samp. small. span. strike. strong. sub. summary. sup. table. tbody. td. tfoot. th. thead. tr. tt. u. ul. var.

-----

in-line (text) formatting tags supported by ao3

-----

OMG LOOK AT THIS !!! IDK WHEN I WOULD EVER USE THIS BUT LOOK HOW COOL !!!

-----

paragraphs & p formats: archiveofourown.org/works/5191202/chapters/161901154#AddParagraphs

-----

omg I'VE ALWAYS WONDERED HOW TO GET THAT LINE BREAK THINGY IN THE MIDDLE OF THE PAGE !!!

-----

Hello Siren,

Thank you for the compliment. Yes, I can teach you. Just follow a tip from Auntie here: do it because you genuinely like the aesthetic. The time you spend writing the post is sometimes the same as editing it, and in my experience, this won't necessarily translate into more likes or reblogs. So, do it because you think it's beautiful.

As comical as it sounds, I won't be using HTML in this post because using the codes could cause problems. I've seen some tutorials, but I just really learned when I searched on my own.. I also do all my editings on my notebook. So, here's everything I use:

Websites I use for editing:

HTML Code Editor: While you're creating your HTML, you can simultaneously see if it's working

BBcode & HTML Text Colorizer: This is where you'll create the gradient

Browserling: I use this site to make the gradient code compatible for Tumblr

Aesthetic Symbols: this is for that cute symbols

Piliapp: more copy/paste symbols

Fontes e Letras: copy/paste fonts

Canva: This is where I create some of my designs. I also use Photoshop

Deviantart: a lot of material for Photoshop like templates, PSDs and Renders (PNG image with a good resolution), you can see the ones I use the most in my sources

@animatedglittergraphics-n-more: dividers

@saradika: dividers

@engrampixel: cute material

Color Hunt: if you don't have a color pallete in mind, here you can find a lot of options

Adobe Color: if you want to create your own HTML color palette this site can help

DaFont: where I download my fonts, the ones I use the most are: Betterfly, Arcadepix, Starborn, Lemon Milk, Cursive Sans and BubbleGum

EmojiTerra: as I use tumblr on my notebook, this is where I get my emojis

HTML Text Editing

Important:

Go use the HTML Code Editor in this part and your life will be way easier.

Some things I do right here in the tumblr editor, like putting the images and different fonts like Lucille.

All HTML code starts with < > and ends with , that is, when you start a paragraph you will write <p> and when you finish you will write </p> (HTML Code Editor ends your coding automatically)

I'm teaching all this because if you want to make gradients in your entire text and not just in the title, you'll need to know about html

To start your HTML you will need to go to the gear that appears on the right side when you are writing your post, go to the bottom until you find the Text Editor and switch to HTML.

The Codes

<p> start a paragraph </p>

<br> to make a space between text less than a paragraph (good to use in indented text) you don't need to put </br>

<b> make the text bold </b>

<i> leave the text in italics</i>

<strike> leave the text crossed out </strike>

<small> make the text small like this </small>

<h1> make the text large like this </h1>

<h2> make the text large like this </h2>

<ul> Create unordered list (dotted) </ul>

<ol>Create lists with order (numeric) </ol>

*instead of making paragraphs you will create new items in the list using the code <li> </li>

<blockquote class="npf_indented"> make the text indented </blockquote>

<span style="color: #HTML"> Code to color your texts, pay attention that it uses (") instead of (') and doesn't use (;) </span>

Tutorial on creating invisible spaces, just like I use to do the navigation, if I put it here everything bugs. PT-BR

<a href="URL">Link Text</a>: Creates a hyperlink

Making your Gradient

Go to BBCode and HTML already with your HTML text and colors in hand. Write or copy your text in the box, choose the gradient type (I use middle) and select your colors (from one to three different colors)

Now copy the text in the "HTML code for this text: (To use on your website)" box and go to the Browseling, you will replace the (') to (") and the (;) for nothing

Copy and paste your new code direct in your tumblr post editor or in the HTML Code Editor. Success!!

I think that's all. Kisses from the Sea! 🐚

Originally posted under my main blog: FlowGeeksOut in the community 'Crying ao3 down'

Greetings everyone reading this it has recently come to my attention that there is an app claiming to be affiliated with ao3 along with OTW that is not ans has privacy safety concerns.

For context earlier today ao3 was having issues and the Ao3 News Tumblr blog made a post about it. I being in the Cyring Ao3 Down community went to reblog it there and link people who were having issues to the post in hopes for them to understand what was happening if they were not already aware. That was when I came across the following post from @elijah-j

Obviously the edit was not there before. Anyways I saw this post and became confused and concerned.

In case you were not aware ao3 is part of the nonprofit organization OTW. This is very important for serval reasons. One of most being legal protection for both ao3 and the fan content creators that host their content on ao3. Since ao3 does not run ads and are part of a non profit organization they therefore do not make any money off of the fan works hosted there. This therefore gives a lot of protection to ao3 and the fan creators against civil litigation from the copy right holders of the Fandom you wrote for. Since the biggest argument in those cases is about profits and if ao3 was running ads and gaining profit from fan creators hosting the fan content there and or paying the fan creators to do so it is harder for a court case to be nessary and or winnable.

As a fan creators for has over 100 works hosted on ao3 I feel very safe being able to express my fanworks with all this protection. So imagine my concern when I saw the post shown above. I then asked the poster @elijah-j for clarification see the comments below

As seen in the last screenshot as soon as I was made aware that it was "in the app only" my brain immediately jumped to this being a scam since and let me say this load and clear THERE IS AND HAS NEVER BEEN AN APP FOR A03

I then explained this to @elijah-j as seen in the screenshot below

Yep that last screenshot says there was NOTHING IN THE PRIVACY POLICY

This horrible because in a way they have the right to do whatever the hell they want with any personal data they have collected on you.

I proceed to let @elijah-j that i think they should report said app to the play store and ao3 because this could cause many problems for a lot of people. @elijah-j agreed with me and did so.

So if you are using an app that is using ao3 name you should report it to the app store and ao3 along with deleting your account on the app if possible then the app.

If you used a similar password to any other website you should change the password.

I will find the link again of where to report it to ao3 along with more information about ao3 and the law if you are interested about the importance of ao3 not having ads.

If you have any questions or concerns please feel free to comment them and I will try my best to help you find an answer and or solution or way forward.

And thank you for @elijah-j for letting me post this!

Stay safe

Links