Dark Veil Removal Demo
Altitude Pro is a Genesis child theme with a storyboard layout.
On the home page there are four large background images. In order to make sure that text can show up well against the background images, the themes designers have applied a translucent, black gradient over each image, using CSS.
The effect this has is to darken the images to make white text easier to read when placed in the foreground.
However if the image you are using is already quite dark, the effect of the gradient “veil” is to darken it even further. If this is undesirable you can remove the veil.
You must have the following WordPress plugin(s) installed on your site in order for this blueprint to work as described.
- Extender Pro was used to add the custom snippets.
- Altitude Pro theme was used in the demo. This blueprint is only applicable to Altitude Pro.
The Genesis Blueprint
- Add The CSS
- Add the following CSS via Extender Pro’s Custom CSS editor.
- Save the changes.
Note that the above CSS only removes the veil from the first image. If you wanted it removed from other images then you’d target the section specifically and replace .front-page-1 with another section.
If you want to remove the veil from all images you would use the following CSS instead.
- Review Your Work
- Look at the home page – the image(s) should be much brighter.