Box Formatting dialog

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

Box Tab

• General group:
  • Width: Set the width of the box in measure or percentage. Equivalent to the CSS width property.
  • Height: Set the height of the box in measure or percentage. 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. Equivalent to the CSS display property.
  • 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. 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:
  • Position: Use the drop-down or type in the value for the type of positioning for the box. Equivalent to the CSS position property.
  • Top: Set the vertical offset between this box and its parent's top position. Equivalent to the CSS top property.
  • Left: Set the horizontal offset between this box and its parent's left position. Equivalent to the CSS left property.
  • Bottom: Set the vertical offset between this box and its parent's bottom position. Equivalent to the CSS bottom property.
  • Right: Set the horizontal offset between this box and its parent's left position. 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

• General group:
  • Color: Specify the color of the box background.  The color value must be a valid HTML Color Name, or a valid HTML Hex Color. 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 http://www.w3schools.com/cssref/css3_pr_background-size.asp), 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

• 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

• 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.  The color value must be a valid HTML Color Name, or a valid HTML Hex Color. Equivalent to the CSS border-color property.