–CSS PROFILE CUSTOMIZATION HELP FOR CHUB.AI —

Checked on 9.26.2025 ✓ | Created by @Kazra

Already familiar with HTML/CSS and just want the selector names? Check this link: CSS Selectors Index for Chub.AI

Overview:

Hey! This is a guide/tutorial for customizing your Chub.AI profile using custom CSS. In this document, I’ll provide you the style selectors for certain aspects on your Chub profile, the original styles for reference, and example styles applied. I also want to let it be known that my methods aren’t perfect, I learned CSS on my own – this is just what has worked for me.

--TABLE OF CONTENTS--

A. GENERAL PAGE SETUP –

B. PROFILE HEADER SECTION (PHS) –

C. CHARACTER CARDS – Note : Example character includes dark content (no graphic images)

D. WHAT SHOULD THE FINISHED CSS LOOK LIKE?-

E. TROUBLE SHOOTING-

A. GENERAL PAGE SETUP –

Checked on 9.26.2025 ✓

1A - PAGE BACKGROUND - working as of 9.26.2025 ✓

Style Selector: body::before

OG Styles: No background linked.

Example Styles (Credit to geral on Pixibay): {content:"" !important; position:fixed !important; top:0 !important; left:0!important; width:100%!important; height:100%!important; background-image:url('https://i.postimg.cc/yNbj6mGS/stars-2643089-1280.jpg') !important; background-size:cover !important; background-position:center !important; background-repeat:no-repeat !important; background-attachment:fixed !important; z-index:0 !important; pointer-events:none !important;}

2A - PAGE ALIGNMENT - working as of 9.26.2025 ✓

-NOTE: This is optional, if you’d like to center the PHS (Profile Header Section) above your bots.

Style Selector: .ant-col-lg-6

OG (forces PHS to left, displaying bots on right): {Display: block; flex: 0 0 25%; max-width: 25%;}

Modified Ver. 1 (PHS takes up whole width of screen above bots , text is not centered): .ant-col-lg-6{display: block !important; flex:0 0 100% !important; max-width: 100% !important;}

Modified Ver. 2 (PHS takes up whole width of screen above bots, text is centered): .ant-col-lg-6{display: block !important; flex:0 0 100% !important; max-width: 100% !important;}.text-left{text-align: center !important;}

B. PROFILE HEADER SECTION (PHS)–

Checked on 9.26.2025 ✓

1B - PROFILE PICTURE - working as of 9.26.2025 ✓

-NOTE: If you want to make your PFP larger than the original site style, I recommend linking to your picture even if it’s the same thing as Chub scales down quality for faster loading times. You can also link gifs to have an animated PFP.

Style Selector: .ant-avatar.ant-avatar-square.ant-avatar-image

OG Styles: {width: 100px; height: 100px; border-radius: 6px;}

Example Styles: { width: 220px !important; height: 220px !important; border-radius: 100%; border: dotted thistle 10px; box-shadow: 0 0 40px cadetblue; content: url(https://i.postimg.cc/h47pfnCf/image-2025-09-24-113557244.png) !important;}

2B - USERNAME - working as of 9.26.2025 ✓

Style Selector: h5,.ant-typography h5,h5.ant-typography,div.ant-typography-h5

OG Styles: {font-weight: 600;font-size: 18px;font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';}

Example Styles: {color: #20d387; font-weight: 200; font-size: 30px; font-style: oblique; font-family: fangsong;}

2B - 🤝 MUTUAL FOLLOWER - working as of 9.26.2025 ✓

-NOTE: These styles apply to both the “🤝 Mutual Follower” selector & the Character Genre Tags unless styles are applied to both individually.

Style Selector: .chub-css-override,.ant-tag

OG Styles: {font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'; font-size: 14px;}

Example Styles: {background-color: #510000 !important; font-family: system-ui; letter-spacing: 2px; color: chocolate; font-style: italic; border: 1px solid #424242; border-radius: 4px;}

3B - FOLLOWERS & FOLLOWING - working as of 9.26.2025 ✓

Style Selector: .mr-4

Example Styles: {color: #ffffff;font-size: 17px;text-decoration: overline;font-variant: unicase;background: darkred;}

4B - FOLLOW & BLOCK BUTTONS - working as of 9.26.2025 ✓

Style Selector: .ant-btn-variant-outlined

OG Styles: {border-color: #424242; background: #141414; font-size: 16px; height: 24px; padding: 0px 7px; border-radius: 4px;}

Example Styles: {border-color: transparent !important; background:darkred !important; font-family: fangsong !important; font-variant: small-caps !important; font-weight: 100 !important;}

C. CHARACTER CARDS –

Checked on 9.26.2025 ✓

Note: Example character includes dark content (no graphic images)

1C - CARD CONTAINERS - working as of 9.26.2025 ✓

-NOTE: To apply box-shadows/borders to this selector you must apply: “border: initial !important; box-shadow: initial !important;” to “.chats-list-container” & “.character-list-container”.

Style Selector: .ant-card-bordered, .ant-card

Example Styles: {background: linear-gradient(30deg, black, darkred);border-radius: 30px;box-shadow: inset 0px 0px 30px rgb(255 255 255 / 50%) !important;}[class*="chats-list-container"], [class*="character-list-container"] .chats-list-container, .character-list-container {border: initial !important; box-shadow: initial !important;}

2C - CARD TITLES & HEADERS - working as of 9.26.2025 ✓

-NOTE: Text-shadow & letter-spacing applied to “.ant-row.card-title-row” may also affect @Username link and the ♡ Favorites ↓ Downloads & Tokens text unless styles are applied to both individually.

[1 - Card Title &Downloads / Card Header Text--]

Style Selector: .ant-row.card-title-row

Example Styles: {color: pink; font-family: cursive; letter-spacing: 3px !important; font-variant: oldstyle-nums;}

[2 - Card Header Background--]

Style Selector: .ant-card-head

Example Styles: {background: #320057 !important; box-shadow: inset 0 0 20px coral !important;}

3C - CARD TAGLINES/QUOTES - working as of 9.26.2025 ✓

-NOTE: Text-shadow & letter-spacing also affect ♡ Favorites ↓ Downloads & Tokens text – unless styles are applied to both individually.

Style Selector: .quote-color

Example Styles: {color: #65adff; font-family: verdana; font-size: 18px !important; font-style: italic; letter-spacing: 1.8px;}

4C - ♡ FAVORITES ↓ DOWNLOADS & TOKENS - working as of 9.26.2025 ✓

Style Selector: .fake-ribbon

Example Styles: {color: #ffa8a8; font-size: 18px !important; font-variant: oldstyle-nums;}

5C - GENRE TAGS # - working as of 9.26.2025 ✓

Style Selector: .ant-tag

Example Styles: {background-color: #0b003f !important; color: skyblue; font-variant: all-small-caps; padding: 2px 6PX; font-size: 14px !important;}

6C - NSFW/FlAME SYMBOL TAG 🔥 - working as of 9.26.2025 ✓

Style Selector: .ant-tag.ant-tag-error

Example Styles: {color:transparent !important;background-image:url('https://media4.giphy.com/media/v1.Y2lkPTc5MGI3NjExOWZzYzVqanZiMTM1M3k3dHJnYjc5bXkzY3YxNW5vdWozZDlyaHUzaSZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9cw/3oKIPkHXpUP8lIO0AU/giphy.gif') !important;background-size: contain !important; background-repeat: no-repeat !important; background-position: center !important; width:40px !important; height:40px !important; border: none !important; transform: translateY(-20px) !important;}

7C - FAVORITES/HEART SYMBOL ♡ - working as of 9.26.2025 ✓

Style Selector: .anticon-heart

Example Styles: {color: transparent !important; background-image: url('https://media2.giphy.com/media/v1.Y2lkPTc5MGI3NjExZndud3RsZngzbGlycWd0cHE5ZTBucTFyeGxqcGd1b3pva2pma2thZSZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9cw/nkiSXYxB9yp6yN3tKt/giphy.gif') !important; background-size: contain !important; background-repeat: no-repeat !important; background-position: center !important; width:40px !important; height:40px !important; display: inline-block !important;}

D. WHAT SHOULD THE FINISHED CSS LOOK LIKE?–

The finished CSS for this will not be pretty, it should be enclosed in <style> brackets and all be on one line. Here are all the example styles added together, warning: it’s horrendous .

CSS:

C. TROUBLE SHOOTING –

Common Problems

“I applied a style to a selector, and no changes were made when I updated my profile. Why?”

There could be multiple reasons styles aren’t working.

First check: Did I accidentally delete a comma, curly bracket, or misspell something? If not, try adding “!important” to the end of the style you’re trying to enforce.

Example: {background-color: #510000 !important;}

If you tried that and it still doesn’t work, make sure all your text is on one line – no new lines!

If that doesn’t work, it may be something the site doesn’t allow to be altered. ):

“How do I make hoverable animations?”

These ones are fun, it makes the page feel more “alive” and less static.

First, pick the selector on the page you want to have a hover animation, for this example I’m picking “ .ant-card-bordered, .ant-card ”–these target the card containers so when you hover over a character card the hover animation will play.

STEP 1 –Set the initial state and transition:

.ant-card-bordered, .ant-card {transition: all 0.3s ease;}

STEP 2 – Set the the hovered state:

.ant-card-bordered:hover, .ant-card:hover {transform:translateY(-2px)scale(1.05); background:linear-gradient(135deg,#a03d5d,transparent,#a03d5d);}

^^^ Add :hover after the selector you’re targeting.

Conclusion:

Well, those are the basics of Chub.AI Profile CSS – you can do a lot more, these are just the options I’ve found that don’t break the page display (mostly). If you want to go beyond what I’ve mentioned here, you’ll need to mess around in DevTools by inspecting the profile page – which can be intimidating if you’re unfamiliar with web development.

If you found this document helpful, you should support me! (this took me over 12 hours 😭) ♡ - Kazra

Other Resources:

W3Schools Online - Where I learned CSS.

Inspect CSS Extension - Jokester Teto recommended this to others for real-time CSS editing.

Chub Profile Editor Extension - SteakedGamer created this helpful extension!