Home > Designing and creating solutions > Editing objects, layout parts, and the layout background > Formatting objects, layout parts, and the layout background > Adding shadows and padding to layout objects

Adding shadows and padding to layout objects

Use the Advanced Graphic area of the Inspector to further enhance the appearance of objects — including fields, buttons, popover buttons, popovers, tab controls, slide controls, and portals — or parts on a layout. You can add or change:

•	shadows outside or inside an object’s border

•	a shadow inside a layout part

•	the color, opacity, blur, spread, and offset of shadows

•	the amount of padding (the space between an object’s edge and its contents) for objects such as fields, buttons, button bars, popovers, and panel controls

Not all options in the Advanced Graphic area are available for all object types. For example, you can apply outer shadows but not inner shadows to tab controls, and you can’t specify padding for objects such as rectangles and ovals.

Note  You can further change the appearance of objects using the Graphic area of the Inspector. See Setting the fill, line style, and borders for objects, layout parts, and the layout background.

To add or change object appearance:

1.	In Layout mode, select one or more objects.

See Selecting objects.

Note  To add a shadow inside a layout part, select the part label. A layout part is considered to be an object in the following steps.

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

The options you choose affect the appearance of the selected objects in all modes.

3.	To add shadows to the object, in the Advanced Graphic area, select Outer Shadow or Inner Shadow, or both.

4.	To change the appearance of shadows (for example, the color or amount of blur), click to the right of Outer Shadow or Inner Shadow, then change the effects you want.

 

To change	Use this control
The color of a shadow	Color
The horizontal or vertical position of a shadow in relation to the layout object	Horizontal Offset or Vertical Offset, or both Specify the values between -100 and 100 points.
The transparency of a shadow	Opacity The value is specified as a percentage.
The amount of diffusion of a shadow	Blur The value is specified in points.
The size of a shadow	Spread The value is specified in points.

5.	To change the amount of padding between the object’s edge and its contents, for Padding, specify values (in points) for Left, Right, Top, and Bottom.

For example, to add more padding between the bottom border of a button the button’s label, increase the value for Bottom.

Changing the padding of buttons, popover buttons, popovers or slide controls differs from other objects:

•	Changing the top padding of a popover increases or decreases the height of the popover title area.

•	Changing the bottom padding of a slide control increases or decreases the height of the area containing the dots below the slide panels.

•	Changing the padding of a button or popover button applies to both the label and the icon.

•	Changing the padding between a button text label and icon increases or decreases the space between the text label and icon. See Formatting buttons, popover buttons, and popovers.

Notes

•	Each theme comes with a set of default styles for objects such as shapes, buttons, lists, and menus. When you create an object or a new part on a layout, the object or part is formatted in the theme’s default style.

•	To create a custom color, see Setting the fill, line style, and borders for objects, layout parts, and the layout background.

•	To change the value of the fill color, click , then drag the Opacity slider (Windows) or click Other Color, then drag the Opacity slider (OS X).

•	You can display attributes that are specific to the state of the object when it is viewed in Browse mode. For example, you can set a darker shadow when a user pauses the mouse pointer over a field to draw attention to the field. See Specifying the display state for an object.

•	You can view or change the RGB value of a color in hexadecimal format in the text box of the color palette.

•

There is an alternative way to view or change the RGB value of a color. In Windows, in Layout mode, click the Fill color palette in the formatting bar and choose Other Color. Three-digit values are shown for each of the basic colors. In OS X, in Layout mode, click the Fill color palette in the formatting bar and choose Other Color. Select the Color Sliders tab. Choose RGB Sliders from the list. Three-digit values are shown for each of the basic colors.

•	If you select two or more button bars and the orientation is different, the padding values aren’t displayed in the Appearance tab.

Related topics 

Drawing and inserting objects on a layout

Selecting and working with objects on a layout