Thank you for this code, using it! I love it!
Hi! really love your code! I'm new to toyhouse and using codes for that matter, so I apologize if this is a stupid question: but how do you add images with this code? With character codes that I've used, there's a placeholder link so I know where to replace it with my own, but since this code doesn't have that, I'm a little lost. I'd appreciate the help whenever u get a chance! ^^
As in I should just be replacing that text with the link itself? I don't know if I might be doing something wrong because it hasn't worked when I tried that.
Yea sure, but I actually don't know how to add images to comments yet on toyhouse? so sorry for the trouble
that's alright!! it's this button (below) with WYSIWYG enabled, or you can just send a link to an image (if you don't know where to upload it to get a link, postimages works)
Love this code! Currently working on it with my new profile, though how do I add ribbons and make it to when you click it, it shows a brief description of what they each represent?
Like what this user did for example.
thank you!! :D you can just add the ribbons like any other image, then in the <a> tag for each ribbon, add class="tooltipster" and title="text here" :]
like so:
<div class="col-3 p-1 justify-content-center align-items-center"><a class="tooltipster" title="this is where the description goes" href="https://toyhou.se/3027317.chiffon/gallery#45618497"><img class="rounded" src="https://f2.toyhou.se/file/f2-toyhou-se/images/45618497_imUurrnm0e9GdU8.png"></a></div>This is cool! But how do I add the flags? I'm a bit stupid for this 😭 Also, how do I add flags that are not listed in the link? Because I'm hetero ally but I see that noweher.
i'm glad you like it!! you have to go to this page and copy the code for the flag you want, then replace one of the existing flags here:
(the section highlighted is what you need to replace for one flag. the line below it is the same, it's just another flag)
then you need to change the "div" at the beginning and end to "span" to prevent the link from breaking.
also, someone has made a hetero ally flag here :] if you want to make a custom flag that no-one else has already made, you would have to recode the background-image property yourself, which can involve some pretty complicated math for unique shapes.
Lovely code! I appreciate how easy it is to change and movie stuff around!
Did a bit of modifications (color changes and etc) too it feel free to give thoughts
Hi ! Just wanted to say I use your code for my profile and I love it ! It really make me wanna learn more about coding.
And I thought about adding a box with some sort of list of what you’re doing, something like a waiting list for commissions and such, but with the possibility to show how much progress you made into the commission, something like a skill gauge or a personality gauge, idk if you see what I mean ?
I’m gonna try and add one from another one of your F2U HTML but I’m not sure it’s gonna work since I don’t know a lot about coding and I’d like it to be rounded like the rest of the boxes.
AAAH thank you, i'm glad to hear that!! :D that's a really good idea! i'll add a box like that when i get the time & let you know when i'm done. i really like the text colors you chose for your profile btw!!
Argh thank you much TwT <3 !!!! I tried to do one on my own (inside another collabsible boxe) it was a lots of fun even thought it was quit hard as I only started codding thanks to your f2u html ! Just wanted to sned love again cause your Modular user is really cool and got me into trying to learn how to code <3
hi there! i love this code (it was exactly what i was looking for) but i don't quite understand how to get the flags next to the pfp to show up?
if i hover over the area it still links to it but . the flags aren't visibly there
hi, i'm glad to hear you like it!! :D could you send me a screenshot of your code so i can troubleshoot the problem?
you should be able to see it here! https://sta.sh/01zt72f8kd1g (sorry its in a stash link cries)
only one works now but im not sure if i'm doing anything wrong?
Thank you so much for such a pretty code! Used it for my profile (and sent it to a few friends)
Just so you know, with discord's recent update, linking a discord audio file won't work anymore (you may have to fix this on some of your own things) I went for a youtube embed because I'm lazy, but discord messing everything up for real
i'm glad you like it!!! :D and ty for letting me know! i already replaced all my images a while back but i totally forgot about the audio LOL, i'll make sure to change that comment and fix the live preview. if you're looking for an alternative, i've been using filegarden which has been great!
so im unsure whats going on with this, but i noticed that in the live example has the pride flags spaced apart and code doesnt. i cant seem to get it to look like the former, and cant really find any previous comments talking about it (or maybe i missed it, i dunno)
i feel like the answer is there right in front of my face but im too stupid to figure this out
heres some screenshots of what it looks like on my end
(also my friends are all being dumbasses (affectionately) around me and i think its rubbing off on me lmao so sorry if this makes not a single lick of sense)
hi hi!! i'm not 100% sure this is what's going on, but try making a new line before each <span> tag? or if that doesn't work, a between each </span> and <span>
hi! i love this code and I'd like to know if there's a way to change the color of the notice at the very top :] i figured out how to change the color of the box but the letters and the border around the box won't change. sorry if this has already been answered!!
thank you! :D you can do it by adding these properties to style="" on the first line:
just change the hex codes to the ones you want. if for some reason this doesn't work, try adding !important after each one, like margin-bottom already has
this is a super awesome code!!! took me a while to figure everything out since this was my first time ever touching code, but it was fun to edit!
Could someone send me the code through discord? I'm struggling to fully copy the code as it keeps messing up😭
I'd greatly appreciate it! My discord is the same as my user except it's froggin.Unhoppy
I tried but it's still not allowing me to go all the way down to fully copy it 😭
Maybe it's just my phone
Loving this code so far but I'm having trouble adding different icons to the socials (Aka: Artfight and Carrd). I can't figure it out for the life of me akhrka
hi!! you can use any of the icons listed here, if you click on one there will be an option to copy the html for it :]
used it! Took me a little bit to get everything to work right, but was a user error lol. wonderful code overall 12/10
This user is not visible to guests.
This user is not visible to guests.
you can just remove each link in the "socials" section, leaving only the credit—and if you want the credit to remain on the right, you can change justify-content-between to justify-content-end, like so:
or you can just remove the whole socials section, but i'd still like to be credited, so if you do that i'd appreciate if you put in a credit link somewhere else :]
tysm, i'm glad you like it!! :D you can start by just removing three of those lines, which will automatically leave the other three centered like this:
but if you want them to take up the full width, you can change each col-6 col-sm-4 col-xl-2 into col-4, which will make them absurdly tall if you leave them as square images:
if you want to shrink them down again, you can then give each <a> tag a max-width, like so, and they will be evenly spaced:
let me know if that wasn't what you were looking for!
This user is not visible to guests.
hi, i'm glad you like it!! :D this is an issue with the flag code, see the coder's fix for it here
This user's account has been closed.
Hi, I love this code! I just wanted to comment that with the pride flags, I liked how in the html page for the flags, the flags had text when you hover over it that says what the flag is. However in the provided codes there, this text was not part of the code, so I decided to try to add it myself! [Y'know bcuz quoiromantic isn't one you see often XD]
I'm bringing this up in case any other users want to do this, so here's the code you need to change!
In the html for each flag, replace the section that says <span class="rounded d-inline-block" with <span data-toggle="tooltip" title="FLAGNAMEHERE class="rounded d-inline-block"
The credit still works and now you have text when you hover over the flags :)
Btw, I have basically no coding experience and pretty much just snatched this code bit from a comment on the html pride flags XD Just figured it'd be nice to bring up here for anyone who wants it!
This user is not visible to guests.
hi! if it's breaking the entire code, chances are you're matching your opening and closing tags incorrectly (e.g. you have an extra </div> or one of your <div>s doesn't have a </div>). if you have the code editor turned on, you can place your cursor in one tag, and its matching closing/opening tag will be highlighted with a little border around it, so you can check if it's all lined up correctly.
if you want to put text in the place of the image, all you need to do is remove the "focal image" section and copy/paste the "main text" section in its place. custom colors are added with color: #000000; for the text color and background: #000000; for the background color (replace #000000 with the color you want) in the style="" attribute.
I love this code! I have a bit of an issue though: I was trying to tinker around with the flags when I ran into an issue. At first, it looked like the flags layered on top of each other, so I tried fixing it myself. When I go onto my profile now, the flags don't show up for me at all. It seems to work fine when I put in the code here though, so I'm a bit puzzled.
<div class="text-right w-100" style="position: absolute; top: 83px; right: 8px; max-width: calc(100% - 125px);"> <a style="text-decoration: none;" href="https://toyhou.se/16962387.html-pride-flags"> <div class="rounded d-inline-block" style="background-image:linear-gradient(#ff8bbf,#ff8bbf 14.3%,#cdf5ff 14.3%,#cdf5ff 28.6%,#9aedff 28.6%,#9aedff 42.9%,#76e0ff 42.9%,#76e0ff 57.2%,#9aedff 57.2%,#9aedff 71.5%,#cdf5ff 71.5%,#cdf5ff 85.8%,#ff8bbf 85.8%);line-height:20px;width:26px;"></div> <div class="rounded d-inline-block" style="background-image:linear-gradient(#000,#000 14.3%,#bcc5c6 14.3%,#bcc5c6 28.6%,#fff 28.6%,#fff 42.9%,#b5f582 42.9%,#b5f582 57.2%,#fff 57.2%,#fff 71.5%,#bcc5c6 71.5%,#bcc5c6 85.8%,#000 85.8%);line-height:20px;width:26px;"></div> </a></div>
Help is greatly appreciated :'0
hi! you've got a couple problems here:
- your
<div>s should be<span>s, this is causing the links to not function properly - you've deleted the
s, this is causing the flags to have a height of 0 (making them disappear). you can type them in just like that, but they might show up as a bullet point highlighted in red instead once you save the code (toyhou.se's text parser likes to get silly sometimes)
i don't know what could be causing them to overlap each other. you don't happen to have WYSIWYG on, do you?
(i'm glad you like the code btw! 
)
This user is not visible to guests.
hi, yes! you can change the icons to anything from fontawesome's library, and add or remove as many as you need
I really love this code but is there a way to make the containers/boxes sharper?
umm are you okay with tweaks to this code to be used for a character profile? i completely understand if not! i really like the layout
I have a question about the grumpy bumpers site! are you required to fill all the boxes with links for it to work? Also, do you copy the link at the top of the page
(https://sig.grumpybumpers.com/host/Teamchara.gif)
and paste it in music box area? I tried doing that but it didn't work. You don't have to answer ofc! I don't wanna bother you or anything!
hi! you do not need to fill all the boxes and you've copied the right link, but the audio links you've used for this are youtube links, which do not work in audio elements. you need a link to an actual file (like this—if you click on it it will just download the file, but you can right click → copy link and paste it into the spot for the audio link to see what i mean). the tutorial i linked in the code comments goes over how to get links like this, but do note that discord will soon no longer be viable for file hosting, so i would recommend using one of these alternatives instead!
How do you change the color of the main colors I want to change the background color to another and change the blue but I can’t find where the background color it
hi! you can change the text/icon color with color: #000000; and the background color with background: #000000;, just replace #000000 with the color you want. both of these go in the style="" attribute.
for example, like this: <div class="col-12 card bg-faded mt-2 p-3" style="background: #000000;">...</div>
or this: <i class="fa-duotone fa-cloud-bolt" style="color: #000000;"></i>
hiiii i used ur code and i was just wondering if there's any way to add stamps without breaking the code? i'm not very fluent in coding but i wanted to add some misc. decoration to my profile but the last time i tried it broke the code and i had to redo it hahaha
I was trying to change the pride flags but I can’t seem to find the right code and I keep messing it up
hi i was wondering where within the code you can change the font? i was planning to change it to short stack!
Hiya I didn't realize I had broken the code and need some help! Adding the decorations under the bullet points made the featured section combine in the main box. I tried playing around with it for a while and couldn't figure it out. On the Toyhouse code testing site it looked normal, but still broken on the real site. Would appreciate any help! :,)
hi! you've accidentally deleted/left out a closing </div> somewhere, probably near the end of the main box. i'm too tired to type up the full explanation again right now but try following this advice i gave someone else, and if you can't find it feel free to send a copy of the code to me and i can fix it for you tomorrow morning!
This user is not visible to guests.
Hi! I'm having troubles putting on my Artfight on my profile! I put down the link and the name of it but the artfight icon doesn't show up. Do you maybe know why? :0
hi! :D fa-brands fa-artfight is not a fontawesome icon that exists, the one i'm personally using on my profile is fa-duotone fa-pen-paintbrush (but you could use fa-solid fa-pen-paintbrush instead if you want it to fit in a little better with the others). you can browse the full list of icons here!
hi! that one seems the same size as this preview to me, but it probably has to do with their CSS. the layout already takes up the full width of the screen, but you could try altering the font size and column widths to see if that gives you the effect you want. on the line below the "thin left column" comment, change the number in col-lg-5 to change the column widths. and for the font size, find the element that contains the text you want to change and add style="font-size: 0px;" (but change the 0 to whatever size you want).
Not sure if you're still actively checking toyhouse/offering code help, but is there anyway to change the text color of the pronouns? I've tried several different codes and it always makes them shrink a ton/ruin spacing D:
(And is there a way to change the color of the text in the "art status" tab on my profile? I wanted everything an orangeish-brown but can't figure out how to change it from blue..)
hi! you can change the text color of any element you want by adding style="color: #000000;" to it, with #000000 being replaced by the hex code for the color you want to use. i'm not sure why the spacing/size would be changing—are you saving the code with WYSIWYG enabled?
Nope, the WYSIWYG is disabled! I think I might've messed with the text size *somehow* I'm just not entirely sure how
Can't seem to get the color to work either for some reason
can you share a screenshot of the part of the code you're working on so i can see what you're doing? :o
Right here!
I tried doing the color with the hexcode right after the text-muted thing, and it just.. won't show up
ah okay, i see!! you did everything correctly the way i suggested, but i forgot the bootstrap color classes are !important lol 
that's my bad, sorry. removing the class="text-muted" should fix the issue!
Hi !!!! I love your coding and I'm actively working on the code to put it onto my own profile, but as I'm working on adding my site links with the little icons under the little bullet points in the first box, I'm not sure how to add other little icons for websites like ArtFight. I've seen it working on a few other peoples' profiles but I'm still unsure how I can get it onto my own profile, if you could give any pointers that would be very much appreciated!! :-)
hi, thank you!! to add more social icon links just copy any one of the lines and replace the <i></i> element with any icon from fontawesome (if you click on one it will give you a code snippet to copy. all pro icons are available to use on toyhouse except for the sharp ones). there isn't actually an icon for art fight, but the one i used on my profile personally (which is vaguely similar) is pen-paintbrush :]
Hello, I love this code! I'm having this weird thing happen with the flags though- I'm using my own world flags (and fan flag) in place of the pride flags and I'm trying to have the first three flags link back to my own flag codes link, but when I tried doing that the same way the original pride flags would be linked back (changing divs to spans), the code breaks and the images in the flags get really huge. Could the link not be working because the flags use images and clip-path polygons as well, instead of being just blocks of color? Right now if you hover the cursor just slightly off the flags, the link works, but I can't get the actual flags to have the link. If you need more info I can PM you, that is if this is something you think you can help with! TIA!
hi, i'm glad you like it! :D due to the way the DOM interprets <div> tags wrapped in <a> tags, this is hard for me to test on my end with just inspect element—if you could send me a copy of your code (link a text file, put it in pastebin, or put it through this and wrap it in <code> and <pre> in a dm) i would be happy to look further into it!! just the flags section would do, i don't necessarily need the whole thing ^^
This is such an excellent code!!! I love it so much!!! Tysm for creating this and letting everyone use it! :D I'm still not completely done with it but I'm mostly done! It's easy to decorate and change too!!! gah it is perfect!
I'm also super picky about what codes I like and this one just has everything!!!!
hi ! thank you for putting out this wonderful code ! I just have one question :0
if you take a look at my profile, there aren't any of the social links and shapes you had added ( or at least, i cant see them on my end :c ), is there any way to fix that? mainly just for the socials section as that's where your credit note is D: thank you!
hi, i'm glad you like it! :D this happened because you edited/saved it with WYSIWYG on—this code and almost all others on toyhouse are not WYSIWYG compatible, so you will have to turn it off while you edit.
OHHH I see !! I usually only copy and paste it into WYSIWYG and then edit with the code editor, I didn't realize I was not supposed to do that ’:0
do I have to redo the entire thing then for the socials section to appear properly or is there another way to fix that ?
unfortunately you'll have to redo it yeah !! :( if you open it with WYSIWYG at any point while editing, even if you only actually edit it with the code editor, and then save it, it'll mess it up. there isn't a way to fix it after saving besides manually fixing all the issues yourself or starting over.
This user is not visible to guests.
hi! for some reason the music box isnt working, ive put in a discord link to the music file but it doesnt appear to recognise the song, im not sure why :(
hi! the link you're currently using is a link to a discord message, you want to use the link to the file in the message instead.
this is what you have right now: https://discord.com/channels/396764029823090698/396764029823090701/1128679573534556167
the link you want should look more like this: https://cdn.discordapp.com/attachments/826304143584133141/1125646872158150706/09_-_Waltzing_in_the_Rain.mp3
you have to right click on the title of the audio, then it will give you the option to "copy link" (rather than just "copy message link") which is what you need :]
This user's account has been closed.
hi im having a small issue with the flags, i dont know why theyre stacking instead of being side by side ! im very new to coding, im pretty sure i messed something up
hi, i hope this is ok to ask- i was wondering if it'd be possible for me to remove the socials section without breaking anything? thank you in advance ;0;
hi, absolutely! just remove this whole section of code:
i thiiiink you might also want to change the "mb-0" to "mb-2" in the line directly below the "BULLETS" comment above the socials section to fix the spacing too, and i would appreciate if you found another spot to put the credit (anywhere anyhow is fine) :]
This user is not visible to guests.
hi! :D the library is fontawesome, and they unfortunately do not have a pronouns.page icon, but link-simple or link-horizontal might work well enough to get the point across.
i've thought about trying to use carrd's SVGs in lieu of fontawesome icons for brands they don't have, but i have admittedly no clue how to work with SVGs in HTML and have had no luck with it so far LOL. you can inspect element any carrd site that has them to get the SVGs if you wanna take a crack at it yourself, otherwise, if i ever do figure it out (and i remember), i'll let you know :]
Hiya! Sorry to bother you but I’m completely new to coding 😳 I have no idea how to insert images or where to get/ put the links 😭 I’d really appreciate if you could tell me!
hi, no worries! to use an image in html it needs to already exist somewhere on the web, so that you can copy and paste a link to it. anything already uploaded to toyhouse (like a character avatar or anything in their gallery) will work, but if you want to use something else you will need to upload it somewhere (imgur works, as does sending an image through discord). if you're using any desktop web browser, you can right click on the image you want and choose "copy image link" or "copy image address". if you're on mobile, tap and hold (there might only be a "copy" option, but i believe this will still work in most cases. also, i don't recommend coding on mobile lol). in the template, i've marked every place an image link should go with "IMAGELINK", so just replace that text with your image link and you'll be good to go. :)
Just wanted to show off my new profile :)
Actually, if you could make a more polished version of the "favorite things" box I've made, I'd appreciate it. People manage to make really pretty looking side-lists like that but I just don't know how XP. I think it makes a nice module too.
ayyyyy looks great!! :D and i can totally make a similar favorite things box! tbh i think yours looks pretty good already, i think i'll just mess with the spacing and some minor text styling unless you want me to change anything else in particular :]
Tyvm! And yeah it probably doesn't need too much, but some minor adjustments would likely make it look a lot better :)
This is actually a mess behind the hood because of how much I moved stuff around, but you did a great job making it simple to understand and keep track of where you are in the code. It was such a smooth process!
amazing code!! :] I keep having an issue with the flags tho, since it seems like I can’t add more than 3 before the spacing gets weird (on my profile the queer flag won’t stay next to the others and I can’t find any issues😭) do you know any way that I could fix this? not a huge issue but wanted to ask anyway :0
This user is not visible to guests.
This user is not visible to guests.
hi! :D you can choose any of the symbols from this site, just replace where it says cloud-bolt with the name of the icon you want.
This user is not visible to guests.
i took a look at your profile and it looks like they ended up inside your music player box, which is causing them not to show up. you probably accidentally deleted the closing </audio> tag or a closing </div> tag somewhere, so i'd just go through your code and make sure everything in that area is closed properly. :] if you have the code editor enabled and you put your cursor in an opening tag, it will put a little border around its corresponding closing tag. all opening and closing tags should be aligned, with the same spacing. if you have trouble finding the one that's causing this, send me a screenshot of the music player box code and i'll try to find it myself!
Waa this is amazing, ty for sharing this aa! I was wondering, how do you change the colour of the top info bar with css or smth?
AAAAA thank you, and no problem!! :D where it says alert-info, you can change it to alert-warning, alert-danger, or alert-success for other bootstrap colors, or you can add style="background-color: #000; border-color: #555; color: #FFF;" (replace with whatever hex codes you want) for custom colors! (should look like this: <div class="..." style="...">)
the second method i mentioned is using inline css (in the html section), btw—if you want to write global css for your userpage, select it using .alert-info (also .alert-warning, .alert-danger, and .alert-success) and style it the same way. e.g:
.alert-info {
background-color: #000;
border-color: #555;
color: #FFF;
}
Just edited my user with this!! I adore the layout so much! Though I have a question, for the featured section that has 6 slots, I wanted to remove 2 so that it only had four listed, but then they no longer center and there's an empty gap. Is there a way to remove the gap with only four slots there? (Apologies if this isn't the place for questions /gen)
hihi, this is exactly the place for questions, dw! :D i'm glad you like it first of all!! <3 where it says col-6 col-sm-4 col-xl-2 p-1 for each item in that section, try replacing it with col-6 col-sm-3 p-1. this will make them much bigger, btw, which i think is what you want, but if you would prefer they were just moved to the center or spaced evenly instead, you could add justify-content-center or justify-content-between to the line right above the first one, where it says row no-gutters mx-n1 mb-n1. i should've added one of these to begin with, so thanks for the reminder lol, i'll put it in the template now! lmk if you need a more in-depth explanation!
(edited because i made a bad assumption about how i structured my own code lmao. should be accurate now!)
This user is not visible to guests.
LMAOOO GET DOWNPOUR'D!!!!!! i have to shill rain world wherever i can it's in my blood :3
thank you though!! :D also i love your username, reading it just sent me half a decade back into the past holy shit /pos
This user is not visible to guests.
[F2U HTML] Modular User's Comments