Custom CSS
Swagger Portal lets you apply custom Cascading Style Sheets (CSS) to your consumer portal to override default styles and match your brand. You manage custom CSS from the Appearance tab in Portal Configuration.
Enabling and disabling custom CSS
To enable or disable custom CSS, do the following:
On the navigation pane, select Swagger Catalog, then select Swagger Portal.
Select Portal Configuration.
On the Appearance tab, turn on or turn off the Custom CSS toggle.
Note: The Apply Changes button becomes active whenever you change the toggle state from its last published value. Returning the toggle to its originally published state disables the button again.
When custom CSS is disabled, the Appearance tab shows the Font and Accent Color settings together with an Appearance Settings Preview. When you enable custom CSS, the CSS editor appears.
Writing custom CSS
To add custom CSS to your portal, do the following:
On the Appearance tab, turn on the Custom CSS toggle.
In the Custom CSS editor, enter your CSS rules. Each rule must begin with one of the stable
.ap-*selectors listed in the Available selectors table.To target dark mode, prefix any selector with
.dark, for example.dark .ap-topbar. This matches the portal's dark mode toggle, not the operating system setting.Select Apply Changes to publish your CSS to the live portal.
Note: The CSS editor has a 100,000-character limit. The current character count appears in the bottom-right corner of the editor. If your CSS exceeds this limit, validation errors appear and you cannot apply the changes until you reduce the CSS size.
CSS validation
Swagger Portal validates your CSS as you type. The editor displays one of the following states:
Validating. The portal is validating your CSS.
CSS is valid. Your CSS contains no errors and is ready to apply.
Validation errors. One or more lines contain errors. Each error shows the line number and a description. Correct all errors before applying changes.
Reverting changes
To discard your unsaved edits and restore the last published CSS, do the following:
In the Custom CSS section, select Revert changes.
The editor reverts to the CSS that was last applied to the live portal. This action cannot be undone.
Applying changes
To publish your CSS changes to the live portal, do the following:
Confirm that the editor shows CSS is valid.
In the top-right corner, select Apply Changes.
The Apply Changes button is active only when you have unsaved changes. If the button appears disabled, your current settings match the last published version of the portal.
Available CSS selectors
Use the following stable selectors in your CSS rules. Each rule must begin with one of these selectors. For dark mode variants, prefix any selector with .dark.
Selector | Targets |
|---|---|
| Consumer top bar |
| Consumer top bar |
| Consumer top bar |
Note: The table above shows a placeholder set of selectors based on the design. Replace these with the full list of supported selectors from the product before publishing.