Add additional Background Colors to Content Elements

PageTsConfig

The easiest way to add new colors to the selector in the backend is by adding them through PageTsConfig, as you would extend any form in the TYPO3 backend.

You can read more about PageTsConfig in the official TYPO3 Documentation. https://docs.typo3.org/typo3cms/TSconfigReference/UsingSetting/Index.html#page-tsconfig

TCEFORM {
    tt_content {
        background_color_class {
            addItems {
                red = Red
            }
        }
    }
}

SCSS

$frame-backgrounds: (
  red: (
    background: #ff0000,
    link-color: #ffeeee,
    link-hover-color: #ffffff
  )
);

TypoScript Constants

plugin.bootstrap_package.settings.scss {
    frame-backgrounds = (red:(background: #ff0000, link-color: #ffeeee, link-hover-color: #ffffff))
}

NOTE

By default the background colors primary, secondary, light and dark are always added. Whatever you set frame-backgrounds to it will be added to the default setting. You can also overwrite the default ones. In the end, both settings will be merged and then processed.

Please be also aware, that multiple new colors need to be comma seperated in one line in the TypoScript Constants.

WARNING

You need to add all the properties of the frame background. The properties background, link-color and link-hover-color are required! If you miss one of them you could end in a compilation error.