Altitude Pro is a very popular child theme for the Genesis Framework by Studiopress.
It has been the second best-selling Studiopress child theme for 11 of the last 12 months (one month it was the third best-selling child theme).
A frequent question on the Studiopress Forum is how to change or remove the linear gradient, or the “dark layer” or the “overlay opacity”, of the images on the Altitude Pro front page.
Altitude Pro front page images with linear gradient:
Altitude Pro front page images without linear gradient:
How to remove the linear gradient from Altitude Pro’s front page images
This is the easier option.
If you want to remove the linear gradient Altitude Pro adds to the front page images, you have to delete all the linear gradient values from the style.css around line 1250.
Afterwards, selector and declaration block should look like this:
.image-section { display: table; overflow: hidden; table-layout: fixed; width: 100%; }
How to change the linear gradient Altitude Pro adds to front page images
You might not want to get rid of the linear gradient completely but just want to adjust how dark or light the images appear.
You have to change the values of the linear gradient Altitude Pro sets in the style.css (around line 1250).
Altitude Pro uses the following values:
background: -moz-linear-gradient(top, rgba(0,0,0,0.2) 0%, rgba(0,0,0,0.5) 30%, rgba(0,0,0,0.8) 80%, rgba(0,0,0,0.9) 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0.2)), color-stop(30%,rgba(0,0,0,0.5)), color-stop(80%,rgba(0,0,0,0.8)), color-stop(100%,rgba(0,0,0,0.9))); background: -webkit-linear-gradient(top, rgba(0,0,0,0.2) 0%,rgba(0,0,0,0.5) 30%,rgba(0,0,0,0.8) 80%,rgba(0,0,0,0.9) 100%); background: -o-linear-gradient(top, rgba(0,0,0,0.2) 0%,rgba(0,0,0,0.5) 30%,rgba(0,0,0,0.8) 80%,rgba(0,0,0,0.9) 100%); background: -ms-linear-gradient(top, rgba(0,0,0,0.2) 0%,rgba(0,0,0,0.5) 30%,rgba(0,0,0,0.8) 80%,rgba(0,0,0,0.9) 100%); background: linear-gradient(to bottom, rgba(0,0,0,0.2) 0%,rgba(0,0,0,0.5) 30%,rgba(0,0,0,0.8) 80%,rgba(0,0,0,0.9) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#33000000', endColorstr='#e6000000',GradientType=0 );
I know it looks a bit complicated. And finding just the right lightness or darkness will most likely require some experimenting.
Luckily, there are some great resources available online. Those gradient generators or editors allow you to see the effects of changes to the linear gradient right away.
Here is a small selection of online gradient editors or generators:
http://www.colorzilla.com/gradient-editor/
Michelle Seaton Witte says
Hi. I changed this programming in my style sheet and NOTHING changed! Is that actually even possible? I have no idea how i could take out a chunk of programme and it did nothing. Id love if you could shed some light on this…and on my front page 🙂
Christoph Herr says
Hi,
I guess you saw a cached version of the website.
Your images look bright and shiny 🙂
Brooke says
PERFECT!!
I’m running two websites on Altitude now… my current build NEEDED this.
#happy
Thank you, Christoph
Christoph Herr says
Hi Brooke,
You are welcome!
Thanks for letting me know.
Christoph
Will says
I’m not finding the deletion made any difference – the dark gradient on the front page is still there: http://www.wellardpress.com
Refreshed several times. Tried “hard refresh”. What am I missing?
Christoph Herr says
Hi Will,
you must still have some caching going on.
It works as advertised 😉
http://d.pr/i/eHaj