Themes are an important way to provide a consistent user experience in your custom apps. Learn the different themes and how to use them.
- [Instructor] So before you start building layouts I think it's important to understand this concept of themes and styles and really how they relate to each other. Now themes in FileMaker help you create a visually attractive user interface by providing consistent styles for buttons, fields, backgrounds, and all sorts of other objects on your layout. And what a theme does is apply these predefined font sizes, colors, paddings, and other styling to all the different layout objects that you have in your file. It's pretty much like themes in other applications that are created by Apple. You don't have to do any of the styling, you can just provide content and apply the themes to it and the theme does the rest.
That's the same thing here in FileMaker. Now when you select a new theme for a layout all existing layout objects will adopt the new theme styles. So really what a theme is is a collection of styles that can be applied to layouts. Styles allow you to easily define and apply consistent formatting to objects on a single layout, or across all the layouts in your custom app. Styles are part of the overall theme and within the theme each type of layout object may have its own available styles. The best way to really understand what a theme is is to take a look at one.
So here what I've got is one of the Starter Solutions for content management. I picked this one, because it's got a very bold theme, and frankly, probably not one that you would use in your regular practice, but I chose it, because I think it really drives home the point of what a theme is. So first of all let's go into Layout Mode. And in Layout Mode you'll notice in the upper right hand corner right here we've got this button, which says Theme and Luminous. It may not look like you can click it, but you can, and when you do click it you'll see that a window pops up called Change Theme.
These are all the different default themes that actually ship with FileMaker. So you don't have to create any of these. Now if you've got some experience in web design then you already know what's going on here. What FileMaker is using is something that's called a cascading style sheet, or a series of cascading style sheets that are built right into the application, installed onto your computer when you install FileMaker, and in this case, actually ship with Starter Solutions. So style sheets on the web and in FileMaker define every single design element that's possible.
So, for example, in the Luminous one that we're looking at here it's got everything from the background image that you see here, to the fonts that are used, to the colors of buttons, style of text, color, everything you can imagine. All of that has been designed for you and shipped with the product. So at the very least you could just use one of the default themes that FileMaker ships with. And here they are right here. So, for example, we've got Enlightened. And by the way, Enlightened is the default theme that's installed any time you create a new layout in FileMaker.
So if you just start from scratch you'll see the Enlightened theme installed. And you see a bit of a preview of some of the components. Enlightened Print is interesting, because you'll notice it's really absent of any kind of styles. It's just like your experience when you're online and you're going to a print layout, it doesn't have all the colors and depth and all the type of stuff that is just going to use up printer toner frankly. Here's the Luminous one, Sophisticated, Tranquil, which is actually the theme I'm going to use later on in this course, and then even Vibrant. Now you'll notice that down here we've got a whole section called Touch.
These are the iOS, or tablet, or phone versions of the themes that you see above. And the real difference is that the designers of these themes over at FileMaker have carefully followed the Apple iOS Human Interface Guidelines, which you can find online, and they've made sure that things like the size of buttons and the touch areas and the fonts and everything are readable on these smaller screens. So you don't have to worry about that type of thing by simply choosing one of the Touch layouts you'll see that all of that has been taken into account for you. And you can just see by the previews what the slight differences are and most of it has to do with size and the actual area on screen that you can work with.
Then finally down here you'll see under the Basic section Minimalist. Minimalist is really just a layout with no theme at all. It's just straight up black and white, little bit of gray hue, and this is kind of the starting point when you're building your own theme. And I'll get to that in just a second. So here you notice I've selected the Minimalist theme and everything has changed on screen. If I go back to Browse Mode and I choose not to save that change we'll go back to the theme that I had before. Now the whole point of the theme is that you not only apply it to one layout, but you apply it to every layout in your application.
That way you can maintain a consistent look and feel throughout. Now these are going to be decisions that you're making when you're in Layout Mode and you're creating new layouts. So if you decide to create a new layout you'll want to make sure that you're using the same theme throughout. This way the entire application is going to look the same. I thought it might be interesting to show you how we create themes in a professional environment. I'm going to put my consultant hat on here and I'm going to show you what we do when we build out themes for our customers.
So first of all, the secret to creating your own theme is to start with the Minimalist theme. So you create a blank layout, choose Minimalist, and you no longer have any more theme elements to it. And an interesting way to look at that is if you go into your Inspector here and if you go to the second tab here, which is called Styles, you'll see there's this little checkbox here called Show All. So now in the case of the Minimalist theme what you can see here is there are no styles at all, but if you go back to Content Management and you say Show All see all these different components here, all these styles have been created for you in advance.
So everything you see here from Button Bar styles, to Buttons, to the Text that you see, and Pop-up Menus, and Drop-down Calendars, all this stuff has been created in advance. Now when you go over to Minimalist you see that you don't have any of it. So it's up to you to create the stuff. So what we do is we start with Minimalist and after a period of time we'll end up with a custom theme. So here you see an example of a custom theme layout. What we do is we add every element we can think of, fields, fields with drop-downs, fields with checkboxes, buttons, you can put things like portals, and pop-overs, tab controls, every single element that you might end up using you can add to your Minimalist theme, but the key is as you're adding these things, like let's say for example, you choose a field, you can go into Style and you can actually change these things to be what you want.
So if you want to say, for example, that your default text is going to be Helvetica New instead you'll see that it slightly changes here. Now here's how the whole concept works. You'll notice under Style that I have the ability to change the Default Style. So remember, we would have started with Minimalist. So in this case I can say, yeah, I would like to change the current style, which is Default, and then I would like to apply those changes to a theme. So now FileMaker reminds me if I apply these changes it's going to apply them to anywhere where there's actually a theme applied.
So in this case I have this theme that I've created up from the Minimalist theme, it's called Master, and any layout that I've applied the Master theme to is now going to adopt this new default font. Now in this particular case you want to be careful with things like fonts, because if I happen to choose my favorite theme here, the Helvetica New, the problem is that's only a Mac font. If Windows users were using this file they wouldn't be able to see it and then FileMaker would render something that would not be Helvetica New, and it would probably kind of mess up what your layouts look like. Just a little tip there and something to be aware of.
So the idea is after a while you can add all these different components, design them yourself, save them to the theme, and then when you're done with your theme you can do one of two things. Either start building new layouts right inside this theme file, like you see here. So here I've got a list view where I've applied the same theme, and you'll see all the different components already available to me, I've applied them to some of the fields already, you can see some of the colors in place. Here's a Detail view of the same thing.
And when you look at this in Browse Mode you can see that I've got a consistent look and feel amongst all the different layouts in my database. And I can create these customized for whoever the client is or if you have a style guide that you use in your organization then you can create a custom theme around that. And that's really how we do it professionally. And the really interesting thing about themes is if you create one and then go into Manage, Themes in another file I can say Import, I can pick the file, and I can say, yeah, let me bring in the Theme, the Touch, and the Master.
So as you can see, you don't have be a designer to have crisp, clean, and consistent looking layouts in your FileMaker custom apps. Instead you can simply use one of the professionally designed themes that ship with the product, or you can create your own themes and then port them around to the different custom apps that you create.
- Getting going with starter solutions
- Creating relationships in FileMaker
- Defining fields
- Designing user interfaces with layouts
- Working with records
- Finding and sorting data
- Building reports
- Understanding calculations
- Automating using Scripts
- What's new in FileMaker version 16