Migrate changes in v12 CSS to v13

Discussion created by psijmons on Dec 3, 2013
Latest reply on Dec 4, 2013 by psijmons

For those developers that could not wait for FileMaker 13 features and did some alterations in the CSS of FileMaker 12 (despite all warnings from FM Inc), you may get a shock when you just open your solution in FMPA 13; it’s all back to the classic theme again and your carefully tweaked CSS is no more… This is a one way street, opening it again in v12, you’re all on classic themes again.

The good new is this can be fixed, provided you have a backup of your solution that was not yet touched by v13.

  • open up the package contents of FMPA12 by Ctrl-Click on the program icon (Mac) or check the themes folder in the FileMaker Program folder (Windows)
  • navigate to Contents > Resources > Themes and locate your own theme folder
  • copy this folder, which will contain 2 important files that has your changes:
    • YourTheme.css
    • manifest.xml
  • language specific manifest.dd.xml files are also present, depending on your use / situation, but you must have gone through this routine before if you tinkered with the CSS in v12.
  • open the file manifest.xml with a text editor (e.g. TextMate)

Now do the same for the FMPA13 package, and open the copied Theme folder that you used originally as the basis when you started your own CSS tweaks.

Compare the two documents and spot the differences. In the v13 manifest file, replace the theme names in the first lines with YourTheme:

<?xml version="1.0" encoding="UTF-8" standalone="no"?>




<group>FileMaker Millennium</group>

<version>5</version> // note the version nr change here


<platform>Desktop</platform> // new line in v13



Or, alternatively, depending on any other changes you made in manifest.xml, carefully go over the differences line by line and change the v12 file.

There is probably nothing you need to change in the YourTheme.css, but I haven’t tested this in depth, my changes in the CSS were minor.

  • save the changes in manifest.xml and put it in the same folder as YourTheme.css
  • add YourTheme folder in the Themes folder of FMPA13
  • duplicate your solution backup first (several times actually if you want to play with the outcomes or something goes sour)
  • open your solution in FMPA13

All your layouts should now be using YourTheme as they were in v12 (no warranties of any kind here, you’re on your own…)

One item that I needed to change was a new feature in Tab layout elements, which added a light grey shadow as an outline to the tab element. I tried to fix this in the CSS file but no luck. I’m assuming there is now another place where CSS details are stored, on a per file basis may be.

But it could be changed across all layouts doing the following:

  • uncheck OuterShadow effect in the Advanced Graphic pane of the Inspector (mark the red dot in the top pane of the Appearance tab of Inspector)
  • set Save Changes to the Current Style (red dot will shift 1 level up)
  • then set Save Changes to Theme,
  • confirm to apply this across all layouts (if you want to).

In v13, the CSS is much more flexible, allows for a far better overview of available defaults for any layout element and allows imports of themes (between v13 files), so I’m sure we can expect some very nice 3rd party designs and Theme tools coming in the near future. I’m looking forward to it.