[FTU CODE] Holographic's Comments

Mint Bigshot1997

Used on my boy Mint!!

Hey! I can't seem to get the holo/glitch colors to change even though it says custom colors? I want em to match with the neon pink and baby blue on my character Cleo ^^ 💖 this code is so perfect!

NebulaNumbat

Yes they're custom! I tried changing them and it worked, so maybe you pasted without the #? Or some syntax error?

Here's the same code with the pastel colors:

<!--
COLORS:

Background (black) : #1D1C1E

#90BFFE accent: #90BFFE

#FF4C7C accent: #FF4C7C

Text: #696969

Titles: white

Borders: #D1D1D1

-->


	



<div class="container-fluid" style="background-color: #1D1C1E; color: #696969">

<div class="col-sm-10 col-sm-push-12 mx-auto py-2">

<div class="row justify-content-center">


	



<!-- First icon -->

<i class="fal fa-gamepad-alt mt-2" style="font-size: 35px; text-shadow: 2px 0px 2px #90BFFE, -2px 0px 2px #FF4C7C; color: white"></i>

<!-- Name/title box -->

<div class="px-5 mx-4 text-uppercase" style="border: 2px solid #D1D1D1; box-shadow: 5px -2px 2px #90BFFE, -5px 2px 2px #FF4C7C; color: white; font-family: impact; font-size: 35px; text-shadow: 5px 0px 2px #90BFFE, -5px 0px 2px #FF4C7C; color: white; letter-spacing: 3px">

name / title

</div>

<!-- Second icon -->

<i class="fal fa-gamepad-alt mt-2 fa-flip-horizontal" style="font-size: 35px; text-shadow: 2px 0px 2px #90BFFE, -2px 0px 2px #FF4C7C; color: white"></i>

</div><!-- row -->


	



<!-- Second Row -->

<div class="row m-0 p-0 justify-content-between mt-2">

<!-- Icon -->

<div class="col justify-content-center mt-4">

<!-- Square images work better. If you want a suare shape remove [rounded-circle] -->

<img class="rounded-circle mx-auto" src="https://f2.toyhou.se/file/f2-toyhou-se/users/admin" style="height: 150px; width: 150px; border: 2px solid #D1D1D1; box-shadow: 5px -2px 2px #90BFFE, -5px 2px 2px #FF4C7C; padding: 5px">

</div>



<div class="col-sm-9 col-sm-pull-12 mt-2 ml-4 p-0" style="border: 2px solid #D1D1D1; box-shadow: 5px -2px 2px #90BFFE, -5px 2px 2px #FF4C7C;">

<div class="m-0 p-0 row">

<div class="col-sm-4 col-sm-push-8" style="border-bottom:1px solid #696969; heigth: 100%;">

<!-- Basic info -->

<div class="d-block text-center " style="text-shadow: 5px 0px 2px #90BFFE, -3px 0px 2px #FF4C7C; font-family: impact; color: white; font-size: 20px; letter-spacing: 3px">

<b>Basic Info</b>

</div>

<div class="justify-content-between">

<p class="" style="font-family: impact; text-shadow: -3px 0px 2px #FF4C7C; color: white"> Name:

<br> Age:

<br> Gender:

<br> Orientation:

<br> Job:

<br> Species:

</p>

<p class="text-right" style="text-shadow: 5px 0px 2px #90BFFE">

info

<br> info

<br> info

<br> info

<br> info

<br> info

</p>

</div>

</div><!-- col -->




<!-- Design Info -->

<div class="col-sm-4 col-sm-push-8" style="border-bottom:1px solid #696969">

<div class="d-block text-center " style="text-shadow: 5px 0px 2px #90BFFE, -3px 0px 2px #FF4C7C; font-family: impact; color: white; font-size: 20px; letter-spacing: 3px">

<b>Design info</b>

</div>

<div class="justify-content-between">

<p class="" style="font-family: impact; text-shadow: -3px 0px 2px #FF4C7C; color: white"> Race/ethinicity:  

<br> Build:

<br>  Height:

<br>Designer:

<br> Worth:

<br> Status

</p>

<p class="text-right" style="text-shadow: 5px 0px 2px #90BFFE">

info

<br> info

<br> info

<br> info

<br> info

<br> info

</p>

</div>

</div><!-- col -->



<!-- Quote -->

<div class="col-sm-4 col-sm-push-8 text-center" style="border-bottom:1px solid white">

<i class="fal fa-quote-left" style="color: white; text-shadow: 5px 0px 2px #90BFFE, -3px 0px 2px #FF4C7C; font-size: 30px; position: absolute; top: 5px; left: 5px"></i>

<!-- if the quote is too big change the  [margin-top: 40%] for better aligment-->

<p style="font-family: impact; font-size: 20px; margin-top: 40%">

A quote goes here

</p>

<i class="fal fa-quote-right" style="color: white; text-shadow: 5px 0px 2px #90BFFE, -3px 0px 2px #FF4C7C; font-size: 30px; position: absolute; bottom: 5px; right: 5px"></i>

</div><!-- col -->

</div><!-- row -->

</div><!-- row -->

</div><!-- row -->



<div class="row p-0 m-0 mt-2">

<div class="col-sm-8 col-sm-push-12 mt-2" style="border: 2px solid #D1D1D1; box-shadow: 5px -2px 2px #90BFFE, -5px 2px 2px #FF4C7C;">

<div class="row m-0 p-0">

<div class="col-sm-6 col-sm-push-12">

<p style="text-shadow: 5px 0px 2px #90BFFE, -3px 0px 2px #FF4C7C; font-family: impact; color: white; font-size: 18px; letter-spacing: 3px">Story</p>

<p style="height: 200px; overflow-y: auto;">

Write about your character's story here. This box scrolls Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.

</p>

<!-- this bar hides the scroll s little since it can't be edited. Scrolling with the mouse scroll works, but with the moouse pointer doesn't.

If you don't want the bar just remove the entire <div>-->

<div style="background-color: rgba(29, 28, 30, 0.9); position: absolute; height: 243px; width: 17px; right: 15px; top:0px">

 

</div>

<!-- remove above this line -->



</div><!-- col -->

<div class="col-sm-6 col-sm-pull-12">

<p style="text-shadow: 5px 0px 2px #90BFFE, -3px 0px 2px #FF4C7C; font-family: impact; color: white; font-size: 18px; letter-spacing: 3px; margin: 0px">Personality<br>

<span style="font-size: 12px; font-family: arial">

trait    •  

trait    •  

trait   

</span>

</p>

<p style="height: 162px; overflow-y: auto; margin: 0px">

Write about your character's story here. This box scrolls Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.

</p>

<!-- this bar hides the scroll s little since it can't be edited. Scrolling with the mouse scroll works, but with the moouse pointer doesn't.

You can hide the entire thing by making the opacity 1

If you don't want the bar just remove the entire <div>-->

<div style="background-color: rgba(29, 28, 30, 0.9); position: absolute; height: 193px; width: 17px; right: 15px; top:50px">

 

</div>

<!-- remove above this line -->

</div><!-- col -->

</div><!-- row -->

</div><!-- col -->



<!-- To use the video player get the URL at the end of a youtube link

Ex. https://www.youtube.com/watch?v=dQw4w9WgXcQ

get this part at the end: dQw4w9WgXcQ

Replace LINK with this

-->

<div class="col mt-4 ml-5" style="">

<iframe src="https://www.youtube-nocookie.com/embed/LINK?modestbranding=1" class="mt-4" style="width: 100%; border: 2px solid #D1D1D1; box-shadow: 5px -2px 2px #90BFFE, -5px 2px 2px #FF4C7C;">



</iframe>

</div>

</div><!-- row -->



<!--Please don't remove my c#FF4C7Cit ~-->

<div class="justify-content-center  mt-2">

<a href="https://toyhou.se/~forums/16.htmlcss-graphics/255000.nebula-s-codes">

<i class="fal fa-code tooltipster" style="text-shadow: 2px 0px 2px #90BFFE, -2px 0px 2px #FF4C7C; color: white" title="code by Nebular Numbat"></i>

</a>

</div>


	



</div><!-- content -->

</div><!-- background -->

RedPepper

OMG tysvmmm 😭💖💖👑👑 Life saver! Can't thank you enough! I really love this code! ^^

NebulaNumbat

Glad to help! ^^

Apocalypse_inferno

How do you change the border color, along with the shadow/glitch effect colors?

Terri_Sneak

rickrolled

Dyssomnia

THANK U FOR THIS, I'm using it already and I'm obsessed with it, it looks so cool ( ；∀；)

BirchBarks

omfg I love the effect, the entire code look amazing! Will totaly use someday (when I have a fitting character lakmdgladmfg) /gen

NebulaNumbat

Thank you! This code is one of my favorites ^^

INKTIME

I keep seeing codes and want to use one, but I don't know how. Do you think you could help me?TvT

NebulaNumbat

Sure!

1. First you need to get the code itself, I prefer using a link to a google drive, but some coders prefer using a tab/literature~
This specific one has a button called 'code' at the top of the page

2. Then you need an editing program. You can use notepadd++(offline) or circlejourney(site) You can also use the standard notepad on windows and save the file as .html (I mainly use circlejourney, since you can see the result live)

3. Paste the code there and edit the details. The majority of codes already have the places specifies (ex. name, age, gender, etc.) and don't need more input than that

4. Go into the character you want and go to Edit profile

5. There's a button called Disable WYSIWYG Remember to always disable it!

6. Copy your edited code and paste it there, remember to save

Hope this helps^^ (iunfortunetly I cannot put images rn, so I tried to explain it well)

INKTIME

this helps a lot thanks! ^v^

Solana_sunnix

sorry to bother! i did what it said but i cant get the youtube video to link to the player? edit; fixed :)

aribu

lmao i love the rickroll you "sneaked" in there