Editing objects, layout parts, and the layout background > Formatting layouts > Formatting buttons, popover buttons, and popovers
 

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.

 

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

 

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 

Adding shadows and padding

Setting the fill, line style, and borders

Formatting text