Profile CSS Guide

Advanced profile CSS is saved only for the main profile page and is compiled into your profile scope. Use :scope, .profile-theme, or .profile-theme-shell for the profile shell itself. Use body, html, or :root for the browser page while your profile is open.

External CSS URLs can be imported from the Theme editor. Imported CSS is copied into the editor after unsupported parts are removed; live @import links are not kept.

Page and Layout

Target	Selectors
Page background	`body`
Profile shell	`:scope`, `.profile`, `.profile-theme`, `.profile-theme-shell`, `.profile-theme-shell--custom`
Banner	`.profile-theme-banner`
Layout wrappers	`.profile-page-flow`, `.profile-layout`, `.profile-sidebar`, `.profile-main`, `.profile-module`
Layout mode classes	`.profile-theme-shell--profile-layout-right-sidebar`, `.profile-theme-shell--profile-layout-stacked`

Profile Modules

Module	Class Selector	Data Selector
Profile card	`.profile-module--profile-card`	`[data-profile-module="profile-card"]`
Friends	`.profile-module--friends`	`[data-profile-module="friends"]`
Groups	`.profile-module--groups`	`[data-profile-module="groups"]`
Latest uploads	`.profile-module--uploads`	`[data-profile-module="uploads"]`
Recent bookmarks	`.profile-module--bookmarks`	`[data-profile-module="bookmarks"]`
Recent pools	`.profile-module--pools`	`[data-profile-module="pools"]`
Blogs	`.profile-module--blogs`	`[data-profile-module="blogs"]`
About	`.profile-module--about`	`[data-profile-module="about"]`
Interests	`.profile-module--interests`	`[data-profile-module="interests"]`
Comments	`.profile-module--comments`, `.profile-module--comments-lock`	`[data-profile-module="comments"]`

Profile Card and Actions

Target	Selectors
Avatar	`.profile-avatar-box`, `.profile-avatar-img`, `.global-media-dynamic`
Name and handle	`.profile-username`, `.profile-handle`, `.admin-badge`
Name history	`.name-history-dropdown`, `.name-history-list`, `.name-history-header`
Profile actions	`.profile-actions`, `.profile-action-link`, `.account-action-inline`, `.btn-wide`, `.btn-link`, `.button`
Profile notices	`.alert-banned`, `.alert-deleted`, `.blocked-profile-card`, `.blocked-profile-actions`

Sidebar Grids and Thumbnails

Target	Selectors
Sidebar boxes	`.sidebar-friends-box`, `.sidebar-header-small`, `.friends-grid-small`, `.profile-herd-grid`
Friend and group icons	`.friend-avatar-small`, `.profile-herd-thumb`
Upload, bookmark, group, and pool thumbnails	`.profile-thumb-link`, `.profile-thumb-container`, `.profile-thumb-dynamic`, `.profile-thumb-placeholder`

About and Pets

Target	Selectors
About card	`.profile-info-box`, `.word-break`
Pet cards	`.pet-card`, `.pet-card-image`

Comments

Target	Selectors
Comments section and form	`.profile-comments-section`, `.reply-box`, `.reply-box-minimal`, `.reply-box-disabled-fields`, `.content-header`, `.bbcode-help-link`, `.comment-form-actions`, `.comment-form-actions__right`
Comment card	`.post-container`, `.post-sidebar`, `.post-content`, `.post-header`, `.post-body`
Comment author	`.post-author-avatar`, `.post-author-handle`, `.post-author-join`, `.blocked-user-label`
Comment links and buttons	`.post-link`, `.post-quote-link`, `.post-edit-link`, `.post-history-link`, `.post-report-link`, `.post-watch-link`, `.post-admin-btn`, `.comment-delete-btn`
Comment body and state	`.comment-content`, `.comment-meta`, `.post-citations`, `.no-comments`, `.notice-hidden`, `.notice-hidden-user`, `.notice-blocked-user`, `.notice-locked`, `.blog-locked-badge`, `.restore-message`

BBCode Content

Target	Selectors
Quotes and embeds	`.quote-box`, `.bbcode-embed-card`, `.bbcode-embed-card-shell`
Thread embeds	`.bbcode-thread-topline`, `.bbcode-thread-title`, `.bbcode-thread-meta`, `.bbcode-thread-preview`, `.bbcode-thread-chip`
Profile embeds	`.bbcode-profile-title`, `.bbcode-profile-chip`, `.bbcode-profile-handle`, `.bbcode-profile-preview`, `.bbcode-profile-meta`, `.bbcode-profile-avatar-fallback`
External embeds	`.bbcode-external-title`, `.bbcode-external-provider`, `.bbcode-external-description`

Common Utility Classes on Profiles

Target	Selectors
Spacing and layout	`.mt-5`, `.mt-10`, `.mt-20`, `.mb-5`, `.mb-10`, `.mb-15`, `.flex`, `.flex-1`, `.flex-wrap`, `.gap-5`, `.float-right`, `.inline`, `.w-full`
Text	`.font-small`, `.font-bold`, `.small`, `.text-gray`, `.text-light-gray`, `.text-green`, `.text-red`, `.text-dark-red`
Button states	`.secondary`, `.success`, `.warning`, `.cursor-not-allowed`

Elements

You can also target normal elements inside the profile, such as a, button, textarea, table, tr, td, h2, h3, p, small, and img.

Examples

Effect	CSS
Glow all modules	`.profile-module { box-shadow: 0 0 8px #ff66cc; }`
Square avatar	`.profile-avatar-img { border-radius: 0; }`
Fixed page background	`body { background-attachment: fixed; }`
Page grain overlay	`body::before { content: ""; position: fixed; inset: 0; pointer-events: none; }`
Responsive profile CSS	`@media (max-width: 700px) { .profile-layout { grid-template-columns: 1fr; } }`
Custom animation	`@keyframes floaty { to { transform: translateY(4px); } } .profile-module { animation: floaty 2s alternate infinite; }`
Extra Google Font	`@import url("https://fonts.googleapis.com/css2?family=Bungee&display=swap"); .profile-username { font-family: "Bungee", cursive; }`
Style comments module	`.profile-module[data-profile-module="comments"] { transform: rotate(-1deg); }`

Limits

@media, @supports, @container, and @keyframes are allowed and scoped.
@import is only kept for normalized Google Fonts CSS URLs from https://fonts.googleapis.com/css2. Other imports, @font-face, javascript: URLs, data: URLs, HTML tags, and <style> blocks are removed.
position: fixed is only kept for page pseudo-element overlays such as body::before and body::after.
Unsupported declarations are dropped without blocking the rest of the stylesheet.

Close Window