Template:B3D:N2P/VTT1



Usage
This template is used to overlay as many as nine textboxes or rectangles on top of an image. You must provide an image to the template using the  argument, although you can (optionally) provide an image width (via  ). If left unspecified, the width will default to.

Each item overlayed on the image must be one of two types: either a "textbox" or a "drawbox". Both have their own arguments. Each argument (apart from the  and   arguments) must belong to a item numbered 1-9. This "item number" will be appended to each argument of the item. For example, see the following: The first item is item number 1. Therefore, we add a "1" at the end of every argument for item 1. Similarly, the next item is item number 2, so we add "2" at the end of its arguments.

For a detailed list of arguments, see the below

Shared arguments
These are the arguments that are shared between textboxes and drawboxes. Most of these arguments work similarly to CSS properties of the same name. To see a list of all of them, visit https://developer.mozilla.org/en-US/docs/Web/CSS.


 *  ,  ,  , and  : These arguments position the box relative to the image. They behave similarly to their corresponding CSS properties, for example, you can set  to position the box 10 pixels away from the left border of the image, or you can set   to position the top of the box at the center of the image (i.e., the midway point). All of these are optional (if left unspecified, both   and   will default to  )
 *  : This specifies the width of the box. It works similarly to the  CSS property. For example,   will set the width to take up 50% of the image. It is an optional argument, and it will be set to   if left unspecified.
 *  : This argument allows you to style the border of the box. You can customize the color, the width, and the line style. It works similarly to the  CSS property. For example,   will create a 2-pixel-wide blue border with dashed lines. It is an optional argument, however, its default value depends on the type of box used (typically  ).

Textboxes
Textboxes have the following exclusive arguments, which can't be used for drawboxes:
 *  : This can either be set to,  ,  ,  , or  . These themes change various textbox colors, for example,   will set the background color to red, and change the border color and the text color to match accordingly. It is an optional argument. By default, its value is  , which simply displays a white background.
 *  : This argument sets the text color of the textbox. It behaves similarly to the  CSS property. You can specify a color in many formats, including using a named color (e.g.  ), using hexadecimal notation (e.g.  ) or   notation (e.g.  ), using   notation (e.g.  ), among other methods. You can use a color picker to get these values, or pick from a list of named colors. It is an optional argument, but its default value depends on the   (typically  )
 *  : This argument styles the background of the textbox. It behaves similarly to the  CSS property. Its main use is to specify a background color, although it can be used to specify other background properties. It is an optional argument, but its defaultt value depends on the.
 *  : This argument specifies an optional label for the textbox. For example,  will display "Example label" at the top of the textbox. Any label text will always use white for its text color, and black for its background color, completely ignoring the   and   arguments. It is an optional argument.
 *  : This argument specifies the text to be displayed inside the textbox. For example,  will display "Example text" at the top of the textbox.

Textboxes look like the following:

Drawboxes
Drawboxes also have their own exclusive arguments, which can't be used for textboxes:
 *  : This argument, like the  argument, specifies the height of the box. It behaves similarly to the   CSS property. It is an optional argument, defaulting to   if unspecified.

Drawboxes look like the following:

Example
becomes

VTT1