Skin form — Components tab — General — Overlays |
Styles set here apply to overlays. You can define styles for the Standard overlay format or create custom overlay formats.
An overlay launches a local action in a panel overlaying the current window. The user can dismiss it by clicking outside the overlay area or through an explicit Display>Close action, configured in the Local Action. You can configure overlays by specifying the Target of Launch>Local Action as an Overlay. See the Actions tab for more information.
A preview of the currently selected format displays to the right. To preview all overlay formats, click Preview All.
You can also preview formats by selecting Actions > Launch in the toolbar and then choosing one of the following preview options: Run Process, Open Portal, Harness Preview, UI Gallery Preview, Skin Preview.
Applies to the border of overlays.
Use mixin |
Select this option to use a mixin to define the appearance of this element. The Mixin field displays the name and a preview of the currently selected mixin. If desired, you can specify the Top, Left, Right, or Bottom border as none, solid, dashed, or dotted , rather than inheriting the style from the selected mixin. |
Specify styles |
Select to define a custom border:
|
Rounded corners
enable rounded corners (HTML5 only) |
Select this check box if you want the border of the overlay to have rounded corners when rendered in HTML5 document type. You can select this option when using a mixin or a custom border. For information about rendering your application in HTML5 document type, see HTML5 Application Readiness. Rounded corners do not work when the UI is rendered in quirks mode. |
same for all corners |
Select to use the rounded corner settings that you specify in the Unit and Radius fields for all four corners or clear to specify the length of the x and y axis for the Top Left, Top Right, Bottom Left, and Bottom Right. |
same x and y axis radii |
Select to specify x and y radii of the same length. If you clear this check box, specify the length of the x and y axis for the Top Left, Top Right, Bottom Left, and Bottom Right. |
Unit | Select the unit of measurement for the rounded corner settings: pixels (px), em (the current font size), or percentage (%). |
Radius |
Define the curve of rounded corners by specifying the x (hortizontal) and y (vertical) radii of the quarter ellipse that makes the rounded corner of the overlay. |
Specifies padding in the body area of overlays.
Padding |
Specify the width of the padding in pixels. Clear the Apply same padding on all sides check box if you want to specify a different amount of padding, in pixels, for Top, Left, Right, and Bottom. |
Applies to the background of overlays.
Use mixin |
Select this option to use a mixin to define the appearance of this element. The Mixin field displays the name and a preview of the currently selected mixin.
|
Specify styles |
Select this check box to define a custom background: Select the background Type:
|
To create a style format:
To create a style format by copying an existing format, click Actions and select Save as from the list.
Applying a custom overlay format
Configure a local action to display as an overlay.
You can delete styles that you create; click the delete icon.