Header Gradient intensity

Hello,

There is already an option to disable this gradient. We will look into creating an option to adjust the gradient and get back to you.

Oliver

I miss this feature for several websites of my friends;
but if it complicates something, the background color (with opacity) will solve everything

I tried the procedure
https://www.karavadra.net/change-front-page-panel-shaded-gradient-twenty-seventeen/
but it doesn’t work for me on several sites (with different versions of WP)

OK, we already have an option “Customizer – Header Options – Remove Header Gradient” … but to modify the gradient instead, use this CSS …

@media screen and (min-width: 48em) {
.twentyseventeen-front-page.has-header-image .custom-header-media:before, .twentyseventeen-front-page.has-header-video .custom-header-media:before, .home.blog.has-header-image .custom-header-media:before, .home.blog.has-header-video .custom-header-media:before {
height: 33%;
}
}
.custom-header-media:before {
background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.3) 75%, rgba(0, 0, 0, 0.3) 100%);
}

Changing the percentage of the height statement and changing the RGBA values of the background statement will modify the gradient.

You can also change the percentage amounts in the background statement which will change where in the gradient the new RGBA values are applied. You can use this website to help you find the require RGBA values.

Let me know if this works for you and we will add a couple of options for this.

Oliver

first-class quality work
everything works fine
… best regards, BB

Great news. Will update this thread when we have some controls to manage the gradient.

Oliver

Hello,

To update this thread, we have just pushed a new version of the plugin to include controls to change the height, color and opacity of the grey header gradient.

Oliver