Box Formatting dialog

The Box Formatting dialog is accessible by clicking inside a box in the template and then selecting Format > Box in the menu.

All settings in this dialog are in fact CSS properties. Cascading Style Sheets (CSS) were originally designed for use with web pages: HTML files. Since Designer templates are HTML files, they are styled with CSS. To learn how to use CSS in the Designer, see Styling and formatting and Styling templates with CSS files. For information about specific properties and their options, see MDN Web Docs - CSS Reference.

Note: When no unit is added to a geometry value, such as the width, height, top or margin, the default unit will be added to the value; see Print preferences.

Note: Using viewport based units (vw, vh, vmin, vmax) in Print sections is not recommended. This may cause differences between the preview in the Designer and the printed output.

For information about the different types of Boxes, see Boxes.

Box tab

  • General group:
    • Width: Set the width of the box in measure or percentage. When no unit is entered, the default unit will be added to the value (see Print preferences). Equivalent to the CSS width property.
    • Height: Set the height of the box in measure or percentage. When no unit is entered, the default unit will be added to the value (see Print preferences). Equivalent to the CSS height property.
    • Angle: Set the rotation angle of the box in clockwise degrees. Equivalent to the CSS transform:rotate property.
    • Corner radius: Set the radius of rounded border corners in measure or percentage. Equivalent to the CSS border-radius property.
    • Display: Use the drop-down or type in the value for how to display the box. This can also be used to hide an element completely using the none option. Equivalent to the CSS display property. See MDN Web Docs - CSS Display.
    • Overflow: Use the drop-down or type in the value for how to handle overflow (text that does not fit in the current size of the box). Equivalent to the overflow property.
  • Text wrap group:
    • Float: Use the drop-down or type in the value for how to float the box, if the box is not in an absolute position (see Position, below). Equivalent to the CSS float property.
    • Clear: Use the drop-down or type in the value for clearing pre-existing alignments. Equivalent to the CSS clear property.
  • Positioning: Note that it depends on both the Context and the type of Box, which settings are available. For information about the different types of Boxes, see Boxes.
    • Position: Use the drop-down or type in the value for the type of positioning for the box. Equivalent to the CSS position property (see Using the CSS position property).
    • Top (Web Context): Set the vertical offset between this box and its parent's top position. Equivalent to the CSS top property.
    • Left (Web Context): Set the horizontal offset between this box and its parent's left position. Equivalent to the CSS left property.
    • Y-offset (Print Context): Sets the vertical offset between this box and the current page's top. This only works for Positioned boxes in sections.
    • X-offset (Print Context): Sets the vertical offset between this box and the current page's left edge. This only works for Positioned boxes in sections.
    • Bottom: Set the vertical offset between this box and its parent's bottom position. Note that you can't set the Height and Top (or Y-offset) and Bottom of a Box. Remove the Height before setting the Bottom property. Equivalent to the CSS bottom property.
    • Right: Set the horizontal offset between this box and its parent's left position. Note that you can't set the Width and Left (or X-offset) and Right of a Box. Remove the Width before setting the Right property. Equivalent to the CSS right property.
    • Z-index: Set the z-index of the box. The z-index defines in which order elements appear.  Equivalent to the CSS z-index property.

Background tab

For information about backgrounds see Background color and/or image.

  • General group:
    • Color: Specify the color of the box background: select a named color (defined in the Colors Properties) from the drop-down, or click the colored square to open the Color Picker dialog (Color Picker). Alternatively you could type a name or value in the Color field directly. It must be a valid CSS color name (CSS color names), a hexadecimal color code (HTML Hex Color), an RGB color value, for example rgb(216,255,170) or a CMYK color value, for example cmyk(15%, 0%, 33%, 0%).
      Equivalent to the CSS background-color property.
  • Background image group:
    • Source: click the Select Image button to select an image via the Select Image dialog. Equivalent to the CSS background property.
    • Size: select auto, cover or contain (for an explanation see MDN Web Docs - background-size), or type the width and height of the image in a measure (e.g. 80px 60px) or as a percentage of the box size (e.g. 50% 50%). Equivalent to the CSS background-size property.
    • Position: select the position for the background-image. Equivalent to the CSS background-position property.

Spacing tab

For information about spacing see Spacing.

  • Padding group: Defines padding (spacing inside the element) in measure or percentage:
    • All sides: Check to set all padding to use the Top value. Equivalent to the CSS padding property.
    • Top, Left, Bottom, Right: Set padding for each side. Equivalent to the CSS padding-left, padding-top, padding-right and padding-bottom properties.
  • Margin group: Defines margins (spacing outside the element) in measure or percentage:
    • All sides: Check to set all margins to use the Top value. Equivalent to the CSS margin property.
    • Top, Left, Bottom, Right: Set the margin for each side. Equivalent to the CSS margin-left, margin-top, margin-right and margin-bottom properties.

Border tab

For information about borders see Border.

  • Same for all sides: Defines the border properties for all sides using the Top properties. Equivalent to the CSS border property.
  • Top, Left, Bottom, Right: Each group defines the following properties:
    • Width: Specify the thickness of the border. Equivalent to the CSS border-widthproperty.
    • Style: Specify the style of the border such as solid, dashed or dotted. Equivalent to the CSS border-style property.
    • Color: Specify the color of the border: select a named color (defined in the Colors Properties) from the drop-down, or click the colored square to open the Color Picker dialog (Color Picker). Alternatively you could type a name or value in the Color field directly. It must be a valid CSS color name (CSS color names), a hexadecimal color code (HTML Hex Color), an RGB color value, for example rgb(216,255,170) or a CMYK color value, for example cmyk(15%, 0%, 33%, 0%).Equivalent to the CSS border-color property.

Content tab

  • Copy Fit: Check this option to automatically scale text inside the Box to the available space; see Copy Fit .
    • Minimum font size: Specify the minimum font size using a valid font measurement unit (pt, px, in, cm or mm). Do not put a space between the number and the unit. The smallest possible size is 1pt. The default is 4pt.
      When left blank, the font size in Design view becomes the minimum font size. Text can only be made bigger than its initial size.
    • Maximum font size: Specify the maximum font size using a valid font measurement unit (pt, px, in, cm or mm). Do not put a space between the number and the unit. The biggest possible size is 1048pt. The default is 48pt.
      When left blank, the font size in Design view becomes the maximum font size. Text can only be made smaller than its initial size.
    • Fit to width only: When this option is checked, no line breaks will be added to the text.
    • Child (optional): When specified, the Copy Fit feature will only be applied to the given child element (an element inside the Box or Div). Specify the element by giving its ID, for example: #product, or class, for example: .product - note the dot.

Type tab

The Type tab has all the settings for text.

  • The font, font size, color and background color:
    • Font: Select the font used to display text. See also: Fonts. This is equivalent to setting the font-family property in CSS.

    • Font size. Enter the size in a measure, named size or percentage. This is equivalent to setting the font-size property in CSS.

    • Color: Specify the color of the text: select a named color (defined in the Colors Properties) from the drop-down, or click the colored square to open the Color Picker dialog (Color Picker). Alternatively you could type a name or value in the Color field directly. It must be a valid CSS color name (CSS color names), a hexadecimal color code (HTML Hex Color), an RGB color value, for example rgb(216,255,170) or a CMYK color value, for example cmyk(15%, 0%, 33%, 0%).
      This setting is equivalent to the color property in CSS.

    • Background color: Specify the background color of the text: select a named color (defined in the Colors Properties) from the drop-down, or click the colored square to open the Color Picker dialog (Color Picker). Alternatively you could type a name or value in the Color field directly. It must be a valid CSS color name (CSS color names), a hexadecimal color code (HTML Hex Color), an RGB color value, for example rgb(216,255,170) or a CMYK color value, for example cmyk(15%, 0%, 33%, 0%).
      This setting is equivalent to the background-color property in CSS.

  • The spacing between letters and words and the way the text is wrapped:
    • Letter Spacing: The space between characters in a text in measure or percentage. This is equivalent to the letter-spacing property in CSS.
    • Word Spacing: Set the space between each word in a text in measure or percentage. This is equivalent to the word-spacing property in CSS.
    • Whitespace: Specify how the text wraps. See MDN Web Docs: white-space for details. This is equivalent to the white-space property in CSS.
  • The style of the text. Check any option to apply the selected style to text within the element. This list shows the CSS property and value for each of the options:
    • Bold: Sets the font-weight to 700.
    • Italic: Sets the font-style to italic.
    • Underline: Sets the text-decoration to underline.
    • Strikethrough: Sets the text-decoration to line-through.
    • Subscript: Sets the vertical-align to super.
    • Superscript: Sets the vertical-align to sub.
    • Capitalize: Sets the text-transform to capitalize.
    • Uppercase: Sets thetext-transform to uppercase.
    • Lowercase: Sets thetext-transform to lowercase.
    • Small-caps: Sets the font-variant to small-caps.

Formats tab

  • General group:

    • Line-height: Specify the height of each line in the box's text, in measure or percentage. Note that this is not spacing between lines, but rather the complete height of the line itself including the text. Equivalent to the line-height property in CSS.

    • Align: Select how text should be aligned, such as left, center, right or justify. Equivalent to the align property in CSS.

    • First Indent: Specify the indentation of the first line of each paragraph in the box. Equivalent to the text-indent property in CSS.

      • Direction: Select in which direction text should be displayed (ltr, rtl, auto). Useful for certain languages such as Arabic, Hebrew, etc. Equivalent to the dir HTML attribute.

  • Breaks group: Page break settings made on a box have an unpredictable effect; it is recommended not to change them.