Custom CSS

Styling your page with your own CSS, the class names you can target, and what’s blocked.

Where: Your look → Fine tune → Custom CSS

CSS you write here only ever affects your own page; it’s scoped automatically, so it can’t reach the rest of yen.bio or anyone else’s page. Up to 20,000 characters. @import, javascript: URLs and a few other risky things are removed before it runs.

Useful class names

SelectorWhat it is
.profile-glassCards: the main card, link buttons, embeds and sections
.profile-identity-cardThe main card on Identity and Panel
.profile-linkLink buttons and tiles
.yen-icon-rowA row of icon-only links
.yen-icon-linkOne icon-only link
.profile-avatar-rootYour picture (and its decoration)
.profile-main h1Your name
.profile-chipThe small location, pronouns and join-date chips on Identity
.profile-audio-playerThe music player
.yen-user-contentThe body text of extra sections

Your colors are available as variables: var(--profile-accent), --profile-accent-2, --profile-text, --profile-muted, --profile-card-bg, --profile-radius and --profile-button-radius. Using them keeps your CSS in step with the palette and the day palette.

Related

Day palette

A second, lighter set of colors your page switches to by itself.

Publishing and drafts

Why changes don’t show until you publish, and how to undo or reset.

Still stuck?Ask in our Discord