❖ Make sure Disable Auto-Formatting is checked when you copy/paste the code into your post.

❖ You can take a free personality test for your character at 16personalities to get the information you'll need.

❖ Once you get the type and percentages, you'll need to input them into the code. Now, the way I did the percentages was to go by the entire scale. For example, instead of saying that Finn is 74% Feeling, I put in that he was 26% Thinking, just to give the sliders a little bit of variety. Think of it as if the 74% is coming from the other end. This is the "guide" I went by:

Extraversion <---> Introversion
Sensing <---> Intuition
Thinking <---> Feeling
Judgment <---> Perception
Assertive <---> Turbulent
Of course, if I'm not making any sense, then go ahead and insert the numbers however you like.

❖ Please keep all of the text lowercase! I mean, it shouldn't break the code if you don't, but it might look a little weird. Don't worry, everything will show up in caps like above.

❖ If you type too long of a word on the top or bottom of the gif, the text may not want to center. You can (usually) fix this by looking at the start of that piece of code and finding the part that says text-align: center;. Change center to right and that should fix it.

❖ If you have any problems, please leave a comment! I'll help you out.

---

Ctrl+F & Replace:
❖ PERCENT - Percentage number for the trait. (These aren't in the same codes as the traits, so just keep track of which order you put them in.)
❖ TRAIT - Extraverted? Introverted? Etc. (Again, not in the same code as the percentages. Keep track of the order.)
❖ TYPE LETTERS - Ex: ISFJ-A. I left out the dash because aesthetic.
❖ TYPE WORD - Defender? Entertainer? Etc.

❖ NAME - Character name.
❖ CANON - Canon name.

❖ BACKGROUND_URL - Background image for the box. I used one from Transparent Textures. If you do the same, be sure to just copy the image url. We'll get to colors down below.
❖ GIF_URL - Image in the center.
❖ URL - Link url.
❖ LINK - Link name. If you're also an aesthetic stickler, you can put the credit in one of the links on the table and remove the extra bit at the bottom. I just wanted to leave as much space for links as possible for you guys.

---

rgba(250,250,250,0.9) text color
rgba(0,0,0,0.3) text shadow
#b8a67d card background
#8f8060 borders
#756a52 percentage and link backgrounds