To add a flash object click the "Insert Media" icon. Choose "Flash" in the drop down menu and then click the folder icon to open the asset manager. Once your Flash file has been chosen, the following options are available.

• Source: The Source setting is where you select the flash object to be displayed. In the "Source" section click the folder icon on the very right. This will open the "Asset Manager" window. In this window you will see a list of all the flash objects you have uploaded. Once you have selected your flash object click the "ok" in the bottom, right of the window. (For more information about the Asset Manager and uploading files, please visit the "Asset Manager" section of the help pages.)
  
  Once you have selected the flash object, you can add a backgound, set the dimensions of the flash display area; determine the quality, set the alignment, and set the flash object to loop or not.
  
  
• Background: In the "Background" section you can select the background color by clicking the "pick button and selecting a color.
• Width and Height: In the "width" and "height" section enter the width and height of the flash object in pixels. It is best if you know the actual dimensions for the flash object and use those dimensions.
• Quality: Under the Quality" section you can set the quality to "High: or "Low". Choosing low quality will effect the visual appearance of the flash object, but will reduce the bandwidth the flash object uses when loaded.
• Align: In the "Align" section you can select how you want the text to align to your flash object.
• Loop: In the "Loop" section you can select if you want your flash object to play continually(over and over) or if you would like it to just play once.

When you have selected the source graphic file and entered the settings, click the "ok" button at the bottom left of the window. Then click the "Save" icon in the top, left corner of the Page Editor.

For more information about flash objects, please visit the "Media - Flash" help pages.

The Horizontal Line icon will insert a line across the length of the text area (see figure 2). To insert a Horizontal Line place your cursor where you want the line and click the Horizontal Line icon. Then click the "Save" icon to save your work.

A hyperlink (or link) is text or a graphic which take a visitor to another web page or website when they click it. You most likely already have several hyperlinks on your website in the Navigation Menu. The Insert Hyperlink icon helps you to put links into the body of your website.

To insert a hyperlink within your page click in the Page Editor window where you would like to the link to go and then click on the Hyperlink icon. This will open a new window that will help you add the link.

The General Tab: (Link URL, Link List, Anchors, Target, Title, Class)

Link URL:

Link to another website:
Enter the URL (web address) of the website or web page into the "Link URL" field.

Create an Email link:
If you wish to create a link to an email address, enter the email address into the "Link URL" field. After clicking the Insert button, the system will recognize that you entered an email address and ask you if you want to add "mailto:" to the URL. Select "Yes". For example, if you wanted to put, "If you have any questions please email Tim." on your page and make it so if someone clicks on the word "Tim" it opens up a email window with Tim's email address in the "To:" field, then you would use this feature.

Link To Graphic:
You can also link to a graphic, audio file, video file, flash, or document. To add a link to an image, media file, or document, click "Source" radio button and then click the folder icon to the very right of the "source" area. This will open the Asset Manager window. Select one of your uploaded images, media files, or documents and click the box next to "Use full URL..". Then click the "ok" button at the bottom, right of the window. (For more information about the Asset Manager and uploading files, please visit the "Asset Manager" section of the help pages.)

Link List:
The Link List setting allows you to link to other pages of your website without needing to know the URL (web address) for that page. To link to a subpage, click the Link List drop-down menu and then select the page you want to link to.

Anchors:
Under Development.

Target:
The target setting allows you to determine if the page/file you are linking to will open up in a new browser window. Select "Open in new window (_Blank)" in the Target drop-down menu to set the link to open in a new browser window. Selecting "Open in this window / frame" will have the link open up in the current window. The "Open in parent window / frame (_parent)" and "Open in top frame (replaces all frames) (_top)" options are not used with the typical templates used by the NE1 web builder.

Title:
The Title setting is an optional setting that allows you to add a title attribute to your link. The title attribute creates a small text window when someone mouses over the link (see figure 1). The title attribute also is able to be read by screen reader software which is software used by visually impaired people to have a web page read to them. The title attribute can describe the page/file that the link is for.

Class:
Under Development.

Popup, Events and Advanced Tabs:

The features under the Popup, Events and Advanced Tabs are very advanced features and is seldom used, therefore we will not be addressing this feature in these help pages.

Once you are finished completing all the above fields in the Insert Hyperlink window, click the "Insert" button in the bottom, right of the window (see figure 2). Then click the "Save" icon in the top, left corner of the Page Editor.

*Tip: Most webmasters want to keep visitors on their sites as long as possible. Putting a link on your website that takes your visitor to another website can make that more difficult. By using the "Target" option to have the link open up a new browser window, you can let your visitors visit another website, but also keep them on your website because your website will remain open in the original browser window.

You can insert images into your pages quickly using the image icon and you can also use the image window to format it.

To insert a picture within a page, place your cursor where you want the image to be placed. Then click the "Insert Image" icon, this will open a new window where you can insert image details. Click the folder icon to enter the Asset Manager and choose a photo.

The General Tab: (Image URL, Image Description, Title)

Image URL:
The Image URL setting is where you select the graphic to be displayed. In the "Image URL" section click the folder icon on the very right. This will open the "Asset Manager" window. In this window you will see a list of all the graphics you have uploaded. Once you have selected your image click the "ok" in the bottom, right of the window. (For more information about the Asset Manager and uploading files, please visit the "Asset Manager" section of the help pages.)

Once you have selected the graphic, you can add a title, change the alignment; add a border, and set the spacing for the image. Any changes you make you will be able to see in the preview box at the bottom of that window.

Image Description:
The image description is there to help you keep track of your images when editing your graphics. The Image Description is not displayed on the site.

Title:
The Title setting is an optional setting that allows you to add an "alt" attribute to your picture. The alt attribute creates a small text window when someone mouses over the link. The alt attribute also is able to be read by screen reader software which is software used by visually impaired people to have a web page read to them. The alt attribute can describe the page/file that the link is for. This is especially helpful for visually impaired visitors who would not know what the picture was unless you describe it to them in the Title setting.

The Appearance Tab: (alignment, borders, dimensions, spacing)

Alignment:
You have a wide variety of alignment options from simple left or right alignment to aligning the picture with the top or bottom of the text. Feel free to experiment with the alignment. As you try different settings, you will see an example in the preview box to the right of that window. (Note: After inserting the graphic, you will be able to select it in the page editor and move it around the page with your mouse; however, you will be restricted by the choice you make for the alignment. So, if you choose a left alignment, you will be able to move the picture up and down on the page, but it will remain aligned to the left. You would not be able to move the picture to the right side of the page. You are, however, able to edit the alignment at any time and thus more the picture to the right by changing the alignment of the picture)

Dimensions:
The dimensions settings allow you to determine the specific width and height for the graphic in pixels. Enter the width in the left box and the height in the right box. You also have the option to "Constrain the Proportions" of the graphic. This means that if you change the width of the picture, then height will automatically be adjusted as well to keep the picture's proportions the same. This is selected by default. If you unselect the "Constrain Proportions" option, then the picture's width and height can be adjusted independently, but keep in mind, this can cause the picture to look distorted.

Spacing:
The Vertical and Horizontal spacing settings allows you to add additional blank space (or a buffer) around the graphic. You can adjust the spacing on the top and bottom (vertical) or left and right (horizontal) independently. Enter the number of pixels you want for the spacing.

Border:
The border feature allows you to add a border to a graphic. Enter the number of pixels to set the thickness of the border. The border is set as black by default.

Style:
As you change appearance settings, CSS style code will be automatically entered into the "Style" feature. You can also use the Style feature to modify the CSS settings or enter your own CSS settings. CSS can be pretty complicated, so we recommend that only people with experience using CSS use the Style feature.

The Advanced Tab: (Swap Image and Miscellaneous settings)

Swap Image:
If you would like the image to change when someone puts their cursor over the image or when someone removes their cursor from an image, you can do that with the Swap Image feature. This is most often used with graphical links where a second image is used when a visitor mouses over the graphic to indicate to them that they are over the link. The mouse out option changes the graphic after a visitor has put their cursor over the original image and then removes their cursor from the image.

To use the Swap Image feature, select the "Swap Image" check box. You will see folder icons appear to the right of the "For mouse over" and "For mouse out" options. Click the folder icon for the option you want to use (or both). This will open your Asset Manager. Select the graphic you want displayed for a mouse over or mouse out and click the "Ok" button in the bottom, right of the Asset Manager window.

Miscellaneous:
The Miscellaneous options under the Advance Tab of the Insert Image window are rarely used. You can give a picture an ID, select the language direction of the Title and Image Description, indicate a language code for non-English languages, setup an image map, and set a long description link. Due to the complexity of these features and the infrequency of their use, we will not be discussing them in these help pages.

When you have selected the source graphic file and entered the settings, click the "Insert" button at the bottom left of the window. Then click the "Save" icon in the top, left corner of the Page Editor.

*Tip: If you are not sure what dimensions you want, you can leave the width and height settings blank. Once the graphic is inserted, you can select the graphic with your mouse and adjust its size by clicking on one of the resize boxes around the picture and dragging your mouse. You can also move the picture around the page this way.

For more information about graphics, please visit the "Graphics" help pages.

Media objects are audio or video files. To add a Media Object click the Media Object icon. (see figure 1) This will open the "Media" window. (see figure 2)

• File/URL: The File/URL setting is where you select the media file to be displayed. In the "File/URL" section click the folder icon on the very right. This will open the "Asset Manager" window. In this window you will see a list of all the media files you have uploaded. Once you have selected your media file click the "ok" in the bottom, right of the window. (For more information about the Asset Manager and uploading files, please visit the "Asset Manager" section of the help pages.)
  
  Once you have selected the media file, you can select the dimensions of the display, determine whether the media is automatically started when the page is loaded; set whether the media player controls, status bar, or display are shown, and set the media to automatically rewind or loop.
  
  
  
  
  
  
• Width and Height: In the "width" and "height" section enter the width and height of the media object in pixels. When setting up video, it is best if you know the actual dimensions for the video and use those dimensions.
  
  
  
  
  
  
• Auto Start: This setting determines whether the media begins playing automatically when the page is loaded.
  
  
  
  
  
  
• Show Controls: The show controls setting determines whether the controls, such as play, stop, rewind, fastfoward, etc. are displayed in the media player. We highly recommend having the controls displayed as many visitors will want to be able to control what they are viewing or hearing. Not having that control can lead to a less enjoyable experience for visitors or even cause them to leave.
  
  
  
  
  
  
• Show Status Bar: The show status bar setting determines whether the media player status bar is displayed. The status bar indicates how much of the media remains to be played.
  
  
  
  
  
  
• Show Display: When this is checked, a graphical display will show along with the standard horizontal line that designates the audio player.Auto Rewind.
  
  
  
  
  
  
• Auto Rewind: When this box is checked, the file will automatically "rewind" to the beginning of playback. When combined with "Auto Start", the audio file can be made to loop continually.
  
  
  
  
  
  

When you have selected the media file and entered the settings, click the "Insert" button at the bottom left of the window. Then click the "Save" icon in the top, left corner of the Page Editor.

For more information about media, please visit our Media help pages here.

To insert a table click the "Table" icon (see figure 1), this will open the table window. (see figure 2)

(figure 2)

General: Under the General tab you can determine the size, alignment, borders, cell spacing and padding, and the caption of the table. The changes made to the settings under the General tab are applied to the entire table, and not individual cells.

• Cols: Enter the number of columns (vertical) desired for your table.
• Rows: Enter the number of rows (horizontal) desired for your table.
• Cell Padding: Padding is the space between the walls of the cells and content inside the cells.
• Cell Spacing: By adding spacing, empty space will inserted between the cells of the table.
• Alignment: The alignment property determines whether the table is displayed on the page on the left, right, or centered.
• Border: Enter a number to represent the thickness of the desired border. For example, enter a “4” will surround your table with a 4 pixel wide border. Leaving this blank will remove the border.
• Width: Enter the desired width (in pixels) of the table.
• Height: Enter the desired height (in pixels) of the table.
• Class: This is an advanced field for use by webmasters who have chosen to use CSS styles and have defined a class in those styles.
• Table Caption: Checking this option will include a space at the top of the table to include a title or caption.

Advanced: The advanced tab provides advanced web designers with options relating to the graphical design of the table and the use of style sheets (CSS).

• Id: This is a method to identify tables with a unique name for the purposes of using javascript or other programming languages. There cannot be another table (or any other HTML tag) this ID. JavaScript uses these unique ID's to find the tables that you want to have affected by the script.
• Summary: This optional attribute is for describing the purpose and/or structure of the table. The overview provided by the Summary attribute is particularly helpful to users of non-visual browsers. With simple tables, a good caption is usually a sufficient summary, but complex tables may benefit from a more detailed overview with the Summary attribute.
• Style: This is used to insert a reference to style sheets being used to help define the table and/or the web page itself.
• Language Code: This is used to designate a specific language being used when using script to define elements of the table.
• Background Image: The table can use images for its background. Click the small folder icon to choose an image to use.
• Frame: This drop down menu allows you to choose how the borders of frames and cells should act. For example, choosing “rows” highlights the table rows with a border and choosing “cols” would highlight each column.
• Rules: This drop down menu provides more detail for bordering tables and/or cells within a table. For example, you can choose that only the right hand side (rhs) of the cells have a border, or just the tops of the cells. This feature comes in handy when the table needs to highlight or underline specific rows or columns.
• Language Direction: Like the same feature on the page editor, this feature allows the use of languages that move from right to left within the table.
• Border Color: Click the box to the right to choose the desired color for the border of the table or the cells – depending on your border options.
• Background Color: Click the box to the right to choose the desired color for the background of the table. Choosing a table background color helps to set the table apart from the rest of the page.

*Note: Support for teaching, developing and debugging CSS is not included in the regular OurChurch.Com technical support. If you with so to use CSS and need assistance, OurChurch.Com is available to help with the purchase of maintenance hours.

When you have made a change to the properties of the table, click the "Insert" button at the bottom, of the Insert/Modify Table window.

The page editor is where you edit the actual content of your page. It works much the same as Microsoft Word. You can copy and paste, change the font type, style, weight, add images, add html. add links, Flash and videos. (Adding Flash and video are supported by Gold, Silver, or Bronze accounts.)

You can access the page editor for any page by logging into your admin section and clicking the link in the right navigation menu for the page you want to edit.

The Icons on the page editor make it easier for you to quickly select how to style your text, background color, add images, links, HTML, Flash, and video. The icons are located above the text editor.

*Note: When you have finished editing a page, click the "Save" icon in the top left corner of the Page Editor to save your changes.

*Tip: If you are going to be making a lot of edits on a page, save the work you have done periodically as a precaution so you will not lose your work if anything unexpected happens.

*Tip 2: To save the changes you've made on a page, you can either click the "Save" icon in the top, left corner of the Page Editor or you can click the "Save Changes" button at the bottom of the page settings section. Both will save the changes you have made.

The NE1 web builder has a simply method for cleaning up this code. Clicking the "Clean up messy code" icon will take care of excess tags and misbehaving content.

At one time the following steps were really the only method for cleaning up these tags and getting the pages back to working order. While we have created easier ways, these instructions have been left as an alternative to cleaning up code.

1) Select and "Cut" all of the page content in the NE1 web builder.
2) Paste the content into the "Notepad" accessory that comes with Windows operating systems.
3) Save the blank page in your NE1 web builder.
4) Select and "Copy" all of the content in Notepad.
5) Paste the content back into the web builder and save the changes.

(If the copy and paste worked OK, feel free to close Notepad.)

The above process removes excess tags simply because the Notepad accessory does not understand them or use them. As a result, the content being pasted back into your NE1 page has been cleared of anything that was making the page misbehave.

NOTE: This process will also remove the formatting that you may have wanted! Unfortunately, you will have to start over with the formatting of the page to get it to what you want. This is just the necessary consequence of cleaning up the code.

The "Insert Objects" (also known as "Paste HTML Code") icon allows you to insert html and scripts in the page editor. With the "Objects" button, you can insert a specific piece of HTML into the page in a specific position on the page while using the WYSIWYG page editor. This can be somewhat less confusing for some as you do not have to look through the source code to find the appropriate place to put the code and you do not have to use html to set the location. This is especially helpful with scripts.

For more information about HTML and Scripts, please visit the "HTML and Scripts" help pages.

You can learn more about the view source feature and find information about html and scripts in the "HTML and Scripts" section of the help pages.

*Note: The view source feature gives the webmaster access to the HTML source code for the body of the page. This feature does not give the webmaster access to the source code for the template elements of the page.

Using the Spell Checker

When editing a page with the NE1 web builder, the spell checker can come in quite handy. A web page needs to be spelled correctly to add credibility. Nothing can de-value a page more than poor design or an obviously misspelled word.

To begin wih, the small arrow next to the spell checker icon allows a choice of languages for the included dictionary. Click the small arrow and choose the preferred language. (The default language is English.)

Once any text has been entered on the page, the spell checker can be used by clicking on the "check-mark" icon. When a misspelled word is found, it is underlined with a small wavy red line as in the figure below:

In order to correct the error, click directly on the word that has been underlined. NE1 will then provide a list of suggested words. Choose the desired word by clicking on it. The correct word will automatically take the place of the incorrect word.

TABLE ROW PROPERTIES

When editing a row with the NE1 web builder, there are many options available. To begin with, a “Table row properties” window is provided and the “General” tab contains the most basic of row options:

• Row in table part: As in many of the table and cell options, the selection here helps the website visitor who is using a non-visual screen reader to determine what the row’s purpose is within the table.
• Alignment: This option allows you to set the text or image alignment for the row – similar to a word processor’s alignment choices.
• Vertical alignment: This option allows you to set the vertical text or image alignment for the entire row – as opposed to just a cell.
• Class: This is an advanced field for use by webmasters who have chosen to use CSS styles and have defined a class in those styles.
• Height: With this field it is possible to define a specific height (in pixels) for an entire row within the table.
• Update current row: Choose whether you want to apply the above characteristics to a current row, every other row (odd or even), or all rows.

TABLE ROW PROPERTIES – ADVANCED

The advanced tab provides advanced web designers with options relating to the graphical design of the row and the use of style sheets (CSS).

• Id: This is a method to identify rows with a unique name for the purposes of using javascript or other programming languages. There cannot be another row (or any other HTML tag) this ID. JavaScript uses these unique ID\'s to find the rows that you want to have affected by the script.
• Style: This is used to insert a reference to style sheets being used to help define the row and/or the web page itself.
• Language Direction: Like the same feature on the page editor, this feature allows the use of languages that move from right to left within the entire row.
• Language Code: This is used to designate a specific language being used when using script to define elements of the row.
• Background Image: The row can use images for its background. Click the small folder icon to choose an image to use.
• Background Color: Click the box to the right to choose the desired color for the background of the row. Choosing a table background color helps to set the row apart from the rest of the table.

*Note: Support for teaching, developing and debugging CSS is not included in the regular OurChurch.Com technical support. If you with so to use CSS and need assistance, OurChurch.Com is available to help with the purchase of maintenance hours.

EDITING A CELL

When editing a cell with the NE1 web builder, there are many options available. To begin with, a “Table Cell Properties” window is provided and the “General” tab contains the most basic of cell options:

• Alignment: This option allows you to set the text or image alignment for the cell – similar to a word processor’s alignment choices.
• Cell type: The choices offered here are specifically designed for non-visual screen readers. Choosing “header” connects information regarding this cell to other related cells, rows, or columns. Choosing “data” (default) makes the cell a standard table cell.
• Vertical alignment: This option allows you to set the vertical text or image alignment for the cell.
• Scope: The scope attribute applies when the “Cell type” chosen is “header”.  These features are specifically designed for non-visual screen readers.  When “header” is chosen, it provides information on the number of rows or columns determined by the scope choice. For example:
  • Row: when the header information is for the rest of the row
  • Col: when the header information is for the rest of the column
  • Rowgroup: when the header information is for the rest of the rowgroup
  • Colgroup: when the header information is for the rest of the column group

NOTE: this features and capabilities are new to the latest version of HTML and are not always supported in all browsers. Use with caution.

• Width/Height: As the name suggests, these determine the size of the cell. Note: the size of the entire table will take precedence over the size of the cell. Sizes larger than the table will allow will be adjusted to fit.
• Class: This is an advanced field for use by webmasters who have chosen to use CSS styles and have defined a class in those styles.
• Update current cell: Choose whether you want to apply the above characteristics to a single cell, a row of cells, or a column of cells.

EDITING A CELL - ADVANCED

The advanced tab provides advanced web designers with options relating to the graphical design of the cell and the use of style sheets (CSS).

• Id: This is a method to identify cells with a unique name for the purposes of using javascript or other programming languages. There cannot be another cell (or any other HTML tag) this ID. JavaScript uses these unique ID\'s to find the cells that you want to have affected by the script.
• Style: This is used to insert a reference to style sheets being used to help define the cell and/or the web page itself.
• Language Direction: Like the same feature on the page editor, this feature allows the use of languages that move from right to left within the cell.
• Language Code: This is used to designate a specific language being used when using script to define elements of the cell.
• Background Image: The cell can use images for its background. Click the small folder icon to choose an image to use.
• Border Color: Click the box to the right to choose the desired color for the border of the cells – depending on your border options.
• Background Color: Click the box to the right to choose the desired color for the background of the cell. Choosing a table background color helps to set the cell apart from the rest of the table.

*Note: Support for teaching, developing and debugging CSS is not included in the regular OurChurch.Com technical support. If you with so to use CSS and need assistance, OurChurch.Com is available to help with the purchase of maintenance hours.

EDITING A COLUMN

NE1 allows a table to be edited by row or by column. When right-clicking on a table, column editing options appear in a pop-up menu. The options are defined as follows:

• Insert column before: This is used to insert a column to the left of (before) the currently selected column.
• Insert column after: This is used to insert a column to the right of (after) the currently selected column.
• Remove column: This will delete the currently selected column.

EDITING A ROW

NE1 allows a table to be edited by row or by column. When right-clicking on a table, row editing options appear in a pop-up menu. The options are defined as follows:

• Table row properties: This option opens the dialog box that presents the table properties. (See “Table row properties”)
• Insert row before: This is used to insert a row on top of (before) the currently selected row.
• Insert row after: This is used to insert a row underneath (after) the currently selected row.
• Delete Row: This will delete the currently selected row.
• Cut table row: This will cut the selected row, thus making it available to paste elsewhere. Note: Cutting or Copying the rows will include any information that is within the rows.
• Copy table row: This will copy the selected row, thus making it available to paste elsewhere. Note: Cutting or Copying the rows will include any information that is within the rows.
• Paste table row before: This will paste a copied or cut row on top of (before) the currently selected row.
• Paste table row after: This will paste a copied or cut row underneath (after) the currently selected row.

The NE1 web builder includes some features that are accessed by right-clicking within the editor. After a right-click the standard Cut, Copy, and Paste options appear, along with "Insert/Edit Image" and "Alignment". However, the right-click option also allows for inserting a table.

When right-clicking within a table, the following menu appears:

Inserting a table is a page layout tool that can help with the look and feel of your page. It allows you to divide up into sections all or a part of the body of your web page. You can then organize information into the various "cells" of the table. Tables are especially useful for displaying information in chart or spreadsheet form, like comparison charts, product/service pricing, or schedules.

A good example of how you can use a table is the OurChurch.Com Hosting Packages and Plans page. A table is used to organize the information about OurChurch.Com's hosting packages:

To format your text you can select from a number of the icons as well as the drop down menu of fonts. You can change the size, color, thickness, style, alignment and more. Think of it as a standard text editor such as Microsoft Word or Word Processor. To format your text you can select the styles you want before you start typing or you can highlight your text after you have typed it and then change the style.

When you have completed the text formatting, click the "Save" icon in the top, left corner of the Page Editor.

Changing the background color will change the background of the text box but not the color of the whole page. To change the background color click the background color icon and select the color (see figure 1) you would like. If you already have text on your page you can highlight sections of text and change the background color (see figure 1) of each section.

To remove your background color, click on the background color icon and then click on "more colors" (see figure 2) and then "remove color" (see figure 3)

When you click on the foreground or background icons a window will come up with about 40 of the most commonly used colors to choose from; however, you have more color options. Click the "More Colors" button (see figure 2) and the window will change to include 216 web friendly colors (see figure 4). Web friendly means that most web browsers support those colors. As if 216 colors were not enough to choose from, you can also create your own custom colors by changing the numbers in the "R" (red), "G" (green), and "B" (blue) boxes on the left side of the window (see figure 5). This gives you virtually limitless options for colors.

After setting the foreground and/or background color for the text, click the "Save" icon in the top, left corner of the Page Editor to save your work.

*Note: If you create a custom color to use on your website, it may not display properly as it is not one of the 216 web friendly colors. To be safe and insure all your visitors see the same colors on your website, we recommend only using the 216 web friendly colors.

*Tip: If you decide to create a custom color, start by clicking a color from the color palette that is close to the color you want to create. Then make minor changes to the numbers in the "R" (red), "G" (green), and "B" (blue) boxes (see figure 5) until you have the color you want.