Cuckoo's Egg Themes: Insert your own themes into FileMaker

Lounge (Discussions)
1

This is a backdoor way to get an entire theme into the selection list that we are offered in the Theme selector. It's not terribly difficult but it really should be much easier to do.

We have three ways officially supported ways to acquire themes: Import from another file, select from built-in templates, and build your own (BYO). We are going to provide one more method: the cuckoo's egg.

The Cuckoo's Egg is a variation of BYO but we don't want to use the tools that FileMaker provide for the job - that's time-consuming work.

The "Import Theme" button will only allow you to select FMP12 files and select from themes they contain. You cannot point to a folder that contains a theme (which is what I would like to do). Claris - the management for themes should be much easier than it is.

The "Theme Selector" allows you to choose from current themes. When you are in layout mode, you can use the menus to open a Theme Chooser dialog. This displays a list of the seventeen (17) current themes. However, opening the theme folder inside the application resources on a Mac , /Applications/FileMaker Pro.app/Contents/Resources/Themes, reveals all of the themes that have ever been provided. My sentimental favourite -bamboo- is there, amongst them. It is necessary for the app to support all of the old themes. You will find fifty-five (55) themes there.

The current themes are excellent templates. It is easy to replicate them and modify the themes in a good text editor. You can change default fonts, modify background and foreground colours, set the palette for consistent colour selections, specify default heights for layout parts, and so on. Bamboo was fun, but it's not a good choice for a modern theme. Apex-Blue is designed to be a basis for a modern light-weight theme. If you are starting from scratch, it's a reasonably good starting point.

So, what do we do?

Modify an Existing Theme

  1. Quit FileMaker
  2. Using your OS file browser, open the FileMaker application package to reveal the Themes folders.
  3. Duplicate the theme folder which you want to be the basis for your new theme.
    3.1. Important note : you must select one of the seventeen themes that appears in the Theme Selector.
    3.2. We are going to use the theme selector to import our custom theme, so you must choose one of the privileged themes that appear in the Theme Selector
    3.3. The duplicated folder is a backup to protect the original theme.
  4. Now modify the contents of the original theme.
  5. The primary targets are manifest.xml and theme-name.css.
    5.1. Languages are supported in the file names, you'll notice that CSS and XML files have a two character language suffix for language localisation.
  6. If you have chosen your new colour scheme the modification process can be as simple as doing find and replace across the different colours in the CSS
  7. The manifest contains extra elements, such as the colour palette and defaults for minimum height and padding of layout parts.
  8. Look in the folder "partials" if it is present, as you'll find more CSS and XML there.
  9. You can add your own styles in the CSS. Not every CSS instruction is implemented in FileMaker. You'll only discover what is not supported through trial and error.
  10. Are you done?
  11. For bonus points, replace theme-name preview.png with an image of your own choosing.

When you are ready to import your theme

  1. Open FileMaker
  2. Create a new database
  3. Enter Layout mode.
  4. If you decided to modify Apex-Blue your new theme is already in use.
  5. Otherwise, go to the Theme Selector dialog and choose the theme you modified

:clinking_glasses: :beers:

Saving your Theme

There are a few more steps that we want to take

  1. Open the Theme Manager.
  2. Select your theme, duplicate it and provide it with a unique name.
  3. Go back to your layout and select your unique theme

:tada:

Tidy Up

If you wish, you can leave things exactly as they are and use your Cuckoo theme as a template for other files. The drawback here is that the changes you made only affect your copy of FileMaker.

If you intend to share with a team, or if you intend to make changes to the theme, it is easiest to share the changes using FileMaker's "Import Theme" functionality.

It's entirely up to you to reset the original theme, but I do that.

  1. Quit FileMaker
  2. Go back to the Themes folder and replace the modified theme files with the backups that you made.
  3. Delete the backup folder
  4. Restart FileMaker

What has happened?

We've taken one of the current themes, modified the colours, added our own styles, changed layout.

We've then used the theme in a database and that database now stores our theme which we can use, share, and build on.

11 Likes
2

absolutely wonderful! Thanks for this tip.

3

Great explanation @Malcolm !

There is a place where a custom theme can be stored and will not be overwritten during program updates.
On the Mac this is: ~/Library/Application Support/FileMaker/Extensions/Themes/
On Windows in your user folder: \AppData\Local\FileMaker\Extensions\Themes\
If this folder does not exist, it can be created here. This folder is valid for all FileMaker versions on your computer.

I always copy the theme I want to start from into this folder. You can change the new name of the theme in the files (manifest.xml and in my case manifest_de.xml) itself and you have to change the name of the CSS file accordingly. You can delete the language manifest files that you don't need for your environment.)

FMThemes
FMThemes1112×476 55.3 KB

The next time you start FileMaker, the program will see the themes in this folder. You don't have to import them.

3 Likes
4

One of the most easy to understand explanation and step-by-step guide I've seen on the method!

5

Ok!

That is much cleaner and easier. Thank you.

1 Like
6

When the modified theme is in the local folder though, only you can see the changes. Is that correct or do your changes get pushed/stored in the FM database file?

I want to edit my own theme like this thread talks about because there are some things not exposed by the theme editing tools in the FM app. I want to have my changes be in the target FM file itself.

If editing the XML in the local folder doesn't automatically "push" the changed CSS into the FM file, is there a way to do this (take the local changes and push them into the FM file and update my target theme in the file)?

Thanks!

7

The folder is the library. When you open a new file you can choose themes from the library. At that point it is only on your machine.

Once you select a theme it is imported into the file. At that point it is visible and editable for everyone who uses the file.

8

Hi Malcolm - thanks for the reply. This idea is not clicking in my head. Let me explain what I have been doing then if you have a moment to comment on that, it would be appreciated.

The dB files for our company are hosted on FM Servers. I don't think this is relevant though, but just in case. I am knowledgeable about moving FM XML data in and out of the file. I have a snippets FM file and use the BaseElements plugin to read and write the FM XML data from the clipboard.

Our main system is a single database file. We have a custom theme in now and we are moving to using a new custom theme. For editing the theme to get some elements that are not exposed normally, I have copied the theme from our file and brought into my snippets dB.

I have edited the XML to changes a few things and have then inserted it back into our main dB. I have done this and created a new theme as I test. I have also done this with replacing a current, target theme in the main file with the modified version.

What caught my eye about the concept of using the local themes folder was "would this let me edit my custom theme CSS on the fly" and have it show up in my main FM dB file? I don't think so because this talks grabbing an existing built-in theme out of the FM app bundle (on Mac) and placing in the local folder. I did this but see that the XML is in a separate file from the CSS. When I copy a theme out of a database file, I get one, large bit of XML text that has everything in it.

If I were to start over with a copy of say Apex Blue in this local folder and modify it, I think you are saying that I can import this into my FM database file? If that is the case, can I continuously make changes to the local CSS and XML files and import the updated theme into my main FM file with it replacing the the existing theme?

Ideally I would like to start with what I already have, but the structure of the single XML file I get from copying out of my dB file vs. the broken up structure of the local stuff being in 2 files, seems like an issue.

Thoughts?

9

The theme stored in your local folder is easily editable via text editor. However, the changes you make are not reflected into files using that theme.

Think of your local folder as a factory that generates themes on demand. It advertises the themes it can make, and you select one. It produces that theme and installs it into your file. Now your file has it's very own unique copy of the theme.

  • Change the template. Nothing changes in your file's theme.
  • Make a change to the theme in your file. Nothing changes in the template.

Side note:
I used this technique recently and it was very successful. We had a theme that was designed for desktop. It had been designed and built within FMP and it was fairly well planned. We wanted to emulate it, and repurpose it for WebDirect users with mobile devices.

We exported the theme using https://businessdatasystems.co.nz/theme-editor. Then we started looking at it. We found that we were able to clean up a lot of inconsistencies in the theme, simply because we could see them. So a side benefit in our case was that the main theme was improved.

The FMP UI hides the raw CSS, so it's easy for mistakes to hide. Button states were the most common issue we fixed. The nice thing about working with the CSS as text is that a good regex will bring everything into view. (Search for font declarations and ensure that only one font family is declared!).

After that we stripped out the stuff we didn't want, leaving us with a small, clean base. We imported that and then began developing it further using FMP. To get those additions into the external theme we would have to export it and replace the theme content with the new stuff.

One issue that I found in our newly imported theme was that some styles were declared twice. This was probably a result of my workflow. Whatever was in the CSS, in FMP, only the first named style will be used. The fix, in the Style inspector, is to rename the first instance of the style. (You can't even select the second instance). Save the change and save the theme. Now rename the second instance, and save the theme. You can now reset the name of the first instance, and save the theme. In every case I saw, the two styles where the same and I end up deleting the second one.

1 Like