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 image argument, although you can (optionally) provide an image width (via imageWidth). If left unspecified, the width will default to 800px.

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 image and imageWidth 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:

{{B3D:N2P/VTT1
|image=Blender 2.90-startup.png
|imageWidth=600px

|type1=text
|top1=10%
|label1=Example
|text1=This is an example textbox. 

|type2=text
|bottom2=10%
|label2=Another example
|text2=This is another example textbox. 
}}

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.

top, bottom, left, and right: These arguments position the box relative to the image. They behave similarly to their corresponding CSS properties, for example, you can set left=10px to position the box 10 pixels away from the left border of the image, or you can set top=50% 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 top and left will default to 5%)
width: This specifies the width of the box. It works similarly to the width CSS property. For example, width=50% will set the width to take up 50% of the image. It is an optional argument, and it will be set to 35% if left unspecified.
border: 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 border CSS property. For example, border=2px dashed blue 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 3px solid #000).

Textboxes

Textboxes have the following exclusive arguments, which can't be used for drawboxes:

theme: This can either be set to default, black, yellow, red, or blue. These themes change various textbox colors, for example, theme=red 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 default, which simply displays a white background.
color: This argument sets the text color of the textbox. It behaves similarly to the color CSS property. You can specify a color in many formats, including using a named color (e.g. red), using hexadecimal notation (e.g. #FF0000) or rgb() notation (e.g. rgb(255, 0, 0)), using hsl() notation (e.g. hsl(255, 0, 0)), 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 theme (typically #000)
background: This argument styles the background of the textbox. It behaves similarly to the background 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 theme.
label: This argument specifies an optional label for the textbox. For example, label=Example label 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 color and background arguments. It is an optional argument.
text: This argument specifies the text to be displayed inside the textbox. For example, text=Example text will display "Example text" at the top of the textbox.

Textboxes look like the following:

Example label

Example text

Drawboxes

Drawboxes also have their own exclusive arguments, which can't be used for textboxes:

height: This argument, like the width argument, specifies the height of the box. It behaves similarly to the height CSS property. It is an optional argument, defaulting to 5% if unspecified.

Drawboxes look like the following:

Example

{{B3D:N2P/VTT1
|image=Blender 2.90-startup.png
|imageWidth=1000px

|type1=text
|top1=15px
|left1=15%
|width1=60%
|label1=Example
|text1=This is an example textbox. 

|type2=draw
|top2=25%
|left2=35%
|width2=30%
|height2=50%
|border2=2px solid red

|type3=text
|bottom3=15px
|left3=15%
|width3=60%
|label3=Example 2
|text3=This is another example textbox. Note the {{Red|red}} box above, highlighting the splash screen.
}}

becomes

Example

This is an example textbox.

Example 2

This is another example textbox. Note the red box above, highlighting the splash screen.