Altitude Pro: front page background images

[tatami]

Two questions I’m hoping that someone will be able to help me with.

1. I’ve used the customiser to configure new images for sections 1 and 3 on the front page for the website I’ve been developing. I want to use quite light, bright images with black text overlaid onto them. Altitude Pro seems to be adding some kind of tint so the images on the website appear much darker than the originals, with light to dark graduation from top to bottom. How can I remove the tint/graduation?

2. I’d like to have the option to use images as backgrounds for sections 2, 4 and (eventually) 6 on the front page. How can I do this?

Thanks for your help.

Philip

http://follyantiques.co.uk

[Davinder Singh Kainth]

1. To remove black tint. In style.css file:

change...

.image-section {
	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 );
	display: table;
	overflow: hidden;
	table-layout: fixed;
	width: 100%;
}

to...

.image-section {
	display: table;
	overflow: hidden;
	table-layout: fixed;
	width: 100%;
}

2, Check functions file for code used for other widgets areas. Duplicate it as per requirement.

---

Sunshine PRO genesis theme
Need Genesis help? Davinder @ iGuiding Media | My Blog | Fresh Genesis Themes

[tatami]

Divider

Thank you very much for your suggestions.

I've followed your instructions and removed the black tint. Worked perfectly!

I checked the functions file for code used for other widgets areas but couldn't find any. I then looked at the front-page.php file. I found this code…

//* Add markup for front page widgets
function altitude_front_page_widgets() {

genesis_widget_area( 'front-page-1', array(
'before' => '<div id="front-page-1" class="front-page-1"><div class="image-section"><div class="flexible-widgets widget-area' . altitude_widget_area_class( 'front-page-1' ) . '"><div class="wrap">',
'after' => '</div></div></div></div>',
) );

genesis_widget_area( 'front-page-2', array(
'before' => '<div id="front-page-1" class="front-page-1"><div class="image-section"><div class="flexible-widgets widget-area' . altitude_widget_area_class( 'front-page-1' ) . '"><div class="wrap">',
'after' => '</div></div></div></div>',
) );

So I copied the code under front-page-1 to front-page-2. Then I updated the file. Finally I went to Appearance/Customize/Front Page Background Images. Here I still have the option of setting background images for widgets 1, 3, 5 and 7. Do you have any suggestions for what I'm doing wrong and how to correct it?

Best wishes

Philip

[tatami]

Davinder (sorry that autocorrect misconstrued your name last time)

I'm going to try my luck here and I wonder if you or anyone else can help me.

I'd like to try to reverse the graduated filter. As it stands it goes from light at the top to dark at the bottom. To make it go from dark at the top to light at the bottom, how would I need to change this code?

.image-section {
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 );
display: table;
overflow: hidden;
table-layout: fixed;
width: 100%;
}

Thanks and best wishes

Philip

[Davinder Singh Kainth]

Here... rgba(0,0,0,0.2)

0,0,0 is code for black color
0.2 is opacity value.

For white one would use

rgba(255,255,255,0.2)

Got it?

---

Sunshine PRO genesis theme
Need Genesis help? Davinder @ iGuiding Media | My Blog | Fresh Genesis Themes

[tatami]

Brilliant, that's really helpful thank you, Davinder.

Best wishes

Philip

[teamaherl]

hey guys,

I would like to make the overlay a bit lighter. What should i change.

is it also possible to make it lighter just on top (first widget)

many thanks
Tea

[Author]

Posts