> ## Documentation Index
> Fetch the complete documentation index at: https://docs.curator.interworks.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Custom Styles

> Add custom CSS and HTML head inserts to your Curator theme for advanced styling and third-party integrations.

export const BackendNavPath = ({levelOne, levelTwo, levelThree, tab, section}) => {
  const levels = [levelOne, levelTwo, levelThree].filter(Boolean);
  const lastLevel = levels.length ? levels[levels.length - 1] : '';
  return <span>
      In the <a href="/setup/installation/linux_installation">backend of Curator</a> using the left-hand navigation,
      navigate to the
      {levelOne && <strong>{" " + levelOne}</strong>}
      {levelOne && levelTwo && " > "}
      {levelTwo && <strong>{levelTwo}</strong>}
      {levelTwo && levelThree && " > "}
      {levelThree && <strong>{levelThree}</strong>} page.
      {(tab || section) && <>
          {" "}On the {lastLevel} page
          {tab && <> click the <strong>{tab}</strong> tab</>}
          {tab && section && " and"}
          {section && <> expand the <strong>{section}</strong> section</>}.
        </>}
    </span>;
};

Curator supports injecting custom CSS and HTML into your site through the theme settings. This is useful for adding
custom fonts, third-party scripts, or styling overrides that go beyond the built-in theme options.

<Note>The code in this section is not supported by the Curator team and will need to be self-managed.</Note>

## Enabling Custom Styles

1. <BackendNavPath levelOne="Settings" levelTwo="Curator" levelThree="Themes" tab="Global" section="Custom" />
2. Toggle on **Enable Custom Styles (CSS / HTML inserts)**.
3. Click "Save" to apply your changes. A new **Custom Styles** tab will appear in the theme editor.

## Using the Custom Styles Tab

Once the toggle is enabled, the **Custom Styles** tab provides two code editors:

* **Head Insert** — A code editor for custom HTML that is inserted into the `<head>` section of every page. Use this
  for JavaScript, external libraries, fonts, or any other tags that belong in the document head.
* **Custom Stylesheet** — A code editor for custom CSS that is appended to the end of your compiled theme stylesheet.
  Use this for all custom page styles. Because it is appended last, these styles will override any default theme styles.

## Fallback Behavior for Secondary Themes

If a secondary theme (one that is not the Global Theme) does not have **Enable Custom Styles** toggled on but does
have **Use Global Theme for Defaults** enabled, Curator will check the Global Theme. If the Global Theme has custom
styles enabled, the secondary theme will inherit the Global Theme's custom CSS. The same fallback does not apply to
the Head Insert, which is resolved through group overrides independently.
