#toyhouse coding

[soren-mp3]

Not my usual kinda post, but if you're looking for placeholder assets when coding, building an artfight character page, or whatever else, check out my collection of free-to-use assets!

Can't find what you're looking for? Make a request! Color palettes, aspect ratios, designs; its all free game, as long as its generic. Link below :D

Placeholder Assets by Ferin

[coyotedykez]

ToyHouse users who can code I am DUMB and don’t know how to do character profiles like this… how can I do something like this PLS

[potted-cilantro]

What.

What.

[cosmicredcadet]

Sharing this here too because I’m super proud of it and I’ll be damned if i don’t get validation for it hdgdjhs

but i stayed up until 5 am last night creating a toyhouse code based around the monkie kid character profiles

pls I’m just super proud about how close i was able to get. of course somethings aren’t exact because it is done all through code and limited CSS (I don’t get the cool premium css on toyhouse) but I still think I did pretty good😌

[angelogistics]

✨🍀⭐️makin a quick TH code tutorial for those who don’t code and want to still make cool profiles for their charas !! ^_^

✨ ✨ ✨

so for those who don’t know, TH uses an HTML/ CSS system! if you ever want to look up certain properties or tags, make sure to include those keywords in ur google search :} this is just going to be an HTML tutorial though, so I won’t be explaining the CSS side of things ;w;

✨ ✨ ✨

first step is to get your code! you can find themes anywhere, i’m going to be using this one to go through the process, it’s nice and complex so we can break it down ^_^ (https://pastebin.com/5Cd0R4Vw) just click the “raw” button then you can command a + command c to copy the whole thing! then go to TH, pick your character, edit their profile and paste in what you’ve copied :} 

now your character should have whatever theme you’ve installed! :D

✨ ✨ ✨

let’s get to editing! 

one of the most helpful things to know when navigating html is tags! These are things like <div>, <span>, <li> etc. You can think of them as containers for things like images and text! Each tag has to be closed (unless its an <img> tag but we’ll get there) with its corresponding end tag, so <div> needs a </div>. The end tag will always be the same as the opening tag but with a slash before the element name! This isn’t as important if you’re just going to be editing text/images but if you want to add an element or just want to know about HTML then it’s very important ^_^

Now that we’ve gone over how things are roughly arranged, lets try to edit the text on this :]

I’m going to start with the text “A short title” ! To find where that is, look in the TH profile editor for text colored like in the img below :3 If there’s any text that’s that kind of beige-ish tan, that’s text that will show up on the profile somewhere!

I’m lucky since it’s right at the top of the document and I don’t need to scroll :D

I’ll just change it to my character’s name for now! 

Now if I save and go to the site...

Woo!! It’s changed!! You can use this method to edit any text on a profile, just read through and scan the code for the text that’s already on the page, and change it up to whatever you like :3

✨ ✨ ✨

editing images is a little bit tricky since they won’t have that different text color. Instead you’ll have to look for an <img> tag!

Let’s try to find that main img on the left there :3

You might have to search a little for it in other themes, but mine was right at the top! The image isn’t actually loading since it’s probably a private image on the owner’s TH, so let’s replace it with one that does work ^u^

I want this image of Naberius to be in that window where the current image is, so I’m going to right click on it and click “Copy Image Address” so that we can tell the HTML where on the web to grab the image from!

You have to be a bit careful when switching srcs (sources) for an image, because you only want to replace this link that’s highlighted here! Don’t delete the quotes or change the src= part, since that will break the code ^_^ If your link shows up this nice dark blue color just like the previous one, you should be good to go!

I’ll just save and go over to his page and....

There’s my image! :D

✨ ✨ ✨

One other thing this profile has is these nifty little bars / sliders! We already know how to change the text, but changing the percentage is a little different ^_^

Let’s scroll down to the part where that text shows up!

We’re going to be looking for some kind of number, since it’s probably a percentage or number that specifies the width of the bar!

Ah, there it is! style=“width:80%”! Now depending on the theme, it might be representing the orange space or the brown space, so you’ll have to play around with it, but let’s change it to 50% which should move the bar to the middle :}

Another save and.....

There you go! The bar is now at 50% <3

✨ ✨ ✨

That’s all I got for this tutorial, I tried to cover most of the basics, let me know if there’s anything else y’all want me to explain ^_^ <3 

[turtle-cakes]

I swear to God Toyhouse coding is half "Oh, this'll look cool! Lemme add this to the page" and half *"OH GOD I BROKE EVERYTHING HELP THERES IMAGES HALFWAY ACROSS THE SCREEN ESCAPING THE BOX HOW DID I FK UP THIS BADLY?!"*

Just me???

Anyways, Binary.

[blxxdless1z]

Decided to ditch linktree. It's kinda ugly and I hate having so many sites to manage. So my toy house profile page will actually be the hub of all my links ^w^" I hope this works gang wish me luck

[hydralutris]

Honestly this is my best WIP so far