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 */
}