diff --git a/app/public/branding-example.css b/app/public/branding-example.css index 389a39b3..dee5b30b 100644 --- a/app/public/branding-example.css +++ b/app/public/branding-example.css @@ -3,8 +3,27 @@ .pf-c-login, .pf-c-about-modal-box__hero { background-image: url(img/background.svg) !important; + background-size: cover; } #hawtio-header-brand .pf-c-brand { height: 50px; } + +/* Example of global style overrides: +:root { + --pf-global--primary-color--100: #b21054; + --pf-global--primary-color--200: #b24e78; + --pf-global--primary-color--light-100: #b24e78; + --pf-global--primary-color--dark-100: #b21054; + --pf-global--active-color--100: #b21054; + --pf-global--active-color--200: #b24e78; + --pf-global--active-color--300: #b24e78; + --pf-global--active-color--400: #b24e78; + --pf-global--link--Color: #b21054; + --pf-global--link--Color--hover: #b24e78; + --pf-v5-global--primary-color--100: #b21054; + --pf-v5-global--primary-color--200: #b24e78; + --pf-v5-global--link--Color: var(--pf-v5-global--danger-color--100); +} +*/ diff --git a/packages/hawtio/src/core/config-manager.ts b/packages/hawtio/src/core/config-manager.ts index ca95982c..29e4458b 100644 --- a/packages/hawtio/src/core/config-manager.ts +++ b/packages/hawtio/src/core/config-manager.ts @@ -179,7 +179,8 @@ class ConfigManager { applied = true } if (branding.css) { - this.updateHref('#branding', branding.css) + // Branding css should be pushed to last to override the builtin PatternFly styles + this.updateHref('#branding', branding.css, true) applied = true } if (branding.favicon) { @@ -189,11 +190,15 @@ class ConfigManager { return applied } - private updateHref(id: string, path: string): void { - log.info('Updating href for', id, '-', path) + private updateHref(id: string, path: string, moveToLast: boolean = false): void { + log.info('Updating href for', id, '-', path, moveToLast) const elm = $(id) elm.prop('disabled', true) elm.attr({ href: path }) + if (moveToLast) { + elm.remove() + $('head').append(elm) + } elm.prop('disabled', false) }