STEP 2 - Customize Your Links - 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 the second tab, the screen will resemble the one shown below:

 

window_social_networking_tab2

 

 

Again, the screen is divided into two parts, a list of settings on the left side that you can use to change appearance of your bookmark links box, and a preview area on the right side of the window. This preview window will update as you make any changes using the settings, left, so that you can ensure you are happy with the results as you proceed to change the different elements of the box design.

 

The settings available are described below:

 

 

Size Settings:

 

Width - This is the overall width, in pixels, of your links box. 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.

 

 

Border Settings:

 

Border 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.

 

 

Border Thickness - This is the width, in pixels, of the border 'line'. You can set this value at anything between 0 and 10 pixels in 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.

 

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

 

 

Heading Settings:

 

Heading Text - Enter the text that you would like to use as a heading for the box of social networking links.

 

 

Heading Font - Using the font drop-down selector you can choose the preferred font in which you would like the box heading text displayed.

 

button_social_networking_font

 

 

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

 

 

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

 

button_social_networking_font_style

 

 

Heading 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_application_image_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.

 

 

Heading Background Color - Using this setting you can specify the color of the background color for your heading text.

 

To set your preferred text color, either type the color right into the color text-box or click the button_application_image_browse button, to the right of the color text-box to launch the color picker tool.

 

 

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

 

 

Main Body:

 

Main Body Font - Using the font drop-down selector you can choose the preferred font in which you would like the main body text displayed - that is, the text adjacent to the bookmark icons.

 

button_social_networking_font

 

 

Main Body Font Size - Specify a size for your main body text using this font-size drop-down.

 

Click the button_social_networking_font_size drop-down selector to make your choice from the available font sizes (6pt to 48pt).

 

 

Main Body Font Style - If you would like to make your body text bold, italic or underlined simply click the appropriate button.

 

button_social_networking_font_style

 

 

Main Body Font Color - This control determines the color of your body text. To choose your preferred text color, either type the color right into the color text-box or click the button_application_image_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.

 

 

Main Body Background Color - Using this setting you can specify the color of the background color for your body of the text-box (the area behind the social networking links themselves).

 

To set your preferred text color, either type the color right into the color text-box or click the button_application_image_browse button, to the right of the color text-box to launch the color picker tool.

 

 

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

 

 

When you have finished entering the preferred settings for these items, above, simply click the 'finish' button at the bottom of the window to finalize the links and insert them at the cursor point in the designer window.

 

 

Editing Social Link Box Properties

 

When the Social Networking Links are added to your page content a placeholder frame is inserted, denoting the positioning (and size) of the links box.

 

To edit any of the settings relating to this box, simply right-click on the placeholder frame and, from the menu that appears, select 'Social Network Link Properties'.

 

This will load the settings for the links box in question.

Home  Previous  Next