I'm confused on why there is green on their code, I don't know much about rgba :<
Can you help?Â
This is my favorite code! I use it for almost all of my favorite OCs. Thank you for making such cool and practical codes! Â Â
to add an image: right-click on an image and "copy image address" (or anything similar, NOT "copy image"); alternatively, if you are on an ipad, you can hold the image down (if it's in on a web browser) and slide it to a tab. Â then, paste it where appropriate in the code
you can change the font colour by using the custom coloured (CC) version of the code, and changing the #000 hexcode to another colour; on desktop, you can use ctrl/cmmd + f in the code editor to change it but you'll manually have to find it on the ipad/mobile ^^
using it here :0
If you want to change the colours of the links, add style="color:#HEXCODE"
in the <a href=""> group! Â So like this:
<a class="rounded-0 p-2 border-0 card btn-block active bg-faded" style="color:#000" data-toggle="tab" href="#one">
<i class="fas fa-id-card"></i>
<span class="mt-2" style="letter-spacing:.5px;">profile</span>
</a>
Hope that works!
Used for Malcolm. Thank you!
Thankyouuuu i love it its so pretty and simple, im new to th so i barely know anything, but i manage to understand almost everything I used it on my OC
All though, how can i change transparency on some parts?
Hiya! I absolutely adore this code and used it for https://toyhou.se/11213941.kopi , but I am a beginner at TH coding and have no idea how to change the colors of the fonts/bg to fit the theme.
The text-white is too bright, but the text-dark is too muddy, so I wanted to try to give it a custom color if I could! How would I do this? I tried something like < div style="color:purple"> from the coding resources page you linked, but when I coded it, it messed with the formatting.
Hello! Â Are you looking to just change the colour of the header (where your character name is + quote)? :] Â It's strange that the color:purple isn't working for you but it's possible that you formatted it wrong. Â Right now, I can see that you're trying to make it green and so I'll go with that:
At Line 20 (or around there), replace <div class="text-green">
with <div style="color:#HEXCODE">
and see if that works better for you! Â Of course, replace HEXCODE with an actual hexcode for a custom coloured header! Â If the text is difficult to read either way, consider using a different background!
Hope that helps!
Itâs possible; youâd need to add an extra tab and an extra tab pane for the background content!
Iâm off to somewhere right now so I canât extensively help but AviCode has a lovely tutorial that you can follow on how to add more tabs!
Please consider doing trial and error on a private character profile/tab so that in the event that something breaks, the original info isnât lost! ^-^)9
And sorry to bother with another question, but do you somehow know how you would make like Uhm..
How the first tab profile box has the age, n such
Be able to turn into a description scroll box ?
I've figured out the tab stuff but i can't figure out how to make the description fit inside the box while scrolling..i tried to center align the text and thought it would work but it doesnt
This was the character i tested the coding out and my problem in the backstory tab
My understanding is that you would like to turn the basic info into a normal, scrollable textbox like seen in this code's history tab?
All you have to do is go to Line 90 where it says <div class="row no-gutters">
and delete everything until Line 131. Â Then, under the <!---------- [ INFO ] ---------->, add this:<div class="text-muted">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Euismod quis viverra nibh cras pulvinar.</p>
<p>Nunc sed velit dignissim sodales ut eu sem. Porta non pulvinar neque laoreet suspendisse interdum. Blandit aliquam etiam erat velit scelerisque in dictum non.</p>
<p>A scelerisque purus semper eget duis. Ut sem nulla pharetra diam sit. Eu non diam phasellus vestibulum. Morbi tincidunt ornare massa eget egestas purus viverra. Facilisi nullam vehicula ipsum a arcu cursus. Pharetra vel turpis nunc eget lorem dolor sed.</p>
</div>
I don't know if you wanted to delete the AESTHETICS as well, but you pretty much delete it too.  If you can see little arrows on the side of the numbers (when on Code Editor), you can click them to "collapse" the coding group and delete that to make the process a little easier. If you're still struggling, I highly suggest heading to the Help Forum instead! :]
hey there! i used this code for https://toyhou.se/10797530.faol-n and planning to use it for other characters. i'm trying to change the font to a more medieval font (Luminari) since he's in a medieval setting. am i stuck with the default font in the code or could i do something about it?
You can change font-family:avenir
to font-family:times
or any other font you would like! Â You can view other fonts here.
Hey there! Â Iâm a little confused on what youâre asking but Iâll try and cover things about images. Â Iâm away from my computer right now so I canât check but ensure that you have WYSIWYG off and Code editor on when youâre adding images in! Â Essential step. Â Best done on desktop.
Anyways, are you saying that youâre unable to find photos for the background? Head over to Unsplash for high quality and free photos! Â As for the OC picture, any image should fit in there, regardless of size! Â Though, if you donât have a picture, you can always use an aesthetic photo from Unsplash instead as a placeholder. ^^
When getting the image link, right-click and select âCopy image addressâ, then paste where appropriate. Â Hope this helps!
Even if the image was too big, I coded it so that any size would fit it, regardless if it was 200px or 3000px :0
Also, I just had a check and it seems that you have WYSIWYG on, or at least used it for editing. Â Please refer to this guide if you'd like to continue using codes and restart the profile IF you're still struggling to input the images in. Â Visually, it seems functional but you can't edit further if you want backgrounds.
Thanks for that! Â I've found out why the images are faulty! Â The reason why the images do not work is that somehow, bits of the background code have been deleted. Â This may have happened when you used WYSIWYG.
Where it says background:;
(Line 16) or background-image:;
(in [RIGHT BOX], around Line 35) should actually be background:url(LINK OF IMAGE URL');
Please replace the above with that! Â Also, the first line of code, be sure to add background-size:cover;
afterwards. Â This is what makes the image spread so that it covers the code, regardless of size. Â After you do that, put in the image url in where it says 'LINK OF IMAGE URL' â INSIDE the brackets! Â Have a look below:
Excuse the blurriness, my bad LMAO
It may look different from how it may be set out in your code but take note of how it should look in order for the images to appear. Â As long as you follow my instructions, it should all come along fine ^^
i've got two extra bullets on the profile page so maybe that's it? again, zero knowledge of coding on my end so i've got no clue sdfkdfskjdj
this isn't related but i found this code via someone else using it and i remember wanting to write down a backstory i have no idea why i didn't use another one but one of my character's backstories is so long that it's probably a good thing i stuck with this one & i've kiiiiinda changed my mind on that one pfft
You know how thereâs little arrows on the side that collapses groups of code to minimise space? Â If you click on the arrow that is in line with the AESTHETICS sections (Line 154) then delete it, that should rid of it correctly :]
Itâll look something like:
<!ââ AESTHETIC ââ>
<div class="mt-4 text-lowercase" style="font-size:15px; letter-spacing:2px;"> â </div>
Delete the bold bit in the code and youâre good!
[ F2U ] Noxious's Comments