[ F2U ] Telling's Comments


L30
This user is not visible to guests.

i would also like to know, if anyone has the answer!

ah, nevermind! Sinderella if you still need the answer it says in the code, just search for 'flex' and it should be the first result! 

This user is not visible to guests.

I'm using this code on this fellow and for my other characters! Sweet code btw! :3

This user is not visible to guests.

hello! hope things are going well for you
I ran into a problem I've never really seen with this code before, and was wondering if you might know what could've caused it.

so i've tried setting up the music player like i usually would when working with the code and giving a theme to an OC, but for some reason it's being weird and isn't working properly this time??? it's worked on a few of the past OCs i've coded

this is the character who it happened to, and the embed shows up on the left but sends you straight to the music video. also have a screenshot of the code part so you can see if i've somehow overlooked a part of the code and accidentally changed it
Screenshot_1735.png?ex=65afd4ba&is=659d5

Currently using this code to help me organize character stuff for a story and it works so well! Its very versatile and easy to add on to so thank you for making it! And also thank you for making it free to use!!

haii!! I’m using this code on a few of my OCs and it works so well! I love it :3

I read the rules and used the code on this goober's profile! ^w^

i'm very late but!! used this on one of my ocs page :]

Hi! first off, I love this code and think that it's really handy so tysm <3

but idk if you can help w/ this but the whenever I tested the music box it sends me to the YT help center, I've tried with multiple videos by multiple channels and I don't know what's going on...

(code screenshot)

73639932_RmBrd5WRK6iWfOJ.png

could you send me the link to the character with this code? <3 it might be something else outside from the screenshot!

Ofc! It's this guy

it's because the song title is too long, causing the play button icon and the music embed to be seperated (if you click at the Panic! At The Disco text, it will start playing, you can see this if you change the opacity to 0.5)

so you can either abbreviate the song title to something much more shorter, or in the embed coding, change height:100px; to height:150px; instead !!

ah, yeah, well I have since fixed it lol... I just copy pasted from one that did work and re-added the video id...

Read the rules and using on this baby! https://toyhou.se/19485946.abilene

read the rules, using on https://toyhou.se/22766349.kitty

Read the rules & using :D !!

read the rules and using!

congrats on the most favorited code of all time on this website

hi! i got a question about the music part of the code

is it possible to add more than 1 song into that part and switch between each one using the buttons? 

hello and you certainly can!!  it's just a lil tricky if you are very new to HTML...  to start off, you can do this by using some sort of data-toggle (tabs would be the easiest option) and then ideally, you can copy and paste the music player for each tab-pane ovo)b

have a try on a blank version of the code (or maybe practice making the tabs first) and head over to the Help Forum whenever you get stuck!  hope this works! <3

oo alrighty. thank you!!

This user is not visible to guests.

it's because of the added lyrics (the link for the youtube works fine btw)!  this is relatively old so i didn't have precautions but i positioned the iframe in a very specific area; if i adjusted the opacity, this is where the video actually is

Screen_Shot_2023-07-24_at_1.17.49_pm.png

if you want to keep the lyrics in that specific spot, i recommend moving the lyrics just above the MUSIC header, like so:

Screen_Shot_2023-07-24_at_1.25.03_pm.png

hope that helps!

This user is not visible to guests.
This user is not visible to guests.

sorry for the question, but is there a way to edit this code to not have the multiple tabs? I want to code more of my characters but I don’t always have that much info to put in T-T

This user is not visible to guests.
This user is not visible to guests.

hmm it's appearing okay from my end, can you send a link of this?  you might be missing a </div>

This user is not visible to guests.
This user is not visible to guests.
This user is not visible to guests.

hi!  ensure you are editing with the code editor (and not WYSIWYG) and use this tutorial for changing colours!

This user is not visible to guests.

Using for my sona! 

This code is great!! Using for my character Milo :)

Wait how do you change the colors on this code? (ya know the red to something else??) i completely forgot how to do that-

hello! i want to know if it's possible to fix the way the tabs look when there are 6?
i tried reducing the font size of the icons, but it didn't quite remove the empty blue block thingy underneath the icons...

i don't really know what's wrong with the code, i tested this on both circlejourney and TH but it just won't go away...
thank you for your help in advance, this code is really pretty !!
mnbRnE0.png

oop that's from faulty code from my end!

around the tabs buttons, change col-lg-8 to col-lg-9 and it should be better!

<div class="mx-auto text-center py-1 col-lg-9">

thank you for the help again !

hello!! mine gliched, and... idk what happen im vary scare about it becouse, all ocs of mine that have your perfile code get like this, and the music dont show up :,( im so sad, can you try help me and tell what i did rong?

stay like this--- in all ocs :/ idk what do... and i dont want do it all again61563650_KglnH3d0LB71nRT.png

looks like WYSIWYG is at play, which will break coding layouts just like that

i usually recommend restarting the entire code with code editor ON/circlejourney; you can try putting the broken code in a HTML beautifier to try and regain some form of layout but it won't be the same!

Tysm!!!! I don't know how but I managed to fix the music! it was just getting half the code from another already whole code! ^^ if it happens again I'll write down what to do! thank you very much:3

no worries!!  glad you figured it out! :Dc

Im having a little trouble for trying to add the music. When I add it, I cant press play and it wont play

Im still new to coding so if will be nice if I could get some help

This is the song I want to add -> https://www.youtube.com/watch?v=2Q8LLHQvm30

hi!  have a read of this comment i left and see if it applies to you!  if it is because of WYSIWYG, you’d need to delete the <span> tags that is surrounding the <iframe>!

other than that, the song works fine on my end :]c  (though if you're on mobile, you may need to wait a bit for the video to actually load)

Screen_Shot_2023-02-22_at_12.38.17_pm.pn

8,000 FAVES?! GOODNESS

it is my baby !! 🤲💖💖

This user is not visible to guests.

if i'm understanding this right, you'd actually want to change background-size:cover to background-size:contain instead!

let me know if that's not what you're after!

This user is not visible to guests.

Is there a way to have two separate coded profiles but have them side by side, sitting next to each other, rather than one on top of the other? 👀

you probably could but because of the already wide-ish width of the whole code, it may end up squishy if that's a bother 👀

what you'd want to do is be familiar with rows/bootstrap grids (if you're not already)and smack the code in two columns!  here's a quick example:

<div class="row no-gutters">
    <div class="col-lg-6 p-1">
        LEFT CODE
    </div>
    <div class="col-lg-6 p-1">
        RIGHT CODE
    </div>
</div>

edit: col-xl-6 might be better if your screen can be extremely wide

Golly! Thank you so much for the help. Apologies to ask for more but is there a way to move the music player to the left side of the box? :0

That should be it hopefully! Haha. I seriously appreciate it, I got a real smooth brain when it comes to coding.

three ways:

  • the columns are coded with order, so switch order-lg-2 with order-lg-1 and vice versa!
  • delete the orders ^
  • add flex-row-reverse to the row no-gutters

i have the last option inside the code as a comment guide, so try that!

used for https://toyhou.se/19228449.james-craton and this looks so cute aaaa!!! im so in love with this code

omg I love the inclusion of a music player!!

gonna use this for my character profiles   

ty for making such a neat code

This user is not visible to guests.

using, ty! ur codes are so pretty jsfjsj

used! thank you, it's fun and easy to customize and also very simple yet stylish, I just can't /pos <3

This user is not visible to guests.
This user is not visible to guests.

how the embed video plays.pauses pretty much relies on its dimensions/placement of the youtube play button itself; so if it's redirecting you to YouTube, it is most likely because the iframe 'box' is too small and you are clicking the uploader's link rather than the play button

i would actually suggest increasing the height/width and then placing the iframe into another div with the overflow:hidden element and dimensions; that way, you can cut off the excess links and just keep the play button!

this is a very brief example but you can adjust anything needed!

<div style="position: absolute; left: 270px; top: 45px; height:100px; overflow:hidden">
    <iframe src="https://www.youtube.com/embed/vOXZkm9p_zY?controls=0" style="position:relative; top:-70px; height:250px; width: 200px; z-index: 5; opacity: 0.5;"></iframe>
</div>

(and also, when you are finished, set the iframe opacity to 0.0001 instead of opacity:0 as that may make the video unclickable by default)


This user is not visible to guests.

Is there anyway to change the BG color of the cards? Like not the tabs/bars, the background beneath the text and profile section

add a background-color:#HEXCODE; to the style of the div and delete the bg-faded in the class (when applicable)!

you may also need to add color:#HEXCODE; as well for the general text colour

Ty!

im struggling to get the music box to work T0T https://toyhou.se/17667623.karma i cant click on the play button

I think you messed up by having WYSIWYG enabled originally (which is why the layout is messy).  If you don’t want to restart (i.e copying and pasting a new fresh set of the code, you’d need to delete the <span> tags that is surrounding the <iframe>! 

I GOT IT TO WORK!!! TYSM

Hello. I know I DM’ed you but i found out some new information while playing around with the code. So the new question is why is the information for the sixth tab is showing up on the bottom of the fifth tab? Also i couldn’t figure out how to put photos of the code in the comments or DMs. So i added the code to my character for you to look at that way.

Hey!  I opened your DM but didn't really have time to respond until now so no worries about that!  Yeah, the photo wasn't working so for next time, just link me to the character with the faulty code haha

You inserted the new tab too early!  If you have a look from my end, you can see how the coding for the sixth tab is inside the fifth tab, just like you said.  To fix it, you'll have to either: try and move the sixth tab further down or adjust the closing end tags of the div's </div>; from the looks of things, at least after two </div>'s down

Screen_Shot_2022-09-07_at_6.41.26_pm.png

Here's a tip if you're unaware: from the code editor (either circlejourney or toyhouse's), you will see numbers on the left side for each row and on some of them, arrows.  Click the arrows to find out where to copy/paste things; they're a really handy tidbit that many people don't ultilise as much!

Thank You for your help!!! Okay that problem is fixed now. But now there is a new problem the code credit is messing up the position of the music box. You can see in it with the same character above.

I think you shifted down by one too much because the code credits is now inside the row, which is causing it to be misplaced.

An easy fix is to insert a col-12 order-lg-3 to the code credits ^^

<div class="col-12 order-lg-3 p-1 small text-right faded" style="letter-spacing:1px;">

Thank You! Thank You! Thank You! For all your help and building the code to begin with. Everything is perfect now.

thank you so much for this code! was wondering if it was possible to get help with the music box?

how so?  (never be afraid of saying the problem upfront btw!)

thank u!!

i tried referring to the comments but i couldnt get the music box to work at all

have a read of this comment i left and see if it applies to you!

if it is because of WYSIWYG, you’d need to delete the <span> tags that is surrounding the <iframe>!

other than that, if you can give me a link to the character with the code, i can have a look at it later tonight if nothing is working ^^

Hi! Just wondering if different music links would work, like ones from soundcloud ^^
Your codes are so awesome, btw. I've never touched any sort of code in my life until the past week when I started getting into Toyhouse, and codes like yours opened up a whole new world for me

through [iframe], i believe toyhouse only allows YouTube embed links!!  this does includes youtube playlists!

through normal anchor links [a], you can  link it to anything else like soundcloud and spotify! but it will only link to the video, not play it ^^

welcome to the world of coding, hope you enjoy decorating your profiles with them! 


Ahhh, interesting! Thank you!

hii ! whats the color used in the example and how do i change it to that color ??

the hexcode is #b2494a and you'd have to use the custom coloured (CC) version of the code!

there's instructions there on how to change the colours ^^

This user is not visible to guests.

hihi and thank youu!!

for removing the tabs themselves, you can actually just delete the tab icons.  no need to worry about the content, as deleting the tabs removes access overall, like this:

<li class="nav-item col">
<a class="card-block p-2 text-white btn-block active" href="#one"
data-toggle="tab">
<i class="fas fa-user"></i>
</a>
</li>

<li class="nav-item col">
<a class="card-block p-2 text-white btn-block" style="color:#000" href="#two"
data-toggle="tab">
<i class="fas fa-heart"></i>
</a>
</li>

<li class="nav-item col">
<a class="card-block p-2 text-white btn-block" href="#three"
data-toggle="tab">
<i class="fas fa-book-open"></i>
</a>
</li>

<li class="nav-item col">
<a class="card-block p-2 text-white btn-block" href="#four"
data-toggle="tab">
<i class="fas fa-star"></i>
</a>
</li>

<li class="nav-item col">
<a class="card-block p-2 text-white btn-block" href="#five"
data-toggle="tab">
<i class="fas fa-link"></i>
</a>
</li>

if deleting the content itself makes the code more clean/less busy for you, delete the sections until you get to the </div></div></div> like this (this is an old image, just delete what you don't need).  in case you weren't aware, you can group codes by pressing the arrows next to the line numbers!

hope this helps! <3


This user is not visible to guests.

read the rules and using!! ty for the code <3

could it be possible to remove the music player as a whole? I don’t think I’d like to have music,,, thank you!

yes it is (you can delete the whole MUSIC BOX section)!

this will leave a space under the image though; if you want the FOCAL IMAGE to fill that space, delete the class="mb-2" and change the min-height to 470px or something in that range ^-^)b
<div class="mb-2" style="min-height:450px; ...

the rounded border will be missing as well because of this, so you'd need to add overflow:hidden at the main card
<div class="card-block bg-faded p-0" style="overflow:hidden; border-bottom-left-radius:15px; border-top-left-radius:15px;">

hope this helps!

Awesome! Your help and codes are greatly appreciated =)

This user is not visible to guests.


Is there a way to change the color of the background in the little relationship boxes? 

IMG_5078.png


with a custom colour?

you should be able to add background-color:#HEXCODE; into the card’s style element :]

It worked, thanks!  

Hi, I'm looking to use this code and was wondering if there was a way to make all of the colours customizable ? such as the titles on the profile (Name, nickname, all that text) and the background ? I've tried it myself but I can't seem to figure it out :(

for text, you can start by adding color:#HEXCODE; in the style attribute!  sometimes style="color:#HEXCODE;" if the original coding doesn't have it

for the background, you'd need to delete bg-faded first and then add background-color:#HEXCODE; maybe style="background-color:#HEXCODE;

hope this helps!

thank you sm ! I'll try it out, thank you !

sorry again- the text isn't working with the codes, only portions of it, is there something that I could be missing ? Thank you again

you need to delete text-muted if you haven’t already!  every instance of bootstrap colours needs to be deleted for custom colours to appear 👍 

omg thank you,,,,, you would think I would remember that lmao, i feel silly

nah no worries about that, we're all learning here!

2 Replies

read the rules and i'm using! tysm for making this code!

This user is not visible to guests.

Using Thank you ^^

Thank you for the code! 💓💓 

i missed out on screenshotting the 6699 favs sobs orz

This user's account has been closed.
This user is not visible to guests.

i just wanted to say, thanks for making this code! 



also, this is top of favourites all time right now. although you probably already know :)

ey no worries!! <3

AA i still cant believe it tbh!!  the community spoils this code and i appreciate everyone sm for the support \(//∇//)\

:)

:)

im having a lot of trouble with trying to get the music to play? 

have a read of this comment i left and see if it applies to you!

if it is because of WYSIWYG, you’d need to delete the <span> tags that is surrounding the <iframe>

other than that, i can have a look at your code later tonight if nothing is working ^^

thank you so much!! 

Is there anyway to remove the design notes part without ruining the coding?

you can actually delete the entire design notes part (starting at <div class="col-lg-6 p-2" style="max-height:370px; overflow:auto">)! After that, change the content column to <div class="col-lg-12 p-2"> instead of col-lg-6 (to make it fill the entire space!)

so it should leave you with this (DON'T DELETE ANYTHING INSIDE THE CONTENT section, IT'S JUST HIDDEN FOR SPACING SAKE LOL)

Screen_Shot_2022-04-27_at_10.37.14_pm.pn

Thank you so much! I got it   I really love this profile code so I'm glad I asked for your assistance!

no worries! <3

okay but i need to know which cover for egoist you used i'm in love with it jfdbgdkfddsss

cover is by muto (むト) !! <3
https://www.youtube.com/watch?v=1IKsmR9yyYs


aa thank you so much!!

This user's account has been closed.
This user's account has been closed.

I have read everything. Tysm

this is probably a super super silly question please forgive me, but how would i make the audio player play the youtube video starting at a specific time? i've tried adding ?start=87&end=268 to the end of the youtube links in the code, which works when i press the play button and plays it starting at the desired time, but it doesnt pause, and instead opens the video in a new tab. i've tried &t=87s at the end of the link as an alternate but then it just doesnt play at all. normal links without the time specifications at the end work perfectly fine!!

hey!!  embeded videos with a specific time does work, though i admit that i haven't seen end= so i wouldn't know how to end the video at a specific time stamp (?) :O

it should be just ?control=0&start= !!!  like so:

https:/ /www.youtube.com/embed/6gpcPYDkPdg?controls=0&start=38

if that doesn't work, there may be some broken coding with the iframe and you're welcome to link me the live view of the character profile for me to see? <3

It works now, thank you so much!

This user's account has been closed.

hello! sorry to bother just wanted to ask how do i change the colors of the music bar and the top part where the name/title is placed qwq"' ( I'm on mobile so I'm very dumb using codes on mobile--(• ▽ •;). ) 

ohh it would be very difficult to edit codes on mobile ^^;

regardless, you would need to use the Custom Coloured version and find these lines of code:

<div class="card border-0 rounded-0 p-2 text-center"style="border-top-left-radius:15px; background-color:#b2494a">

<div class="progress-bar"
style="
width:50%;
background-color:#ae3336;">
</div>

<div class="card border-0 rounded-0 p-2 w-100" style="border-top-right-radius:15px; background-color:#b2494a;">

(plus other but minor things)

and then change the hexcode of the highlighted ext; good luck!

This user is not visible to guests.

do you have the legacy version of this code available? i would like to use the version without the rounded edges, love this code tho

unless of course i'm tripping lol

i don't know what you mean by 'legacy version' as i havne't used that term? :O though, if you're just looking to get rid of the rounded edges, you can delete the border-radius in the style tag!

legacy generally means older version but thank you!

oohh okay thank you! i'll keep in mind of that >wo)9

and no worries!

Uhm hi!! I need a lil help with the music, you see I wanna link a song from a playlist, how do I alter the code so it can work?

copied this from my inbox but it should work!

  1. Go to your playlist on YouTube and copy the Playlist ID (don't use the Liked videos playlist)
    1. It is this highlighted bit from this: https://www.youtube.com/playlist?list=PLbIz82r1FMqas6MM5wVyPOpuukN73tPqi
    2. I don't know if the playlist can be Private so it's best set to Unlisted/Public instead!
  2. Paste the Playlist ID after the https://www.youtube.com/embed/
    1. you should be getting something like this!
    2. https://www.youtube.com/embed/playlist?list=PLbIz82r1FMqas6MM5wVyPOpuukN73tPqi

and it should work now!  you may need to write a disclaimer that users can use the following (as it is a playlist):

  • SHIFT + N: Next Song
  • SHIFT + P: Previous Song
  • SPACE or K: Pause the Song

hope that helps!

Oh my gosh!!! thank you so much this helps a lot!!!

Hello!! I absolutely adore this code and I've used it for IC!! Just wanted to know, if the music doesn't work, what should I do? (Also the code's re-do looks awesome!! May I ask what character you used for it before??)

Thank you for being awesome <3

omg i'm so sorry for the late reply!!  if you still need help, please read this reply i left!  if it still doesn't work, i'd love to get a live view of the code too :]

and thank you!  if you're talking about the blue-themed code, then Chrome! <3 otherwise, it might've been this one too ??

I’ll let you know if it works <3

No problem! Yup, it’s Chrome! <3

Again, I‘ll let you know if the reply doesnt help <3

This user is not visible to guests.

you might have deleting more than necessary!  a live view of the code would be appreciated for me to help you better :]

This user is not visible to guests.

you need to delete a bit more than that (as in the WHOLE background section)!  you missed out on three </div> (marked in orange/warning text) which is way the code is breaking (scroll down to see, don't delete the green text/trivia if you need it!)

<!-- BACKGROUND
--------------------------------------------->
<div class="tab-pane fade" id="tellingthree">
<div class="bg-faded p-3">


<blockquote class="text-uppercase font-weight-bold" style="font-size:12px; letter-spacing:4px; border-width:3px">


03 — Background


</blockquote><hr>
<div class="text-muted p-1">


<div class="card text-uppercase border-0 rounded-0 px-3 py-2 text-body mt-1 mb-2" style="letter-spacing:3px;">
<p><i class="far fa-bookmark fa-fw mr-2"></i >Subheading</p>
</div>

<p>In cursus nisi ac eros convallis, at fringilla purus laoreet. Morbi pretium gravida lacus, vel tempor libero interdum et. Integer pellentesque pretium dolor vel eleifend. Vestibulum ornare id eros id rutrum. Vivamus sagittis, tellus at dignissim congue, ipsum dui dignissim tortor, ac eleifend arcu lacus lacinia massa. Mauris eget venenatis sapien.</p>

<p>Nullam non laoreet erat, at rhoncus tellus. Aenean sodales, ipsum nec tincidunt rhoncus, tellus nibh dignissim ante, at facilisis nisl nibh bibendum massa. Donec placerat arcu a turpis commodo eleifend. Aenean at odio velit. Morbi accumsan condimentum nunc, vitae semper justo luctus vitae. Ut ac lobortis nunc. Vivamus eget turpis massa. In hac habitasse platea dictumst. Aliquam convallis eros non cursus hendrerit.</p>


<div class="card text-uppercase border-0 rounded-0 px-3 py-2 text-body mt-1 mb-2" style="letter-spacing:3px">
<p><i class="far fa-bookmark fa-fw mr-2"></i >Subheading</p>
</div>

<p>Maecenas ac pretium quam. Mauris ullamcorper, sapien ac pellentesque egestas, sem urna blandit felis, et scelerisque metus lacus ac diam. Phasellus tincidunt neque elit, quis facilisis odio molestie in. Nulla neque lectus, malesuada vel congue sit amet, tempor quis est. Quisque sit amet nisi nisi.</p>


<div class="card text-uppercase border-0 rounded-0 px-3 py-2 text-body mt-1 mb-2" style="letter-spacing:3px">
<p><i class="far fa-bookmark fa-fw mr-2"></i >Subheading</p>
</div>

<p>Maecenas at felis non justo egestas convallis. Fusce ornare lacus convallis ex laoreet, nec varius libero laoreet. Donec eget mauris ac justo accumsan fermentum. Vestibulum fermentum interdum libero id tempus. Donec auctor ipsum sed lacus blandit ornare.</p>

<p>Nulla non lorem eget massa suscipit consequat. In aliquet augue fermentum facilisis convallis.</p>


<!-- add / delete above THIS line! -->
</div>
</div>
</div>

<!-- TRIVIA
--------------------------------------------->
<div class="tab-pane fade" id="tellingfour">
<div class="bg-faded p-3">
. . .


This user is not visible to guests.

Using this lovely code, thank you for your work on it!

i can't figure out how to use music, i saw other people asking this too but i still couldn't figure it out. Can someone help me?

if the music isn't working, it's usually one of these:

  • you edited with WYSIWYG on instead of the Code Editor
  • invalid YouTube embed link (i.e you copied/pasted it wrong)
  • video is private (it must be unlisted/public) OR doesn't allow embeds (try using a different video with the same song)

other than the instructions written inside the code, i'm not sure how else to explain further so a live view of the code would be appreciated for me to help further :)
This user is not visible to guests.

I can't seem to find out where to change the colour accents- could anyone help me figure this out? (nevermind i think i figured it out)

this is my favourite code ever omg

This user is not visible to guests.

lisa.jpg

I'M SHAKEN TO THE CORE????

This user is not visible to guests.

well!! frankly i’m just honoured <333 never thought i’d see the day!

This user is not visible to guests.
This user is not visible to guests.

yes, it is hexcode!  you would need to change the #b2494a and #ae3336 to another one :]  you should be able to use ctrl/cmmd+f in the code editor to change all the accents!

the bootstrap version is only for your site theme so if you want to add in your own colours, it is the custom coloured code you would use for that!!

I have read the rules

YOO the new version looks so cool!! :D

This is really good! if i want to increase the size of the code, how in can do that ? :o

thank you kindly!!  to do that, you would need to change the max-width:800px !

Ohh ! Thank you!

This user's account has been closed.

WHATTT it looks so??? good??/pos
i love the little boxes and stuff in this so much wow!!!

This user is not visible to guests.

WE STAN <3333

i read the rules! thank you so much!

i've seen other people having the same problem recently, but i can't get the audio working 

https://toyhou.se/12920721.solar-meadow

i've tried the other solutions given in the comments, but they're not working.

sorry for the late reply!  one thing here: you've edited with WYSIWYG on which messed up the code layout but more importantly, deleted the music coding as well (probably, at least from my view because i can't find it?) <:C

i just updated this code so if you are up for another redo, please go ahead!  otherwise, if you don't mind the mess, i fixed on your behalf:

<div class="mx-auto text-justify" style="font-size:80%;letter-spacing:.3px;max-width:800px;"><div class="row no-gutters" style="margin:-4px;"><div class="col-lg-4 p-2 order-lg-2 d-flex w-100"><div class="card-block bg-faded p-0" style="border-bottom-left-radius:15px;border-top-left-radius:15px;"><div class="card-block p-2 text-center" style="border-top-left-radius:15px;background-color:#ff735b;"><span class="text-uppercase text-white font-weight-bold" style="font-size:18px;letter-spacing:3.5px;text-shadow:3.5px 3.5px #c23d41;"> Solar meadow </span></div><div class="mb-2" style="min-height:280px;background-image:url("https://f2.toyhou.se/file/f2-toyhou-se/images/41909897_O4m6aNIz8nKpNKs.png");background-size:cover;background-repeat:no-repeat;background-position:center;"><br></div><div class="row no-gutters p-3 pt-4"><div class="col-12"><div class="text-center text-uppercase" style="letter-spacing:4px;">ultimately</div>
<div class="text-center text-muted pb-2">Khai Dreams </div><div class="progress my-2 mb-3" style="height:4px;"><div class="progress-bar bg-secondary" style="width:25%;"><br></div></div></div><div class="col"><p class="text-center" style="font-size:20px;"><i class="fas fa-backward"></i></p></div><div class="col"><p class="text-center" style="font-size:20px;"><i class="fas fa-play"></i></p></div><div class="col"><p class="text-center" style="font-size:20px;"><i class="fas fa-forward"></i></p></div> <iframe src="https://www.youtube.com/embed/15PA1cUB6g8?controls=0" class="w-100" frameborder="0"style="position:absolute; height:100px; margin-top:30px; left:-20px; opacity:0.0001"></iframe>
</div></div></div><div class="col-lg-8 p-2 order-lg-1 w-100"><div class="card-block p-2 w-100" style="border-top-right-radius:15px;background-color:#ff735b;"><div class="mx-auto mb-2 col-lg-8"><ul class="nav nav-tabs card-header-tabs row"><li class="nav-item col"><a class="card-block p-2 text-white btn-block show active" data-toggle="tab" href="#one"><i class="fas fa-user"></i></a></li><li class="nav-item col"><a class="card-block p-2 text-white btn-block show" data-toggle="tab" href="#two"><i class="fas fa-heart"></i></a></li>
<li class="nav-item col"><a class="card-block p-2 text-white btn-block show" data-toggle="tab" href="#three"><i class="fas fa-book-open"></i></a></li><li class="nav-item col"><a class="card-block p-2 text-white btn-block show" data-toggle="tab" href="#four"><i class="fas fa-star"></i></a></li><li class="nav-item col"><a class="card-block p-2 text-white btn-block show" data-toggle="tab" href="#five"><i class="fas fa-link"></i></a></li></ul></div></div><div class="table-responsive tab-content bg-faded" style="border-bottom-right-radius:15px;height:435px;"><div class="tab-pane fade active show" id="one"><div class="bg-faded p-3"><blockquote class="text-uppercase font-weight-bold" style="font-size:12px;letter-spacing:4px;border-width:3px;">01 — Profile</blockquote><hr><div class="row no-gutters"><div class="col-lg-6 p-2"><div class="p-1"><span class="text-uppercase text-muted" style="letter-spacing:1.5px;">Name</span> <span class="pull-right">Solar Meadow</span></div><div class="p-1"><span class="text-uppercase text-muted" style="letter-spacing:1.5px;">Nicknames</span> <span class="pull-right">Sol</span></div><div class="p-1"><span class="text-uppercase text-muted" style="letter-spacing:1.5px;">Age</span>
<span class="pull-right">young adult</span></div><div class="p-1"><span class="text-uppercase text-muted" style="letter-spacing:1.5px;">Gender</span> <span class="pull-right">demi boy</span></div>
<div class="p-1"><span class="text-uppercase text-muted" style="letter-spacing:1.5px;">pronouns</span><span class="pull-right">he/they/it</span></div><div class="p-1"><span class="text-uppercase text-muted" style="letter-spacing:1.5px;">SPECIES</span><span class="pull-right">unicorn</span></div><div class="p-1"><span class="text-uppercase text-muted" style="letter-spacing:1.5px;">sexuality</span><span class="pull-right">omni</span></div><div class="p-1"><span class="text-uppercase text-muted" style="letter-spacing:1.5px;">Occupation</span> <span class="pull-right">librarian</span></div><hr class="my-2"><div class="p-1"><span class="text-uppercase text-muted" style="letter-spacing:1.5px;">Status</span> <span class="pull-right">not for sale</span></div><div class="p-1"><span class="text-uppercase text-muted" style="letter-spacing:1.5px;">Designer</span> <span class="pull-right"> Kurosawakuro (da)</span></div><div class="p-1">
<span class="text-uppercase text-muted" style="letter-spacing:1.5px;">Worth</span> <span class="pull-right">800p</span></div>
<span class="hidden-md-up"></span></div><div class="col-lg-6 p-2" style="max-height:312px;overflow:auto;"><ul class="fa-ul mb-0 text-muted"><li class="my-2"><span class="fa-li"><i class="fas fa-angle-right" style="font-size:9px;color:#ff735b;"></i></span>His eyelashes are white</li><li class="my-2"><span class="fa-li"><i class="fas fa-angle-right" style="font-size:9px;color:#ff735b;"></i></span>His horns are actually part of his body, they can grow but he cuts them since he works with kids</li><li class="my-2"><span class="fa-li"><i class="fas fa-angle-right" style="font-size:9px;color:#ff735b;"></i></span>Right leg white, left leg brown (makes markings easier to remember)</li><li class="my-2"><span class="fa-li"><i class="fas fa-angle-right" style="font-size:9px;color:#ff735b;"></i></span>Small fangs, only the right one is visible when he closes his mouth</li><li class="my-2"><span class="fa-li"><i class="fas fa-angle-right" style="font-size:9px;color:#ff735b;"></i></span>Always looks tired</li></ul></div>
</div>
</div></div><div class="tab-pane fade" id="two"><div class="bg-faded p-3"><blockquote class="text-uppercase font-weight-bold" style="font-size:12px;letter-spacing:4px;border-width:3px;">02 — Personality</blockquote><hr><div class="text-muted p-1 mb-3" style="max-height:160px;overflow:auto;"><p>Sol is a soft spoken stallion and shy around most people, strangely enough he finds comfort in crouds, especially if the croud is composed by strangers. He's kind hearted but his social anxiety often stops him from doing the right thing.</p><p>He bends easy under pressure and is usually pushed around.</p><p>He grew up in a loud house, so he feels the safest when there's a lot of sound.</p></div><hr class="my-3"><div class="row no-gutters"><div class="col-6 pr-3"><div class="text-uppercase font-weight-bold" style="font-size:12px;letter-spacing:4px;">Likes</div><hr class="my-2 mb-3"><ul class="fa-ul text-muted"><li class="my-2"><span class="fa-li"><i class="fas fa-check" style="font-size:9px;color:#ff735b;"></i></span>warm baths</li><li class="my-2"><span class="fa-li"><i class="fas fa-check" style="font-size:9px;color:#ff735b;"></i></span>big animals</li><li class="my-2"><span class="fa-li"><i class="fas fa-check" style="font-size:9px;color:#ff735b;"></i></span>spicy food</li><li class="my-2"><span class="fa-li"><i class="fas fa-check" style="font-size:9px;color:#ff735b;"></i></span>reading</li></ul></div><div class="col-6 pl-3"><div class="text-uppercase font-weight-bold text-right" style="font-size:12px;letter-spacing:4px;">Dislikes</div><hr class="my-2 mb-3"><ul class="fa-ul text-muted"><li class="my-2"><span class="fa-li"><i class="fas fa-times" style="font-size:9px;color:#ff735b;"></i></span>silence</li><li class="my-2"><span class="fa-li"><i class="fas fa-times" style="font-size:9px;color:#ff735b;"></i>
</span>tomatoes</li><li class="my-2"><span class="fa-li"><i class="fas fa-times" style="font-size:9px;color:#ff735b;"></i></span>small spaces</li>
<li class="my-2"><span class="fa-li"><i class="fas fa-times" style="font-size:9px;color:#ff735b;"></i></span>people bothering him to be organized</li></ul></div></div></div></div><div class="tab-pane fade" id="three"><div class="bg-faded p-3"><blockquote class="text-uppercase font-weight-bold" style="font-size:12px;letter-spacing:4px;border-width:3px;">03 — Background</blockquote><hr><div class="text-muted p-1" style="max-height:340px;overflow:auto;"><p>Sol grew up in a small town on the outskirts of Manehattan, along with his Mother, Father and older sister. Since he was small he expressed preference for staying in quiet places, isolated from the rest of ponies. Sol is the only one in his family to inherit his grandpa's hybrid genes, so he was also treated differently, like a pest and something to be ashamed of, and him being trans didn't help a whole lot.</p><p>He moved out as soon as he was allowed to a d cut all contact with his family. He moved in with his childhood friend Midnight Solo for a while until he got a job at the poniville library.</p><p>Once he was settled he started taking interest in odd hobbies, such as; keeping mold in jars, collecting animal bones.He also started doing foster work, his speciality being troubled kids, they would be how he ended up meeting Love Lettèr, Molten Fuse and Mittens, he would later adopt all three of them.</p></div></div></div>
<div class="tab-pane fade" id="four"><div class="bg-faded p-3"><blockquote class="text-uppercase font-weight-bold" style="font-size:12px;letter-spacing:4px;border-width:3px;">04 — Trivia</blockquote><hr><div style="max-height:340px;overflow:auto;"><ul class="fa-ul mb-0 text-muted"><li class="my-2"><span class="fa-li"><i class="fas fa-angle-right" style="font-size:9px;color:#ff735b;"></i></span>Foster dad to 5, adoptive dad to 3</li><li class="my-2"><span class="fa-li"><i class="fas fa-angle-right" style="font-size:9px;color:#ff735b;"></i></span>Has insomnia</li><li class="my-2"><span class="fa-li">
<i class="fas fa-angle-right" style="font-size:9px;color:#ff735b;"></i></span>Doesn't have contact with anyone from his direct family</li><li class="my-2"><span class="fa-li"><i class="fas fa-angle-right" style="font-size:9px;color:#ff735b;"></i></span>Is trans with no surgery, only T</li></ul></div></div></div><div class="tab-pane fade" id="five"><div class="bg-faded p-3"><blockquote class="text-uppercase font-weight-bold" style="font-size:12px;letter-spacing:4px;border-width:3px;">
05 — Relationships</blockquote><hr><div style="max-height:340px;overflow:auto;"><div class="row no-gutters p-1 py-3"><div class="col-5 w-100" style="min-height:200px;border-radius:10px;background-image:url("https://f2.toyhou.se/file/f2-toyhou-se/images/42120612_6j2M8DebcUurwU0.png");background-size:cover;background-repeat:no-repeat;background-position:center;"><br></div><div class="col-7 px-3"><div class="row no-gutters"><div class="col-6"><span style="font-size:20px;color:#ff735b;">01.</span></div><div class="col-6 text-right"><span><a href="https://toyhou.se/10241791.arcade" style="font-size:15px;color:#ff735b;">Arcade</a><br>cousin </span></div></div><hr class="my-2"><div class="text-muted" style="max-height:150px;overflow:auto;"><p>She's his favorite cousin, they get along extremelly well. she's alwasy been there for him when he felt like he couldn't go to his friends, and she considers him her little brother.</p></div></div></div>
<div class="row no-gutters p-2 py-3"><div class="col-5 w-100" style="min-height:200px;border-radius:10px;background-image:url("https://f2.toyhou.se/file/f2-toyhou-se/images/40254109_tuYfalt1nu9JFxG.png");background-size:cover;background-repeat:no-repeat;background-position:center;"><br></div><div class="col-7 px-3"><div class="row no-gutters"><div class="col-6"><span style="font-size:20px;color:#ff735b;">02.</span></div><div class="col-6 text-right"><span><a href="https://toyhou.se/12933249.psilocybe-p-" style="font-size:15px;color:#ff735b;">Psilocybe</a><br>best friend</span></div></div><hr class="my-2"><div class="text-muted" style="max-height:150px;overflow:auto;"><p>IThey've been friends for a while, P takes out the best in Sol, always pushing him to do better and take care of himself</p></div></div></div></div></div></div></div></div></div><div class="p-1 small text-md-left text-right" style="letter-spacing:4px;"><a data-toggle="tooltip" href="https://toyhou.se/9283486.-f2u-telling" style="color:#ff735b;text-decoration:none !important;" title="" data-original-title="code by jiko"><i class="far fa-code"></i></a> . <a data-toggle="tooltip" href="ARTIST%20LINK" style="color:#ff735b;" title="" data-original-title="image by USER"><i class="far fa-image"></i></a></div></div>

thank you so much! ^^

hello! i see down below that a lot of people are asking the same thing , and i tried to read through to try and fix it but i just cant get the audio to work? i tried reading through the code's bulletin and everything

ty in advance ><

edit ; im using this for my user profile 

edit 2; what is trivia used for?

ensure that you're editing with the Code Editor!  this appears when i go and look at it:

<iframe class="w-100" frameborder="0" style="position:absolute;height:130px;margin-top:20px;left:0;opacity:.001;"></iframe>

it's missing the music function so to add it back, simply paste src="https://www.youtube.com/embed/KfEG3QHFBJQ?controls=0" next to the iframe! C:

for me trivia is the same as fun facts about your character (or in your case, yourself!) lolol


tysm ! 

oke so like Im using this on my profile in general and I can't get the audio to wrok

I've tried looking at the other comments for help but most of them didn't seem to help so im stuck on wot to do

I do have the WYSIWYG off and I still can't get the audio to play

when i head into inspect mode, the music code doesn't appear for me which probably means the link wasn't right (?)

when you go to <iframe class="w-100" frameborder="0" style="position:absolute;height:130px;margin-top:20px;left:0;opacity:.5;"></iframe>, add the src like so:

<iframe src="https://www.youtube.com/embed/pQlHB6L9rMM?controls=0" class="w-100" frameborder="0" style="position:absolute;height:130px;margin-top:20px;left:0;opacity:.5;"></iframe>/code>

hope that helps!

Oke tysm ^^

this is literally my favorite code tysm for making this

Hi, the audio doesn't seem to be working for any of the characters I've tried it on, i was wondering if i could get some help?

https://toyhou.se/12837910.mochi https://toyhou.se/12156331.xithre https://toyhou.se/11475221.cornelius-bell

hey how do you make the audio work? I've tried some of the solutions below but they weirdly enough don't work haha

whoops i forgot the links my bad https://toyhou.se/10990012.raven https://toyhou.se/12294581.-wilbur

heyo!  it looks like WYSIWYG was turned on which made the code all funky; please turn it off in your display settings when editing your codes next time!

because WYSIWYG was used, it adds unnecessary coding which is why the list is misaligned and the audio doesnt work.  and also the fact that you did use the right string haha; please find this code: 

<span class="fr-video fr-fvc fr-dvb fr-draggable"><iframe src="https://www.youtube.com/embed/yS2KyK3pqj44nRX7NIrrzs" class="w-100" frameborder="0" style="position:absolute;height:130px;margin-top:20px;left:0;opacity:.001;"></iframe></span>

and replace it with this!: <iframe src="https://www.youtube.com/embed/SqDjQPoJxiw?controls=0" class="w-100" frameborder="0" style="position:absolute;height:130px;margin-top:20px;left:0;opacity:.5;"></iframe>

hopefully this was the audio you wanted it!  lmk if anything else pops up!

EDIT: the same applies for wilbur as well! use <iframe src="https://www.youtube.com/embed/zEGbIpD6wNo?controls=0" class="w-100" frameborder="0" style="position:absolute;height:130px;margin-top:20px;left:0;opacity:.5;"></iframe>!

i couldn't find that in the code? :<
and yes i did have wysiwyg turned off, i always do that for codes, it just sometimes like to mush up >:[ and cause problems

anyways i tried finding it then i accidentally deleted code and broke it whoops i think ill just restart and try to fix the problems from there

oh that's strange, it came up for me when i right + click to inspect the code <:O  

when you say you have WYSIWYG off, do you mean you have it disabled in your display settings (ticked off for profile text) as well?  but okay, best of luck!

i always have it disabled haha, i just don't know why it clumps together
anyways ty for the help, i really love ur code

This user's account has been closed.

yep!  you would do so around this area!

<blockquote class="text-uppercase font-weight-bold"
 style="font-size:12px; letter-spacing:4px; border-width:3px">

 01 — Profile

 </blockquote>text text text<hr>

This user's account has been closed.

you might have inserted it wrong because it looks like the audio attribute is missing..

here's the fix version though! <3
<iframe src="https://www.youtube.com/embed/4nRX7NIrrzs" class="w-100" frameborder="0" style="position:absolute; height:130px; margin-top:20px; left:0; opacity:.001;"></iframe>

This user's account has been closed.
This user is not visible to guests.

I read the rules and it works great! Thank you sm for making this! :D

Music box seem to be pretty capricious!

yeah tbis code (and several others) is undergoing updates right now since it's old and oddly made; hopefully that should cease the issues surrounding it! ^^ <3

ur codes r so great!! im using them on all my main ocs ^_^ here are some of them! https://toyhou.se/7509093.nio https://toyhou.se/7515989.faust https://toyhou.se/11800176.olive thank u sm 4 ur amazing codes!

Hey! I can't seem to get the music player working on my characters Flora and Ambrosia. Did I forget to code something or did it wrong?

Flora on Toyhouse

Ambrosia on Toyhouse

It seems that WYSIWYG was activated during editing so I suggest you disable it from your settings.  Because of that, additional coding in both characters was added that causes the music not to work!

Please delete the span class here (and maybe the amp; but you can leave it haha) :

<span class="fr-video fr-fvc fr-dvb fr-draggable"><iframe src="https://www.youtube.com/embed/YBRCvVpknvg" class="w-100" frameborder="0" style="position:absolute;height:130px;margin-top:20px;left:0;opacity:.001;">&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;nbsp;</iframe></span>

It worked! Thanks so much!

Hii!! I love the code and all!! but I have problems With the music :( You can Help me? Here's the character! https://toyhou.se/8458908.ender Edit; And if you don't mind, can you explain how it works? I plan to put this code on all my characters and I don't want to bother you too much

Ty <3

Looks like you got the music working now!!  Is that you needed? :O

Yea!!! Idk how I do it but yes!