Skip to content

IvaBoard launches on 13 November 2026. Buying opens on launch day.

Join the waitlist
Join the waitlist

Style your portal with your own CSS

3 min read
Published
Updated
Topic
Portal and branding

If the colour and layout settings are not enough, add your own CSS. It changes the look of your portal's pages only. It never changes the console, your emails or the feedback widget.

Who can use it

Custom CSS is part of the White-label plan: Growth, Scale and the Lifetime White-label plans. An owner, an admin or a product manager can add, change or remove it.

Without white-label, the Custom CSS section on the Branding page explains what it adds and links to the pricing page. If your workspace later leaves white-label, the CSS you saved keeps working. You can read it and remove it, but you cannot change it.

Add your CSS

  1. Select Product settings in the sidebar.
  2. Select Branding in the settings list.
  3. In the Custom CSS box, type your rules.
  4. Select Save custom CSS.
Console sidebar with Product settings marked 1.
Product settings list with Branding marked 2.
Custom CSS box marked 3 and Save custom CSS marked 4.

The box shows how many of the 16,384 bytes you have used. Your portal uses the new CSS straight away.

What you can write

  • Use :root for variables. Name your own with --x-, such as --x-brand.
  • Use body for the page background.
  • Use @media for dark mode (prefers-color-scheme), reduced motion, and narrow screens (min-width and max-width).

What is not allowed

  • Images, fonts and anything loaded from a file or an address: url(), @import and @font-face.
  • Animations: @keyframes.
  • Positioning and moving things: position: fixed or absolute, top, left, transform and filter.
  • !important, nested rules and the < character.

If your CSS breaks one of these rules, the editor lists the problem under Problems to fix, with its line and column. Select a problem to go to that place. Fix every problem, then save again.

Protected parts

Your rules cannot restyle the notices and the footer directly. Keyboard focus always shows a ring. If you hide a whole section that holds them, they stay hidden too, so look at your portal after you save.

Important

Custom CSS replaces the contrast checks that the colour settings give you. Checking that your text stays readable is up to you. Your portal's page structure can change in future updates, so keep your CSS simple.

Remove your CSS

  1. Select Product settings in the sidebar.
  2. Select Branding in the settings list.
  3. Select Remove custom CSS.
  4. Select Remove custom CSS permanently in the dialog.
Console sidebar with Product settings marked 1.
Product settings list with Branding marked 2.
Remove custom CSS button marked 3 beside Save custom CSS.
Remove custom CSS dialog with Remove custom CSS permanently marked 4.

Your portal goes back to its normal look straight away. The CSS is deleted, so copy it first if you want to keep it.

Example

For example, Acme Notes wants rounder cards. Sam types .card { border-radius: 12px; } in the Custom CSS box and selects Save custom CSS.

Save to list