Custom CSS
Updated on 28th Jul, 2024
Utilize custom CSS to further enhance your profiles aesthetics and style. Please know that this isn't a full guide on how to use CSS, but a cheat sheet of selectors to help you get started writing your own CSS.
Color variants
Using your color palette, we've automatically assigned them as variants for you to use across your custom CSS to help integrate further with your existing styles.
var(--primary) /* Button background */ var(--primary-text) /* Button text */ var(--secondary) /* Accent color */
Heading Section
Selectors for each of the options in your heading section. With the current selectors, you can modify your profile picture, display name, and biography.
Heading
#profile-heading { /* your styles */ }
Profile picture
#profile-picture { /* your styles */ }
Display name
#display-name { /* your styles */ }
Biography
#user-bio { /* your styles */ }
Items
All your block content is wrapped in a section labeled as items
. With this you can modify how parent of the blocks are rendered
#items { /* your styles */ }
Block
Block type | Selector(s) | Description |
---|---|---|
Link block | #block .title-stringed | Every link block has the ID of block helping you select them all. You can also the specify which block by going off the title of it as it's a "stringified" class. Example: If you have a block with the label My Block , the block will include the class my-block . |
Email block | #email-block .title-stringed | Every link block has the ID of block helping you select them all. You can also the specify which block by going off the title of it as it's a "stringified" class. Example: If you have a block with the label My Block , the block will include the class my-block . |
GitHub card | #github | The GitHub card is an image, with this selector being the ID of the image element |
Image | #uploaded-image | Specifically for images that are blocks, not every image on your page like icons, etc |
Mediakit | #mediakit | Selects the parent of the mediakit |
Mediakit Connections | #mediakit-platform-username | Selects specific sections of the mediakit. Examples: #mediakit-twitch-tommertyboi / #mediakit-youtube-tomatdoras |
Podbean | #podbean | |
Spotify | #spotify | |
Text block | #textblock .title-stringified | |
Twitch (link block) | When you're not live and your Twitch block turns into a standard button, this acts the same as the Link block | |
Twitch (live embed) | #twitch-player | Note that this is an iframe, so there's not much possible |
YouTube (link block) | When you're not live and your YouTube block turns into a standard button, this acts the same as the Link block | |
YouTube (live embed) | #youtube-live-player | Note that this is an iframe, so there's not much possible |
YouTube (video) | #youtube-video | Note that this is an iframe, so there's not much possible |
YouTube (latest video) | #youtube-video-latest | This is an image of the thumbnail |
Rich text block | .richText | Selects the parent of the rich text block |
Mutli link | .multiLinkFlex - .multiLinkButton | Selects the parent of a multi link, or the buttons inside |
#block { /* your styles */ }; #block.my-block:hover { /* your styles */ }