Copy out nav.title-bar from one of Flare's generated css files
Add it to your stylesheet with these changes:
nav.title-bar
{
padding: 10px 0;
line-height: inherit;
display: block;
background-repeat: no-repeat;
background-position: center top;
padding-top: 25px;
padding-bottom: 25px;
background: transparent none;
background: -moz-linear-gradient(90deg, #0FF 0%, #3036ff 100%);
background: -webkit-gradient(linear, left, color-stop(0%,#0FF), color-stop(100%,#3036ff));
background: -webkit-linear-gradient(left, #0FF 0%, #3036ff 100%);
background: -o-linear-gradient(left, #0FF 0%,#3036ff 100%);
background: -ms-linear-gradient(left, #0FF 0%,#3036ff 100%);
background: linear-gradient(90deg, #0FF 0%,#3036ff 100%);
-pie-background: linear-gradient(90deg, #0FF, #3036ff);
}
In all cases, the change was to 90deg, left, 0deg, or top. The other properties describe the angle for the gradients and any color stops. Gradient definitions can get complex evem for a simple two-color linear gradient. There's a whole world of gradient fun awaiting you
I use the gradient maker at https://coolors.co/. Click "Tools" on the nav menu, then select "Create a gradient" from the drop-down's RH-side menu.
Flare complains about starting the horizontal linear gradient from the left, but it's valid and works fine. There's a feature request to add it to the validation in the stylesheet.
Left-to-Right Header Gradients
-
- Propellus Maximus
- Posts: 613
- Joined: Wed Feb 01, 2006 6:21 am
- Location: Off in the dark....
Left-to-Right Header Gradients
Trent.
Certifiable.
umm...
I meant MAD Certified.
Official Propeller Beanie Owner
Are you on Flare's Slack channels? PM me for an invitation!
Certifiable.
umm...
I meant MAD Certified.
Official Propeller Beanie Owner
Are you on Flare's Slack channels? PM me for an invitation!