KNOWLEDGE CENTER


	Admin Terms and Definitions Edit Mode Site Administration Edit Organization Site Add a Child Site Assigning Groups to Child Sites Edit or Delete an Exisiting Child Site Site Login Roles Add a New Role Copy Role Edit or Delete an Existing Role Users Adding a New User Edit or Delete an Existing User User Login Reset Password Permissions Types of Permissions Advanced Permissions Page Level Advanced Permissions SEO Center Meta Tag-Google Create A Google Account Add Site to Webmaster Tools Submit a Sitemap Keyword Research Styles Control Panel Styles Control Panel, Color Palette Styles Control Panel, Fonts Styles Control Panel, Headings Style Control Panel, Tables Styles Control Panel, Links and Other Options Page Management Page Template Add a New Page Page Attributes Page Location Page Publish Dates Page Appearance Page Visibility Page Publishing Copy a Page Date Preview of a Page Edit or Delete Page Pushed Page Behavior Taking Precautions Before Deleting a Page Content Management Add Content Content Type Articles Add an Article Add Adwords Conversion Codes Insert a Flash Add HTML Add a Hyperlink or Bookmark Images Tables Add a Video Adding a Breadcrumb Edit or Delete a Breadcrumb Adding Facebook Comments Edit or Delete a Facebook Comment Box Add a Facebook Like Button Edit or Delete a Facebook Like Button Form Basics Form Building, Step One Let's Build a Form; Common Properties Let's Build a Form, Styles Form Example Edit or Delete a Form Form Tools Link File Link List Adding Link Lists Adding Vertical Link Lists Adding Horizontal Link Lists Adding Dropdown Link Lists Link List-Load and Save a Style Edit or Delete a Link List Page and or Article Login Element Login Example Edit or Delete a Login Add a Menu Edit or Delete a Menu Create Slide Shows Creating a New Slide Show Folder Edit or Delete a Slide Show Thumbnail Slide Show Edit or Delete a Thumbnail Slide Show RSS Reader Edit or Delete a RSS Reader Scrolling Text Edit or Delete Scrolling Text Section Lists, Expanding and Contracting Lists Adding a Vertical Section List Adding a Horizontal Section List Section Lists In Action Edit or Delete a Section List Framed Content Edit or Delete Framed Content Google Analytics Acquiring a Google Analytics Tracking Code Add Google Analytics to a Website Edit or Delete a Google Analytics Google Maps Edit or Delete a Google Map Store Locator Edit or Delete a Store Locator Text Accordion Edit or Delete a Text Accordion Content Placement Content Details Content Publish Dates Content Visibility Content Publishing Basics Tools Editing Icons Page Toolbar Details of the Page Toolbar Text Editor Toolbar Details of the Text Editor Text Formatting Toolbar Details of Text Formatting Paragraph, Indent, bullets Details of Paragraphs, etc Other Editing and Content Options Toolbar Details of Spell Check Insert a Horizontal Line or Colored Line Form Building Toolbar The Library How to Search Through the Library Article Storage or Retrieving from the Library Edit or Delete Article in Library Image Storage in Library Edit Images in Library File Storage in Library Edit Files in Library Reports Form Submissions Link Checker Usage FAQ Answers to Questions About Editing Answers to Questions About Files Answers to Questions About Forms Answers to Questions About HTML Answers to Questions About Images Answers to Questions About Links and Menus Answers to Questions About User Privileges Answers to Miscellaneous Questions Videos Let Us Introduce Ourselves Add a Page Add Content The Basics of Building Tables Tables-Create Columns Tables-Callout Boxes Scheduling & Sharing Content Edit Shared Content New Library Search Engine Verify and Sitemap Submit Section List Element SEO Center

Creating a Vertical Link List

This page is the second step in creating a Vertical Link List.

If you have come to this page without first reading "Adding Link Lists,"

you will be skipping some necessary information.

To go that page, click here.

To add a Vertical Link List you'll want to start on the page that is the Top Level page, or the first page of a section.

Let's do a quick review of the first steps in creating a Link List.

1. Click the Add Content button that is in the gray Administration panel in the upper left of your screen. Webtreepro will bring up Add Content. Scroll down to

select Link List.

2. Now, at the Placement screen, select "This page and any page beneath it." At the bottom of the page, choose the panel where you want the Link List to

appear.

3. Click Next to go to the Details screen, seen below. For more information about this screen, go to the page Adding Link Lists, or click here.

Common Properties tab:

Now, you are ready to select the Common Properties tab of the Details screen that is seen below.

This is the tab where you choose your Link List to be positioned vertically. A Vertical List will have the list go up and down in the panel.

Do not click "Next" as it will take you to the Published Dates page of the Link List wizard, and you may want to continue the Details section and move to

the Styles tab.

Select Vertical List.

1. The Alignment dropdown will offer these choices:

'Left' will have the list fixed on the left margin of the panel.

"Center" will have the list centered in the middle of the panel.
"Right" will have the list fixed on the right margin of the panel.

2. Padding Above: This setting is in pixels (px) and allows for additional space above the list.

3. Padding Below: This setting is in pixels (px) and allows for additional space below the list.

4. Spacing between items: The setting is in pixels (px) and gives extra spacing between each link in the list.

5. Separator and text space: The setting is in pixels (px) and sets the spacing between each title of the list and the separator.

Styles tab:

Now, you are ready to click on the Styles tab for Vertical Lists, which is right next to the Common Properties tab. Once there, you will set up the

appearance of your list.

Do not click "Next" as it will take you to the Publish Dates page of the Link List wizard.

Vertical Styles Screen

There are many decisions to make on this tab. Let's look at each choice.

Separator and Border:

1. Select Separator: Click the dropdown arrow. Your choices are having a dotted border, a solid border, or no border at all, which will

surround your list.

2. Separator Color can appear in a certain color. You can choose a color by clicking on the square to see the color palette, then click on a choice.

Or you can enter in the color hex code number. If you don't choose a color, the separator will be in black.

3. Border size (or thickness) choices are None, Medium, Thick, or Thin.

4. Border colors can be chosen by entering a color hex code number, or by clicking on the square to see the color palette, and click on a color.

If you don't choose a color, the border will be invisible (Transparent).

Common Style:

1. Common Style sets the titles of the list in a natural state (non-rollover, non-active). If not specified, Common Style will take up the defaults

specified in your original skin design.

Font Style: Click the Font button . The 3 dropdowns will let you choose a Font, a Font Style and Font Size, all of which can be seen in the preview box at the bottom of the window. (The preview box in the example below, is showing Comic Sans MS font.) .
Font Color: You can choose a color for your Font by clicking the square to see the color palette, or by entering the hex color code. If you don't choose a color, the Font will be in black.
Background Color: You can choose a color to be in the background of the list. If you don't choose a color, the background will be the same color as the page (Transparent).
If you are not going to select anything more on this page, click Next to save. You will be taken to the Publish Dates page of the Link List wizard. Go through each of the Link List wizard tabs, and click Finish , to exit the wizard, and return to your working page. The Vertical Link List will be in place.
Or, click Cancel to exit without saving anything.
Otherwise, continue to the end of this page to find out how to add a Rollover Style and/or an Active Style to your Link List.

Font Settings Window

Below is an example of a Vertical Link List.

The list has a blue border that is set at "Medium" thickness. The Font is green and is set in Comic Sans MS.

The Separator is in light blue which doesn't show up very well. So, it will need to be edited.

Sample Link List

Link List Flyout

Sample Link List 2

To change the Style of the Link List, go to the list and make a right click. The Link List Details flyout comes up, seen in the center.

To change any of the Styles choices you made earlier, click on Properties which will take you back to the Link List wizard.

Choose the Details tab, then the Style tab and make your changes. The newly edited Link List is on the right.

To read more about editing a Link List, go to the page Edit or Delete a Link List, or click here.

Let's look at the dynamic "Styles" that Webtreepro offers you.

Rollover Style:

1. If selected, the Rollover Style will cause the text to change when a visitor mouses over a link. If not specified, the list will take up the defaults chosen in

your original skin design.

Font Style: See the "Font Settings" window above. Click the Font button . The 3 dropdowns will let you choose a different Font, Font Style, or Font Size to give to the list, all of which can be seen in the preview box. (The preview box is showing the Comic Sans MS font.)
Font Color: You can choose a different color to give to the Font by clicking on the square to see the color palette, or by entering the hex color code. The default will be black.
Background Color: You can choose a different color to give to the background of the list. If not chosen, the background will be the same color as the page (Transparent).
If you are not going to select anything more on this page, click Next to save. You will be taken to the Publish Dates page. Follow each of the Link List wizard tabs, and click Finish , to exit the wizard, and return to your working page. The Vertical Link List will be in place.
Or, click Cancel to exit without saving anything.
Otherwise, continue to the end of this page to add an Active Style.

Active Style:

Active Style example:

1. Active Style shows the visitor where they are in relation to the entire site. An example can be seen in the

"List of Pages" in the left rail of your screen, when you are in Edit Mode.

Another type of an Active Style text is to our immediate left. The title that is in red, indicates the page you are on,

and it will always be in red as you move up or down, no matter what page you are on.

Font Style: See the "Font Settings" window above. Click the Font button . The 3 dropdowns will let you choose a different Font, Font Style, or Font Size to give to the list, all of which can be seen in the preview box. (The preview box is showing the Comic Sans MS font.)
Font Color: You can choose a different color to give to the Font of the list by clicking on the square to see the color palette, or by entering the hex color code.
Background Color: You can choose a different color for the background of the list. If you don't choose a background color, the background will be the same color as the page (Transparent).

2. When you have made all the selections needed on the Vertical Styles screen, click Next to save. You will be taken to the Publish Dates

page. Follow each of the Link List wizard tabs, and click Finish , to exit the wizard, and return to your working page. The Vertical Link List

will be in place.

3. Or, click Cancel to exit without saving.

Note:

You will be able to test the Dropdown Link List only when you are in Published mode, or you can click on Date Preview located in the gray Administration panel to the left of your screen.

Save Style:

If you make selections that are likely to be used again, Webtreepro has provided you with a time saving tool. Find the Load Style and Save Style buttons

located in the upper right corner of the Styles screen. These convenient buttons will make your future list-making tasks quick and easy. Here's how.

1. When you have made all your selections on the Styles page, click the Save Style button . (See screen segment below.)

It will bring up the Save a style window.

2. Click the radio button, New Style. Give your Style a name that will remind you of a specific Style, and click to Save . This will put all of the

choices you have just made under your specific Style name. In the future, you can retrieve this Style, and use it again.

For more information see the page Link List; Load and Save a Style, or click here.

Need Help? Click here.

Home