Hi all! We are beginning our build out and within our brand we tend to use a lot of gradient colors. Do you know if we can change the header bar from a solid color to a gradient with CSS? I have been trying to figure this out and I keep coming up with a dead end.
Thanks!
It depends a bit on which part of the header you want to address. You’ll want to make these changes under “custom styles” rather than in the header settings. Note: The “background” lines below are normally a single line, but are wrapped in the editor.
The very top part where your logo normally goes is “doc-layout-internal-header” and so you could do something like this with it:
doc-layout-internal-header {
background: linear-gradient(0deg, rgba(34,193,195,1) 0%, rgba(212,45,253,1) 100%) !important;
}
If you mean the part right below that in blue above, then you’d do something like this:
doc-layout-breadcrumbs .breadcrumbs {
background: linear-gradient(0deg, rgba(34,193,195,1) 0%, rgba(212,45,253,1) 100%) !important;
}
The part right under that can be styled this way:
doc-layout-header-message .doc-layout-header-message {
background: linear-gradient(0deg, rgba(34,193,195,1) 0%, rgba(212,45,253,1) 100%) !important;
}
This site may also be helpful for figuring out how you want to create the gradients to match your branding:
Hi 
This site may also be helpful for figuring out how you want to create the gradients to match your branding:
It worked perfectly! Thank you so much, you saved me so many hours of trying to figure this out!
Here is the heading bar that we ended up using and the final CSS code incase anyone else want to do something similar. 
doc-layout-breadcrumbs .breadcrumbs {
background: linear-gradient(153deg,rgba(31,218,150,1) 4%, rgba(63,179,242,1) 32%, rgba(123,111,207,1) 69%, rgba(160,68,185,1)99%) !important;
}
Enter your email address or username and password below to log in to Docebo Community. No account yet? Create an account
Enter your E-mail address. We'll send you an e-mail with instructions to reset your password.