Overview of CSS Selectors for Content Designer

Explore the CSS selectors available for creating custom CSS styles for pages built with the Content Designer.

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 migrating a Classic Editor page with custom CSS to the Content Designer, the existing Classic Editor CSS will no longer apply after migration. Content Designer pages use a different rendering structure, so any required custom styles must be recreated using the selectors described below.
Selector Description
data-c13y-region Targets a named structural area of the page, such as a header.
data-c13y-component Targets a specific type of Content Designer block or component.
data-c13y-purpose Targets an element by what it does, such as a join action.
data-c13y-context-* Scopes styling rules by page type, space, device, or user group.
data-c13y-id Targets one specific block instance on a page.