Theming

All frontend widgets share a single stylesheet, Resources/Public/Css/widget.css. Every visual element is namespaced under the .cb- CSS prefix. Colours, spacing, and typography are expressed as CSS custom properties on the .cb-widget scope so hotels and agencies can re-theme without forking the extension.

This page is a theming cookbook: design tokens, configuration layers, appearance modes, and practical examples.

Architecture overview

---

Theming is applied in layers (lowest to highest priority):

1. Default CSS — widget.css ships with the extension and defines all --cb-* tokens and component rules.
2. Site settings / TypoScript — global theme.accent, theme.accentContrast, and theme.radius are injected as inline styles on the widget wrapper (see Reference).
3. Backend Site CSS overrides — per-site CSS from Tools → CASABLANCA Booking → Configuration → Theming, stored in the theme_css database field and injected as inline <style> inside each widget (see Layer 4 below).
4. FlexForm appearance — per content element: default, inherit, or compact (outer chrome only, not colours).
5. Agency CSS — override --cb-* tokens in the sitepackage stylesheet.
6. Fluid overrides — replace templates, partials, or layouts via plugin.tx_casablancabooking.view.*RootPaths.

JavaScript (widget.js) is always loaded. CSS can be disabled when the sitepackage provides its own styling (see Disabling bundled CSS).

CSS design tokens

---

All tokens are declared on .cb-widget. Override them in your sitepackage by scoping to the widget class or a page wrapper:

.cb-widget {
    --cb-accent: #0a6e5e;
    --cb-accent-contrast: #ffffff;
}

Typography and layout

Token	Default	Used for
--cb-font-family	inherit	Base font for all widget text
--cb-radius	6px	Buttons, inputs, calendar cells
--cb-card-radius	8px	Room/package cards, detail images
--cb-gap	0.75rem	Grid and form field spacing
--cb-space	1.25rem	Outer widget padding (compact overrides)
--cb-border-color	#d9d9d9	Widget border, inputs, room blocks

Base colours

Token	Default	Used for
--cb-bg	#ffffff	Widget background
--cb-fg	#1a1a1a	Primary text
--cb-muted	#6b6b6b	Labels, hints, secondary text
--cb-surface	#f3f3f3	Calendar sidebar background
--cb-input-bg	#ffffff	Form inputs and selects
--cb-focus-ring	var(--cb-accent)	Focus outline on inputs
--cb-error	#b42318	Error messages

Accent and buttons

Token	Default	Used for
--cb-accent	#8b1e1e	Primary brand colour (CASABLANCA red)
--cb-accent-contrast	#ffffff	Text on accent buttons
--cb-button-bg	var(--cb-accent)	Primary button background
--cb-button-fg	var(--cb-accent-contrast)	Primary button text
--cb-button-radius	var(--cb-radius)	Button corner radius
--cb-button-padding	0.625rem 1.25rem	Primary button padding

Cards and prices

Token	Default	Used for
--cb-card-bg	var(--cb-bg)	Card background
--cb-card-border	var(--cb-border-color)	Card border
--cb-card-shadow	0 1px 3px rgba(0,0,0,0.06)	Card elevation
--cb-price-fg	var(--cb-accent)	Price highlights
--cb-price-size	1.375rem	Card price font size

Calendar availability states

Token	Default	Used for
--cb-state-available-bg	#e9f5ea	Available day background
--cb-state-available-fg	#1f6a2a	Available day text
--cb-state-restricted-bg	#fff4d9	Restricted day background
--cb-state-restricted-fg	#8a5a00	Restricted day text
--cb-state-no-arrival-bg	#eceff3	No-arrival day background
--cb-state-no-arrival-fg	#4a5568	No-arrival day text
--cb-state-unavailable-bg	#f5e6e6	Unavailable day background
--cb-state-unavailable-fg	#8a2a2a	Unavailable day text

Calendar interaction

Token	Default	Used for
--cb-stepper-bg	#e8e8e8	Occupancy stepper row background
--cb-stepper-btn-bg	#dddddd	Stepper +/- buttons
--cb-selection-bg	#f5d547	Selected date range background
--cb-selection-fg	#1a1a1a	Selected date range text
--cb-enquiry-bg	var(--cb-selection-bg)	Enquiry button background
--cb-enquiry-fg	var(--cb-selection-fg)	Enquiry button text
--cb-past-bg	#ececec	Past day cell background
--cb-past-fg	#aaaaaa	Past day cell text
--cb-past-mark	#bbbbbb	Past day strike-through mark

Offer selection sidebar

Token	Default	Used for
--cb-offer-bg	#ffffff	Offer row background
--cb-offer-border	#e2e2e2	Offer row border
--cb-offer-selected-bg	#fffbea	Selected offer background
--cb-offer-selected-border	#c9a900	Selected offer border
--cb-clear-bg	#ffffff	Date-clear button background
--cb-clear-fg	#333333	Date-clear button icon
--cb-clear-hover-bg	#f0f0f0	Date-clear button hover

Configuration layers in detail

---

Layer 1: Default CSS

The extension registers widget.css automatically unless disabled. The file defines every --cb-* token and all .cb-* component classes. You do not need to copy this file — override tokens instead.

Layer 2: Site settings (TYPO3 v13+)

When the casablanca/booking site set is active, configure global theme values in Site Management → Settings → CASABLANCA Booking:

• Accent color → --cb-accent
• Accent contrast color → --cb-accent-contrast
• Border radius → --cb-radius

These are rendered as inline style attributes on the widget <section> wrapper. See Reference for the full settings table.

Layer 3: FlexForm appearance

Each content element has an Appearance sheet with Layout style:

Value	Effect
default	Card with border, padding, and white background (default)
inherit	Transparent background, no border, no padding — blends into the page layout
compact	Reduced --cb-gap (0.5rem) and --cb-space (0.75rem)

Appearance affects outer chrome only. It does not change colours. Use inherit in headers/footers where the sitepackage already provides a styled container. Use compact in sidebars or narrow columns.

Layer 4: Backend Site CSS overrides

Since extension version 1.0.5, Tools → CASABLANCA Booking → Configuration includes a Theming fieldset:

• A collapsible reference table of all --cb-* tokens and their bundled defaults from widget.css.
• A Site CSS overrides textarea stored per site configuration (database field theme_css).

Useful for agencies without sitepackage deploy access; complements TypoScript theme.* settings. Each TYPO3 site can have different overrides when running a multi-site instance.

The CSS is injected as an inline <style> block inside each widget <section> (see Resources/Private/Layouts/Default.html). Scope rules to .cb-widget so they do not leak into the rest of the page. Dangerous fragments (</style, <script) are stripped before output.

Example (same as the backend placeholder):

.cb-widget {
    --cb-accent: #006633;
    --cb-radius: 4px;
}

Among extension-provided layers, backend overrides have the highest priority: they apply after widget.css and TypoScript/Site Settings inline theme (cbThemeStyle). Agency sitepackage CSS may still win if it loads later on the page. See also Configuration.

Layer 5: Agency CSS

Add overrides to your sitepackage stylesheet after the extension CSS (or with includeCss = 0 and your own copy of the rules):

/* Brand the booking widgets site-wide */
.cb-widget {
    --cb-accent: #0a6e5e;
    --cb-accent-contrast: #ffffff;
    --cb-radius: 4px;
    --cb-card-radius: 4px;
    --cb-font-family: "Source Sans 3", sans-serif;
}

/* Secondary buttons already use accent via .cb-button--secondary */
.cb-button--secondary {
    --cb-button-bg: transparent;
}

Layer 6: Fluid overrides

Point TypoScript view paths to your sitepackage:

plugin.tx_casablancabooking.view {
    templateRootPaths.20 = EXT:my_sitepackage/Resources/Private/Extensions/CasablancaBooking/Templates/
    partialRootPaths.20 = EXT:my_sitepackage/Resources/Private/Extensions/CasablancaBooking/Partials/
    layoutRootPaths.20 = EXT:my_sitepackage/Resources/Private/Extensions/CasablancaBooking/Layouts/
}

The default layout wraps content in:

<section class="{cbWidgetClasses}" style="{cbThemeStyle}" ...>

Copy Resources/Private/Layouts/Default.html as a starting point.

Disabling bundled CSS (includeCss = 0)

---

Set includeCss to 0 (or false in Site Settings) when your sitepackage ships a complete replacement stylesheet:

TypoScript (v12 constants module):

plugin.tx_casablancabooking.includeCss = 0

Site Settings (v13+):

Disable Include default widget CSS in the Site editor, or in settings.yaml:

casablancaBooking:
  includeCss: false

When includeCss is disabled:

• widget.js is still loaded (calendar interactivity, occupancy steppers, IBE handover).
• Your sitepackage must define all required .cb-* classes or copy widget.css and customise tokens.
• Inline theme values from Site Settings (theme.accent etc.) still apply via cbThemeStyle.

Backend per-site overrides

See theming-backend-css for the Theming fieldset, theme_css storage, and CSS priority. Agencies can still override tokens in the sitepackage or disable bundled CSS entirely (includeCss = 0).

Examples

---

Hotel brand colours

.cb-widget {
    --cb-accent: #2c5282;
    --cb-accent-contrast: #ffffff;
    --cb-price-fg: #2c5282;
    --cb-button-bg: var(--cb-accent);
}

Flat design (no shadows, square corners)

.cb-widget {
    --cb-radius: 0;
    --cb-card-radius: 0;
    --cb-card-shadow: none;
}

Dark header search bar (inherit appearance)

In the Search Bar content element, set Layout style to Inherit. Then style the parent container in your sitepackage:

.site-header .cb-widget--inherit {
    --cb-fg: #ffffff;
    --cb-muted: rgba(255, 255, 255, 0.7);
    --cb-input-bg: rgba(255, 255, 255, 0.1);
    --cb-border-color: rgba(255, 255, 255, 0.3);
}

TypoScript accent only (no custom CSS file)

plugin.tx_casablancabooking.theme {
    accent = #0a6e5e
    accentContrast = #ffffff
    radius = 4px
}

Do's and don'ts

---

Do

• Override --cb-* tokens rather than editing widget.css directly.
• Use the .cb- prefix for any custom selectors targeting widget internals.
• Set Layout style → Inherit when embedding widgets inside an already-styled site header or hero.
• Disable includeCss only when your sitepackage provides equivalent .cb-* rules.
• Test calendar state colours (available, restricted, unavailable) after changing accent colours — they use separate state tokens.

Don't

• Do not remove the cb-widget class from Fluid overrides — tokens are scoped to it.
• Do not fork widget.css for a colour change alone; token overrides are sufficient.
• Do not rely on un-prefixed class names (button, card) — they are not used.
• Do not disable JavaScript — the calendar, multi-room occupancy, and new-tab IBE links require widget.js.
• Do not expect FlexForm Layout style to change colours; use Site Settings or agency CSS for that.