Hello!! I'm currently using this code for my profile page, but for the friends/characters section, there's this problem on how the hyperlink would appear next to the icon rather than below it ;; Here's a screenshot of it if needed!
https://cdn.discordapp.com/attachments/822743898371391498/889535294708256808/Screenshot_160.png (the one with the text "Oni")
Might I ask how I could add and sync up more tabs using this code? I like the look but wanna make the information about myself a bit more thorough.
It's a bit of a process and I'm not too confident in explaining well because English is not my first language!
However, AviCode has shared a lovely tutorial on how to add more tabs so I highly suggest looking at it! This code (and nearly all tabbed codes) shares a similar layout so it should be relatively clear on what to change and add.
Best of wishes! You're welcome to ask for help again after you attempted that; I may be more useful then haha ^^ <3
hi! unsure if someone's asked this and you answered but. .
how do you put a link into the comms status n stuff ? like a link to my prices >0<
This user is not visible to guests.
Love this code! It’s the first one I’ve ever used and it’s really simple to understand. However, I can’t seem to figure out how to insert images. Would it be possible for anyone to help me out?
Ensure that you have WYSIWYG disabled in your display settings (just profile text is fine) before proceeding. If you find that the raw code is now “broken” (spacing-wise), restart the whole thing.
On the image you want to use, right click and select “copy image address”, then paste that whenever applicable!
I'll be honest I've never done this before and I've got no idea what I'm doing exactly 😅😂 I found the tab with all the information but I'm unsure how or what to put in
This user is not visible to guests.
This is awesome! I just used it for my profile since I love it so much. Also, I keep running into this issue while testing the code where the profile icon keeps shrinking, is there any way to fix this? Or is it just a TH glitch?
This user's account has been closed.
Long story short: there was a misplaced </div> after the first tab which should be after all of the tab groups! I wasn't sure how to explain it (brain is melted lol) so I fixed it for you ^^ (if you don't mind the unorganised code)!:
<div class="mx-auto mt-3" style="color:#404040;font-size:85%;letter-spacing:.2px;max-width:756px;">
<div class="row no-gutters">
<div class="card-block border-0 p-3" style="border-radius:15px;background-image:url(https://i.pinimg.com/originals/75/ce/88/75ce88999c5cb080b6eabe19655b4555.jpg);background-size:cover;background-position:top;background-attachment:scroll;">
<div class="card-block p-2 text-white">
<div class="justify-content-between" style="font-size:17px;">
<span><i class="far fa-star fa-fw"></i></span>
<span style="letter-spacing:2px;">StarrySpirit</span>
</div>
</div>
<div class="tab-content row no-gutters">
<div class="col-lg-12 p-1 order-3">
<ul class="nav nav-pills pull-right">
<li class="px-1">
<a class="btn btn-outline-secondary active" style="font-size:95%;letter-spacing:1px;border-color:#aaaaaa;background:#f2f2f2;color:#aaaaaa;" data-toggle="tab" href="#foggyone">
Zero
</a>
</li>
<li class="px-1">
<a class="btn bg-faded btn-outline-secondary" style="font-size:95%;letter-spacing:1px;border-color:#aaaaaa;background:#f2f2f2;color:#aaaaaa;" data-toggle="tab" href="#foggytwo">
playlist
</a>
</li>
<li class="px-1">
<a class="btn bg-faded btn-outline-secondary" style="font-size:95%;letter-spacing:1px;border-color:#aaaaaa;background:#f2f2f2;color:#aaaaaa;" data-toggle="tab" href="#foggythree">
friends
</a>
</li>
</ul>
</div>
<div class="col-lg-4 p-2 order-lg-1">
<div class="card p-3 w-100 h-100" style="background:#f2f2f2;border-color:#aaaaaa;">
<div class="text-center">
<img src="https://f2.toyhou.se/file/f2-toyhou-se/images/34589756_Rq3jbcDsBPSCURz.png" class="fr-rounded img-thumbnail p-2 mb-2" style="max-width:150px;max-height:150px;background:#f2f2f2;border-color:#aaaaaa;" alt="34589756_Rq3jbcDsBPSCURz.png">
</div>
<div class="text-center p-1" style="font-size:88%;color:#837b85;"><i>
tired artist <i class="fas fa-angle-right fa-sm px-1"></i>
asexual <i class="fas fa-angle-right fa-sm px-1"></i>
Nonbinary
</i></div>
<hr class="w-100" style="border-color:#404040;opacity:.15;">
<div class="justify-content-between py-1">
<span style="color:#837b85;">requests</span>
<span>NEVER</span>
</div>
<div class="justify-content-between py-1">
<span style="color:#837b85;">trades</span>
<span>Ask</span>
</div>
<div class="justify-content-between py-1">
<span style="color:#837b85;">commisions</span>
<span>Open!</span>
</div>
</div>
</div>
<div class="col-lg-8 p-2 order-lg-2">
<div class="card table-responsive tab-content" style="height:330px;background:#f2f2f2;border-color:#aaaaaa;">
<div class="tab-pane fade active show" id="foggyone">
<div class="p-3" style="background:#f2f2f2;">
<div class="pb-2" style="font-size:15px;letter-spacing:2px;">
<i class="fas fa-star fa-sm pr-3"></i>| Eclipse
</div><hr class="my-2 pb-1" style="border-color:#404040;opacity:.15;">
<div class="text-justify" style="height:140px;overflow:auto;color:#837b85;">
<p>Ah crap- i have to make an intro. Okay, fine then. Welcome to my personal hell, where all of my characters lay. Some are very wholesome, but some are as edgy as frick- welp, good luck new user, also-</p>
<p>If you dare steal or trace any of my chars you will end up on my blacklist ^^</p>
Icon is by <span class="display-user"><a href="https://toyhou.se/AvianGrenade"><i class="fi-torso user-name-icon"></i>AvianGrenade</a></span>!
Code icon is by <span class="display-user"><a href="https://toyhou.se/oatsies"><i class="fi-torso user-name-icon"></i>oatsies</a></span>
<p></p>
</div><hr style="border-color:#404040;opacity:.15;">
<div class="row no-gutters pt-3 text-center">
<div class="col">
<a href="https://www.deviantart.com/starrispirit" style="color:#aaaaaa;">
<i class="fab fa-deviantart fa-2x"></i>
</a>
</div>
<div class="col">
<a href="https://scratch.mit.edu/users/Rosey_Eclipse/" style="color:#aaaaaa;">
<i class="fas fa-paw fa-2x"></i>
</a>
</div>
</div>
</div>
</div>
<div class="tab-pane fade" id="foggytwo">
<div class="p-3" style="min-height:310px;overflow:auto;background:#f2f2f2;">
<div class="pb-2" style="font-size:15px;letter-spacing:2px;">
<i class="fas fa-music fa-sm pr-3"></i>| my playlist
</div><hr class="mt-2 mb-3" style="border-color:#404040;opacity:.15;">
<div class="text-justify px-1" style="max-height:245px;overflow:auto;">
<div class="justify-content-between">
<span class="my-auto">
<a href="https://www.youtube.com/watch?v=C5fLxtJH2Qs" style="color:#aaaaaa;">
<i class="fas fa-play-circle"></i>
</a>
</span>
<span>
<span class="font-italic pull-right">Royalty</span><br>
<span class="pull-right" style="color:#837b85;">Artist — Egzod & Maestro Chives - Royalty</span>
</span>
</div><hr class="my-2 mb-3" style="border-color:#404040;opacity:.15;">
<div class="justify-content-between">
<span class="my-auto">
<a style="color:#aaaaaa;">
<i class="fas fa-play-circle"></i>
</a>
</span>
<span>
<span class="font-italic pull-right">Crossing the Line</span><br>
<span class="pull-right" style="color:#837b85;">Artist — Vosai & Facading</span>
</span>
</div><hr class="my-2 mb-3" style="border-color:#404040;opacity:.15;">
<div class="justify-content-between">
<span class="my-auto">
<a href="https://www.youtube.com/watch?v=u2HRq9nEkrI" style="color:#aaaaaa;">
<i class="fas fa-play-circle"></i>
</a>
</span>
<span>
<span class="font-italic pull-right">A stranger's dead</span><br>
<span class="pull-right" style="color:#837b85;">Artist — Cadmium X Paul Flint</span>
</span>
</div><hr class="my-2 mb-3" style="border-color:#404040;opacity:.15;">
<div class="justify-content-between">
<span class="my-auto">
<a href="https://www.youtube.com/watch?v=KBtmHyfOMNU" style="color:#aaaaaa;">
<i class="fas fa-play-circle"></i>
</a>
</span>
<span>
<span class="font-italic pull-right"> Blue Eyed Demon [</span><br>
<span class="pull-right" style="color:#837b85;">Artist — ROY KNOX -</span>
</span>
</div><hr class="my-2 mb-3" style="border-color:#404040;opacity:.15;">
</div>
</div>
</div>
<div class="tab-pane fade" id="foggythree">
<div class="p-3" style="min-height:320px;overflow:auto;background:#f2f2f2;">
<div class="pb-2" style="font-size:15px;letter-spacing:2px;">
<i class="fas fa-heart fa-sm pr-3"></i>| my friends
</div><hr class="my-2 pb-1" style="border-color:#404040;opacity:.15;">
<div class="row no-gutters text-justify px-1" style="max-height:245px;overflow:auto;">
<div class="col-4 text-center p-1 pb-3">
<img src="https://f2.toyhou.se/file/f2-toyhou-se/users/booozzerd?1" class="fr-rounded mb-2" style="width:100px;height:100px;" alt="booozzerd?1">
<a href="https://toyhou.se/booozzerd" style="color:#aaaaaa;">booozzerd</a>
</div>
<div class="col-4 text-center p-1 pb-3">
<img src="https://f2.toyhou.se/file/f2-toyhou-se/users/_dreamcatcher_?5" class="fr-rounded mb-2" style="width:100px;height:100px;" alt="_dreamcatcher_?5">
<a href="https://toyhou.se/_dreamcatcher_" style="color:#aaaaaa;">_dreamcatcher_</a>
</div>
<div class="col-4 text-center p-1 pb-3">
<img src="https://f2.toyhou.se/file/f2-toyhou-se/users/Mistieko?23" class="fr-rounded mb-2" style="width:100px;height:100px;" alt="Mistieko?23">
<a href="https://toyhou.se/Mistieko" style="color:#aaaaaa;">Mistieko</a>
</div>
<div class="col-4 text-center p-1 pb-3">
<img src="https://f2.toyhou.se/file/f2-toyhou-se/images/32309465_ofjmLfx8CwSKdQg.gif?" class="fr-rounded mb-2" style="width:100px;height:100px;" alt="32309465_ofjmLfx8CwSKdQg.gif?">
<a href="https://toyhou.se/Oatsies" style="color:#aaaaaa;">Oatsies</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-12 text-right small py-2" style="letter-spacing:4px;color:#aaaaaa;">
<a href="https://toyhou.se/9335534.-f2u-user-foggy" class="tooltipster" title="" style="text-decoration:none;color:#aaaaaa;" data-original-title="code by jiko">
<i class="far fa-code"></i>
</a> .
<a href="https://toyhou.se/ArabicaBean" class="tooltipster" title="" style="color:#aaaaaa;" data-original-title="layout by ArabicaBean">
<i class="far fa-lightbulb"></i>
</a>
</div>
</div>
</div>
This user is not visible to guests.
Hey there! For some reason, you have the tabs with a <p> around all three of the tabs, like so. . .
<li class="px-1"><p>
<a class="btn bg-faded btn-outline-secondary active" style="font-size:11.5px; letter-spacing:1px; color:#428775;"
data-toggle="tab" href="#ichi">
profile
</a>
</p></li>
Please remove the highlighted text (the <p> and </p>) for the tabs to work! Hope this helps! <3
This user is not visible to guests.
Oh, that's actually strange that it's not coming up for you?? When I checked your profile via Page Source, the <p> were there, and still are (on your profile):
Your's:
Another user's / original code (working tabs): 
Hm, I wonder if it might be a copying/pasting issue; could you try copying the code again from here and see how it goes? I've had some users have copying/pasting issues (with other codes) so I'm questioning if it's happening here too :[
This user is not visible to guests.
I'm pretty stumped too, this is a first for me. . .
Well, if you would like to continue using Foggy, maybe pop by at the help forum and ask around if you haven't already? I'm sure there'll be some nice and experienced users that can give a helping hand.
Sorry that I couldn't be more help, best of luck on your profile! ;; <3
Hi!
This is a wonderful code, I changed it a little for myself and use it for my profile! I really like it uwu
I'm working on making my profile with this coding and I've got a problem with adding the profile image for it :"") is there a certain sort of url or embed that should be used for it?? I've tried getting embed links from imgur and google drive but neither of them are working fhjdsk i'm still sorta new to coding so I may just be. a little stupid LMAO
This user is not visible to guests.
BS = bootstrap; meaning the colours will change depending on every user’s site theme in their settings (night, pink, bee, teal, etc).
CC = custom colours; meaning whatever accent colour you chosen will stay that colour for everyone, regardless of theme!
The second example for User Foggy is made with CC (the green one), so if you experiment and change your site theme, you’ll see that it doesn’t change colour! (sometimes, you would have to be more careful with CC as if you chose a dark, accent colour and someone has night theme, they may not be able to read it well.)
If you’re new to coding, I highly recommend Bootstrap versions as it is more simple to edit and friendly for all users altogether! ^^ <3
i scoured the GLOBE for a code that i wanted for my user, and thank god for yours because i love it SO much! ive been editing it on circlejourney for a while now, yknow customizations and all that, but i wanted to thank you so much for such a sexy piece of work 😭 your code is so clean, so easy to work with, and i jus love it a lot, so yeah!
i wanted to include what it looks like so far, so heres a screenshot of it down below! im still trying to figure out how to do some things, like change alll the colours and what not, im learning as i go and enjoying myself, so thank you again!
This user is not visible to guests.
I been adding codes to my characters profiles and that been working fine suprisingly as this the first time ever done this stuff. When I try doing my profile nothings working? I tried a few times. I thought maybe I was pasting it in the wrong place so I tried multiple places but it ended in the same result where it’s just comes up as a block of writing?? I decided to try with another code to see if anything different happens and the same thing happened >~< I dunno what to do
Oo nvm I kept copy and pasting and it just worked this time XD I’m unsure why it worked this time tho?
Ah heck I was copy pasting the dark one not the blue one so now again I can’t get it to work trying to do it :,)
Ohhhh I worked out how to do it right lol. The disable/enable WYSIWYG actual gives 4 different box types depending on when click the box and refreshing page etc etc and kinda more complicated then probably actually is asgdjwfjwf. I was try in two versions which made some mess which also had "<" “>” which I saw in another comment but when tried in the 3rd version it worked instantly XD. I didn’t even bother with the 4th version of the box as it already looked stuffed up
this was rather fun to read x]
but yeah, if the code has < and such, it’s not the right one and will display the raw words rather then the code itself!
also also, you should only need to uncheck the “Profile Text” box for WYSIWYG, then turn on Code Editor, but i’m glad to know you’ve figured it out!!! <3
1)
2)
3)
4)
Ok so the box gave me these 4 “versions”. The 4th version well don’t use for codes yeh and if try pasting in there then changing the setting it messes it all up. 1st version you actually can’t type or past anything. 2nd version can’t past anything and have to type letter by letter but also makes your screen go to the top so can’t see what your typing and can’t mass delete or hold down delete to keep delete (def don’t have time for that). The 3rd version is the version where can just copy and paste it in and it works no issues just when I first doing this before I knew how lol I struggled to get that “version” of the box up
Hello! I think I might actually need help, I really can't seem to understand how to do/use these codes;;
Oh dear, what’s happening on your profile is definitely not what’s meant to happen!
Have you turned off WYSIWYG (for profile text) and turned on Code Editor in your display settings? :0
I have! I've re-tried it multiple times so I've made a decision that I must've been doing something wrong
Could you check that there isn't a <pre> OR <code> at the start of the code? When I have those two, it'll display the raw code!
I also noticed that there are some html language that probably shouldn't be there so IF there isn't a <pre> or <code>, could you possibly replace "<" with "<" and ">" with ">" using the code editor's ctrl + f? If you can! :'0
(EDIT: if neither doesn't work, could you dm me how the code is rn? like through google docs, pastebin or series of pictures? i might get better help that way!)
Hm, that's strange! Have you turned off WYSIWYG off and Code Editor on in the display settings? If not, please do so and retry the code again <:0
Also, the profile picture should be 200x200px minimum (for best results)!
Let me know if you're still having troubles! You may also want to look over any misplace/extra <div>'s just in case!
[ F2U ] User Foggy's Comments