Pro 2.5.5 - headlines invisible (transparent) color on front end only, Pro Inspector view is fine

Hi guys, I have a peculiar problem. My headlines for a specific color setting are not showing on the front end, and are instead transparent when not in the Pro Inspector. Viewing the page within the Pro inspector has no issues. (MOST) other colors work fine.

Here is what the front-end looks like (link expires in 14 days):

==> Transparent Headlines

Here is the sequence of events leading up to the issue:

  1. After creating the layout and previewing it on the front-end…
  2. I created a new set of colors (5) in the Global Colors Preset Section in Pro
  3. I moved all new colors to the top of the list of colors in the color preset section
  4. I selected each of the headlines that I needed to change and changed it using the new Pro preset color
  5. Clicked “Save” and previewed the page on the front end

The way it looks in the Pro is fine. See the screenshot here (link expires in 14 days):

==> Headlines in Pro

What could be causing this?

Hi guys, after about an hour of debugging, I found the problem causing the issue - and it may prompt a feature request to add some level of validation to the color naming system.

Inspecting it with the Firefox Developer Tools, I saw that all of the elements that I had set to that color were actually set to be color: transparent; and that the styles for the color that I added were not in any loaded stylesheet, and that it looked that only the default settings were loading. This told me that there may have been a user error, so I double checked the color values to see if any of them had extra characters or were missing some. Upon find none, I checked the names of each color and found out that I had a naming problem.

##So to recap what I did to cause this error, and how I fixed it for me:
I created a new global color in Pro and named it. I then clicked the duplicate icon and created 4 more instances of the color (each new color was renamed with “Copy of” prepended to the name), I went through and changed the values of the colors, removed the “Copy of” and then added a number to the end of each to differentiate the colors.

Apparently while I was doing this, I missed one. It was conveniently named the same name as the original color (because I had already removed the “Copy of” text from the beginning of it, making them identical). When this happened, the builder would show the color just fine, but in the front it would not show.

To fix this in my instance, I just made sure that every color (specifically the color that was missing) all had completely unique names, as it appears that the Pro Builder calls the color value by the name that you give it.

##Possible long-term solutions

Because most other people using Pro may not find this forum post, I think that it may be best to either (1) integrate some level of validation when naming the color (ie. “Cannot have the same name as another color”) or (2) first assign a unique ID to each color, and then calling the id to get the data back.

Hi @diego,

Thank you so much for the detailed explanation and for your suggested solution.

I will forward these to our web development team for review.

Thanks

1 Like

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.