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
| 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
| 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
| 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
| 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
| About card |
.profile-info-box, .word-break |
| Pet cards |
.pet-card, .pet-card-image |
Comments
| 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
| 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
| 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
| 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