When using front page panels in Twenty Seventeen, the default gradient is a percentage shade of black from the bottom of the panel, to no shade at the top of the panel. This shading can be changed.
The default front page panel gradient is on the left, the changed gradient is on the right.
The gradient has been changed to use 90% black from the bottom of the panels.
You should be able to see the effect on the screenshot on the right.
Where and how to change the front page panel shaded gradient:
In WordPress Admin > Appearance > Edit CSS.
Enter the CSS code below.
- The lines of code change the shade from the default of 30% top 90%. You can reduce this percentage to reduce the intensity of the gradient, or you can change it to zero to remove the gradient.
- The lines of code have 0.9 where the gradient is set to 90%. Note that this number appears 4 times in the code. For internet explorer version 6 to 9, the number is in hexadecimal on a lower line. For 90% the value is set to E6. To calculate the hexadecimal value for another percentage first multiply the percentage by 255. If the number has decimal places, use the nearest whole number, and then type in google ‘thewholenumber in Hex’
The CSS code:
.panel-image:before {
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#000000+0,000000+100&0+0,0.3+100 */ /* FF3.6-15 */
background: -webkit-linear-gradient(to top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.9) 100%); /* Chrome10-25,Safari5.1-6 */
background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0)), to(rgba(0, 0, 0, 0.9)));
background: -webkit-linear-gradient(to top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.9) 100%);
background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.9) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#00000000", endColorstr="#E6000000", GradientType=0); /* IE6-9 */
/* bottom: 0; */
/* content: ""; */
/* left: 0; */
/* right: 0; */
/* position: absolute; */
/* top: 100px; */
}
Leave a Reply