Better Visualize Your FileMaker Pro Themes with StylŌ!

Overview

FileMaker Styles and Themes are one of the most powerful new features in FileMaker Pro 13. But how can you ensure that your theme is consistent? How do you know all those corner bevels will be the same? What about the colors used across multiple objects? How can you pre-visualize an object across all states, side-by-side without constantly flipping through the “State” menu on the Inspector’s Appearance tab?

StylŌ can help. StylŌ gives you an environment where you can use familiar tools, much like those in FileMaker, to design the look and feel of your theme. Using CSS to display your style changes in real time, StylŌ effortlessly produces an overview report that gives you a deep look into the overall consistency of your design. StylŌ also gives you a “changes only” report that makes it easier to style objects in FileMaker Pro. A few screens:

Here’s where it all begins. Start a new theme and download the pre-loaded object set. A “Default” style is created automatically for each object. You can add as many theme records as you want.

Next, select the “Default” style or create a new one.

Using a familiar interface, watch as each attribute you change is reflected automatically for each state. See each state side-by-side. A running summary is also created, reflecting all of your unique styling.

It all starts to make sense in the Overview Report. Here, you can see everything about your theme, in one aggregated report. Easily compare object styling for consistency. Are those corner bevels all the same? What about those hex color values? You can see all the answers here.

 

Want to use this to build your actual styles in FMP? Print the detail report to show you only the items that you need to change.

NEW RELEASE as of 7/25/14 2:25 PM PST

Filemaker StylŌ is provided free of charge. Think you can make it better? While not technically an open-source project, we welcome your ideas and the application of your skills. Send us your mods and we will try to incorporate them into the main build (no promises). However, you don’t have to be a Filemaker programmer to use StylŌ effectively

Keep in mind that this is a free product. I have created it as a service to the FileMaker community, and it carries no warranty or guarantee. As such, it is an incomplete product. There is a lot more that can be done with it, given the time. Please feel free to report bugs and provide feedback to me at info@alchemyg.clients.wstbd.com. StylŌ is an excellent pre Filemaker database design tool to best get an idea for what you want your Filemaker to look like, as well as streamline the actual design process.

NEW 8/5/2014:
Several people have contacted me asking how to import themes into StylŌ: the answer is, you cannot do that at this time. StylŌ is not meant to be an “after the fact” tool — in other words, you don’t design your theme in FileMaker, then check it in StylŌ to see if you got it right. Not only is this less efficient from a design sense, there are some technical barriers to making it happen. Instead, think of StylŌ as a way to plan your theme, the same way a graphic designer would: select your colors, fonts, and line attributes, and use StylŌ to pre-visualize what those things might look like. When you think you are getting somewhere, run the overview report to check for consistency, then use the detail report to tell you what changes to make in FileMaker. More work up front, no doubt, but it will save you time later.

The Future of StylŌ

A few ideas we are toying with:

• Copies of all of the standard themes built into FileMaker, styled in StylŌ.
• More reports to give you even more insights into your theme
• New custom themes built into StylŌ, with accompanying, importable themes in FileMaker files.

Things that are probably not on the horizon for StylŌ:

• Creating themes and then somehow inserting them into a FileMaker file (danger, Will Robinson!).
• A chain of StylŌ-themed restaurants.

 

Version History:

v.1.0.1 – 7/25/14

• Color backgrounds on navigation icons to better assist in seeing where you are.
• “Add” button for adding new themes.
• “Default Hex” field for setting a custom color for all backgrounds (overriden by selecting one of the 3 standard BGs on an individual state).
• Button to delete unused states.
• Fixed a bug that made “Second Color” the default when adding a gradient fill.
• Fixed a bug that caused the Type menu to work incorrectly.
• Added more default and custom styles to the “AG Buffy Blue” sample theme (more to come).

v.1.0.2 – 8/18/14