Custom CSS and Markdoc partials

Two settings let you go beyond Theme. Custom CSS restyles your API Portal with your own stylesheet, and Markdoc Partials let you write content once and reuse it on every product's Product Overview. Both are available on plans that include them. For the rest of the portal, see the API Portal overview.

How do you add custom CSS to your API Portal?

Open Settings, Portal settings, Custom CSS. Write CSS in the editor or load a file with Upload, then choose Save Changes. The portal adds your stylesheet after its own, so your rules apply on top of the theme.

1. Open Settings, Portal settings, Custom CSS.
2. Write your CSS in the editor, or choose Upload to load a .css file into it.
3. Fix any errors listed under the editor. Save Changes stays disabled while there are errors.
4. Choose Save Changes. It enables once the CSS has changed.

Test a change on your portal after you save it. A broad rule can restyle more than you expect.

Which class names can you target?

Target the portal's own class names. The table lists stable ones for the main regions. Open /kitchen_sink/css on your portal for a mock page labelled with region names.

Which colours can you change with custom CSS?

Change the colour variables the theme does not set. The brand colours and button text colours come from Portal, Theme and are applied on the page itself, so they outrank your stylesheet. Change those in Theme.

The other colour variables are defined for the portal's light theme. Override them with the same selector, :root[data-theme='light']. A plain :root rule is less specific and has no effect.

The Colors block on /kitchen_sink lists every variable with a swatch of its current value. This example changes body text and the page background, and rounds the cards:

:root[data-theme='light'] {
  --portal-body-text-color-primary: #1a1a2e;
  --portal-background-color-secondary: #f7f5ff;
}

.portal-card {
  border-radius: 12px;
}

What are Markdoc partials?

Markdoc partials are reusable blocks of Markdoc that you write once and use on any product's Product Overview tab. Each variable you write with a dollar sign, such as $contactEmail, becomes a field that each product fills in with its own value.

You edit them in Settings, Portal settings, Markdoc Partials, with a Preview beside the Markdoc Editor. On a product's Product Overview tab, you pick a partial and enter a value for each of its variables. Variables that start with $product. do not become fields.

How do you create and edit a Markdoc partial?

Pick a partial in Select Partial Template, or choose Add New and give it a name. Edit it in the Markdoc Editor, check the Preview, then choose Save Changes. Adding, renaming, deleting and importing change the list in front of you. Save Changes stores it.

Is customization available on every plan?

No. Both settings depend on your plan, and they behave differently when your plan does not include them.

Troubleshooting

Where to next