Step 2: Window - XSitePro Website Design

Home Previous  Next

icon_xsp

Brought to you by XSitePro Website Design Software

professional website design made easy      

 

 

 

When you arrive at this second step in the Pop-up creation process you will see a screen like the one shown below:

 

window_popups_step2

 

 

The Pop-up window, in which our Pop-up ‘content’ or ‘message’ will be presented to the visitor, has a number of settings that we can change in this screen.

 

This tabbed screen is divided into two parts – settings, on the left-hand-side, and a handy ‘preview area’ on the right hand side. This preview will instantly update itself to show any setting's changes you make, on the left.

 

Note: As was pointed out earlier in this section, there are some settings that apply only to the ‘Pop In’ type of Pop-up. If you have selected any of the other Pop-up types you will notice that some of the controls on this screen are disabled. If they are disabled, this simply means that these settings are not applicable to the Pop-up type you have selected.

 

The settings available on this tab are described below:

 

Window Border Control (Pop-In Only) – If you have selected the Pop-in option in Step 1 you will be able to use this color control to change the color of the window border & title bar.

 

Click the button_application_image_browse button to launch the color picker tool, to select your color (or alternatively just type the color you’d like to use straight into the color text-box.

 

Note: For more information on using the color picker tool, see the section relating to using the color picker, in the manual.

 

 

Background Color – The actual window contents themselves are presented against a background. By default this window background is white, but using the color picker you can change this to any color you want. Simply click the button_application_image_browse button to launch the color picker tool, and make your selection (or type your preferred color into the text-box).

 

 

Show Window heading (Pop-In Only) – Because (only) the Pop-In does not use a standard explorer window, the window heading (or title-bar) can actually be disabled altogether. So, if you are using a pop-in, the difference will be as shown below:

 

POP-IN WITH HEADER:

 

example_popup1

 

 

POP-IN WITHOUT HEADER:

 

example_popup2

 

By default the window heading is displayed. To turn off the window header simply uncheck the checkbox labeled ‘Show Window Heading’.

 

Note: If you disable the Window Heading then there will of course be no purpose served by the Window Heading text, below. It will therefore be disabled if you choose not to show a window heading for your pop-in.

 

 

Window Heading Text – Using this text input box you can specify the heading which will be displayed in the Window Heading (or title bar). Make sure you choose text that appropriately describes the Pop-up content, and also ensure that your heading is not too long for the overall window width dimension (see below).

 

Simply type your heading text into the text box to set this value.

 

 

Heading Text:

 

Heading Text Color (Pop-In Only) – If you have selected to use the pop-in option, you will be able to set the color of the heading text for your window. To choose your color, simply click the button_application_image_browse button to launch the color picker tool, or over-type the existing color text (in the color text-box) with your preferred color.

 

 

Heading Text Font (Pop-In Only) – Choose a suitable heading font using the piece_popups_font drop-down. Clicking this button will list the available fonts from which you can make your selection.

 

 

Heading Text Font Size (Pop-In Only) – If you selected the pop-in option in Step 1, you will see a font-size option in this screen with which you can determine the size of the heading text for your window. The options are between 8pt and 36pt. To make your selection, click the piece_popups_font_size button and pick a value from the list that appears.

 

 

Heading text Font Style (Pop-In Only) – To make your window heading text bold, italic or underlined (for pop-ins only) click the appropriate style button. Clicking the same style button a second time will then remove the applied style effect.

 

piece_popups_font_style

 

 

Window Height – Use the piece_popups_arrows controls to increase/decrease the height of your Pop-up window (in pixels). Alternatively, simply type the value in place of the existing height value.

 

 

Window Width – Like with the height setting, above, use the piece_popups_arrows controls to increase/decrease the width of your Pop-up window (in pixels). Alternatively, simply type the value in place of the existing width value.

 

 

With the above settings made you can now proceed to the next step in the Pop-up design process. Click the button_application_next to move on to Step 3.

Home  Previous  Next