TLDR;over-complicated CSS left over from earlier themes can ruin your day. Being able to edit the CSS of theme styles in Theme Editor can rescue you.
A client had an emergency yesterday. The laptop they were carrying was too old to run a current version of FileMaker and they couldn't connect to the server. The database they needed wasn't designed for webDirect but I changed the file settings and we could get in. Everything seemed OK until my client tried to use a popover button. In WebDirect the popover and everything in it was invisible. Unfortunately the invisible popover style is used on almost 300 layouts and can appear dozens of times on a layout.
I experimented a little and discovered that I could apply a different style to the popover and it displayed nicely in WebDirect. That was a good sign.
- Could I copy the style and paste it into the other style?
- Yes, (in theory).
- In practice, it was creating a copy of the pasted style and leaving the old style in place.
- Could I change the elements one by one?
- Yes
- Did that fix the problem?
- NO!
- The invisibility problem must be in elements of the CSS that aren’t able to be changed in the inspector.
- Alternatives: option A
- Save a copy of the working style and modify it to match the broken style
- Switch the style on popovers ( between 1 and 40 per layout ) on 300 layouts
- Alternatives: option B
- Try to fix the broken style in Theme Editor
Opening the theme manager to copy the theme, it showed that four layouts used Classic, 319 layouts used the custom theme. But all the old styles from v7, classic, electric, bamboo, etc. were still there. I deleted all the themes that weren’t in use.
Note: If you are cleaning up themes in files that contain Classic, leave Classic in place. People often report problems with their custom style after removing Classic. You can experiment with removing it from a copy but don’t do it in production until you know what is going to happen.
I copied the theme into Theme Editor and compared the two styles. The working style contained 31 lines of CSS. The invisible style contained 231 lines of CSS. Mamma mia! Those old themes are full of muck.
I copied the 31 lines of working CSS into a text editor and replaced the colors and fonts with the values from the style that I wanted to fix. The updated CSS was transferred back into Theme Editor. I could then update the theme, output a file containing the updated theme and then import it into my database, replacing the original theme.
Testing in WebDirect and the popovers work perfectly. That took me about an hour. Updating every popover on 300 layouts would have taken me a day or more.