Formatting buttons, popover buttons, and popovers

To format a button or popover button:

  1. In Layout mode, select the button or popover button.
  2. In the Inspector, click the Appearance Appearance tab.
  3. Choose Button or Button: Icon from the object type list (near the top of the tab), then do the following.

    Note  Not all options are available for all components.

    4. To

    Do this

    Change the line style, color, and fill attributes

    Choose the line style, color, and fill options in the Graphic area.

    Change the format of the label text

    Do one of the following:

    • Choose options in the Text area in the Inspector.
    • Use the text options in the formatting bar. If you don't see the formatting bar, click Formatting Formatting bar button in the layout bar.

    Set the horizontal and vertical alignment of the label text and icon

    In the Paragraph area, set the horizontal and vertical alignment.

    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 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.

    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.

    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.

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. In the Inspector, click the Appearance Appearance tab.
  3. Choose Popover or Popover: Content from the object type list (near the top of the tab), then do the following.

    4. 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.

    Change the appearance of the popover's background or the background of the popover's content area

    Choose a fill in the Graphic area.

    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.

    Add an inner shadow to the popover's content area

    In the Advanced Graphic area, select Inner 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.

    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 Formatting bar button in the layout bar.

Related topics