Breakthrough Pro featured image overlay not working

[wperchuc]

Hi, I'm using the latest version of Breakthrough Pro theme with Genesis Framework and it seems the colored overlay color is not working. I tried to change the color, regenerated thumbnails but it didn't help.

Could you please advise on that?

Thanks!

http://bunnyproject.nazwa.pl/vetnolimits_new

[Bianca]

Hi There,
Where did you try to change the color? Did you follow this or tried to change it somewhere else?

---

I am a Marketing Communications specialist at Communics.

Visit my personal website | Follow me on Twitter | Connect on LinkedIn

[wperchuc]

Hi Bianca,

Exactly, I followed the theme customizer color option and "basic settings" of Breakthrough Pro settings here.

[Bianca]

That's not suppose to happen 🙁
Which version of the child theme are you using?
Are the color settings saved and outputted in the html? Especially check if the value at line 729 changes when you change the color, as this is the code bit that is responsible for the overlay.

Have you tried to disable all the plugins? I noticed in the browser inspector that there is an error frown: Uncaught (in promise) null
Unfortunately my knowledge of that particular error is zero to none, so I can't tell if it's related.

---

I am a Marketing Communications specialist at Communics.

Visit my personal website | Follow me on Twitter | Connect on LinkedIn

[wperchuc]

Thanks for a quick answer, Bianca!

Genesis Framework v. 3.3.3
Breakthrough Pro v. 1.3.0

I'm not sure where should I check the line 729... I checked raw html, child theme css stylesheet and didn't find anything referring to the issue. Could you please specify?

Also I've deactivated all the plugins and the issue still exists.

[Bianca]

I see that the link I inserted gets blocked. It was supposed to lead you to the html source in the browser. In the meantime this has changed I see. Now line 461.

This code:

			<filter id="breakthrough-overlay">
				<feColorMatrix
				type="matrix"
				values="0,445098 0 0 0 0
					0 0,743137 0 0 0
					0 0 0,958824 0 0
					0 0 0 .9 0 "></feColorMatrix>
			</filter>

If you change the color in the customizer. The value should change. If it doesn't then it seems that changes are not being saved.

An extra check you can do is to see if your php version is up to date (7.3 + recommended).

---

I am a Marketing Communications specialist at Communics.

Visit my personal website | Follow me on Twitter | Connect on LinkedIn

[wperchuc]

I used the customizer again and the filter settings have changed in the html from this:

values="0,445098 0 0 0 0
0 0,743137 0 0 0
0 0 0,958824 0 0
0 0 0 .9 0 "

to this:

values="1,166667 0 0 0 0
0 0,500000 0 0 0
0 0 0,500000 0 0
0 0 0 .9 0 "

The php version I'm using is 7.4.8.

[Bianca]

I may have found a cause but not yet a solution. If I compare the output in your html with the html output in the demo, I see that the markup of the SVG filter is slightly different. In yours I miss this bit
<style type="text/css" media="screen"></style>
I'm not sure if you edited this yourself or something else is happening, like maybe the server is not supporting svg.

My knowledge in that area is not that big.

---

I am a Marketing Communications specialist at Communics.

Visit my personal website | Follow me on Twitter | Connect on LinkedIn

[Bianca]

There is a work around but might needs some additional polishing

.full-width-image {
	background-color:#f00;
	max-height:365px
}

.full-width-image img {
	opacity:0.6;
	background-size:cover
}

Change the color and opacity rate. It also leaves a space at the bottom

---

I am a Marketing Communications specialist at Communics.

Visit my personal website | Follow me on Twitter | Connect on LinkedIn

[wperchuc]

Hey Bianca, thanks for your help!

I think the code from demo:

<style type="text/css" media="screen"></style><svg aria-hidden="true" style="width: 0; height: 0; display:block;">
			<filter id="breakthrough-overlay">
				<feColorMatrix
				type="matrix"
				values="0.590196 0 0 0 0
					0 0.609804 0 0 0
					0 0 0.907843 0 0
					0 0 0 .9 0 "></feColorMatrix>
			</filter>
		</svg>

is simillar to the code from my site:

<style type="text/css" media="screen"></style><svg aria-hidden="true" style="width: 0; height: 0; display:block;">
			<filter id="breakthrough-overlay">
				<feColorMatrix
				type="matrix"
				values="0,445098 0 0 0 0
					0 0,743137 0 0 0
					0 0 0,958824 0 0
					0 0 0 .9 0 "></feColorMatrix>
			</filter>
		</svg>

Your code does solve the issue but only for desktop screen. There is a color line visible on smaller screens. Please check mobile view in inspector. Do you know how to fix it?

[Bianca]

Still a clunky solution but you can accomplish this by adding media queries to the CSS (minimum screen size and maximum screen size).

#breakthrough-page-title .full-width-image {
	background-color:#2571a8;
	max-height:309px
}

#breakthrough-page-title .full-width-image img {
	opacity:0.75;
	background-size:cover
}

@media screen and (min-width: 600px) and (max-width: 740px) {
#breakthrough-page-title 	.full-width-image {
	max-height:170px!important
}

}

@media screen and (min-width: 741px) and (max-width: 1235px) {
#breakthrough-page-title 	.full-width-image {
	max-height:180px!important
}

}

I also added an ID to prevent the styles being assigned to other elements. Change this according to preference.

I'm afraid I don't have any more ideas why the SVG filter method isn't working properly. Before the styling elements were absent in the source code, but now they are in place. Beats me.

Personally I would check this in a different environment, possibly with a clean install and watch step for step what happens.

---

I am a Marketing Communications specialist at Communics.

Visit my personal website | Follow me on Twitter | Connect on LinkedIn

[wperchuc]

Hi Bianca,

Thanks for your help with the code. I'm not sure it will be efficient in terms of "code cleanness" to put this into additional CSS. What do you think?

I also ran a clean WP install with the theme and the overlay works well there with no problem! The problem is I don't want to make it a clean install as I'm moving from Bridge Theme which is not fast enough and has WP-Bakery built in which doesn't have updates for couple years... You can see the actual website here http://www.vetnolimits.com

Do you think some settings from Bridge Theme might get imported and are now creating that error in Breakthrough Pro theme? I used Duplicator Pro plugin to clone the whole database and WP.

[Bianca]

I'm not sure it will be efficient in terms of "code cleanness" to put this into additional CSS. What do you think?

It is definitely not an elegant solution, that's why I called it a work around.

When you activate a different theme all settings from another theme should disappear. The only thing I can imagine when it doesn't has to do with server caching. I'm not sure if it's the case here but you can look into that.

---

I am a Marketing Communications specialist at Communics.

Visit my personal website | Follow me on Twitter | Connect on LinkedIn

[Author]

Posts