#code: tutorial | Explore Tumblr posts and blogs

beedesigns · 1 year ago

Text

How to show/hide elements.

Inspired by a recent conversation with someone on discord that prompted me to make a quick demo on codepen.io I thought I would try to make an actual tutorial out of it. So! For those that are interested, here's how to easily change what different groups see when they're logged in. This tutorial is geared specifically toward JCINK coders, but can easily be adapted to any forum or webpage. Keep reading to find out how.

The first step is to add the group id to your board's body. To do this you need to find the <body> tag in your board wrapper and replace it with:

Now you have that in place, you can use it to dictate what different groups can and can't see. This obviously has a lot of use cases, from changing group colours to hiding certain information or forums. The most common use is to swap the navigation options depending on whether someone is logged in or not.

So, you've created your nav menu, and you want guests to see the "sign-in" link, but what about members who are already signed in? You want them to have the "sign-out" link instead. What we're going to do is wrap each link in a class that corresponds to who we want to see it.

Now, in the stylesheet, we're going to add the CSS to tell the board to show or hide the corresponding link depending on who is logged in. We're going to be using JCINK's default group ids #2 for guests and #3 for members.

First for guests:

This simply says if a guest (.g-2) is viewing the page, then show anything using the class 'guest' and hide anything using the class 'member'.

Then for members:

Much like the above, we're telling the site to show anything using the class 'member' and hide anything using 'guest' when the member group (g-3) is logged in.

And that's it! You can see it in action here, where I've combined it with a colour variable to demonstrate how this method can be extended to include pretty much whatever you want. Hopefully it all makes sense! This is my first ever tutorial, and I'm just a baby coder myself. So, if you see a mistake or something that doesn't make sense, please do reach out and I shall try to correct/clarify it. Thanks for reading :)

#codeblr #jcink codes #jcink tutorial #code: tutorial #css #html #coding: resources #codes by beedesigns

24 notes · View notes

insertdisc5 · 1 year ago

Text

🎮 HEY I WANNA MAKE A GAME! 🎮

Yeah I getcha. I was once like you. Pure and naive. Great news. I AM STILL PURE AND NAIVE, GAME DEV IS FUN! But where to start?

To start, here are a couple of entry level softwares you can use! source: I just made a game called In Stars and Time and people are asking me how to start making vidy gaems. Now, without further ado:

SOFTWARES AND ENGINES FOR PEOPLE WHO DON'T KNOW HOW TO CODE!!!

Ren'py (and also a link to it if you click here do it): THE visual novel software. Comic artists, look no further ✨Pros: It's free! It's simple! It has great documentation! It has a bunch of plugins and UI stuff and assets for you to buy! It can be used even if you have LITERALLY no programming experience! (You'll just need to read the doc a bunch) You can also port your game to a BUNCH of consoles! ✨Cons: None really <3 Some games to look at: Doki Doki Literature Club, Bad End Theater, Butterfly Soup

Twine: Great for text-based games! GREAT FOR WRITERS WHO DONT WANNA DRAW!!!!!!!!! (but you can draw if you want) ✨Pros: It's free! It's simple! It's versatile! It has great documentation! It can be used even if you have LITERALLY no programming experience! (You'll just need to read the doc a bunch) ✨Cons: You can add pictures, but it's a pain. Some games to look at: The Uncle Who Works For Nintendo, Queers In love At The End of The World, Escape Velocity

Bitsy: Little topdown games! ✨Pros: It's free! It's simple! It's (somewhat) intuitive! It has great documentation! It can be used even if you have LITERALLY no programming experience! You can make everything in it, from text to sprites to code! Those games sure are small! ✨Cons: Those games sure are small. This is to make THE simplest game. Barely any animation for your sprites, can barely fit a line of text in there. But honestly, the restrictions are refreshing! Some games to look at: honestly I haven't played that many bitsy games because i am a fake gamer. The picture above is from Under A Star Called Sun though and that looks so pretty

RPGMaker: To make RPGs! LIKE ME!!!!! NOTE: I recommend getting the latest version if you can, but all have their pros and cons. You can get a better idea by looking at this post. ✨Pros: Literally everything you need to make an RPG. Has a tutorial inside the software itself that will teach you the basics. Pretty simple to understand, even if you have no coding experience! Also I made a post helping you out with RPGMaker right here! ✨Cons: Some stuff can be hard to figure out. Also, the latest version is expensive. Get it on sale! Some games to look at: Yume Nikki, Hylics, In Stars and Time (hehe. I made it)

engine.lol: collage worlds! it is relatively new so I don't know much about it, but it seems fascinating. picture is from Garden! NOTE: There's a bunch of smaller engines to find out there. Just yesterday I found out there's an Idle Game Maker made by the Cookie Clicker creator. Isn't life wonderful?

✨more advice under the cut. this is Long ok✨

ENGINES I KNOW NOTHING ABOUT AND THEY SEEM HARD BUT ALSO GIVE IT A TRY I GUESS!!!! :

Unity and Unreal: I don't know anything about those! That looks hard to learn! But indie devs use them! It seems expensive! Follow your dreams though! Don't ask me how!

GameMaker: Wuh I just don't know anything about it either! I just know it's now free if your game is non-commercial (aka, you're not selling it), and Undertale was made on it! It seems good! You probably need some coding experience though!!!

Godot: Man I know even less about this one. Heard good things though!

BUNCHA RANDOM ADVICE!!!!

-Make something small first! Try making simple: a character is in a room, and exits the room. The character can look around, decide to take an item with them, can leave, and maybe the door is locked and you have to find the key. Figuring out how to code something like that, whether it is as a fully text-based game or as an RPGMaker map, should be a good start to figure out how your software of choice works!

-After that, if you have an idea, try first to make the simplest version of that idea. For my timeloop RPG, my simplest version was two rooms: first room you can walk in, second room with the King, where a cutscene automatically plays and the battle starts, you immediately die, and loop back to the first room, with the text from this point on reflecting this change. I think I also added a loop counter. This helped me figure out the most important thing: Can This Game Be Made? After that, the rest is just fun stuff. So if you want to make a dating sim, try and figure out how to add choices, and how to have affection points go up and down depending on your choices! If you want to make a platformer, figure out how to make your character move and jump and how to create a simple level! If you just want to make a kinetic visual novel with no choices, figure out how to add text, and how to add portraits! You'll be surprised at how powerful you'll feel after having figured even those simple things out.

-If you have a programming problem or just get confused, never underestimate the power of asking Google! You most likely won't be the only person asking this question, and you will learn some useful tips! If you are powerful enough, you can even… Ask people??? On forums??? Not me though.

-Yeah I know you probably want to make Your Big Idea RIGHT NOW but please. Make a smaller prototype first. You need to get that experience. Trust me.

-If you are not a womanthing of many skills like me, you might realize you need help. Maybe you need an artist, or a programmer. So! Game jams on itch.io are a great way to get to work and meet other game devs that have different strengths! Or ask around! Maybe your artist friend secretly always wanted to draw for a game. Ask! Collaborate! Have fun!!!

I hope that was useful! If it was. Maybe. You'd like to buy me a coffee. Or maybe you could check out my comics and games. Or just my new critically acclaimed game In Stars and Time. If you want. Ok bye

#reference #gamedev #indie dev #game dev #tutorial #video game #ACTUAL GAME DEVS DO NOT INTERACT!!!1!!!!!#this is for people who are afraid of coding. do not come at me and say 'actually godot is easy if you just--' I JUST WILL NOT.#long post

36K notes · View notes

suturical · 3 months ago

Note

can u do a tut for sizing borders bc im rlly bad at coding in rentry

This is the code that I usually start out with, and it works most of the time without tweaking much. The thing I still tweak the most though is the CONTAINER_BORDER_IMAGE_OUTSET. I usually set it anywhere from 10px to 20px, and sometimes I will set two values to it if I want the outset to be diff for top+bottom and left+right

I prefer a more like bigger(?) Look to how my border are cut, so I do that by making the slice smaller (15% to 20%) or I make the width bigger (25px to 30px)

There are a lot of ways to playe around with the coding though like down below I set slice to 30% which I think I see a lot of people do idk. But to keep the bigger cut look I like I make the width 30px. I like to keep my widths at 20px to 25px though because of how much my outset is. My outset sometimes clips under the edit button when you save the code and view it normally, so I keep the width a bit smaller and use a smaller or equal slice. But there are a lot of ways to play around with this because it depends a lot on your rentry and what border you're using becuase there are out(?) Borders and in(?) Borders. Basically just play around with CONTAINER_BORDER_IMAGE_SLICE + CONTAINER_BORDER_IMAGE_WIDTH You can also have fun with the repeat options (round, repeat, space, and stretch iirc). I'll leave my code and examples below. I hope this helps Anon! I'm not sure if it's comprehensible or if I'm just yapping BS..

Above big slice big width, below big slice small width

Down below are what I call 'In borders' cause they're facing inwards. I usually have the outset on these a little bigger

CONTAINER_MAX_WIDTH = 300px

CONTAINER_BORDER_IMAGE = Your border image

CONTAINER_BORDER_IMAGE_SLICE = 20%

CONTAINER_BORDER_IMAGE_WIDTH = 25px

CONTAINER_BORDER_IMAGE_OUTSET = 10px

CONTAINER_BORDER_IMAGE_REPEAT = round

488 notes · View notes

dovewingkinnie · 4 months ago

Text

programmed my oc into a game for the aesthetic

#i hope this gives off the vibe of an old game #2 days of modeling #1 day of following a coding tutorial #i felt so happy to draw the little gifs on the screen again #im so sick of 3d (i will do it again)#oc #oc animation #oc art

688 notes · View notes

tes-trash-blog · 8 months ago

Text

#I CRACKED THE CODE #JESUS CHRIST #DRAW THE GUAR #the elder scrolls #the trash talks #trash art tutorial #please reblog with your results. Please

230 notes · View notes

eobe · 4 months ago

Text

Dank farrik 🙈 I tried to make a face by template concepting video à la Eobe and it turned out fun chaos so I have to show it! 😂🙏✨

I picked Crosshair, because he‘s got the most uncommon clone face shape in my opinion and because he got to few friendly attention from my side in the last time (only fun attention, poor kitty Croissant actually not sorry) AND OF COURSE he jinxed it 🖤💀

While drawing I collected my thoughts, fails and drawing frustrations and I drew little funny extras so that it‘s possible to read decipher the notes despite the rush of the timelapse 😀 And I already thought yeah, this is getting a messy thing… 👀

… AND THEN my screen bugged and crashed my brush!! 😱😂 Aaahh sweet chaos! But great, I go for it, let’s look how far I get before my drawing device starts burning or something 🤷🏽‍♀️

Is making ‚Fun drawing process à la Eobe‘ a thing? 👀 I giggled and definitely had fun like a child playing and hope you have fun with my weird and quite ADHD coded timelapse too! 😂 And also I hope besides fun, it’s maybe a bit inspiring to try out (what was the original intention before I noticed that it’s getting chaotic 😅)

The result is super messy speedy hatched Crosshair! And I kind of like it! It’s hiv vibe 🤷🏽‍♀️ So have a look:

The finished colored Crosshair get‘s his own posting, grumpy sniper deserves it and a hug 🖤✨I think he wrote the ALT text

Vod, vor entye for giving me the push to do this and sharing @wings-and-beskargam 💙✨🫶 This is the way!

Nix, here it is, have a ☕️ to that dry 🥐✨ @crosshairs-dumb-pimp-gf

Taglist: @eclec-tech @lonewolflupe @bixlasagna @returnofthepineapple @sunshinesdaydream @covert1ntrovert @general-ida-raven @vrycurious @dystopicjumpsuit @chaicilatte @groguandthebadbatch @justanotherdikutsimp @ladylucksrogue @spaceyjessa @morerandombullshit

139 notes · View notes

kiraizuzu · 1 year ago

Text

Chifuyu thinking he broke you after giving you a shaking orgasm.

"Chifu'...fuck, a-ah!"

Chifuyu sat behind you with his knees planted on either side of your hips.

His blonde bangs fell across his forehead, tongue lolled out of his mouth as he rubbed his thumb faster and faster in circles on your engorged clit.

Two fingers slipped inside you with very minimal resistance due to how wet you were.

"You're so wet, baby. Couldn't wait for me to get off of work so I could come fuck you, huh?"

His aquamarine eyes settled on the juncture between your spread ass cheeks and the creamy translucent substance coating your inner thighs.

"Mmm, Fuyu...feels s-so good..."

You murmured with your cheek pressed against the cool silk of the pillow. Your bonnet had slid halfway off of your head, but Chifuyu fixed it for you and laid a soft kiss upon your tawny cheek.

It was almost embarassing how close you were to cumming just from Chifuyu's fingers playing with your swollen clit, but he was so good at it that he'd often make you come several times from his fingers alone before he even put his cock in you.

"That's right, baby. You close to cumming all over my fingers, aren't you?"

He sped up his actions, thrusting deeper with the two inside and pressing his thumb down directly on top of the little button, moving it from side to side.

Your thighs enclosed around his hand and began to quiver which made Chifuyu grin like a Chesire cat.

"Come on, open up for me, babe. Trying to get you there, sweet girl."

"'Fuyu, I can't! You're about to make me cum, you-!"

A soft gasp left your parted lips as a harsh shiver raked through your entire body. Chifuyu's hand was definitely stuck between your legs now as you shook and convulsed.

His eyes widened in shock. Usually, you might shiver a bit while cumming but you'd recover quickly.

Panic began to sink into his chest and he ripped his hand from between your legs like he'd been burned when you didn't stop shaking. Your head twisted to the side and you drew your knees up towards your chest.

"Shit! Oh shit...baby? You okay? Y/N?"

Baji often spoke to Chifuyu about all the women Baji himself had fucked with and how he always had them shaking and cumming all over themselves, but Chifuyu just took his words with a grain of salt, attributing it to simple "locker room talk."

He didn't actually think that a 'shaking orgasm' was a real thing, which is why he was so horrified at your body's reaction.

Poor thing was getting ready to grab his phone and call an ambulance when you opened your eyes and smiled up at him sweetly.

"Y/N! Are you alright?!"

"Mhm. That was amazing, 'Fuyu. Why are you looking so scared?"

He grabbed your hand and pressed a chaste kiss to the back of it.

"Because I was. You should have seen the way you folded in on yourself like you were in pain. I thought I hit the wrong thing and made you have a seizure or something."

You couldn't stop the giggle from leaving your lips as you looked up into his wide baby blue eyes.

"Oh, Bunny, you're so cute. I don't know if what you just said is possible but that was one of the best orgasms you've ever given me."

"Really?" He bit his lip shyly, cheeks warm and as red as cherry tomatoes.

"...Can I maybe try it again?"

#chifuyu matsuno #chifuyu smut #chifuyu x black reader #chifuyu x reader #tokyo revengers x black!reader #chifuyu x black!reader #chifuyu matsuno x reader #tokyo revengers x reader #black coded reader #black fem reader #x black reader #tr chifuyu #tokyo revengers chifuyu #divider made using cafekitsune's tutorial #bunny fufu🐰💚#chifuyu brainrot #𖢇rose.petals🌹🗒

599 notes · View notes

project-sekai-facts · 7 days ago

Note

what games did the units play originally? is there a video online with subs of them gaming?

Originally they all played first party nintendo switch games. Leoneed played miitopia, MMJ played clubhouse games, VBS played puyopuyo tetris, WxS played switch sports, and N25 played ringfit adventure. I found a playlist of subtitled videos here

#asks #one day i will get around to making tutorials of the official ln and mmj miis #i started it back when the videos dropped and never finished it 💀💀#i might still have the codes and turnarounds for the ones i recreated back then so maybe I'll try finish that this week

49 notes · View notes

dodgesgirl · 11 months ago

Note

how do you get your text that soft pink shade? tutorial?

BABY PINK TEXT TUTORIAL !

hi babe!! here's a short and hopefully easy to understand tutorial for the text i use in my posts ᥫ᭡

also, just a little disclaimer: the images on this post might not be visible because they exceed the limit of 10 images per post on mobile app. should be fine on a laptop or pc though!!

okay firstly, make sure you're using a laptop and open your post in one tab and in a seperate tab open jsfiddle.

you should be able to see this coding somewhere on your screen:

you're gonna replace the two hex-codes (highlighted text) with whichever colours you'd like. to do a gradient, like this, the two codes will be different, but i like to do a solid colour like this so my codes will be the same.

the hex code i use for the baby pink is D2A3BE, or you can use your own. if you don't have a hex code you like yet, you can use the colour picker on this site to find one!

just copy and paste the hex codes into the code so it looks like this:

make sure it looks exactly like this. you still need all the spaces, quotations and other code. only change the hex codes.

in the top left of your screen, there should be a "run" button, and when you press it, the colours in the bottom right should change from the default ones to the ones you chose.

next, you're going to open your tumblr post in your first tab.

your post will start like this. you'll go to the settings button in the top right (circled) and change the post from rich text to HTML

this will enable coding on the post. you'll still have 'preview' where it will look normal and you can still type and edit the post as you usually would.

once you've typed something it will show it in the HTML option just in a different way:

you want to go to the preview page and make sure you've got the text looking exactly as you want it (bold, italic, small, etc.). also note that colours look especially good and show up well when the text is bold. i set mine to bold as an example.

when you switch to HTML it will look something like it does above.

next, you'll copy the text between all the coding prompts (e.g. and ). only copy the text you want to be pink or another colour!! don't highlight any of the coding. then paste it this top box on jsfiddle so it looks like this:

press "run" on the right, and it will spit out a line of code in the second box that will look something like this:

you're gonna copy that line of code and switch over to your tumblr tab. on your HTML version of your post, find the text you're changing and highlight it. then paste the code into that spot. make sure not to highlight any of the surrounding code - only the text you've written and want to change.

it will look super weird and long because it's colouring each symbol and letter, if you look closely, each letter of "example text" is separated and surrounded by code. when you switch to preview it will look like this:

for gradient, the process is the exact same, but on jsfiddle, when you're replacing the default hex codes with yours, the second hex code you plug in will be different to the one you start with. for example:

this second colour is C45494 btw!!

to do specific text in a paragraph as if bolding it (which i do in a lot of my posts), you just want to find that text in your HTML post, and copy and paste the specific word/s into your top box on jsfiddle, and then proceed as normal. example:

hopefully this helped!! let me know if you have any questions or need me to go over anything ( ˘³˘)

191 notes · View notes

trekkerac · 5 months ago

Text

I knew I had my dads coding gene hidden within me

#feeling proud i could code a basic sanity system without following a tutorial #listen usually when i have a i want to make a game phase i can barely learn a thing about coding #but now i think it finally clicked & i'm happpy

76 notes · View notes

alazic02 · 1 year ago

Text

My full piece for the Le Blanc zine, a Chat Blanc Miraculous Ladybug zine hosted over at @leblanczine! I had a lot of fun working on this piece, playing with the shadows and saturations. Everyone's work looks amazing and it all came together so well!

The leftover sale runs through May 4, 2024 so make sure you grab what's available :)

Tumblr post || Shop

Artwork ©: alazic02 | buy me a ko-fi

Do not repost.

#miraculous ladybug #leblanczine #le blanc zine #chat blanc zine #zine #miraculous ladybug zine #chat blanc #art #my art #fanart #digital #alazic02 #theres alt text on the first image that describes the full piece! the other two are closeups #idk if theres much left but theres a promo code 'leftovers' for 20% off your order #anyway i really enjoyed rendering this one actually and that took up most of the time i worked on it #i gotta look at more tutorials and stuff bc i feel like ive plateaued in terms of techniques for digital art and i wanna update my style

344 notes · View notes

izicodes · 1 year ago

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

156 notes · View notes

organised-disaster · 3 months ago

Text

Web design is my passion

#shitpost #wobbledog #just 1 #as you can see my programming class is going very well #html #i know a lot more than i did about html but i can barely do ANYTHING with what i know #fun fact i actually had to put in MORE effort to make it look like this m #quick image tutorial incoming #when you alter the image size in css you use the string img { width: 400px; } (or your desired pixel number or percentage)#and this scales your image accordingly. however.#you can also add a second value of height or width depending on what you started with and the image WILL stretch #so my code looked like this:#img { width: 100%; height: 400px; }#also ☝️ the colour of the title is dodgerblue and i think its the best blue. followed closely by aliceblue

38 notes · View notes

magicbeings · 3 months ago

Text

How I added "instant translation" to the non-english text on my fic: a very easy 3 step guide

Hello!

I recently posted a Wolfstar fanfic called Instance of Happenstance and received a lot of compliments on a small piece of code I used. Both @marigold-hills and @leavesthatarebrown suggested I share how I did it, so here I am, finally explaining it in a Tumblr post!

Before diving into the details, I want to clarify that I didn't write this code myself.

Initially, I tried following this tutorial, but I stumbled upon a better solution in the comments of that post. The code on the tutorial itself does work, but a) it's harder to use and b) it doesn't work as well if you're planing to have multiple paragraphs that you need to show the translation on the same fic.

The solution someone presented on the comments, however, is very simple and easy to use for as many paragraphs as you need, but the explanation there wasn’t too clear, so I decided to expand on it to make it easier for others to implement.

All credit to Ao3 users La_Temperaza (who wrote the orginal post) and Nikkie2571 (who posted this code on the comments).

What Does This Code Do?

This code adds an interactive feature to your fanfic, allowing readers to hover over a specific paragraph (or tap on it if they’re on mobile) to instantly change the text to something else — also set by you.

While this can be used for various purposes, I think it's particularly useful to display instant translations of non-English dialogue/text directly in the story. The code offers a much smoother alternative to the clunky “see end notes for translation” thing—which, let's be honest, can be a pain for readers, especially in long chapters.

For example, in instance of happenstance, Sirius discovers an old journal written entirely in French. I wanted to maintain the sense of mystery and intrigue that would be lost if I simply said the journal was in French, but wrote the text in English.

This solution let me keep the best of both worlds—retaining the authenticity and the immersion of the French, while still making the story easy to follow for the readers.

Now, I know this sounds complicated, but I assure you, it's not!

Down bellow is a quick, 3 steps tutorial on how to do it. I hope this is helpful! (:

(I'm doing this on the computer, if you're doing it on mobile, the layout of the website might be different from my printscreens)

Step 1 - Create The Work Skin

I'm gonna go right to the point here, but if you want to know about Work Skins in detail, I suggest this Ao3 Article.

On your Ao3 Dashboard, click on the fourth link on the sidebar, which is "Skins".

Then, on the page that opens up, click on "My Work Skins"

Then, on the top of the page, select "Create Work Skin"

Now, you'll see the form to create your skin, which looks like this:

Leave the "Type" as "Work Skin". On the Title, you can give any name you want to your skin, but I suggest you choose the same title as your fic or something like "instant translation", so you'll know what it's about later.

You don't have to worry about any of the other fields, except for the CSS one, where you should copy and paste exactly what I'll put bellow:

#workskin .change_on_hover:not(:hover) .on, #workskin .change_on_hover:hover .off { display: none; }

So, now, you'll have something like this...

... and you just have to click "save" on the bottom of the page, and this step is done.

Step 2 - Apply the Skin you created to your fic

For a new work, click on "New Work" as usual. If it's a fic you're already posting, you can add this as well, just click the "Edit" button.

Now, on the form of your fic, on the "Associations" tab, right under the menu where you select the language of your fic, you'll see a "select a work skin" option.

On this field, you should select the workskin you just created on the previous step, searching by the name you gave it on the "Title" field.

Step 3 - Insert the text

The code we're gonna use is this one:

paragraph in foreing language paragraph in english

If you have no idea what this means, hold my hand, we're gonna get through it together!

First, copy your fic’s text into the AO3 text box as you normally would. Then, switch the text box to HTML mode so you can see the underlying code.

Now, scroll down until you find the paragraph you want to translate. After pasting, it will likely look something like this:

Note how each paragraph in HTML starts with and ends with . These tags indicate where a paragraph begins and ends.

Our goal is to modify that first tag so it tells the browser, “Hey, this paragraph is different from those other ones. It should change when hovered over or clicked.”

To do this, we’ll change to . This marks the paragraph as special—one that should switch text when interacted with.

Now note how instead of having a single paragraph, we need two versions of the text:

In blue, the original (non-English) text, which will be shown by default.

In red, the translated (English) text, which will appear when the reader hovers over or clicks on it.

For the original text, wrap it inside a tag, ending with like this:

insert here the whole text of the paragraph in the foreign language

For the translated text, wrap it inside a tag, also ending with . This will replace the original text when hovered over or clicked:

insert here the whole text of the paragraph in english

And don't forget to end the whole thing again with

Again, here's how it looks on my fic:

With the paragraphs that come before and after the translated text, just leave them as they are. They should still start with and end with . No changes needed!

You can use this method for as many paragraphs as you want, whether in the same chapter or across different chapters. As long as the Work Skin is active, the effect will work seamlessly throughout your fic.

#fanfiction #ao3 #ao3 work skins #work skins #translation on text #ao3 fanfic #ao3 coding #tutorial #step by step #fanfic #wolfstar #marauders

70 notes · View notes

tumbl-repository · 9 months ago

Text

Tags Masterlist. Click to find tagged posts.

Updated 31 October 2024.

General tags:

themes - patterns - resources - navigation - sidebar - interactive - header - fansite - contained - fandom - tools - tags - pixels - gif - graphics - dividers - pages - all in one - blinkies - code - colours - html - javascript - no javascript - neocities - templates - tutorial -

Specific tags:

kingdom hearts - seashells - splatoon - summer - steven universe - book - cats - colourful - computer - constellation - cute - eyestrain - facebook - fish - hexagon - horizontal - metal gear solid - music player - particles - pokemon - reddit - simple - social media - space - spongebob - tarot - undertale - water - webcore - writing -

Year of creation:

2013 - 2014 - 2015 - 2016 - 2017 - 2018 - 2019 - 2020 - 2021 - 2022 - 2023 - 2024

Full masterlist page:

More will be added later. Feel free to suggest anything!

80 notes · View notes

agatedragongames · 2 months ago

Text

Learn how to explore a grid and find a goal point with breadth first search in this pathfinding tutorial. You will use Processing and Java to code the breadth first search pathfinding algorithm and create a graphical demo so you can see it in action.

In the last tutorial, we programmed depth first search and watched it explore a node graph. In this tutorial we will program breadth first search and watch it explore a grid.

The breadth first search algorithm will add every unexplored adjacent node to a queue, and explore all of the added nodes in sequence. For each node explored, it will continue to add the adjacent unexplored nodes to the queue. It will continue to do this until the goal is found or all connected nodes have been explored.

#gamedev #indiedev #maze #pathfinding #game development #coding #creative coding #programming #Java #processing #search algorithm #tutorial #education #breadth first search #grid

18 notes · View notes