In this lesson, learn how to take a logo and add it to a theme. You’ll then add the logo as a style within the theme, and then you can replicate it easily across your file without having to copy and paste.

The first step is to get a logo from somewhere. Grab an image file that is either .png or .jpeg, and save that to your computer. Next, go into FileMaker. Imagine we want to put a logo into the right hand corner. Then go to layout mode. Here you have the theme. Normally you might go to your files and drag it onto the layout, but in this case, the logo is huge and not built to be in this size of layout. Normally you’d have to go and reduce the size, while holding the shift key to save proportions. This is the old-fashioned way to do things, but it’s not the best way.

The easier way is to take this logo and put it into a theme. Instead of dragging a raw image file into FileMaker, take a rectangle object and draw it onto the layout. You’ll notice that there are different styles for those objects that are in this theme. We’ll stick with the default, and we’re going to save a new style called Logo. Now go to the inspector, and then go to the appearance palette. You can choose the fill style. The options include no fill (invisible), you can choose any solid color, you can choose a gradient, or you can choose an image. In this case we’ll choose an image. Preferably this image is a .png that has background transparency, like an alpha layer. However, this isn’t required.

We’ll insert that, and you’ll now see that this shape is getting filled with our logo, but it’s getting cut off. There are several different options. The original size option will center it at the full size of the image. Scale to Fit is what we want. This will scale your object and it will never be out of the proper proportions. If you choose Scale to Fill, it will fill it up as best it can in one dimension, but it will cut off the logo in the other dimension. Slice and tile are really for special applications. What we want is Scale to Fit.

You can see that this style is still the default style. There is an asterisk, and the triangle is red, which means we’ve got unsaved changes for this style. We don’t want to save these changes to the current style, otherwise we will turn the default shape into a logo and then anytime someone tries to draw a shape on the layout, it will draw a logo instead. We want to save this as a new style. In this case we’ll call it AppWorks Logo.

We’ll save this style into the Universal Touch theme. You can see that the red triangle is here, which means we’ve got unsaved changes in this theme, which means we’ve added a new style to the theme. This style, the AppWorks Logo style, won’t be available to other layouts until we save the changes we’ve made to this theme. We’re going to save the changes we’ve made to the theme, which will give us a warning because it can overwrite things. In this case we’re making a new style, so it’s not going to overwrite anything.

Now we’ll go into our first layout →  Task List. We now want the logo in our upper right corner. We’ll choose that shape and draw that in the corner. FileMaker is going to use the default style. We can go to the style palette, choose Appworks Logo, and there it is! To make it bigger, we can drag – it won’t override the proportions.

We can anchor it to the right side so that when we go back into browse mode and open the window, it sticks to the right hand side.

If I go back into layout mode and take the same object, I can copy it, go to the next layout, and paste it. If I want to align them among both layouts, you can select them, you can look at the position with the ruler. Note the dimensions from top and bottom. Go to other layout and position them in the exact same position.

If I now wanted to change this logo to something else, just go to layout mode, choose your object, go back to the palette, choose a new image and save the style. Save it back to the theme, it will be saved and changed and updated across the entire file. Therein lies the power of themes and styles in FileMaker.