Home > Designing and creating solutions > Editing objects, layout parts, and the layout background > Formatting objects, layout parts, and the layout background > Formatting buttons, popover buttons, and popovers

Formatting buttons, popover buttons, and popovers

You can format the appearance of buttons and popover buttons and their components — including the border, fill, and label — and popovers — including the border, title, and content area (the area in which objects are placed).

Note  Your formatting changes are saved on the current layout only. To save changes as a style that can be applied to other buttons, popover buttons, or popovers, see Creating and working with styles for layout objects, parts, and the layout background. Or, to save changes to a theme, see Saving a layout theme.

To format a button or popover button:

1.	In Layout mode, select the button or popover button.

2.	Click Inspector in the layout bar, then click Appearance.

3.	Choose Button or Button: Icon from the object type list (near the top of the Appearance tab), then do the following.

Note  Not all options are available for all components.

 

To	Do this
Change the line style, color, and fill attributes	Choose the line style, color, and fill options in the Graphic area. See Setting the fill, line style, and borders for objects, layout parts, and the layout background.
Change the format of the label text	Do one of the following:  • Choose options in the Text area of the Inspector.  • Use the text options in the formatting bar. If you don’t see the formatting bar, click Formatting in the layout bar. See Formatting text.
Set the horizontal and vertical alignment of the label text and icon	In the Paragraph area, set the horizontal and vertical alignment. Spacing between the label text and the icon is preserved; the label’s font size determines the spacing. Labels that have multiple lines of text use the entire width of the button. Use the Paragraph area to set the line spacing.
Change the color of the label icons	Choose Button: Icon from the object type list, then select a display state (from the second list in the Appearance tab). In the Graphic area, choose a color. You can change the fill color of the provided icons. However, for custom icons in .svg format, changing the fill color in FileMaker Pro affects only the elements that have no fill color already defined in the .svg file. For more information on SVG support, see FileMaker Pro SVG Grammar for Button Icons. You can't change the fill color of custom icons in .png format. See Specifying the display state for an object.
Add a shadow	In the Advanced Graphic area, select Outer Shadow, Inner Shadow, or both. Then click to change effects for the shadow. See Adding shadows and padding to layout objects.
Adjust the padding between the edges of the button and both the label text and icon	In the Advanced Graphic area, for Padding, specify values (in points) for Left, Right, Top, and Bottom. See Adding shadows and padding to layout objects.
Adjust the padding between the icon and label text	Choose Button: Icon from the object type list, then specify the appropriate value (in points) for the Padding. You can only change one value in Padding because it is determined by the position of the icon and label. For example, if the label text is to the right of the icon, only Right padding is available.

To format a popover:

You format the popover and the popover content area separately.

1.	In Layout mode, select the popover.

If the popover is hidden, select the popover button, then choose Format > Display Popover.

2.	Click Inspector in the layout bar, then click Appearance.

3.	Choose Popover or Popover: Content from the object type list (near the top of the Appearance tab), then do the following.

 

To	Do this
Change the line style or color of the popover’s border or the border of the popover’s content area	Choose line style or color options in the Graphic area. See Setting the fill, line style, and borders for objects, layout parts, and the layout background.
Change the appearance of the popover’s background or the background of the popover’s content area	Choose a fill in the Graphic area. See Setting the fill, line style, and borders for objects, layout parts, and the layout background. Tip  You can create a custom border for a popover by specifying different fills for the popover and its content area.
Add an outer shadow to the popover	In the Advanced Graphic area, select Outer Shadow. Then click to change effects for the shadow. See Adding shadows and padding to layout objects.
Add an inner shadow to the popover’s content area	In the Advanced Graphic area, select Inner Shadow. Then click to change effects for the shadow.
Change the padding between the boundary of the popover and the boundary of the popover’s content area	In the Advanced Graphic area, for Padding, specify values. Note  Changing the top padding of a popover increases or decreases the height of the popover title area. See Adding shadows and padding to layout objects.
Change the appearance of the popover’s title	If the Popover Button Setup dialog box is not open, double-click the popover or select the popover and choose Format menu > Popover Button Setup, then:  • Choose options in the Text or Paragraph area.  • Or, use the text options in the formatting bar. If you don’t see the formatting bar, click Formatting in the layout bar. See Formatting text.

Notes

•	You can’t format a locked object. See Protecting objects from change.

•	You can format the appearance of a popover button to be conditional (for example, format a popover button to remain hidden when a certain condition is met). See Defining conditional formatting for layout objects and Hiding or showing layout objects.