Intro to Visual Editor
This movie explains the general editing functions of the WYSIWYG template editor. (6/19/2008)


Invoice Templates
- Build a Simple Invoice Template
- Code Based Templates
- Intro to Visual Editor
categories
- Beginner
- Setup
- Advanced
- Invoice Templates

Extra Images


Video Transcript

Hello and Thank you for using Studiometry!

This instructional movie clip provides an overview of Studiometry’s visual template editor.

In the top left-hand corner of Studiometry’s main window is the Preferences icon. Please click on it to open the Preferences window.

In the Preferences window, please navigate to the Invoices/Reports section.

Move to the “add a template” button. Add a New Visual Invoice Template by double-clicking on that term.

A new window will then open. This is the Visual Template Editor.

I will now explore the seven icons located at the top of the window.

Starting from the left…

[NEW VARIABLE]

The New Variable icon provides the ability to add variables.

Clicking on the icon will add a variable item box to the template, move the item box to the location you wish to have it placed.

After moving the variable item box, the Variables Properties menu will appear.

For the position of an item, you may choose to manually modify the item boxes position on the page along with its height and width.

OR you may choose to enter the information precisely in the Position section of the Variable Properties window.

You can also control an items position in the Z order.

This function can be useful if you have several items in the same region such as a background and text, allowing you to control which item will be in front of the other.

The Page option allows you to place an item box in the same exact place on the following page. This is function can be useful if you want to move an item to a subsequent page and avoid the hassle of having to line it up again.

The next section of the Variables Properties window is Formatting.
From here you can modify:
Font, text size, bolding, italizing, underlining, color, text alignment, and line height.

Line height defaults are relative to Font sizes, but you can set them to a custom height if you choose.

The final section of the Variable Properties window is the Item Information section. Here is where you choose which specific variable you would like.

An extensive list describing what the variables are and where each is derived from within Studiometry can be found in you help documents or online at: www.oranged.net/studiometry/Help

Otherwise a small description is provided for nearly every variable at the bottom of the Variables Properties window.

[NEW TEXT]

The next icon is New Text and it provides the ability to add static text.

Clicking on the icon will add a Text item box to the template, move the item box to the location you wish to have it placed.

After moving the Text item box, the Text Properties menu will appear.

You can position and format the Text item box like any other function of the visual template editor.

Any text you enter into the Text Section of the New Text Properties window will be shown on the template.

Enter the words Name and Address.

Press Apply and your text will appear in the invoice.

You also have the option of adding the corresponding variables following a special format right in the text box.
< !—-MyName-- > < !-—MyAddress-- >

Click Apply. You will now see your variables on the template.




[NEW PICTURE]

The next icon is New Picture. This function allows you to add a picture image to the template. Click the New Picture icon and move the Picture Item box to where you like and then click on the Picture section of the Properties window.

You can then choose a picture file.

You can also drag and drop an image file directly into the template.


[New Graphics Object]

The next icon is New Graphics Object. This function allows you to add 4 types of graphics objects:

-a vertical line
-a horizontal line
-an oval,
-a rectangle and rounded rectangle.

When adding a line, it will appear vertically at first. To change it to a horizontal line simply modify the height of the line by changing the size of the item box.

For the all of objects you may choose a border thickness and color. You could also fill the object with a specific background color.

For rounded rectangles you have additional control over the corner arcs.

[NEW DATA COLUMN]

The next icon New Data Column and clicking on this icon will add a Data Column item box to your template.

Move the item box manually to the place you wish to have it or use the Position options in the Data Column Properties window for precision placement.

In the Properties window, begin by choosing the type of data you would like placed into the column.

The next few options for fonts and text, down to text aligning are the same as Variable and Text items.

Line spacing and line height on the other hand are very important to data columns allowing you to space out your information accordingly.

Text Wrapping, line backgrounds, and background colors offer customization options.

[TEMPLATE INFO]

The second to last icon is Template Info.

This icon will open the General Template Settings window. In this window, you can give your template a more specific name and view its Invoice Template ID.

Choose Page Size.

Choosing Width or Height manually is an option, but keep in mind to ensure that your template fits the page at the time of printing.

Choosing Generate all Pages will help automate the production of subsequent pages when amount of displayed data exceeds the first page.

[EXPORT]

The final icon is Export. It allows you to export your template to file outside of Studiometry.



We have now covered the central components of Studiometry’s Visual Template Editor.

Thank you for listening today.
 

Copyright © 2000 - 2009 Oranged Software
- All rights reserved. -

Refund Policy | Privacy Policy