Best Answer

Gradient Main Colors via CSS?

  • 11 February 2022
  • 4 replies
  • 105 views
Ccorder
Rank
Userlevel 2

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!

 

icon

Best answer by elamast 11 February 2022, 16:03

View original

4 replies

elamast
Rank
Userlevel 6
Badge +2

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:

https://cssgradient.io/

Ed Lamaster, AVO Training Institute Learning Technologies Manager and eSkillz Consultant.
Ccorder
Rank
Userlevel 2

Hi @elamast this answer is so incredibly helpful! I am going to try it right now! Thank you!!:grinning:

Ccorder
Rank
Userlevel 2

This site may also be helpful for figuring out how you want to create the gradients to match your branding:

https://cssgradient.io/

It worked perfectly! Thank you so much, you saved me so many hours of trying to figure this out! 

Ccorder
Rank
Userlevel 2

Here is the heading bar that we ended up using and the final CSS code incase anyone else want to do something similar. :point_down_tone1:

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;



}

 

Reply


Terms & ConditionsCookie settings