Successful UI Design - Part 2
FileMaker themes are simply a collection of the popular CSS standards plus a few extra attributes which are FileMaker specific. Each element on your FileMaker layouts is defined by these CSS settings. They can be seen when extracting them from the clipboard, and if you know the right location to retrieve and store them, can be defined by any enthusiastic developer.
When FileMaker, now Claris, first introduced themes they likely had the intention of allowing users and/or third parties to create their own. In the time since that initial release it may not be as commonly known, but the location still exists and you can certainly create (or modify) your own theme.
The trick is knowing what's required, what can and can't be done and how the CSS translates to the FileMaker UI widgets. Even still, if you can't take the time to learn every single detail, you can still work with a theme which currently exists and simply tweak that theme to fit your specific needs.
In this video I walk through all the specifics related to customizing one of the existing themes. As long and you get the files into the right location with the right values, then you can modify any theme to your heart's content.
Locations to find existing theme files are here.
Macintosh: [MY_DRIVE_NAME]/Applications/FileMaker Pro.app/Contents/Resources/Themes
Windows: C:\Program Files\FileMaker\FileMaker Pro 19\Themes
Locations to store theme files are here.
Macintosh: [MY_DRIVE_NAME]/Users/[USERNAME]/Library/Application Support/FileMaker/Extensions/Themes
Windows: C:\Users\[USERNAME]\AppData\Local\FileMaker\Extensions\Themes
Comments
Change the default theme FM19 starts with
Hi Matt, I've asked this question in some FB Filemaker groups but nobody seems to know the answer. Knowing you are an expert on this perhaps you can tell me if this is possible or not. FM 19 starts with a theme "Apex Blue" and although this theme might be useful for iOS devices on a desktop it's far from great. I'd like to change the default theme that FM19 starts with. This comes in quite handy if one starts off with importing for example an XLSX or CSV file, to begin with. Can you tell me what I can do to make FM19 start with an theme I've created or one of the other themes in FM19?
____________
Dick Impens
MaltaCode
You can't control the default theme unfortunately.
Unfortunately, there is no user controllable setting where you can set the default theme to be used.
This is internally hard coded as far as I know. Sounds like an idea to throw up onto the community site.
-- Matt Petrowsky - ISO FileMaker Magazine Editor
Export Existing Custom Theme
Hi Matt, thanks so much for this tutorial. We've been using a custom theme for a while, but one that was created and maintained completely within FM with a lot of renamed elements. I'd like to work with the CSS for this theme, but I can't find it anywhere on my computer (checking the folders you mentioned), and there doesn't seem to be a way to export it.
Is there some way to force FM to create a local copy of it, or do we have to start over completely with a new theme?
FileMaker 19 changes everything!
Unfortunately, once a theme has been modified with new styles, the CSS content only resides within the FileMaker file itself - internally. However, FileMaker 19 added a new feature under Tools > Save a Copy as XML...
With this particular feature you can save the XML of the file and extract the CSS being used by the theme (or themes). You will then have to do some translation to get this into the proper Theme file format.
But, it's certainly doable now. It's also a way you can make changes to an existing theme.
Provided you keep all names exactly the same, you can use the Import... button within Manage Themes and even replace a theme with the exact same name. This will update all styled objects with your newly modified CSS.
Hope this helps out.
-- Matt Petrowsky - ISO FileMaker Magazine Editor
Oh wow, that's great to know!
Oh wow, that's great to know! I dug into the XML (over 765,000 lines!!!!!!!), and, indeed, I can see exactly what I'd need to get involving the new names and uuid's, but, sadly, it's way too daunting of a task given how much we've customized it. And as you point out, as soon as we make another change within FM, we've now broken that link and would have to go through the whole process again. But it's fascinating that it's all in there.
Unfortunately, it sounds like we'll have to stick with our current theme and press on until (if) FM ever allows the ability to export a proper theme more easily. Until then, maybe somebody out there with tons of free time can create a parser file that extracts all the customized stylings from an XML file and updates the CSS files of a custom theme.
FYI, I had no idea that you replied until I checked this page again. In my account settings, under "Comment follow-up notifications settings," I do have it set to receive an email for all comments/replies, but I didn't get anything and checked spam folders, etc. I think this happened in the past too, and I thought it was a fluke, but now it seems like there may be an issue with the website.
Thanks again for the tip and info!
Managing Themes in Multifile solution
Hi Matt, A related question to the one above. If I want to use the same theme across a multi-file solution, then anytime a change is made to a theme in one file, then this theme must be reimported into all other files using that theme in order to keep them consistent. Right? Is there any other way to maintain a consistent theme across a multi-file solution?
Scroll bar editing! And a question on refreshing the theme
Hey Matt -
Great video on some behind-the-scene workings of FileMaker. As someone who has spent an inordinate amount of time theming my projects and coming up with a concept I like, but that I need to change per client to "brand" my applications for them, there is a ton of great info in here that is going to save immense amounts of time.
And though this video didn't cover it specifically (unless I missed it while taking notes), I noticed that editing of scroll bars is possible in the theme's CSS file, which is amazing. For anyone wondering where this is, search "scrollbar" in the CSS file.
Anyway, when I was messing around editing the CSS file I noticed that my changes wouldn't be immediately reflected in an app that I setup to use my new theme (I was testing the scroll bar editing). I was only able to see the changes reflected when I removed the theme from any layouts and deleted the theme from my file, and then subsequently added it back to some layouts. At that point I saw all the changes take effect, including my scroll bar editing.
I was wondering if this is known/expected behavior, or if it sounds like I wasn't doing something that would otherwise refresh the theme. It's not a big deal since I would expect most CSS file editing would be done prior to attaching the theme to a project, but I wanted to make sure I understood this correctly. Again, apologies if you covered this in the video. Thanks!
-Jake