#html tips | Explore Tumblr Posts and Blogs

rainbowdelicsunshine · 2 years

Text

anyone have any easy toyhouse HTMLs that match my overall aesthetic on here that I could use for my toyhouse? since my coding/HTML skills really suck.....

any help is appreciated!

4 notes · View notes

teaboot · 1 year

Text

I don't know who needs to hear this

But if you go into the comments section on AO3

And type

Then replace image url (keep the " marks) with the url of a picture

You can leave fan art in the comments of a fic

#Ao3 #Fan art #Fan fiction #Html #Computer tips #Fandom stuff

22K notes · View notes

zaions · 1 year

Text

10 Essential HTML Tags for Every Web Developer

View On WordPress

#ahsan mahmood #aoneahsan #HTML best practices #HTML tags #HTML tips #Web development #wordpress #zaions

0 notes

kitkatcodes · 11 months

Text

✧･ﾟ: Customize your highlight color! :･ﾟ✧

I recently came across a blog where when I went to highlight some text I noticed it was a unique color!!! (」°ロ°)」

AND IT'S SO SIMPLE TO DO

all you do is go to your css file and add this:

::selection { background: <hexcolor> }

Enjoy!! ♡⸜(˶˃ ᵕ ˂˶)⸝♡

#codeblr #progblr #programming #tech #coding #resources #frontend #studyblr #aesthetic #css #html #these little details make me so very happy #css tips

1K notes · View notes

isawken · 1 year

Text

so. i made a gnome generator

thank you to everyone who supplied me with gnome names (i am still accepting more in my ask box if you have one you'd like to share with the class)! i have been learning basic html stuff and have used my meager knowledge to create a clunky, yet functional, gnome generator. the gnome and their stats will change upon refreshing the page, but you can click the gnome gname button as many times as you like.

MAKE UR GNOME TODAY!

#i am an absolute noob in coding still so pwease don't tease the clunky nature of my code #neocities #gnomeposting #gnomecore #gnomes #old web #also if u have any coding tips or recommendations i'd love to hear em!#this was a super fun way to test my skills and i learned a lot doing it #html has been so much more fun than i thought it was gonna be #like. i put a nonsensical string of letters and symbols together. and ur tellin me. they're a webpage now?? wild

1K notes · View notes

ahhhsami · 1 year

Text

I put together a simple guide for some HTML coding to use on AO3. The topics covered are the following;

Text Coding (bigger/smaller lettering, subscript/superscript, bold, and italics)

Headings (6 different header types)

Ways to add Translations, Definitions, and Unique Author Notes (Includes hover over text, Anchor Points, and Footers)

Lists (Numerical and Bullets)

Embedding URLs

Embedding Images

#AO3 #Archive of Our Own #HTML #Tips and Tricks #Writing #Fanfiction #Fanfic #Writers #Writer #Fandom #Basic Coding #Guide #Reference #How To #idk what else to tag

456 notes · View notes

izicodes · 2 months

Text

Convert HTML to Image: A Step-by-Step Guide ✨

Do you want to turn some HTML code you've made that's on your website and have a way to convert it into an image for you to save?

Well, look no further! I too wanted to do the same thing but funny enough, there weren't any straightforward tutorials out there that could show you how! After hours of searching, I finally discovered the solution~!

This is an old tutorial I made 🐼

💛 Set your environment

Before we dive into the conversion process, I'll assume you already have your HTML code ready. What you want to learn is how to turn it into an image file. You should have a good grasp of HTML and JavaScript. For this tutorial, we'll use the following HTML code example:

We won't include the CSS code, as it doesn't affect this tutorial. The JavaScript file (script.js) at the bottom of the body element is where we'll add the functionality for the conversion.

Your page should resemble the following:

As you can see, the "Click me" button will handle the conversion. We aim to convert everything within the div.info-div into an image.

💛 Using the html2canvas JavaScript Library

The html2canvas library allows you to take screenshots of webpages and target specific elements on a screen. Here are the steps to include the library in your project:

The steps to put the library in your project:

Visit the html2canvas website for more information.

Copy the CDN link from here

and include it in a script tag in your project's head tag in the HTML file:

That's it for including the library on the HTML side. Now, let's move on to the JavaScript code.

💛 JavaScript Functionality

Here's the JavaScript code to handle the conversion:

In this code, I want to turn the whole div.info-div into an image, I put it into a variable in const div = document.querySelector(".info-div");.

I also put the button into a variable in const button = document.querySelector("button");

I added a click event listener to the button so when the user clicks the button, it will follow the code inside of the event listener!

You can find similar code like this in the documentation of the html2canvas library:

What is happening here is:

We add the div (or what the element we want to take an image of) into the html2canvas([element]).then((canvas)

Added the image file type url to a variable = const imageDataURL = canvas.toDataURL("image/png"); - You can replace the png to other image file types such as jpg, jpeg etc

Created an anchor/link tag, added the href attribute to imageDataURL

The download attribute is where we will give the default name to the image file, I added "dog.png"

Perform the click() function to the anchor tag so it starts to download the image we created

And that's it!

💛 The End

And that's it! You've successfully learned how to turn your HTML into an image. It's a great way to save and share your web content in a unique format.

If you have any questions or need further clarification, please comfortable to ask. Enjoy converting your HTML into images! 💖🐼

#my resources #coding #codeblr #programming #progblr #studying #studyblr #programmer #html #html css #javascript #neocities #coding tips #html5 tutorial #html tutorial

94 notes · View notes

celestie0 · 2 months

Text

custom font colors tutorial

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?

to do custom fonts, it’s very simple, but it needs to be done on pc/laptop (cannot be done on app). we are going to start with a post:

then, you’re just gonna change whatever word that you want the custom color for into one of the tumblr defaults. you do this by just selecting the text with your cursor and then tumblr’s default colors pop up. you can change into any of them, this just establishes the code in the html and makes it easy to spot

then you're going to go to the little settings thingy at the top right of the post (the settings wheel) and click on this drop down, then click on "html" which will switch it to html

now it's in html. this looks very simple bc there is only one statement here. i’ll touch on how to deal with more lengthier blocks of html code later. but for now, note this section only:

this is ALL we need to work with in the code

we're going to change it from

to

so, for example, something like

note. you can also just copy paste the lines above so you don’t have to type it out

soooo all we did was delete the class=npf_color_rachel part and just replaced it with style=“color: #[hex code]

and here's the preview! all done :)

this is the website i use to find the hex codes. a hex code is basically those codes after the hashtag so like #81AACE (don't forget to input the hashtag)

now, for those lengthier posts i mentioned, you can use ctrl+f and search the word "color". it will show up any place on the post where you have a colored font (so do this after you’ve already changed all the places you want custom colors into default tumblr colors, like in the 1st step)

this way, you can easily find the places with that you need to edit

here is an example of that in one of my posts:

and yeah! that’s basically it. disclaimer, i’m not a software engineer nor so i know much about tech haha, this is just for tumblr aesthetics

alright peace out! 🧚‍♀️✨ hope this is helpful

#tumblr #tumblr tips #tumblr html #tumblr hacks #tumblr colors #html #tumblr custom colors #tumblr girls #custom colors #tumblr tutorial #custom colors tutorial #html tutorial #hacks

53 notes · View notes

xpc-web-dev · 1 year

Text

Websites to practice Front-End

(22/02/2023)

Today I wanted to share websites to practice your frontend skills.

Front-end is complicated for my head (ask me to solve an algorithm with structure while but not to center a div HUEHHUE).

BUT at the same time I love a well done and coded design/ui. That's why today I want to share resources to help you train

1- Front-End Practice

They have 3 levels, beginner, intermediate and advanced. There's no "answer" so you can't copy the code, it's just you trial and error until you get to the template (which really is a website that exists)

One thing I thought was really cool here was that it tells you what you're going to practice the most in the exercise, color palette and search features.

It's very interesting for a front-end not to be dependent on a tutorial, because from what I've seen in interviews, they ask you to make a layout and you won't be able to make one yourself if you don't learn to break down a single layout from the beginning and try and making mistakes until it's perfect.

2- DevChallenges

I find the projects not only beautiful visually but also interesting to practice. Here you already have the solutions that other people recommend, but again I think it's best for us to try and make mistakes until we get similar.And it also sorts the levels.

Here an example:

Cool huh? Well, I hope this helps someone who is looking for projects to practice with. We can invest a lot of time trying to make a layout, so having something ready I know helps a lot.

I wish you good studies and a great Wednesday, drink water.

#front end #frontenddevelopment #html css #html5 #full stack developer #static website design tools #css3 #javascript #reactjs #software engineer #practice #studyblr #studyblog #codeblr #resour #study tips

265 notes · View notes

the-lonelybarricade · 1 year

Text

Hi lovely content creating friends!

I have noticed something weird going on when viewing posts in tumblr's mobile dark-mode. From experimenting on my own posts, it seems that unwanted formatting is carried over when copying and pasting from an external source (such as Google docs). It will look something like this in mobile dark mode, where regular text remains black and formatted text (such as itallics) becomes white:

Unfortunately, copying and pasting without formatting doesn't seem to be a quick fix since tumblr will treat this as one block of text (and it will likely exceed their 4,096 character limit per block).

So if you create content and want to make that content accessible to dark mode users, this is something you'll need to keep an eye out for. It goes without saying that if people can't read your content, it will impact your engagement.

If you want to avoid this happening with your posts, there are a few things you can look out for. If you switch the to the HTML editor for your post, you can usually find a tag that looks something like this: . This is carried over text formatting, and deleting any tags like this should solve the problem. Here's a short little tutorial on how to do this.

If you are posting something that's really long, like a story, then I would recommend translating your text into HTML and pasting it directly into the HTML Editor that I accessed in the video above. AO3 put together a beautiful Google Doc here that runs a script to convert all of your text into HTML. The instructions tell you exactly what to do, and since tumblr has made this change it has been life saving. You can find more about this doc and other neat tools from the @ao3org tumblr here.

Lastly, if you're a mobile dark mode user and you encounter a post that looks like this, rather than scroll past please consider switching to light mode or accessing the post from a computer. Please support content creators even if you have to go a little out of your way to do so 💕

#Disclaimer that I'm NOT an expert on HTML #I'm just a lil content creator that noticed this thing and happened to know a way to fix it #there might be better ways!#so please chime in if you know of one!#tumblr formatting #formatting tips #AO3 #writing advice #fanfic #fanfiction #acotar fanfiction #acotar #acotar fandom

178 notes · View notes

frownyalfred · 7 months

Note

So I've been reading through bloodletting and I'm very curious about how the Creator's Style works

You use it to give the translation hover option whenever characters speak in Mando'a and I'll be honest, I had no clue that was even an option or how to even go about doing that for my own fics

Sorry if this is a stupid question, but do you have a resource for how to use Creator's Style like that?

Hi anon! I'm copy and pasting a post I did with instructions and comments on how I use this function (below the cut). I hope it helps!

I had an awesome commenter (the lovely @notquiteaghost) suggest a CSS script, since the initial hover text translations I used didn't work on mobile.

Here's the link to the instructions: https://archiveofourown.org/works/30290274

Fair warning, it took me a little bit to get the hang of it. If you're like me and need a little hand-holding, here's how I implement the script:

Copy the code from the CSS section into a new work skin (or the one you're currently using)

Save that skin and make sure to enable it in the work you're going to implement hover text on

Open up your chapter or fic and switch to "HTML" instead of "Rich Text"

When you find the word or phrase you want to have hover text, paste this:

Next, replace the Text to hover over section with whatever your original word or phrase was -- this is the only place that word should appear, and it should still have whatever punctuation you need in it

Replace the text for the tooltip section with whatever your translation or hover text is

Finally, triple check that there's a space between the final section and the rest of your sentence or paragraph. If there isn't a space, sometimes the script pushes the translation onto the next word or shoves them together and italicizes them

Here's what this looks like in my HTML view:

Here's what that looks like in my rich text view:

and here's what the final product looks like:

You should be able to hover over those underlined sections on mobile or desktop and see the translation you inputted. If you don't see it, there might be an issue with how you set up the individual tooltip, or the workskin itself.

My other tips for using this:

Keep a copy of the basic HTML tooltip script to copy and paste into your work as you edit it

Test your hover text in draft view on ao3. You should be able to see it.

Using italics can make the HTML part a little bit harder but it's not impossible

Keep an eye out for your punctuation! Sometimes the formatting can throw your commas and periods around without warning

Try to keep any translations or comments to one sentence max, otherwise the hover text bubble can be cut off in mobile view or stretch the view strangely

If you're translating many words (like I am in my current fic) it's easier to copy and paste a HTML tooltip that's complete but shorter so it doesn't throw off every single line (like copying a one-word translation instead of the original tooltip template)

Hope this helps! I really love using this for my fics and I'm so grateful to @notquiteaghost and everyone else in my comments who offered solutions for my hover text issues.

Here's my current fic with the hover text if anyone wants to see how I'm using it throughout the chapters.

#asks #anon #bloodletting #bloodletting my beloved #fic #fic writing #html #ao3 #ao3 tips #archive of our own #hovertext #ao3 tutorial

28 notes · View notes

t1meslayer · 9 days

Note

hey! i’ve been reading a handful of ur fanfics (which r rlly gud btw!) and i was wondering how you were able to resize and edit the text like this

and also like this

i’d be rlly interested to know because i’m unsure if it’s even possible through normal means on ao3!

Hey hey! I'm very glad you're enjoying my work <3

Thanks so much for taking the time to give me a read!!!

The text editing stuff is actually a basic function on AO3, you can do it too! When you're looking at the text editing/posting page, you'll see at the top that you can utilize "plain text with limited HTML"

Clicking the question mark icon there shows you all of the HTML functions that are available, with a basic explanation for how to apply them in your text:

The TL;DR is when you've picked one you want, you can start that section of text with the HTML signifier in diamond brackets <like this>, and then end that section with diamond brackets using a forward slash </like this>

(Be sure to include the ending set of brackets otherwise you'll accidentally make the entire rest of your story in italics or somethin - not speaking from experience I swear)

However, I found a "story" posted in 2015 that was particularly helpful with visualizing the major elements. It's called "A Complete Guide to 'Limited HTML' on AO3" by CodenameCarrot. In particular, this highlighted stuff like being able to do sub- and superscript text using and that I used (I think) to great effect in my Pokemon Scarvi piece "Paradiso" - where a lot of my experimentation happened under the guise of nightmare bs.

The way I made text look almost like the "Chat" option here on Tumblr was through "Special Types of Text."

They all produce the same result when published on AO3, but I personally use <tt>.

I've also been messing with image embedding like the text message thread in "Peaks and Caverns" and my Author's Notes in "Stone-Cold Lovers (ch. 3)," there should be more of that coming in pieces that I'm writing now! I learned a good practice for how to do so from the 2014 piece "Super Awesome Learning How to Embed Place" by leftennant.

Tbh I've been a bit surprised at how many people have asked me about this text editing stuff in my comments, because it's one of the first things I noticed is available compared to, say, fanfiction.net. I like that you can use the basic tools of the service to tailor your stores to a vision in even small ways, so I've even been testing things like pseudo-graphic design like recreating RIAA record plaques using just HTML features on my Splatoon fic "By Moonlight":

Hopefully these explainer pieces can help you out with it too!! They're the only things I currently have bookmarked on my AO3 'cause I refer back to them so often.

#Seriously tho use the tools you've got to your advantage #Same applies to life as well as silly fanfic content #Writing #Fanfiction #AO3 #Fanfic #Text Editing #HTML #Pokemon #Splatoon #writing tips #Creative Writing #Tools of the trade #my fics #Thanks for the ask!#Very happy to share what I know with the kind people out there #Something something shoulders of giants

8 notes · View notes

shahednasser · 2 years

Text

Last week Heroku announced that they’re discontinuing their free tier and add one. This lead many developers to find alternatives, as heroku’s free plan allowed developers to host a variety of small and demo projects.

The 4 hosting providers listed here are some of the alternatives available for Heroku. The free plans can generally allow developers to host demos and small projects.

Do you use Heroku? And have you migrated to another hosting after this announcement?

222 notes · View notes

kurtkokainer · 5 months

Text

if I can learn how to mod a game coded in python by staring at the raw code instead of taking a python coding course I bet I could totally do that with html and themes too instead of properly learning

#196 #coding #html #themes #tumblr themes #shitposting #?#I did actually do that thing w/ python btw. I ran around the clangen code and figured out how to mod a ton of stuff w/o ever taking a cours #it was really fun #honestly I just really wanna overcomplicate my theme by making a proper playlist for the music section and adding a million little buttons #and pop ups and anime girls and little hidden things and blinkies and just #a bunch of silly stuff #I wanna add MORE!!!#I've been half tempted to ask the creator of the theme for tips on the things I have in mind but I don't wanna be rude

16 notes · View notes

sandycodes · 11 months

Text

day 1/100

this is my first day of the 100 days of coding challenge :) im curious about website building and design and i thought html and css would be a good place to start. im following a course on udemy, so i've been learning some of the basics of html and text formatting, and im going to start the html basics course on sololearn so i can practice a little more <3

#im trying my best to finish this challenge cause i can never commit to anything but i wanna see if a career in comp sci is possible for me #so im going for it #html and css tips welcome #100daysofcode #codeblr #studyblr

28 notes · View notes

akosuaexe · 2 months

Text

18.03.2024

Today was a decently normal Monday. My teachers informed me today that I might be getting an essay I completed a while ago and getting my science test results back soon.

After school, I tried to start the home page of the website I'm currently building Project.Spider and I would like to say that thanks to the help of Bing AI, ChatGPT and Visual Studio Code, I could finish one part.

🎧- Shut up my mom's calling - Hotel Ugly

🌲- 3hrs

6 notes · View notes