Chapter 11: Managing web page content - Convio Online Help

Using the Convio WYSIWYG Editor: Section 1
Introduction.................................................................................................................................................... 1
Accessing the WYSIWYG Editor .................................................................................................................. 1
WYSIWYG Window Overview ...................................................................................................................... 2
Toolbars Overview ........................................................................................................................................ 2
First Toolbar Row ................................................................................................................................... 2
Second Toolbar Row .............................................................................................................................. 4
Third Toolbar Row .................................................................................................................................. 6
Bottom of the WYSIWYG Window .......................................................................................................... 8
Resizing the WYSIWYG Window ........................................................................................................... 8
Buttons below the WYSIWYG Window .................................................................................................. 9
Using the WYSIWYG .................................................................................................................................... 9
Using Keyboard Shortcuts .................................................................................................................... 10
Adding Text ........................................................................................................................................... 10
Running a Spell Check ......................................................................................................................... 10
Editing and Formatting Text ................................................................................................................. 11
Formatting Text with the Dropdown Menus .......................................................................................... 12
Format Menu .................................................................................................................................. 12
Styles Menu ................................................................................................................................... 12
Font Family Menu .......................................................................................................................... 13
Font Size Menu .............................................................................................................................. 13
Edit CSS Styles .................................................................................................................................... 13
Inserting and Editing Attributes and Events ................................................................................... 15
Removing Formatting Code .................................................................................................................. 16
Viewing and Editing HTML Code .......................................................................................................... 16
Cleaning Up Messy Code .............................................................................................................. 17
Adding and Editing Images ................................................................................................................... 18
Wrapping Text around an Image .......................................................................................................... 24
Wrapping using the Alignment Choices when Placing the Image ................................................. 24
Wrapping using the Alignment Icons on the Toolbar ..................................................................... 25
Wrapping by using a Table ............................................................................................................ 25
Wrapping by Altering the HTML code ............................................................................................ 26
i

Inserting a Link to a Convio Application ............................................................................................... 27
Inserting a Link to a CMS Page ............................................................................................................ 29
Inserting a Web Link ............................................................................................................................. 31
Inserting an Anchor (Bookmark) ........................................................................................................... 33
Inserting a Custom Character ............................................................................................................... 34
Creating and Editing a Table ................................................................................................................ 35
Revised January 2012
ii

Introduction
The WYSIWYG editor allows you to create state-of-the-web pages. For example, you can paste in
content from another application, add personalization, direct your page to a specific audience, embed a
survey, or insert a link to a news article. If you are comfortable with HTML, you can at any time view the
actual HTML and directly modify that code. You can even insert Flash content into your page using the
code window of the editor.
The same WYSIWYG editor used to create web content in PageBuilder is also used for composing email,
writing on-screen thank you messages in Convio Advocacy, composing a StoryBuilder article, creating
stationery, and much more.
This document explains the function of each item on the toolbar. It also presents a series of task-oriented
procedures for adding, editing, and formatting content as well as for working with the additional features
such as Convio conditionals, personalization, and components. Important: This WYSIWYG editor is
compatible with IE 6, 7, and 8; Mozilla Firefox 3; and Jaws 10.
Accessing the WYSIWYG Editor
You can access the WYSIWYG editor can from a variety of applications. Two common areas of entry are
documented below:
Accessing the editor from PageBuilder:
1. Mouse over Content on the navigation bar and click on PageBuilder in the drop-down menu that
displays.
2. Click on Edit Content in the Actions column for a page in the Page Library to edit that page, or
create a new page and page version by following the steps described in the PageBuilder online help
pages.
3. On the Edit Content screen, click the pencil icon in the upper right corner of any existing content, or
select HTML Content from the drop-down menu for any Empty Component.
4. A new window opens and displays the WYSIWYG Editor. Use the editor to create content.
Accessing the editor from the StoryBuilder application:
1. Mouse over Content on the navigation bar and click StoryBuilder in the drop-down menu that
displays.
2. Click the Create a StoryBuilder Article link.
3. On the New Article page that opens, use the WYSIWYG Editor to compose an article, including if
needed images and additional WYSIWYG content as described in this document.
1

WYSIWYG Window Overview
The WYSIWYG window is shown below. It consists of administrative links, three toolbars, an editing area,
an HTML Object Path bar, and a button bar. Detailed descriptions of these components follow.
The upper right corner of the WYSIWYG includes two links:
1. Use Plain Text Editor: This link saves your work and reloads the page with a text editor.
2. Help: This link opens a new window with a link to this TinyMCE Reference Manual.
Toolbars Overview
The toolbars contain icons familiar to anyone who uses Windows applications. They fall into three basic
categories:
1. Block-level features, such as cut and paste, print, indent, and HTML code display.
2. Text formatting features, such as bold, italic, color, size, and styles.
3. Images, bookmarks, special components, personalization, conditionals, and tables.
The toolbars are briefly described below, by row.
First Toolbar Row
The following row shows the toolbar as it displays in Microsoft Internet Explorer.
2

The supported versions of Firefox (3.5 and later) do not display the first three buttons on the toolbar, as
Firefox does not permit the cut and paste operations:
The first row consists of icons to cut, copy, and paste content, as well as some formatting,
Tool Name Function
Cut Icon Use to remove the selected content from the
window and place it on the clipboard
Copy Icon Use to copy the selected content to the clipboard,
including any HTML formatting tags.
Paste Icon Use to paste the last copied or cut content from the
clipboard into the editor window
Spell Check Icon Use to check the spelling of text content
Text Paste Icon Use to paste the last copied or cut content from the
clipboard as plain text into the editor window
Word Paste Icon Use to paste the last copied or cut Word document
content from the clipboard into the editor window
Undo Icon Use to undo the last action; can click again to undo
the next to last action, and so on.
Redo Icon Use to restore the last action that was undone; like
the undo icon, it can be clicked again to redo the
next to last action that was undone
Bulleted List Icon Use to create a list with bullet points for each
Numbered List Icon Use to create a numbered list from the selected
paragraphs
3

Tool Name Function
Align Left Icon Use to position the selected content along the left
margin of the page
Align Center Icon Use to position the selected content in the middle of
the page
Align Right Icon Use to position the selected content along the right
margin of the page
Justify Text Use to justify the selected content along both
margins
Outdent Icon Use to move the selected text to the left by the tab
setting (or, the default .5 tab setting)
Indent Icon Use to move the selected text to the right by the tab
setting (or, the default .5 tab setting)
Edit HTML Source Use to display a window with a simple editor
containing your content’s HTML code
Clean Up Messy Code Use to remove non-standard tags and attributes
from your HTML code
Toggle Guidelines/Invisible
Elements
Second Toolbar Row
Use to hide/show borders around HTML container
tags (such as paragraph) and the HTML code
where your cursor is located
The second row consists of icons to format text and blocks of text, changing styles, fonts, colors, and so
forth.
Tool Name Description
Edit CSS Style Use to apply Cascading Style Sheet properties to
text
4

Tool Name Description
Insert/Edit Attributes Use to specify text and content attributes, as well as
event handlers for JavaScript
Format list Use to format selected text
Styles list Use to apply the Cascading Style Sheet properties
defined in CustomWysiwygStyle.css
Font family list Use to apply fonts to selected text
Font size list Use to apply font sizing, as a percentage of default
size, to selected text
Bold Use to display the selected content in bold type
Italic Use to display the selected content in Italic font
Text Color Use to display the color selector that enables you to
choose a new color for the selected text
Background Color Use to display the color selector that enables you to
choose a for the background of the selected content
Select All Use to select all content
Remove Formatting Use to remove formatting from selected text
Horizontal Rule Use to separate sections of content
5

Third Toolbar Row
The third row toolbar contains icons for embedding images, symbols, and dynamic media; creating links;
inserting personalization, Convio components and conditionals; and creating and modifying tables.
Tool Name Function
Image Use to specify the URL of an image file and its
properties, and insert the URL into your content, as
well as to open the Convio Image Library where
you can select an existing image for your content
or add and upload a new image
Create Link
Insert/Edit URL or Convio
Link
Use to create a link to a different page, an anchor,
or a CMS page or to edit an existing link
Unlink Use to remove the link tagging from around the
selected content
Anchor Use to display the Insert/Edit Anchor pop-up that
enables you to place a named marker into the
content
Components Use to specify the URL of an image file and its
properties, and insert the URL into your content
Convio Personalization Use to customize the content displayed to a
specific viewer
Convio Conditionals Use to display selected content to users based on
their status relative to a given group or feature
(such as to donors, or to members of a team)
Edit Convio Conditional Use to modify a conditional after creating it
Toggle Convio Conditional Use to switch between the values tested in a
conditional
6

Tool Name Function
Insert Custom Character Use to insert symbols such as Greek letters,
currency, and extended characters
The following tools apply to tables.
Insert Table Use to display the Tables Properties page that lets
you create the rows and columns of a new table
(and assign other properties as appropriate)
Table Row Properties Use to display the Row Properties page that lets
you set the horizontal and vertical alignment of the
contents within a row as well as the height of the
row itself, and other advanced properties
Table Cell Properties Use to display the Cell Properties page that lets
you set the horizontal and vertical alignment of the
cell contents, as well as its width and height, and
other advanced properties
Insert Table Row Above Use to insert a new row above the current (or
selected) row
Insert Table Row Below Use to insert a new row below the current (or
selected) row
Delete Table Row Use to delete the selected table row(s)
Insert Table Column Before Use to insert a new column to the left of the current
(or selected) column
Insert Table Column After Use to insert a new column to the right of the
current (or selected) column
Delete Table Column Use to delete the selected column(s)
7

Tool Name Function
Split Table Cells Use to divide the selected cell into another row or
column
Merge Table Cells Use to merge the selected cells
Bottom of the WYSIWYG Window
At the bottom of the WYSIWYG window, a breadcrumb identifies the selected HTML element and the
HTML tags that enclose it in the source code. In the following screen capture, the cursor highlights the
word “Support” in the “Contact Support” hyperlink. The gray bar at the bottom of the WYSIWYG shows
Path: div.AppArea >> table >> tbody >> tr >>td >> p >> a
In the path, the primary HTML container is a div to which a class named “AppArea” has been applied.
That div contains a table, and the table has a row and cell that contain a paragraph tag enclosing the link
tag.
Resizing the WYSIWYG Window
There is a small, textured tab the lower right-hand corner of the WYSIWYG window that you can use to
resize the editing area.
To use this tab for making the WYSIWYG edit area bigger:
1. Place your mouse cursor over the tab, left click and hold the button down.
2. While still holding down the left mouse button, drag the tab:
a. to the right to increase the visible editing area horizontally;
b. down to increase the visible editing area vertically;
c. down and to the right at the same time to increase both vertical and horizontal display.
8

To use this tab for making the WYSIWYG edit area smaller:
1. Place your mouse cursor over the tab, left click and hold the button down.
2. While still holding down the left mouse button, drag the tab:
a. to the left to decrease the visible editing area horizontally;
b. up to decrease the visible editing area vertically;
c. up and to the left at the same time to decrease both vertical and horizontal display.
Buttons below the WYSIWYG Window
There are two variations on the buttons that display beneath the WYSIWYG editor.
1. The following buttons are present in the PageBuilder HTML Component editing window:
These buttons have the following functions:
Cancel: cancels the window and returns you to the previous window (in this case, the Edit Page
Contents window); any unsaved changes are lost.
Save: saves changes and leaves the WYSIWYG window open for editing. The button also returns the
cursor to the start of the first line of text. Note: If the first line of text is in a table, the editor will place
the cursor outside the top left corner of the table, and you will have to click into the table to continue
working.
Important: Save changes frequently as you may lose content after 25 minutes of inactivity.
Apply: saves changes, and returns you to the previous window (in this case, the Edit Page Contents
window).
2. With the WYSIWYG in the process flow pages within applications, the following buttons and options
typically display beneath the editor:
Next: saves your work and continues to the next page. If content in the editor is required and none
has been entered, the same page reloads with an error message displayed above the editor.
Save: saves your work and stays at the same page. The button also returns the cursor to the start of
the first line of text. Note: If the first line of text is in a table, the editor will place the cursor outside the
top left corner of the table, and you will have to click into the table to continue working.
Important: Save changes frequently as you may lose content after 25 minutes of inactivity.
Preview: Opens a new window with a functional preview of your work displayed.
Undo Changes: Removes any new content or changes to existing content since the last save.
Cancel: Removes any new content or changes to existing content since the last save and returns to
the main page of the application in which you are working.
Using the WYSIWYG
The following sections show you how to use the toolbar and menu items to compose and format content
in the WYSIWYG editor.
9

Using Keyboard Shortcuts
The following keyboard shortcut keys will work in the WYSIWYG:
• Ctrl Z - undoes the last step
• Ctrl Y - redoes the last step
• Ctrl A - Selects All items
• Ctrl C - Copies the selection
• Ctrl V - Pastes the copied selection
Other shortcut keys are browser specific.
Adding Text
To add text, type directly into the editor window or copy text in another application and paste it into the
editing area. You have four options for pasting text.
Important: No pasting functions in the editor support images and embedded media along with the text.
• Use Control+V to paste text. If pasting from Microsoft Word, formatting and styles will be preserved
(along with the nonstandard Microsoft attributes to HTML tags). Images and other embedded media
will be lost.
• Use the editor’s paste icon to insert text from the system clipboard. If pasting from Microsoft
Word, formatting and styles will be preserved (along with the nonstandard Microsoft attributes to
HTML tags). Images and other embedded media are lost.
• Use the editor’s paste text icon to insert text from the system clipboard. If pasting from
Microsoft Word, formatting, styles, images, and other embedded media are lost. No HTML is
preserved and bullets are converted to empty squares.
• Use the editor’s paste Word icon to insert text from the system clipboard. Microsoft Word
formatting and styles will be preserved, but images and other embedded media are lost. The
nonstandard Microsoft HTML tag attributes are removed.
Running a Spell Check
To check spelling, click the spell check icon . If no misspellings are found, an alert will open stating
so:
On the other hand, any misspelled words will be underlined in red.
10

Editing and Formatting Text
Select the text to be formatted and click the appropriate icon to apply the desired formatting.
Note: If no text is selected, the alignment, indentation, bulleting, and numbering actions apply to the
paragraph of text in which the cursor is placed.
To:
• Bold, italicize and underline text use the standard icons ( , , and respectively). For a single
word, place the cursor anywhere in the word and click the icon.
• Create a list of bulleted items, select all text to be bulleted and click the bulleted list icon .
• Create a numbered list, select all text to be numbered and click the numbered list icon .
• Create an extra line between bulleted or numbered list items, and enter a tag after
the tag for each bulleted or numbered item:
Orchids
Roses
Gladioli
• .Enter a single line break between lines of text (instead of the default double space), press Shift +
Enter.
• Create a new paragraph press Enter.
• Change text color, select the text and click the Text Color icon, .
• Highlight selected text with a background color, select the text and click on the Background Color
icon, .
• Align text, select the text and press the appropriate icon (left justify , center , or right justify
).
• Indent text, select the text and click the indent icon, . To indent text to the left, click the out-dent
icon, .
• Clear formatting, select the text and click the Eraser icon, .
• Undo an action, click the undo icon, ; to redo, click the redo icon, .
• Delete, select the text and click the delete icon, .
11

• Spell check your content, click the spell check icon . (The similar icon is a selector to
choose the language against which to spell check.)
• Select all content, click the select all icon.
Formatting Text with the Dropdown Menus
Format Menu
This menu contains basic HTML tags for laying out your document. Each tag renders text just as its name
appears in the menu.
To use this menu:
1. Select the text to format.
2. Click the down arrow to the right of Format.
3. Click the desired HTML format and release to apply the change.
Styles Menu
The Styles menu contains the styles defined by a client administrator in CustomWysiwygStyle.css (in the
Page Wrapper Editor).
To use this menu:
1. Select the text you wish to format.
2. Click the down arrow to the right of the word Styles.
3. Click the desired style and release to apply the change.
12

Font Family Menu
Six commonly used fonts are available. The menu contains formatting options that are based on a style
sheet. Use of the Style formatting options can give your site a consistent look and help those using nontraditional
browsers to navigate your site.
To use this menu:
1. Select the text to format.
2. Click the down arrow to the right of the words Font family.
3. Click on the desired font and release to apply the change.
Font Size Menu
Nine font sizes expressed as a percentage of the base font size are available. While you can enter any
percent value you want for a font size directly into the HTML code, this is a handy tool for quick resizing
computers. Using this menu insures that viewers see your content as you intend.
Use this menu as follows:
1. Select the text you want to format.
2. Click the down arrow to the right of the words Font size.
3. Click the desired font size and release to apply the change.
Edit CSS Styles
You can edit and apply inline Cascading Style Sheets to your content. The range of styles available is
quite extensive, and advanced styles require a measure of experience. The important point to keep in
mind when defining and applying styles using this tool is that they apply exclusively to the content you
13

select before clicking the CSS icon. They do not create an external CSS file you can apply to multiple
pages of content.
To edit CSS styles:
1. In the open Editor window, select the text or block of content to which you will apply CSS styles.
2. Click the Edit CSS Style icon, . The Edit CSS Style pop-up will open.
You have seven tabs presented. Each tab provides for a different category of styles:
• Text – use these options to modify the appearance of the text in your selected content.
• Background – use these options to modify the appearance and positioning of a background
image in your content.
• Block – use these options to modify the appearance of a block of text.
• Box – use these options to define a box for content. Essentially a single table cell.
• Border – use these options to configure the border around your selected content.
• List – use these options to modify the appearance of lists.
• Positioning – use these options to modify the appearance (including visibility) and positioning of
your selected content.
3. To preview your styles while continuing to work, click Apply.
4. To change a style while continuing to work, simply change the value(s) and click Apply.
5. To return to your work after applying your styles, click Update.
6. To undo your work and return to the editor, click Cancel.
14

Inserting and Editing Attributes and Events
You can insert and edit attributes for the HTML containers and objects in your page. This is useful for
preparing content to be accessed by JavaScript, as well as to set up inline styles and event handlers
(commands like onmouseup).
To insert and edit attributes:
1. Click the Insert/Edit Attributes icon, .
2. In the popup window, you can specify a title, a unique ID, apply of the existing classes defined in
CustomWysiwyg.css, or define a new class. You can also provide accessibility enhancements such
as TabIndex and AccessKey here.
To insert and edit events:
1. Click the Insert/Edit Attributes icon .
2. Click the Events tab in the popup window.
15

Here you can type in a JavaScript function for up to 12 event handlers. These are highly customizable
and require programming knowledge.
3. Click Insert to apply your attributes and events to your content.
Removing Formatting Code
You can remove formatting in all or part of your WYSIWYG window.
To remove formatting:
1. Select the content to be restored to default display.
2. Click the Remove formatting icon .
Viewing and Editing HTML Code
You can view and edit the HTML code that is automatically added to your WYSIWYG content as you
develop your page.
To view the code:
1. Click .
16

A new window containing the HTML code for the page on which you are working appears on top of
the editor as shown:
2. Enter your changes.
Note: You can copy and paste raw HTML from external documents into the WYSIWYG Editor.
3. Click Update to save your changes or Cancel to discard them. The HTML Source Editor closes and
you return to the WYSIWYG editor.
Note: You can also copy HTML code from the WYSIWYG Editor to the clipboard and then paste the
code into another program such as Notepad, Word, or FrontPage.
Cleaning Up Messy Code
Occasionally, HTML code can be corrupted when cut from an external application, such as
DreamWeaver, and pasted into the TinyMCE Editor. A common form of corruption is a closing “>” for an
HTML tag converted into the Entity name value, > (“Greater Than.”). To repair any such HTML tag
problems, click the (Cleanup Messy Code) icon. The TinyMCE HTML engine will recognize the
corruptions (in the example cited, the tag affected would close with > and be missing its “>”) and
instantly repair them. Save your work after cleaning up code.
17

Note: You can achieve the same cleanup by saving the document or by viewing the HTML code and
clicking Update. Cleanup Messy Code lets you preview HTML changes before you save.
Adding and Editing Images
You can insert an image into any page by using the Image icon in the Editor – either by entering the URL
(Web location) of the image or by importing it from your image library. You can also edit the information
for an image already in your content or remove the image completely.
You can also use this icon to add an entirely new image to your content (for example, an image from your
desktop) – and simultaneously to add that image to your image library.
To insert a new image into your content:
1. In the open Editor window, position your cursor where you would like the image to display and click
the (Image icon). The Insert/Edit Image pop-up displays.
2. In the Image URL field, enter (or paste) the path to the image file.
Tip: If you have images on Flickr or elsewhere on the Internet that are available to you, you can
obtain the URL of an image as follows:
• Right click the image.
• Select Properties from the pop-up dialog that displays.
• Copy the Address (URL) of the image from the Properties dialog.
• Paste that URL into the Image URL field in the Insert/Edit image pop-up.
3. In the Alternative Text field, enter a phrase that describes this image for use as the ALT attribute of
the IMG tag.
4. Click the appropriate choice from the list labeled Alignment to position your image within the content.
5. To set display Size:
• Leave the width and height of the image to those settings detected by the system.
• Or, enter the number of pixels for the width of the image in the first box and enter the number of
pixels for the height in the second box.
• Click the Constrain proportions check box to prevent distorting the image.
6. For Border:
• Leave the field blank if you do not want a border line around the image.
• Enter a number for the pixel thickness of the border around your image (for example 1 is a
hairline border).
7. For Vertical Space:
• Leave the field blank if you do not want extra space (padding) above and below the image.
• Or, enter a number to specify how many pixels to pad above and below the image.
Tip: A few pixels of vertical and horizontal space separate an image from your text.
8. For Horizontal Space:
• Leave the field blank if you do not ant extra space on either side of the image.
• Enter a number to specify how many pixels to pad on the left and right sides of the image.
18

9. Click Insert. The pop-up closes and the image displays in the page.
To insert a Convio library image into your content:
1. In the open Editor window, position your cursor where you would like the image to display and click
the (Image icon). The Insert/Edit Image pop-up displays.
2. Click the Browse Image Library link to the right of the Image URL field. The Choose Image window
opens.
19

3. Click on an image to open the Configure Image window as shown below:
4. Change the alternative text, set the alignment and a border, and change the image’s proportions as
desired.
5. Click Insert to place the image in your content and return to the editor.
To add a new image to the Image Library:
1. In the open Editor window, position your cursor where you would like the image to display and click
the (Image icon). The Insert/Edit Image pop-up displays.
20

2. Click the Browse Image Library link to the right of the Image URL field. The Choose Image window
opens.
21

3. At the lower left corner of the window, click the Add New Image link. The Add New Image window
opens as shown:
4. Select an image by clicking Browse. Use the standard file dialog to locate on your computer the new
image you want to add to your Image Library.
5. Type in a Graphic Title for the image. The text will also provide the alternate content if the image
fails to load.
6. Type in any Search Keywords to help locating this image in the library.
7. Select the Security Category to specify which administrators have access to the image from the list
of categories.
8. If desired, resize the image by enter a number in pixels for the height or width (choose height or width
from the list).
22

9. Click Upload. The image will reload and display the Configure Image options:
10. Provide the Alternative Text that will be read aloud if the image is accessed by a screen reader,
such as JAWS.
11. Set Alignment, Size, and Border properties. When you have finished, click Insert. You will return to
the editor with your image inserted in the content. The next time you browse the Image Library that
image will display first in the library image list.
To edit an image that has been previously inserted:
1. In the open Editor window, click the image in the content to select it and then click the (Insert
Image) icon. The Insert/Edit Image pop-up displays.
2. To change the:
• Location of the image file (or the image itself), enter (or paste) the new path to the image file in
the Image URL field.
• ALT attribute in the IMG tag, enter text to describe this image in the Alternative Text field.
• Image alignment within the content, click the appropriate choice from the Alignment list.
• Size of the image, enter the number of pixels in the width field. To revert to the default image
size, remove the current number and leave the field blank.
• Height of the image, enter the number of pixels in the height field. To revert to the default image
size, remove the current number and leave the field blank.
23

Note: Check the Constrain proportions checkbox to prevent distortion of the image from width/height
input errors.
• Line that frames the picture, enter a number to indicate thickness in pixels of the line in the
Border field. Leave the field blank to display the image without a border.
• Amount of padding above and below the image, enter a number in pixels in the Vertical space
field. Leave the field blank to display the image without vertical padding.
• Amount of blank space one either side of the image, enter a number in pixels in the Horizontal
space field. Leave the field blank to display the image without horizontal padding.
3. Click Update. The pop-up closes and the image displays on the page.
To remove a previously inserted image:
1. In the open Editor window, click the image in the content to select it.
2. Click to remove it or press DELETE or BACKSPACE.
Wrapping Text around an Image
You may have specific spacing requirements in a page or email such that wrapping text tightly around an
image is required—or you may simply prefer that look. Wrapping text around an image can be
accomplished in several ways:
Wrapping using the Alignment Choices when Placing the Image
The options that you encounter whenever inserting an image allow you to choose from several
Alignments. Two of those choices let you wrap text as follows:
• Alignment - Left: This option places the image at the left of the screen and allows text to wrap to the
right of the image.
• Alignment - Right: This option places the image at the right of the screen and allows text to wrap to
the left of the image.
With both of these options, text will wrap with single-line spacing.
Tip: With either option, place the image at the beginning of your text to align the text with the top of your
image.
1. To increase the space between the edge of the image and the margin of the text, right click on the
image:
2. In the menu that opens, click Insert/Edit Image. A popup window opens.
3. Type a number in the Vertical space field to increase the space, or padding, between the top and
bottom of the image and any text or other content. The unit of measure is pixels. The preview area to
the right of the form will change when you tab away from the field.
4. Type a number in the Horizontal space field to increase the space, or padding, between the top and
bottom of the image and any text or other content. The unit of measure is pixels. The preview area to
the right of the form will change when you tab away from the field.
5. When you are satisfied with the alignment and spacing, click Update to return to the editor.
24

Wrapping using the Alignment Icons on the Toolbar
You can also use the alignment icons on the middle toolbar of the WYSIWYG to align an image. If the
image is aligned with either the right or left alignment icons, then text will wrap to the left or right of the
image respectively. Use these icons to align the image and wrap text as follows:
1. Select the image by clicking on it. You should see handles appear around the outside edge of the
image.
2. Click either the left or right alignment icon on the middle toolbar.
3. As soon as the image moves into position, click outside the image area to deselect it. Text will now
wrap around the image with single-line spacing.
Wrapping by using a Table
You can place a table at the beginning of a paragraph of text and place an image in it; the ensuing text
will then wrap around the image, providing you align the table left or right. This technique also allows you
to add a border to the image as well as a caption if you would like.
Use a table to wrap text around an image as follows:
1. Enter a paragraph of text.
2. Position your cursor at the beginning of the paragraph.
3. Click the Table icon.
4. Create a single cell table with a width of 10% and alignment right (or left). (The box will expand to
accommodate the image.)
5. Add a Border and a Caption if you would like to use either of these features. (Note that the space for
the caption will appear above the image.)
6. Click Insert to return to the WYSIWYG window.
7. Position the cursor inside the box and use the appropriate icon to Insert an image. The text should
then appear wrapped to the right or left of your image (depending on your choice in Step 4.)
8. To resize the width of the cell containing the text in the table, right-click in the cell.
25

9. In the popup menu, click Cell and then Table Cell Properties. A popup opens:
10. In the Width field, type in a different number (in pixels).
11. Click Update when you are finished. If the cell is too wide or not wide enough, repeat steps 8 and 9.
Wrapping by Altering the HTML code
You may also wrap text around an image by adding an alignment component to the IMG tag in the HTML
window. Alter the code to provide wrapping as follows:
1. Insert your image in the WYSIWYG window.
2. Type your paragraph into the WYSIWYG editor below the image.
3. Click Edit HTML Source and edit the image (IMG) tag as indicated below:
• To align a paragraph of text such that the text closely hugs an image to its RIGHT:
• To align a paragraph of text such that the text closely hugs an image to its LEFT:
• To place more space between the edge of the image and the block of text::
Increase the number of pixels (px) to increase the spacing.
26

4. Click Update to return to the previous view. Your text should now appear beside your image as
shown below:
Inserting a Link to a Convio Application
To insert a link to Convio content:
1. Type the text you want to use for the link.
2. Highlight that text and click Insert Link.
27

3. In the Insert Link box, click Browse Convio Links. The Choose Link dialog displays.
4. In the Link Type pane, select the type of Convio link you want to create. If content of that type is
found, its name and description will display in the right pane.
Note: You can search either for named content, such as an alert or a donation form, or for a
description of the content. Case does not matter, and the search can be run with word fragments. For
example, you could enter “pass” to search for a form that had “Password” in its name or its
description.
5. After you locate the link target, click on the item in the right pane. The Insert Link dialog displays.
28

6. Complete the additional options, as appropriate, including such items as:
• A page within an application to which you want to link
• An interest to associate with the link
• A Promotion Code
• Additional Arguments (that will be saved with the user’s profile information). Use the format,
"arg1=value1&arg2=value2...".
7. Click Insert to complete the link and return to the editor.
Inserting a Link to a CMS Page
Use the Insert Link to insert a link to a CMS page (CMS users only).
To insert a link to a CMS page:
1. Type the text you want to use for the link.
2. Highlight that text and click the Insert Link icon. The Insert Link dialog displays.
3. Click Browse CMS Links. The Choose Link dialog displays.
29

4. After you locate the link target, click on the item Name in the right pane. The Set Link Options dialog
displays.
5. In the Set Link Options dialog, click Select to return to the WYSIWYG Editor, or complete the
following, optional Advanced Options:
• Source Code – Enter a word or name to append to the URL so that you can track how the user
linked to the CMS page.
• SubSource Code – Appends additional information or a name to the source code.
30

• Enter Additional Arguments – Adds additional arguments to the URL. Use the format,
"arg1=value1&arg2=value2...".
6. Click Select to return to the WYSIWYG Editor.
Inserting a Web Link
Use the Create Link icon to insert a link to another website. You can also use this icon to link to an
email address, an FTP address, or to an anchor that you have placed elsewhere on the same page or in
another document. The tool provides many advanced features related to link appearance and behavior.
To insert a link:
1. Type the text you want to use for the link.
2. Highlight that text.
31

3. Click the Insert Link icon. The Insert Link dialog displays.
4. In the Link URL field, type in the URL for the site to which you are linking (if external). If you are
linking to an anchor in a different page, you will need to append the “#bookmark name” string to the
URL. If you are linking to an internal bookmark, skip this field and proceed to the Anchors input.
Note: If you do not begin the URL with the appropriate protocol (such as mailto: for an email address
link, or http:// for a Website), a confirm popup will open offering to insert the correct prefix.
5. Any anchor you have defined within your document will appear in the Anchors dropdown. Click on
the appropriate word or expression in the drop-down to select an anchor, if desired. The “#bookmark
name” string will be inserted in the Link URL field.
Note: If you are only creating a link to an anchor, you will not need to supply a URL.
6. Type a Title for the link. The title should contain appropriate additional information about the link – it
should not simply repeat the text value of the link. The title will display as a link tip when the user
passes the cursor over the link. It is required for accessibility reasons.
7. Click OK to complete the link.
To edit an existing link:
1. Select the link.
2. Click the .
3. In the Insert Link dialog box, edit the URL
4. Click Update.
Note: If you specified source or subsource codes in your donation form, you can edit the codes by
selecting the link and clicking or by right-clicking the link and selecting Insert/Edit Link on the
shortcut menu.
To remove an existing link:
1. Select the link.
2. Click the Remove Link icon.
32

Inserting an Anchor (Bookmark)
Anchors are often used to reposition the browser to a different section of the current page, or at a specific
section in another page. For example, on a long web page, you may wish to place “go back to top” links
throughout the page. When clicked, the current page would be repositioned at the top. Similarly, links at
the top of a page to anchors farther down the page allow the viewer to move quickly down to the section
of the page that interests them.
Create an anchor in three steps:
1. Create the page as you want it to look, without the anchor tags.
2. Create the anchor (the location on the page to which the page should be repositioned).
a. Place the cursor beside a word or image for the anchor. (Often, this will be a heading within your
content.)
b. Click on the Insert/Edit Anchor icon .
c. In the dialog box that opens, type in a name for the anchor, (such as, “top”).
Important: Anchor names must not contain any spaces.
d. Click Insert to return to the WYSIWYG window.
3. Create the link:
a. Type in the text for the link if you have not already done so (such as, “Back to top”).
b. Highlight that link text.
c. Click on the Insert Web Link icon .
d. In the dialog box that opens, select the anchor name from the Anchors drop-down menu:
33

e. Click Insert to complete the link.
Tip: You can also create a link to an anchor on another page. To do so, type into the field of the dialog
box shown above the system name of the page, followed by a # symbol, followed by the name of the
anchor. An example of this syntax would be main_page#top.
Inserting a Custom Character
Use the Insert custom character icon to add any of a basic range of special characters, such as
currency symbols, mathematical symbols, and Greek alphabet letters.
To insert a custom character:
1. Click into the page at the point where you want to insert the character.
2. Click the custom character icon . The Select custom character window will open:
34

Note: As you move your mouse over the characters, a large version of the character will display in
the square box to the upper right of the tool. HTML and NUM-Code values for the character will
display in the rectangular boxes below that character.
3. Click the character to insert. The popup will close and the character will be embedded in your page.
Creating and Editing a Table
Tables organize your content. You can design a table to structure the layout of content in your page
before you add the content. You can also use tables to present tabular data -- information ordered in rows
and columns. With a comprehensive set of table feature buttons, the WYSIWYG editor supports both
uses for tables.
To create a table:
1. Place the cursor on your page where you want to add the table.
35

2. Click the Table icon on the toolbar. The Insert Table dialog box opens:
3. Make choices for the following:
• Cols – how many columns the table will have. (You can add or delete later.)
• Rows – how many rows the table will have. (You can insert or remove rows later.)
• Cellpadding – how much space (by default in pixels) should separate the content from the inside
wall of each cell.
• Cellspacing – how much space (by default in pixels) should separate the cells from each other.
• Alignment – click on the down arrow to select an alignment — Center, Left, or Right — or leave
as default (Not Set). Default is left aligned (or aligned with other content on the page) and, like
Center, does not allow text to wrap around the table. Choosing left or right aligned will allow
wrapping).
• Border – how thick (by default in pixels) the lines demarcating the table and cells should be.
• Width – width of the table, by default in pixels (although may be entered as any accepted value –
em, %, in, mm, and so forth).
• Height – height of the table, by default in pixels (although may be entered as any accepted value
– em, %, in, mm, and so forth).
• Class - click on the down arrow to select a class (from among those you have defined in
CustomWysiwygStyle.css), leave as default (Not Set), or choose (value) to enter the name of a
Cascading Style Sheet class defined in a file other than CustomWysiwygStyle.css.
36

• Table Caption – click the checkbox to insert the HTML caption tag set at the correct position
inside the table. You can enter a value after you click Insert and are returned to the editor. The
topmost row of your new table will be a single cell. You have to type the value into that cell. You
can be sure you are in the caption cell by noting the document path at the bottom of the editor:
Path: table >> caption.
• Advanced
• Id – a unique name that identifies the table as an object embedded in the page.
• Summary –used only for data tables, not for layout. This field describes the structure of the
table (for example, “Two columns with seven rows.”) and the content (for example, “The first
column is for fonts, the second column is for examples of those fonts.”).
37

• Style – this is a Cascading Style Sheet style to apply to the table.
• Language Code – this is a definition of the language (and font type) used in the table. For
example, enter en-GB to indicate English used in Great Britain.
• Background image – image to serve as the background for the entire table. Even if you are
using an image from your image library, you will need to type (or paste) in an absolute path,
such as http://bvt101.convio.com/images/content/pagebuilder/maui.jpg.
• Frame – this sets which outer borders of the table are visible.
• void – no outer border (but inner cell borders remain)
• above – only a top border (no inner cell borders and no outer side and top borders)
• below – only a border at the bottom of the (no inner cell borders and no outer side and top
borders)
• hsides – only borders at the top and bottom (no inner cell borders and no outer side borders)
• lhs – only a border on the left hand side
• rhs – only a border on the right hand side
• vsides – only borders on the left and right sides
• box – only an outer border (all the way around), with no inner cell borders
• border – same as box
• Rules – this specifies which inner borders in a table are visible:
• none – no lines
• groups – lines between row groups and column groups
• rows – lines between rows
38

• cols – lines between columns
• all – lines between rows and columns
• Language direction – specifies the direction for the characters. Left to right is default behavior
for English and other Western languages. Right to left reverses the letter or character flow; it
creates a mirror image effect with English.
Border color – the color of all displayed borders, inner and outer. Can be specified with a named
color, such as “red”, or in hexadecimal or rgb color, such as “#ff0000.” The tool to the right of the
input opens a color selector:
The color selector has three panes, each with a different interface, for choosing a color:
39

Click a color to select it and then click Apply when you are done.
• Background color – the color of all displayed borders, inner and outer. Can be specified with a
named color, such as “red”, or in hexadecimal or rgb color, such as “#ff0000.” The tool to the right
of the input opens a color selector:
.
The tool works exactly the same as the Border color selector, above.
4. When you finish defining the table, click Insert.
40

5. Place your cursor in a cell to enter content. (Content may be text, images, links, or any other content
that the WYSIWYG supports.) A sample table is shown below.
To edit a table:
Once you have created a table, the WYSIWYG has tools for adding, removing, dividing, and formatting
the cells.
To work with the height and internal alignment of the Rows:
1. Click into the row you want to format.
2. Click the Table Row Properties icon, , to open the dialog box shown below:
3. Use the (horizontal) Alignment and Vertical alignment menus to determine the placement of
content within the cells in that row. (For example, if you choose an Alignment of Left, and a Vertical
alignment of Top, text in that row will begin at the upper left of each cell.)
4. Enter a Height, in pixels, if you want to control the exact height of the row.
41

5. Select from the menu at the bottom of the dialog to apply your changes just to the selected row or to
the entire table.
6. Click the Advanced tab to set a Background image or a Background color. The steps are the same
as those defined in creating a table, above.
7. Click Update when you are done.
To edit the height, width, and internal alignment of one or more cells:
Note: Not only can you format many of the same items as in the previous procedure, but in the following
steps you can also control the layout of individual cells.
1. Click inside a cell.
2. Click the Table Cell Properties icon to open the dialog box shown below.
3. Use the (horizontal) Alignment and Vertical alignment menus to determine the placement of
content within the cell(s). (For example, if you choose an Alignment of Left, and a Vertical alignment
of Top, text in that cell will begin at the upper left of that cell.)
4. Enter a Width and Height, in pixels, if you want to control the exact dimensions of the cell(s).
5. Select from the menu at the bottom of the dialog to indicate whether these changes should apply only
to the selected cell, to the entire row, or to the entire table.
6. Select the Advanced tab if you want to set a Background image, a Background color, or a Border
color.
7. Click Update.
To insert a row into the table:
• Above a row, click into the row and click the Insert Table Row Above icon . The new row is
added.
42

• Below a row, click into the row and click the Insert Table Row Below icon . The new row is
added.
To add a column to the table:
• To the left of a column, click into that column and click the Insert Table Column Before icon .
The new column is added.
• To the right of a column, click into the column and click the Insert Table Column After icon .
The new column is added.
To remove a column from the table:
Position your cursor in the column and click the Delete Table Column icon . The column is removed
from the table.
To remove a row from the table:
Position your cursor in the row and click the Delete Table Row icon . The row is removed from the
table.
To join two or more table cells into one cell:
Select the cells and click the Merge Table Cells icon . The cells are combined.
To divide a table cell into:
• Several rows, click into the cell, click the Split Table Cell icon , and type in the number of rows
in the properties dialog displayed.
• Several columns, click into the cell, click the Split Table Cell icon , and type in the number of
rows in the properties dialog displayed.
43