After following the ACUL documentation and setting up the pipelines etc..
the universal login page still has the default branding styles and not the custom styling.
the files are correctly served and the .css file form the cdn contains the necessary styling but the parent login screen html tag has a style that overrides the ACUL .css styling.
when i delete that style. the underlying custom ACUL theme does show up. so i am a but confused.
any help is appreciated.
Hi @v.ibis
Welcome to the Auth0 Community!
The reason your custom ACUL .css file is being overridden is due to standard CSS specificity rules where Auth0 dynamically takes the theme settings defined in your Auth0 Dashboard (Branding > Universal Login) and injects them as inline styles directly onto the <html> tag. Because inline styles have the highest specificity in CSS, they will always overpower the :root or html definitions sitting in your external stylesheet.
To fix this, you do not need to change your pipeline or your Auth0 Dashboard settings. You simply need to adjust the CSS selectors in your external .css file to bypass the inline styles on the <html> tag.
You can define your custom variables on the body tag instead of :root or html so its variable definitions will take precedence for all the widget components inside it. It should look something like this:
body {
--core-primary: #ff0000;
--core-page-bg: #000000;
}
If you prefer to keep your variables scoped to the :root , you can force the browser to prioritize your external stylesheet over the inline styles by appending the !important flag to your variables.
If you have any other questions, let me know!
Kind Regards,
Nik