Skip to content
Doras
Sign up free

Resources

CSS reference

Every ID, class and variable you can target with custom CSS on your page. It's generated from the code that renders your page, so it's always up to date.

How your CSS is applied

  • Your CSS is nested inside #root-profile, so it only affects your page. Write .block { … }, not #root-profile .block.
  • Every declaration in it gets !important added, so it wins over the theme. Rules you start with #root-profile yourself are left as written.
  • @keyframes work as normal. @import is only kept for fonts, from fonts.googleapis.com, fonts.bunny.net, use.typekit.net.
  • Use the theme variables below to match your theme's colors instead of hard-coding them.

Coming from the old Doras?

Most selectors from the original Doras still work. These are the ones that changed.

  • Very old pages scoped CSS to #user-root. It's now #root-profile, and rules are nested inside it for you.
  • The profile navigation (#base-navigation, #user-navigation-button, #user-navigation-content) and the affiliate branding (#affiliate-doras-branding-*) aren't on pages any more.
  • The all-posts blog block is now #BlogPostAll (it used to share #BlogPostSingle).
  • Rules for #profile-background and #user-navigation are still accepted, but nothing on the page has those ids.
  • New: every block has .block-type-<type>, most have .block, and headings use .FontHeading.

Theme variables

Set from your theme's settings. Use them like var(--primary-color).

  • --primary-colorcolors.primary
  • --primary-text-colorcolors.primaryText
  • --secondary-colorcolors.secondary
  • --secondary-text-colorcolors.secondaryText
  • --tertiary-colorcolors.tertiary
  • --background-colorbackground.color
  • --heading-text-colorcolors.headingText
  • --border-colorcolors.border
  • --corner-radiusdesign.cornerRadius
  • --gapdesign.itemSpacing
  • --shadowdesign.shadow
  • --border-widthdesign.borderWidth

Page

The parts every page has, around and above your blocks.

  • #root-profile<section>

    The whole page. Every rule you write is nested inside it.

  • #profile-picture<div>

    The wrapper around the profile picture.

  • #display-name<p>

    The display name.

  • #user-bio<p>

    The bio under the name.

  • #user-pronouns<p>

    The pronouns line.

  • #user-location<p>

    The location line.

  • #items<div>

    The list of blocks, below the heading.

  • #share-button<Button>

    The share button.

  • #doras-branding-root<div>

    The Doras branding at the bottom of the page.

  • .FontHeading

    Everything in the theme's heading font.

  • .FontBody

    Everything in the theme's body font.

  • .block

    Every block.

Blocks

Each block type and the hooks it renders. Replace <block-id> or <block-name> with your block's own.

blog_post_all

  • .block-type-blog-post-all

    Every block of this type.

  • .block-<block-id>

    One specific block, by its id.

  • #BlogPostAll<div>

    Same on every block of this type, so prefer a class.

blog_post_latest

  • .block-type-blog-post-latest

    Every block of this type.

  • .block-<block-id>

    One specific block, by its id.

  • #BlogPostLatest<div>

    Same on every block of this type, so prefer a class.

blog_post_single

  • .block-type-blog-post-single

    Every block of this type.

  • .block-<block-id>

    One specific block, by its id.

  • #BlogPostSingle<div>

    Same on every block of this type, so prefer a class.

carousel

  • .block-type-carousel

    Every block of this type.

  • .block-<block-id>

    One specific block, by its id.

  • #Carousel<div>

    Same on every block of this type, so prefer a class.

copy_link

  • .block-type-copy-link

    Every block of this type.

  • .block-<block-id>

    One specific block, by its id.

  • .<block-name>

    The block's name, with spaces as dashes.

  • [data-metadata-<name>]

    Custom data attributes you add in the block's settings.

  • #block<button>

    Same on every block of this type, so prefer a class.

  • #block-text<span>

    Same on every block of this type, so prefer a class.

div

  • [data-metadata-<name>]

    Custom data attributes you add in the block's settings.

divider

  • .block-type-divider

    Every block of this type.

  • .block-<block-id>

    One specific block, by its id.

  • #divider<div>

    Same on every block of this type, so prefer a class.

email

  • .block-type-email

    Every block of this type.

  • .block-<block-id>

    One specific block, by its id.

  • .<block-name>

    The block's name, with spaces as dashes.

  • [data-metadata-<name>]

    Custom data attributes you add in the block's settings.

  • #email-block<span>

    Same on every block of this type, so prefer a class.

  • #block-text<span>

    Same on every block of this type, so prefer a class.

form

  • .block-type-form

    Every block of this type.

  • .block-<block-id>

    One specific block, by its id.

  • .<block-name>

    The block's name, with spaces as dashes.

  • #Form<div>

    Same on every block of this type, so prefer a class.

  • #block<button>

    Same on every block of this type, so prefer a class.

  • #block-text<span>

    Same on every block of this type, so prefer a class.

fourthwall_products

  • .block-type-fourthwall-products

    Every block of this type.

  • .block-<block-id>

    One specific block, by its id.

  • #block-text<span>

    Same on every block of this type, so prefer a class.

  • #FourthwallProducts<div>

    Same on every block of this type, so prefer a class.

  • #fourthwall<a>

    Same on every block of this type, so prefer a class.

  • #store-button<span>

    Same on every block of this type, so prefer a class.

gallery

  • .block-type-gallery

    Every block of this type.

  • .block-<block-id>

    One specific block, by its id.

  • #gallery<div>

    Same on every block of this type, so prefer a class.

github_user

  • .block-type-github-user

    Every block of this type.

  • .block-<block-id>

    One specific block, by its id.

  • #github<img>

    Same on every block of this type, so prefer a class.

img

  • .block-type-img

    Every block of this type.

  • .block-<block-id>

    One specific block, by its id.

  • #uploaded-image<img>

    Same on every block of this type, so prefer a class.

kick

  • .block-type-kick

    Every block of this type.

  • .block-<block-id>

    One specific block, by its id.

  • #twitch-player<iframe>

    Same on every block of this type, so prefer a class.

link

  • .block-type-link

    Every block of this type.

  • .block-<block-id>

    One specific block, by its id.

  • .<block-name>

    The block's name, with spaces as dashes.

  • [data-metadata-<name>]

    Custom data attributes you add in the block's settings.

  • #block<button>

    Same on every block of this type, so prefer a class.

  • #block-text<span>

    Same on every block of this type, so prefer a class.

mediakit

  • .block-type-mediakit

    Every block of this type.

  • .block-<block-id>

    One specific block, by its id.

  • .<block-name>

    The block's name, with spaces as dashes.

  • #mediakit-*-*<a>

    Same on every block of this type, so prefer a class.

  • #mediakit-custom-*<div>

    Same on every block of this type, so prefer a class.

  • #mediakit<div>

    Same on every block of this type, so prefer a class.

podbean

  • .block-type-podbean

    Every block of this type.

  • .block-<block-id>

    One specific block, by its id.

  • #block-text<span>

    Same on every block of this type, so prefer a class.

  • #podbean<a>

    Same on every block of this type, so prefer a class.

rich_text_block

  • .block-type-rich-text-block

    Every block of this type.

  • .block-<block-id>

    One specific block, by its id.

  • .<block-name>

    The block's name, with spaces as dashes.

social_buttons

  • .block-type-social-buttons

    Every block of this type.

  • .<block-name>

    The block's name, with spaces as dashes.

  • [data-metadata-<name>]

    Custom data attributes you add in the block's settings.

  • #multiLinkFlex<div>

    Same on every block of this type, so prefer a class.

  • #multiLinkButton<button>

    Same on every block of this type, so prefer a class.

spotify

  • .block-type-spotify

    Every block of this type.

  • .block-<block-id>

    One specific block, by its id.

  • #spotify<iframe>

    Same on every block of this type, so prefer a class.

textblock

  • .block-type-textblock

    Every block of this type.

  • .block-<block-id>

    One specific block, by its id.

  • .<block-name>

    The block's name, with spaces as dashes.

  • #textblock<p>

    Same on every block of this type, so prefer a class.

throne_wishlist

  • .block-type-throne-wishlist

    Every block of this type.

  • .block-<block-id>

    One specific block, by its id.

  • .<block-name>

    The block's name, with spaces as dashes.

  • #block-text<span>

    Same on every block of this type, so prefer a class.

  • #ThoneWishlist<div>

    Same on every block of this type, so prefer a class.

  • #throne<a>

    Same on every block of this type, so prefer a class.

  • #store-button<span>

    Same on every block of this type, so prefer a class.

tidal

  • .block-type-tidal

    Every block of this type.

  • .block-<block-id>

    One specific block, by its id.

  • #tidal<iframe>

    Same on every block of this type, so prefer a class.

twitch

  • .block-type-twitch

    Every block of this type.

  • .block-<block-id>

    One specific block, by its id.

  • #twitch-player<iframe>

    Same on every block of this type, so prefer a class.

twitter_feed

  • .block-type-twitter-feed

    Every block of this type.

  • .block-<block-id>

    One specific block, by its id.

  • #twitterTimeline<div>

    Same on every block of this type, so prefer a class.

vrcdn_live

  • .block-type-vrcdn-live

    Every block of this type.

  • .block-<block-id>

    One specific block, by its id.

  • #vrcdn_live-player<iframe>

    Same on every block of this type, so prefer a class.

  • #vrcdn-player<div>

    Same on every block of this type, so prefer a class.

youtube

  • .block-type-youtube

    Every block of this type.

  • .block-<block-id>

    One specific block, by its id.

  • #youtube-live-player<iframe>

    Same on every block of this type, so prefer a class.

youtube_video

  • .block-type-youtube-video

    Every block of this type.

  • .block-<block-id>

    One specific block, by its id.

  • #youtube-video<img>

    Same on every block of this type, so prefer a class.

youtube_video_latest

  • .block-type-youtube-video-latest

    Every block of this type.

  • .block-<block-id>

    One specific block, by its id.

  • #youtube-video-latest<img>

    Same on every block of this type, so prefer a class.