Code Collection Directory

(Reminder that the codes provided are all base codes. You are free to further modify them/use as a reference if you know how)
Also note that codes may not be provided for every single element. You may look in the list of known universal class IDs for the ID of an element, then search up on Google, look in w3schools, or ask platforms like ChatGPT on how to create code. And of course, you may read the guide already provided.
If there is code that you'd like to see but do not find here, it may be in resources!.

Class IDs/Elements

• About Class IDs on the JAI site
• How to Find Class IDs (Inspect/Inspect Element) on PC
• Known universal class IDs

Profile Card

• No gradient for profile card
• No round corners for profile card
• Centered pfp, username, and follower count
• Centered Badges
• Follow Button

Bot Card

• Bot card preview text
• Bot card background color, gradient, or image/gif
• Transparent bot card
• Bot card custom border
• No round corners for bot cards
• Bot card specific overlays/filters
• Chat count ribbon color
• Changing the color of or hiding the star in bot cards
• Base code for the line divider on bot cards
• Tags on the bot card

Profile Page

• Page overlay/filter
• Changing the star for the footer
• Adding a page doll to your profile page (corner icons/images)
• Total Characters
• Tags menu

Interactables

• Image as Button
• Button base code (originally 'simple white button')
• Drop down text/expandable section in bio (Details)

Text

• Custom fonts using web safe fonts
• Text properties (font-size, color, etc...)
• 'Glow' effect (text-shadow or box-shadow)

Images

• Image overlays/filters (for all images or for bot images only, with hover action)
• Images in rows/columns (putting images in tables)
• Replacing pfp and 'public characters' with a gif or image
• Image with fading parts (code default written for bot images)
• Image masks (custom image shape) using clip-path

Misc

• Gradient patterns
• Media Query (Device-specific styling)
• ::before and ::after (Adding content , like text, to existing elements)

For templates, go here! More will be added soon.

Updated on: 01/08/2025