Custom CSS Hooks
Stable ids, classes and data-* attributes for customizing the client shell via branding.customCss.
1. How It Works
When branding.customCss is set, its contents are injected as a <style> tag into the client shell (ClientLayout). Target the elements below to override their default styling without editing component code.
Hooks are grouped by navbar-* (header), welcome-* (home page), footer* and shared layout ids.
2. Layout Shell
| Hook | Type | Element |
|---|---|---|
| #app-shell | id | Root wrapper div (min-h-dvh, flex column) |
| #main-content | id | main content container |
3. Header (ClientHeader)
| Hook | Type | Element |
|---|---|---|
| #header | id | The header root element |
| #navbar-content | id | Inner row (flex, height, alignment) |
| #navbar-brand | id | Logo / avatar + title group |
| #navbar-logo | id | img logo (only when a logoUrl is set) |
| #navbar-avatar | id | Fallback initial avatar (only when there is no logo) |
| #navbar-title | id | Tenant display title (h1) |
4. Home Page (HomeWelcomeCard)
| Hook | Type | Element |
|---|---|---|
| #welcome-card | id | Default welcome card wrapper (Card) |
| #welcome-logo | id | Card logo img (only when a logoUrl is set) |
| #welcome-heading | id | Welcome heading title (h3 / CardTitle) |
| #welcome-message | id | Welcome message description paragraph (CardContent) |
| #homepage-custom-html | id | Custom HTML container (only when homepageConfig.welcomeHtml is set) |
6. Language Switcher
| Hook | Type | Element |
|---|---|---|
| #language-switcher | id | Container for the language buttons |
| [data-lang=“…”] | attr | Each button (e.g. data-lang="en", data-lang="pl") |
| .lang-btn | class | Each language button base style |
Prefer #language-switcher [data-lang]- the buttons are repeatable elements, so they usedata-* attributes instead of unique ids (ids must remain unique in the document).
7. Example
/* Layout */
#app-shell { min-height: 100dvh; }
#main-content { max-width: 1280px; margin: 0 auto; padding: 40px 24px; }
/* Header */
#header { height: 72px; box-shadow: 0 8px 24px rgba(0,0,0,.06); }
#navbar-brand { gap: 12px; }
#navbar-title { font-size: 1.35rem; letter-spacing: -0.01em; }
#navbar-avatar { border-radius: 9999px; }
/* Home Welcome Card */
#welcome-card { border-radius: 16px; box-shadow: 0 10px 30px rgba(0,0,0,.08); }
#welcome-heading { font-size: 2.25rem; font-weight: 800; color: var(--foreground); }
#welcome-message { font-size: 1.1rem; line-height: 1.75; }
/* Footer */
#footer { background: var(--background); padding-top: 32px; }
#footer-text { font-style: normal; font-size: 0.9rem; }
/* Language switcher */
#language-switcher [data-lang="pl"] { text-transform: uppercase; }