Home » Working with widgets » Working with Rectangles

Adding a new Rectangle

Renaming a Rectangle

Changing the position of a Rectangle

Resizing a Rectangle

Changing the action and sound of a Rectangle

Changing the fill style and color(s) of a Rectangle

Changing the stroke color of a Rectangle

Changing the stroke thickness of a Rectangle

Displaying the Rectangle’s name inside of it

Changing the font, font size, or font color of the name of a Rectangle

Changing the font style of the name of a Rectangle

Moving a Rectangle Forward or Backward

Centering a Rectangle

Deleting a Rectangle

Adding a new Rectangle:

Choose Widget > Insert Shape > Rectangle. If the current Edit Mode is Edit Background Layer, then the Rectangle will be added to the Background. Otherwise, it will be added to the current card.

Alternately, you can type ^⌥⌘R.

A Rectangle can also be added using the Widgets pull-down menu in the toolbar.
Widgets Pull Down

Renaming a Rectangle:

  1. If the Rectangle is located in the Background, then change the Edit Mode to Edit Background Layer. Otherwise, change the Edit Mode to Edit Card Layer. (See Changing the Edit Mode of a stack for more information regarding Edit Modes.)
  2. Click on the Rectangle.
  3. Click the “Widget” button on top right of the Info sidebar.
    Widgets Button
  4. In the “General” section of the Info sidebar, type the new name of the Rectangle into the Name field.
    Rename

Changing the position of a Rectangle:

  1. If the Rectangle is located in the Background, then change the Edit Mode to Edit Background Layer. Otherwise, change the Edit Mode to Edit Card Layer. (See Changing the Edit Mode of a stack for more information regarding Edit Modes.)
  2. Click and drag the Rectangle to the desired destination.

    Alternately, the location can altered using the Rectangle’s “Metrics” section of the Info side bar.

Resizing a Rectangle:

  1. If the Rectangle is located in the Background, then change the Edit Mode to Edit Background Layer. Otherwise, change the Edit Mode to Edit Card Layer. (See Changing the Edit Mode of a stack for more information regarding Edit Modes.)
  2. Click on the Rectangle.
  3. Click and drag one the anchors in the desired direction.
    Anchors

    Alternately, the width and height can altered using the Rectangle’s “Metrics” section of the Info sidebar.

Changing the action and sound of a Rectangle:

  1. If the Rectangle is located in the Background, then change the Edit Mode to Edit Background Layer. Otherwise, change the Edit Mode to Edit Card Layer. (See Changing the Edit Mode of a stack for more information regarding Edit Modes.)
  2. Click on the Rectangle.
  3. Click the “Widget” button on top right of the Info sidebar.
    Widgets Button
  4. In the “Action” section of the Info sidebar, choose the action type using the “Type” pop up.
    Action Type
  5. To complement the the action with a sound, choose a system sound using the “Sound” pop up.
    Action Sound

Changing the fill style and color(s) of a Rectangle:

  1. If the Rectangle is located in the Background, then change the Edit Mode to Edit Background Layer. Otherwise, change the Edit Mode to Edit Card Layer. (See Changing the Edit Mode of a stack for more information regarding Edit Modes.)
  2. Click on the Rectangle.
  3. Click the “Widget” button on top right of the Info sidebar.
    Widgets Button
  4. In the “Fill” section of the Info sidebar, choose the fill style using the “Style” pop up. Possible styles include: None, Color, and Gradient.
    Fill Style
  5. If the chosen style is either Color or Gradient, then change the fill color (or colors if Gradient is chosen) by clicking on the well under “Style” pop up.
    Fill Well

Changing the stroke color of a Rectangle:

  1. If the Rectangle is located in the Background, then change the Edit Mode to Edit Background Layer. Otherwise, change the Edit Mode to Edit Card Layer. (See Changing the Edit Mode of a stack for more information regarding Edit Modes.)
  2. Click on the Rectangle.
  3. Click the “Widget” button on top right of the Info sidebar.
    Widgets Button
  4. In the “Stroke” section of the Info sidebar, click on the “Color” color well to open the Colors panel.
    Stroke Color
  5. Using the Color panel, choose the desired color.

Changing the stroke thickness of a Rectangle:

  1. If the Rectangle is located in the Background, then change the Edit Mode to Edit Background Layer. Otherwise, change the Edit Mode to Edit Card Layer. (See Changing the Edit Mode of a stack for more information regarding Edit Modes.)
  2. Click on the Rectangle.
  3. Click the “Widget” button on top right of the Info sidebar.
    Widgets Button
  4. Click and drag the “Thickness” slider to the desired thickness (in points).
    Fill Well

Displaying the Rectangle’s name inside of it:

  1. If the Rectangle is located in the Background, then change the Edit Mode to Edit Background Layer. Otherwise, change the Edit Mode to Edit Card Layer. (See Changing the Edit Mode of a stack for more information regarding Edit Modes.)
  2. Click on the Rectangle.
  3. Click the “Widget” button on top right of the Info sidebar.
    Widgets Button
  4. In the “Text” section of the Info sidebar, click the “Display name in shape” check box if it is not already checked.
    Display Name

Changing the font, font size, or font color of the name of a Rectangle:

  1. If the Rectangle is located in the Background, then change the Edit Mode to Edit Background Layer. Otherwise, change the Edit Mode to Edit Card Layer. (See Changing the Edit Mode of a stack for more information regarding Edit Modes.)
  2. Click on the Rectangle.
  3. Click the “Widget” button on top right of the Info sidebar.
    Widgets Button
  4. If the name of the Rectangle is not displayed inside the Rectangle, then tell the Rectangle to display its name by following the instructions in the section Displaying the Rectangle’s name inside of it.
  5. Choose Format > Font > Show Fonts.

    Alternately, you can type ⌘T to show the Font Panel
  6. Make the desired changes in the Font Panel.

Changing the font style of the name of a Rectangle:

  1. If the Rectangle is located in the Background, then change the Edit Mode to Edit Background Layer. Otherwise, change the Edit Mode to Edit Card Layer. (See Changing the Edit Mode of a stack for more information regarding Edit Modes.)
  2. Click on the Rectangle.
  3. Click the “Widget” button on top right of the Info sidebar.
    Widgets Button
  4. If the name of the Rectangle is not displayed inside the Rectangle, then tell the Rectangle to display its name by following the instructions in the section Displaying the Rectangle’s name inside of it.
  5. Choose Format > Font > <Bold or Italic or Underline>.

Moving a Rectangle Forward or Backward:

  1. If the Rectangle is located in the Background, then change the Edit Mode to Edit Background Layer. Otherwise, change the Edit Mode to Edit Card Layer. (See Changing the Edit Mode of a stack for more information regarding Edit Modes.)
  2. Click on the Rectangle.
  3. To move a Rectangle one position at a time, choose Widget > Bring Forward or Send Backward.

    To move a Rectangle in front of all other widgets in a card or the background, choose Widget > Bring to Front.

    To move a Rectangle behind all other widgets in a card or the background, choose Widget > Send to Back.

Centering a Rectangle:

  1. If the Rectangle is located in the Background, then change the Edit Mode to Edit Background Layer. Otherwise, change the Edit Mode to Edit Card Layer. (See Changing the Edit Mode of a stack for more information regarding Edit Modes.)
  2. Click on the Rectangle.
  3. To center a Rectangle horizontally, choose Widget > Center Horizontally in Card or Center Horizontally in Background.

    To center a Rectangle vertically, choose Widget > Center Vertically in Card or Center Vertically in Background.

Deleting a Rectangle:

  1. If the Rectangle is located in the Background, then change the Edit Mode to Edit Background Layer. Otherwise, change the Edit Mode to Edit Card Layer. (See Changing the Edit Mode of a stack for more information regarding Edit Modes.)
  2. Click on the Rectangle.
  3. Press the Delete key.