Basic Text Box - XSitePro Website Design

Home Previous  Next

icon_xsp

Brought to you by XSitePro Website Design Software

professional website design made easy      

 

The Basic Text box designer can be loaded from the right-click menu as shown below:

 

menu_right_click_design_wizard_box1

 

 

On clicking this option, the basic text box screen will appear:

 

window_basic_text_box

 

 

There are a number of settings that you can customize to create a Basic Text Box, as well as a preview panel which gives us an immediate idea of what our finished text box is going to look like.

 

We shall look at the settings available in more detail below:

 

 

Box Settings:

 

Width - This is the overall width, in pixels, of your text box frame. Increase/decrease this value using the up/down arrows appropriately, or simply over-type the value in this text box with the exact width you wish to use.

 

 

Height - This is the overall height, in pixels, of your text box frame. Increase/decrease this value using the up/down arrows appropriately, or simply over-type the value in this text box with the exact height you wish to use.

 

 

Padding - Increasing or decreasing this value will adjust the spacing between the contents of the text box (i.e. the text itself) and the frame/border of the text box. The greater the value, the more space there will be. Use the up/down arrows to change the value, or simply over-type the value in this box with the exact padding setting you wish to use.

 

 

Color - This setting adjusts the fill color of the text box. If you wish to change the color you may do so either by typing the desired color into the color text box, or by clicking the browse button to the right of the color text box.

 

button_basic_text_box_color_selection

 

 

Clicking this button will launch the color picker tool with which you can browse for, and select the color of your choice. For more information on how the color picker tool works, visit the section in this manual entitled 'Color Picker'.

 

 

Alignment - To align the text box itself left, center or right of the Web page simply select the appropriate option from the list.

 

 

Text Settings:

 

Font – Using the font drop-down selector you can choose the preferred font in which you would like your text displayed.

 

piece_text_box_font

 

 

Font Size – Specify a size for your text using this font-size drop-down. Click the button_basic_text_box_font_size drop-down selector to make your choice from the available font sizes (6pt to 48pt).

 

 

Font Style – If you would like to make your heading text bold, italic or underlined simply click the appropriate button.

 

button_application_bold_stylebutton_application_italic_stylebutton_application_underline_style

 

 

Font Color – This control determines the color of your text. To choose your preferred text color, either type the color right into the color text-box or click the button_basic_text_box_color_browse button, to the right of the color text-box.

 

This button will launch the Color Picker tool, which you can use to make your color selection.

 

 

Text Alignment - To align the text left, center or right of the text box simply select the appropriate option from the list.

 

 

Border Settings:

 

Color - This control determines the color of your text box border. To choose your preferred border color, either type the color right into the color box provided or click the button_basic_text_box_color_browse button, to the right of the color text-box.

 

 

Width - This is the width, in pixels, of the border 'line'. You can set this value at anything between 0 and 10 pixels in line-thickness. Use the up/down arrows to change the value, or simply over-type the value in this box with the exact line thickness you wish to use.

 

 

Style - This setting affects the border, making the line appear in one of the following line-styles:

 

Solid

Dashed

Dotted

Double

Ridge

Groove

Inset

Outset

 

 

Simply select the desired option from the drop-down list and it will be applied to your border.

 

 

Text:

 

Text Entry - In the box provided, enter the actual text that you would like to feature within the text box. As you type you will notice the real-time preview at the bottom of the window updates to show the changes you have made.

 

 

Once you are happy with the adjustments you have made, and the text you have entered, click the 'Ok' button at the bottom of your screen. This will insert the text box at the cursor-point within the designer window.

Home  Previous  Next