Apply Custom CSS in the Content Designer

Learn how to apply custom CSS in pages created using the Content Designer to customize your pages.

Employee App
Staffbase Intranet

Custom CSS allows you to customize the appearance and layout of pages created with the Content Designer. You can use custom CSS in the following scenarios:

  • Creating a new page with the Content Designer.
  • Migrating a page created with the Classic Editor that already includes custom CSS to the Content Designer.
When you migrate a page from the Classic Editor to the Content Designer, the existing Classic Editor CSS does not apply to the migrated page. Content Designer pages use a different rendering structure. For this reason, the CSS styles must be recreated using Content Designer-specific selectors.

The Content Designer supports only CSS selectors based on data-c13-* attributes. Selectors that depend on the page’s internal HTML structure, such as internal class names, IDs, or positional selectors like:nth-child(), are ignored. This ensures your custom CSS remains compatible, even as the underlying HTML changes over time.

Using custom CSS can result in undesired formatting or styling. Apply custom CSS only if you’re familiar with it, and always preview your page’s appearance after making changes.

Prerequisite:

  • You are an administrator in the Staffbase Studio.

  1. In the Studio, navigate to Settings > Branding > Intranet.

  2. Under Advanced Settings, in Custom CSS, select the Content Designer tab.

  3. Add CSS rules that target the supported selectors.

  4. Click Save.

You have now applied custom CSS in the Content Designer.