Using for one of my ocs and read the TOS!
I currently have 2 problems but they aren't too major
1. I wanna change the fonts but don't know which parts to edit/insert the code
2. The icon colors turned blue and I wanna have them in red for uniformity
edit: i was able to change the fonts and kept the icon colors in white (still hoping for it to be red) i'm trying to add a background photo but it wouldn't work either
cant add background and music :( https://toyhou.se/21045895.voltaire edit : solved ty
adore your work and codes , thank you sooo much for making and letting us use these<333 im gonna start coding now<3!
hi!
hope that helps!! ^^
ah, i had to test this out; i don't think fa-gear-complex is supported yet on toyhouse either!! ;w; </3
i think the icons released in the 6.4.0 updates don't appear yet but i'm not 100% certain... with proper formatting, if the icons works in circlejourney but not on toyhouse, that's because circlejourney is more up to date with this sort of thing, i believe!
you're better off using fa-gear for now!
currently, the background-image:url has " instead of ' !! use ' to get the images appearing again!
<div class="rounded" style="min-height:170px ;border-radius:10px; background-image:url('https://images.unsplash.com/photo-1613966667754-337004da0ca2?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2164&q=80'); background-size:cover; background-position:center;">
</div>
hiya! I was wondering if i could ask you a question about something? for the background on this, I have an image linked but when i preview the code, it stays the same and doesn’t insert and image.
edit:realized i was missing part of the code :facepalm: nvm!!
Finally, a HTML character profile without needing a photo of (any of) my character! I'm going to use this now!
Hi! I wanted to ask about an issue in mine? For whatever reason, three of the four tabs are stacking on top of each other, and I'd rather they just replace the other outright, like in your example. Do you have any idea what could cause this? Thanks! (btw, phenomenal code) https://toyhou.se/18963775.giro
the image for the background doesnt work even with WYSIWYG disabled and using the link to the photo on unsplash and i put it in the correct place..?
are you using a link to the image or a link of the image?
a link to the image would be this: https://unsplash.com/photos/U6WFEIk_D_k
but a link of the image (what the code needs) is this: https://images.unsplash.com/photo-1661949807600-990fe8efd74f?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=687&q=80
I used your code on this little lady!! https://toyhou.se/14132254.plaguefrost might use it on one or two more, this one is perfect, thank you <3
Hey I'm having trouble getting a background do you know how I can put a background for it
There are a few reasons why the background doesn't work so please say everything you have done/used so fur !! Are you using WYSIWYG? What is the image link you're using? What's the image website you're using?
Thank you so much for the code!! I used it for my profile <3 Btw I did edit the code a bit because I'm using it on myself and not for my characters so I didn't want to get too personal lol^^
hey there, thank you so so so much for making this code !! it's absolutely one of my favorites and i'm using it for most of my ocs, thanks a lot again ! ♡
This is a really cool code and I’ve decided to use it for the IC!
Just one question though - in the music box section, if you copy and paste the code for the first video there, and ofc change the video, are you able to have multiple songs in there? Or would that not work
you can! or should be able to!! they will play at the same time with each other if, yknow, you press play for all of them LMAO
alternatively, you can change the embed link to a playlist version if you just want one video (you can find instructions from Breelifornia but i can also leave instructions for you after class)!
hope this helps! :D
Hey ive got a tiny question, above the (for lack of better words) nameplate in the original version you made, there's this little leaf icon... how do i change that? I see other people doing it, but i am code illiterate >.
you can change the leaf icon by replacing the fa-leaf (and the fa-seedlings if you were looking to change that too) with anything from fontawesome.com! toyhouse allows the pro versions as well :]c
<i class="fas fa-leaf fa-2x mx-4"></i>
for example, if you wanted a pixel alien, you can use fa-alien-8bit!
<i class="fas fa-alien-8bit fa-2x mx-4"></i>
are you asking how to make the links page transparent?
if so, you would need to delete bg-faded (which is the grey/muted background)!<div class="bg-faded p-3">
and then, for the summaries, add background:rgba(0,0,0,0.6); in the style tag!<div class="card border-0 rounded-0 p-3 text-muted" style="max-height:140px;overflow:auto; background:rgba(0,0,0,0.6);">
hope this helps!
Say I wanted to add a Pokemon team to one of the sections- how should I go about doing it?
i'm not sure if you have the pkmn team code already or if you were asking me to make one for this (to which i'll have to decline due to little time and work, sorry!!) but you should be be able to paste into whatever pre-existing section you'd like!
if it has a background (like card or bg-faded), you can delete that and add a background-color:rgba(0,0,0,0.5) in the style! i can help further with this but only if there is one prepared for me to see ^^)b
First of all I wanna say I love this code so much, it's so pretty, neat and simple but with enough info, one of my favorites!
I ran into an issue though and was wondering how I could fix it since I'm no code savvy
When I enter a long name, the name box breaks and clips out of the container when viewing on mobile. any fix for that? thank you!
it's addressed in the guide above in the code!
<!--
→ best if super short but you can change [p-4] to [p-3] OR adjust [font-size:27px] and [letter-spacing:8px]
-->
i'd recommend decreasing the font to like, font-size:20px? ^^ see if that works!
To this day this is still one of my all time favorite codes it is just so incredibly pleasing to look at <33
Hello, I really love your codes <3 Can I know what font "Profile", "Trivia", "Background" etc is? Trying to alter a css to match the font in your code >< (More specifically, if you know the name of it for google fonts?)
edit: ah, I think I have it figured out! I'm going to use your code for this bab soon <3 Thank you so much for the wonderful codes!
Hello! I have a little question What colors are okay to use for the boxes? I tried to customise the colors but it looks really bad :( do you have a tip? Also I love your codes! you are so talented <3
ooh in my opinion i don't think there is no real tip for what is a 'good' colour; i think that will depend the background (e.g. empty vs busy landscape, if it's more bright or dark), the colour (both the main background and text colour) and how transparent it is (nvn)9
you can always try and play around with the background settings (background-size:cover and background-position:bottom) instead (or even opt for another similar image if you must)! sometimes you need a zoomed in image rather than the entire image for better aesthetics (cover→ #px); or maybe the top right corner is more pleasing than the bottom (bottom→ center, top, left, right). just some simple things can make it nicer than before!
you can link me the character and i could probably recommend something too? ^^
Ohh I see! Tysm for your reply I think I will try adjusting the image!
And there's the character, maybe the image is the issue :c https://toyhou.se/2082679.skunktail
i came up with four changes! here are the instuctions needed to get that appearance!
Ooo, I saw a few of my friends using this code and I decided to try it out as I'm trying to find different ways to show characters of differing importance that I have ^^
This design was absolutely a blast to use and I think I managed to get the hang of it as well
I edited this boy's profile (Thanatos) using it and it honestly is really amazing!
hi! this code is amazing, and i was using it on one of my characters just now! but i was trying to edit the 'background' section to a moodboard instead, and it worked, however it somehow broke the music box? what happens is when i click on the music tab it shows up.. below the actual code for some reason :') and it won't go away when i click on the other tabs of the code.. i really hope this makes sense, not sure what happened
Can you give me a link to the character profile with this code? You might have deleted a </div> by accident!
Sorry for the wait! The music box was outside of the tab-content group which is why it's appearing outside of the code!
Here's the fixed version! Hope this helps!
<div class="col-lg-11 mx-auto m-3 m-lg-5 text-justify text-white">
<div class="row no-gutters" style="letter-spacing:.5px;font-size:12px;font-family:avenir;background-image:url("IMG%20URL%20HERE");background-size:cover;background-position:bottom;background-repeat:no-repeat;background-attachment:scroll;box-shadow:0 0 15px rgba(0,0,0,0.5);">
<div class="col-lg-7">
<div class="card rounded-0 border-0 p-4" style="max-height:450px;background:rgba(0,0,0,0.5);">
<div class="mx-auto text-center col-12" style="letter-spacing:5px;">
<i class="fas fa-heart fa-xs pb-2"></i>
<i class="fas fa-cloud fa-lg mx-3 pb-2"></i>
<i class="fas fa-heart fa-xs fa-flip-horizontal pb-2"></i>
</div>
<hr class="w-25 my-2" style="border-color:rgba(255,255,255,0.15);">
<hr class="w-50 my-2" style="border-color:rgba(255,255,255,0.15);">
<div class="d-flex" style="min-height:140px;">
<h1 class="m-auto text-uppercase text-center p-4" style="font-size:2rem;font-weight:200;letter-spacing:8px;border:2px solid;background-color:rgba(0,0,0,0.5);">
Name
</h1></div>
<div class="display-4 text-center text-uppercase pb-1" style="font-size:14px;letter-spacing:5px;">
species/race . age . pronouns . sexuality
</div><hr class="w-100 my-3" style="border-color:rgba(255,255,255,0.15);">
<div class="pb-2" style="min-height:120px;max-height:120px;overflow:auto;">
<div class="text-center" style="letter-spacing:.5px;">
<p>
One paragraph is ideal but you could do more because this box scrolls! ;]
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In vitae ultricies augue. Donec sagittis erat vel quam porta faucibus. Ut lobortis ornare fermentum. Vivamus eros magna, euismod quis augue non, tempor ultricies massa. Curabitur ligula orci, aliquet nec luctus cursus, pellentesque aliquam nunc. Nunc sed sagittis lectus. Morbi id sem id augue rutrum consequat sed in ante. Quisque egestas lacus tortor, in aliquam neque aliquam elementum.
</p>
</div>
</div>
<hr class="w-50 my-2" style="border-color:rgba(255,255,255,0.15);">
<hr class="w-25 my-2" style="border-color:rgba(255,255,255,0.15);">
</div></div>
<div class="col-lg-5 w-100" style="max-height:450px;background:rgba(0,0,0,0.8);">
<div class="px-4 p-3 card-block sticky-top" style="background:rgba(0,0,0,0.5);">
<div class="col-8 mx-auto">
<ul class="nav row no-gutters text-center">
<li class="nav-item col">
<a class="text-white" data-toggle="tab" href="#one">
<i class="far fa-user"></i>
</a>
</li>
<li class="nav-item col">
<a class="text-white" data-toggle="tab" href="#two">
<i class="far fa-heart"></i>
</a>
</li>
<li class="nav-item col">
<a class="text-white" data-toggle="tab" href="#three">
<i class="far fa-book"></i>
</a>
</li>
<li class="nav-item col">
<a class="text-white" data-toggle="tab" href="#four">
<i class="far fa-music"></i>
</a>
</li>
</ul>
</div>
</div>
<div class="tab-content">
<div class="tab-pane fade active show" id="one">
<div class="px-4 p-3" style="min-height:400px;max-height:400px;overflow-y:scroll;letter-spacing:.5px;">
<h1 class="display-4 text-uppercase text-center mb-3" style="font-size:16px;letter-spacing:1px;">
Profile
</h1><div class="px-2">
<div class="d-flex justify-content-between p-1">
<span class="w-50 text-uppercase">Name</span>
<span class="w-50 text-right">content</span>
</div>
<div class="d-flex justify-content-between p-1">
<span class="w-50 text-uppercase">Age</span>
<span class="w-50 text-right">content</span>
</div>
<div class="d-flex justify-content-between p-1">
<span class="w-50 text-uppercase">Gender</span>
<span class="w-50 text-right">content</span>
</div>
<div class="d-flex justify-content-between p-1">
<span class="w-50 text-uppercase">Species</span>
<span class="w-50 text-right">content</span>
</div>
<div class="d-flex justify-content-between p-1">
<span class="w-50 text-uppercase">Birthday</span>
<span class="w-50 text-right">content</span>
</div>
<div class="d-flex justify-content-between p-1">
<span class="w-50 text-uppercase">Height</span>
<span class="w-50 text-right">content</span>
</div>
<div class="d-flex justify-content-between p-1">
<span class="w-50 text-uppercase">Orientation</span>
<span class="w-50 text-right">content</span>
</div>
<div class="d-flex justify-content-between p-1">
<span class="w-50 text-uppercase">Occupation</span>
<span class="w-50 text-right">content</span>
</div>
</div>
<hr style="border-color:rgba(255,255,255,0.15);">
<div class="row no-gutters">
<div class="col-6">
<h1 class="display-4 text-uppercase text-center mb-3" style="font-size:16px;letter-spacing:1px;">
<i class="fas fa-check"></i>
</h1><ul>
<li>content</li>
<li>content</li>
<li>content</li>
</ul></div>
<div class="col-6">
<h1 class="display-4 text-uppercase text-center mb-3" style="font-size:16px;letter-spacing:1px;">
<i class="fas fa-times"></i>
</h1><ul>
<li>content</li>
<li>content</li>
<li>content</li>
</ul>
</div>
</div>
</div>
</div>
<div class="tab-pane fade" id="two">
<div class="px-3 p-3" style="min-height:400px;max-height:400px;overflow-y:scroll;letter-spacing:.5px;">
<h1 class="display-4 text-uppercase text-center mb-3" style="font-size:16px;letter-spacing:1px;">
Trivia
</h1><ul>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
<li>Donec sagittis erat vel quam porta faucibu.</li>
<li>Ut lobortis ornare fermentum</li>
<li class="ml-3">Sub-plot for the above!</li>
<li>Vivamus eros magna, euismod quis augue non, tempor ultricies massa</li>
</ul><hr style="border-color:rgba(255,255,255,0.15);">
<h1 class="display-4 text-uppercase text-center mb-3" style="font-size:16px;letter-spacing:1px;">
Design Notes
</h1><ul>
<li>Lorem ipsum dolor sit amet.</li>
<li>Donec sagittis erat vel.</li>
<li>Ut lobortis ornare fermentum.</li>
<li class="ml-3">Sub-plot for the above!</li>
<li>Vivamus eros magna, euismod quis augue non, tempor ultricies massa.</li>
</ul>
</div>
</div>
<div class="tab-pane fade" id="three">
<div class="px-4 p-3" style="min-height:400px;max-height:400px;overflow-y:scroll;letter-spacing:.5px;">
<h1 class="display-4 text-uppercase text-center mb-3" style="font-size:16px;letter-spacing:1px;">
Aesthetic
</h1><div class="moodboard">
<div class="row no-gutters">
<div class="col-4 p-1">
<div class="rounded" style="min-height:170px;border-radius:10px;background-image:url("https://file.toyhou.se/images/7745356_UbxFaTbtSE8Egg6.png");background-size:cover;background-position:center;">
</div>
</div>
<div class="col-4 p-1">
<div class="rounded" style="min-height:170px;border-radius:10px;background-image:url("https://file.toyhou.se/images/7745356_UbxFaTbtSE8Egg6.png");background-size:cover;background-position:center;">
</div>
</div>
<div class="col-4 p-1">
<div class="rounded" style="min-height:170px;border-radius:10px;background-image:url("https://file.toyhou.se/images/7745356_UbxFaTbtSE8Egg6.png");background-size:cover;background-position:center;">
</div>
</div>
<div class="col-4 p-1">
<div class="rounded" style="min-height:170px;border-radius:10px;background-image:url("https://file.toyhou.se/images/7745356_UbxFaTbtSE8Egg6.png");background-size:cover;background-position:center;">
</div>
</div>
<div class="col-4 p-1">
<div class="rounded" style="min-height:170px;border-radius:10px;background-image:url("https://file.toyhou.se/images/7745356_UbxFaTbtSE8Egg6.png");background-size:cover;background-position:center;">
</div>
</div>
<div class="col-4 p-1">
<div class="rounded" style="min-height:170px;border-radius:10px;background-image:url("https://file.toyhou.se/images/7745356_UbxFaTbtSE8Egg6.png");background-size:cover;background-position:center;">
</div>
</div>
</div>
</div>
</div>
</div>
<div class="tab-pane fade" id="four">
<div class="px-4 p-3" style="min-height:400px;max-height:400px;overflow-y:scroll;letter-spacing:.5px;">
<h1 class="display-4 text-uppercase text-center mb-3" style="font-size:16px;letter-spacing:1px;">
Musicbox
</h1><div>
<iframe src="https://www.youtube.com/embed/STRING%20HERE" class="flex-fill pb-2" style="width:102%;min-height:300px;" frameborder="0">
</iframe>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Hi! I love this code and I think it’s amazing! But I’m having some trouble adding a background image. Where it says this: “background-image:url(IMG URL HERE);” well I put the url in the () but it doesn’t seem to be working? I’ve tried multiple times. I’m not sure if I’m doing it wrong/putting it in the wrong spot or if you can’t use a Pinterest url😅. I hope this makes sense:))
Hello! Images from Pinterest do work and you’re putting it at the right place; are you using a link or an image address?
Link: https://www.pinterest.com.au/pin/515662226092127677/
Image Address: https://i.pinimg.com/474x/5b/5d/d2/5b5dd2c8d3bffc9aa24c6c0cd1dde179.jpg (the image will end as a .png, .jpg, .gif, etc)!
Many people do get confused between the two so I don’t blame you! If you are using an image address, it sounds like a WYSIWYG problem and ask that you turn it off from your settings.
Hope this helps! <3
okay so I did all that. And I have WYSIWYG off but it’s still not working? So yea I’m not sure what I did 💀
Could you please give me a link of the character with the code? I can check it when I come home ^^
Alternatively, if you don’t want to wait, you can ask for help in the Help Forums! There’s bound to be a someone who can give advice in that time.
Hey so WYSIWYG was activated at least once! WYSIWYG adds unnecessary classes which mess up every code. Once that happens, the best option is to restart the code with a new copy/paste.
Unfortunately, this is without the guides but here's the clean up version of the code with a placeholder image inside, please go ahead and replace it ^-^)b
<div class="col-lg-11 mx-auto m-3 m-lg-5 text-justify text-white">
<div class="row no-gutters" style="letter-spacing:.5px;font-size:12px;font-family:avenir;
background-image:url(https://images.unsplash.com/photo-1624270903952-347a4c2ade0c?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1534&q=80);
background-size: cover;
background-position: bottom;
background-repeat: no-repeat;
background-attachment: scroll;
box-shadow: 0 0 15px rgba(0,0,0, 0.5);">
<div class="col-lg-7">
<div class="card rounded-0 border-0 p-4" style="max-height:450px;background:rgba(0,0,0,0.5);">
<div class="mx-auto text-center col-12" style="letter-spacing:5px;"><p>
<i class="fas fa-seedling fa-xs pb-2"></i>
<i class="fas fa-leaf fa-lg mx-3 pb-2"></i>
<i class="fas fa-seedling fa-xs pb-2"></i></p>
</div>
<hr class="w-25 my-2" style="border-color:rgba(255,255,255,0.15);">
<hr class="w-50 my-2" style="border-color:rgba(255,255,255,0.15);">
<div class="d-flex" style="min-height:140px;">
<h1 class="m-auto text-uppercase text-center p-4" style="font-size:2rem;font-weight:200;letter-spacing:8px;border:2px solid;background-color:rgba(0,0,0,0.5);">
Solaris
</h1></div>
<div class="display-4 text-center text-uppercase pb-1" style="font-size:14px;letter-spacing:5px;">
Wolfdog • He/Him • Asexual
</div><hr class="w-100 my-3" style="border-color:rgba(255,255,255,0.15);">
<div class="pb-2" style="min-height:120px;max-height:120px;overflow:auto;">
<div class="text-center" style="letter-spacing:.5px;">
<p>Personality: Loyal, stubborn, sarcastic and not the brightest. He tends to make jokes/laugh in bad situations (mainly because he’s nervous/uncomfortable or doesn’t know what to do). He’s an introvert and hates being the center of attention </p>
<p> Solaris is nicknamed Sol (pronounced like Soul) which was given by his brother Apollo.</p>
</div>
</div>
<hr class="w-50 my-2" style="border-color:rgba(255,255,255,0.15);">
<hr class="w-25 my-2" style="border-color:rgba(255,255,255,0.15);">
</div></div>
<div class="col-lg-5 w-100" style="max-height:450px;background:rgba(0,0,0,0.8);">
<div class="px-4 p-3 card-block sticky-top" style="background:rgba(0,0,0,0.5);">
<div class="col-8 mx-auto">
<ul class="nav row no-gutters text-center">
<li class="nav-item col">
<a class="text-white" data-toggle="tab" href="#one">
<i class="far fa-user"></i>
</a>
</li>
<li class="nav-item col">
<a class="text-white" data-toggle="tab" href="#two">
<i class="far fa-heart"></i>
</a>
</li>
<li class="nav-item col">
<a class="text-white" data-toggle="tab" href="#four">
<i class="far fa-music"></i>
</a>
</li>
</ul>
</div>
</div>
<div class="tab-content">
<div class="tab-pane fade active show" id="one">
<div class="px-4 p-3" style="min-height:400px;max-height:400px;overflow-y:scroll;letter-spacing:.5px;">
<h1 class="display-4 text-uppercase text-center mb-3" style="font-size:16px;letter-spacing:1px;">
Profile
</h1><div class="px-2">
<div class="d-flex justify-content-between p-1">
<span class="w-50 text-uppercase">Name</span>
<span class="w-50 text-right">Solaris</span>
</div>
<div class="d-flex justify-content-between p-1">
<span class="w-50 text-uppercase">Nickname</span>
<span class="w-50 text-right">Sol</span>
</div>
<div class="d-flex justify-content-between p-1">
<span class="w-50 text-uppercase">Gender</span>
<span class="w-50 text-right">Male</span>
</div>
<div class="d-flex justify-content-between p-1">
<span class="w-50 text-uppercase">Pronouns</span>
<span class="w-50 text-right">He/Him</span>
</div>
<div class="d-flex justify-content-between p-1">
<span class="w-50 text-uppercase">Species</span>
<span class="w-50 text-right">Wolfdog</span>
</div>
<div class="d-flex justify-content-between p-1">
<span class="w-50 text-uppercase">Birthday</span>
<span class="w-50 text-right">March 3rd</span>
</div>
<div class="d-flex justify-content-between p-1">
<span class="w-50 text-uppercase">Zodiac</span>
<span class="w-50 text-right">Pisces</span>
</div>
<div class="d-flex justify-content-between p-1">
<span class="w-50 text-uppercase">Orientation</span>
<span class="w-50 text-right">Asexual</span>
</div>
</div>
<hr style="border-color:rgba(255,255,255,0.15);">
<div class="row no-gutters">
<div class="col-6">
<h1 class="display-4 text-uppercase text-center mb-3" style="font-size:16px;letter-spacing:1px;">
<i class="fas fa-check"></i>
</h1><ul>
<li>Hoodies</li>
<li>Movies/Shows</li>
<li>Music</li>
</ul></div>
<div class="col-6">
<h1 class="display-4 text-uppercase text-center mb-3" style="font-size:16px;letter-spacing:1px;">
<i class="fas fa-times"></i>
</h1><ul>
<li>Children</li>
<li>Big crowds</li>
<li>Clowns</li>
</ul>
</div>
</div>
</div>
</div>
<div class="tab-pane fade" id="two">
<div class="px-3 p-3" style="min-height:400px;max-height:400px;overflow-y:scroll;letter-spacing:.5px;">
<h1 class="display-4 text-uppercase text-center mb-3" style="font-size:16px;letter-spacing:1px;">
Trivia
</h1><ul>
<li>Not much of a backstory. But I’m in the process of making a zombie apocalypse AU</li>
<li>He has a brother named Apollo</li>
<li>When others flirt with him, he’s really oblivious and thinks their just being friendly💀</li>
<li>He loves to prove people who doubted him wrong</li>
<li>He hates bullies</li>
</ul><hr style="border-color:rgba(255,255,255,0.15);">
<h1 class="display-4 text-uppercase text-center mb-3" style="font-size:16px;letter-spacing:1px;">
Design Notes
</h1><ul>
<li>Design is by Wolfdoq</li>
</ul>
</div>
</div>
<div class="tab-pane fade" id="three">
<div class="px-4 p-3" style="min-height:400px;max-height:400px;overflow-y:scroll;letter-spacing:.5px;">
<h1 class="display-4 text-uppercase text-center mb-3" style="font-size:16px;letter-spacing:1px;">
Background
</h1><div class="p-1" style="text-indent:20px;">
</div>
</div>
</div>
<div class="tab-pane fade" id="four">
<div class="px-4 p-3" style="min-height:400px;max-height:400px;overflow-y:scroll;letter-spacing:.5px;">
<h1 class="display-4 text-uppercase text-center mb-3" style="font-size:16px;letter-spacing:1px;">
Voice Claim
</h1><div>
<iframe src="https://www.youtube.com/embed/LiDNAJTTdd8" class="flex-fill pb-2" style="width:102%;min-height:300px;" frameborder="0">
</iframe>
</div>
</div>
</div></div></div></div>
<div class="text-muted text-right p-2" style="font-size:10px">
code by <a href="https://toyhou.se/7275692.-f2u-sleek" class="text-muted">jiko</a> |
bg photo by Unsplash
</div>
</div>
Hi! I really like this code, and i used it for one of my oc. It worked well, though i would like to change something:
You see, the little logo in up ( the sprout )? Well, i would like to change the middle one ( and probably the other one ) into another logo ( a coffee cup, if you want to know ). It worked on a test, but it take the same size than the 2 others one. I also tried to keep the size, but it didn't worked ( the logo just disappear this time ). So can you help here?
Explaining for the 2 others one ( left n right ) is also welcome!
Here! Hope i said everything that needed to said (=^・^=)
Could you send me a link of the code in use? Normally, you should be able to change just the fa-leaf to fa-coffee at fontawesome.com with no issue, but it’s possible something got overrun!
I don't very know if i should do a picture uuuh-
In fact, sorry if i repeat something that you've understand, but yes, the middle leaf thing changed into a coffee cup ( i re-made it since i deleted the other test where it worked ), but it got the same size of the other one,,
For future reference, you can kindly just send me the character that has the code!
Anyways, (i’m on mobile so i can’t double check but) there’s actually no error whatsoever, it just looks like the same size! If you would like to make the difference more pronounced, change fa-lg to fa-2x for the middle icon!
Hope that helps! <3
is it possible to make the text non boostrap..? i'm wanting white text for everything and bootstrap doesn't look nice i tried to go around and search and it says to put style="" but nothing i've searched so far changes the text to non boostrap..
cause at first i thought it wouldn't be boostrap since a friend of mine from 15days ago used the code and their text was white so im a bit confused::
By default, the code’s text is already text? What I’m understanding is that you want the text to be white but with [text-white], the text is set to be white anyways lol
If you want to change the code to be custom-coloured, delete [text-white] from the very first line and add [style="color:#HEXCODE">] to the end of it!!
Hope that helps! ^-^<3
I'm using this amazing code for my characters :0 Thank you so much for creating such a cool little template!
Hello I had a small question for the background tab, I want to place an image/page doll there instead of text but I'm not sure how to properly insert one in without messing up the code ;; how would i be able to add that in?
Hey there! If you go into the code and scroll all the way down to "BACKGROUND", please delete all the text (aka anything that has the <p> class) and insert the following:
<img src="IMG LINK HERE">; inserting the image url where it says so! The pagedoll (if very large) should resize itself appropriately to fit in the tab but let me know if something doesn't look right!
Overall, it should look something like this (also note that I have also changed Background to Pagedoll):
This is also assuming that you only wanted to insert one pagedoll. Hope this helps! <3
[ F2U ] Sleek's Comments