-
-
We are having issues with the overlay color for the Specular page header. When it is converting the hex color code we put in for the overlay color to the rgb it is not putting a closing ) on the color. This is resulting in the overlay only working with browser that will automaticly add the ending ) here is an example of the html output. ‘<<span class=”start-tag”>div</span> <span class=”attribute-name”>class</span>=”overlay” <span class=”attribute-name”>style</span>=”background:rgba(255, 255, 255, 0.75“></<span class=”end-tag”>div</span>>’ should be
‘<<span class=”start-tag”>div</span> <span class=”attribute-name”>class</span>=”overlay” <span class=”attribute-name”>style</span>=”background:rgba(255, 255, 255, 0.75)“></<span class=”end-tag”>div</span>>’This seems to be some kind of bug that is a result of the conversion form HEX to RGB that the theme does automatically. We would also love to be able to change the opacity to something other than .75 on a per page basis, but more importantly we just need it to output right.
-
I don’t have the ability to add you as a user or provided login information at this time since ask my specular install are production customer sites. The issue is really easy to reproduce though and I have tested on 3 different sites on 3 different servers all using the specular theme with the same result. To reproduce all you need to do is
1. create a new page or post
2. set an image as the background for the page header we used no repeat; cover; scroll; center center; for the additional options.
3. select any overlay color in the box right above that ensuring transparent is unchecked.At this point you should be able to view it in a browser that won’t add the missing ) in our case we found this issue using Safari when i was coding on a mac. At this point you will see the image without the overlay color on top. In the source code when you look at this page you will be able to see the missing ) at the end of the background color tag. It seems most browsers will just compensate and accept the css tag rather than throw an error since it is the only item in the style attribute.
If that doesn’t work for you I will have to create a dev site with a sample page so I can show you front and backend. The way you will find it though is in the source as it affect only certain browsers. Here is a front end example https://www.leaderworldwide.com/header-testing/ if you view the source you see will see the missing ) for the header overlay background color tag.
-
Hello,
I get your point now. But the closing tag is not the culprit of overlay not showing up. We have tested the same situation and the overlay does display fine. Please see screenshot.
You can use this css:.overlay { height: 242px; }
..to your page’s custom css box. Edit the value to your wish.
However, I will report this to the developer team. To fix for future updates.
Best regards!
-
I tried your fix and in safari it does not work. Safari sees the overlay sized correctly and if you go into their resource inspector you can just add the ) and displays fine. It even shows in the console that it is just ) that is keeping it from working properly. Do you know have a timeline on when this would be fixed in an update? It is affecting all our apple users across multiple sites that run the theme.
-
<p style=”box-sizing: border-box; margin: 0px 0px 25px;”>Mihail,</p>
<p style=”box-sizing: border-box; margin: 0px 0px 25px;”>Like I mentioned earlier I don’t have the ability to give you access to the site I have running Specular because they are client sites. We are not using any custom css this seems to happen even on a clean install of specular.</p> -
Hello,
In this case, please enable the test page you send us once again. I see you do not have any page header image in any of the current visible pages in your site.
We do not get this problem on our side so i can’t recreate it.
in the mean time please add this code into your custom css box:@media screen and (-webkit-min-device-pixel-ratio:0) { /* Safari only override */ ::i-block-chrome,.header_page.centered { opacity: 0.25 !important; } }
Let us know.
Best regards!
-
Sorry about that didn’t know you still needed it. I also added the css and it seems to have no effect.
-
You must be logged in to reply to this topic.