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 Horizontal Link List

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

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

you'll be skipping some necessary information.

To go to that page, click here.

To add a Horizontal 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 horizontally. A Horizontal List will have the list go across the panel from left to right margin.

Do not click "Next" as it will take you to the Published Dates page of the Link List wizard. You may want to continue with Details and move on to the Styles tab.

Select Horizontal List.

1. The Alignment dropdown offers you a choice of how the list will be horizontally positioned within the panel.

"Left" places the list at the left edge of the panel.
"Right" places the list at the right edge of the panel.
"Center" places the list in the center of the panel.

2. Padding Above and Padding Below gives you a choice of spacing around each link's name, in pixels.

3. Show # of items per line: You'll need to enter how many links will appear across the panel so they can be aligned evenly.

4. Width determines the vertical width of the panel in pixels.

Styles tab:

Now, you are ready to click on the Styles tab for Horizontal 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.

There are many choices to make on this tab. Here's a description of each choice.

Separator and Border:

1. Select Separator: The dropdown choices are bullets, pipes, custom, or to choose no separator at all. If you want to have a customized separator, you

can use up to 2 characters, such as >>.

2. Separator Color can be chosen by clicking on the square to see the color palette, or by entering in the hex color code. If you don't choose a

color, the separators will be in black.

3. Border size 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 list in a natural state (non-rollover, non-active). If not specified, the Common Style will take up the defaults specified in your

original skin design.

Font Style: See the "Font Settings" window below. 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 window 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 for 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 go to Publish Dates. Follow each of the Link List wizard tabs, and click Finish to exit the wizard, and return to your working page. The Horizontal Link List will be in place.
Or click Cancel to exit without saving anything.
Otherwise, continue to the end of this page to see how to add a Rollover Style and/or an Active Style to your Link List.

Font Settings Window

In the 1st row, shown below, is an example of a Horizontal Link List.

The list has a blue border that is set at "Thin" thickness. The Separator is in orange. The Font is set in Comic Sans MS.

The Font's color is in light green which doesn't show up very well. So, it will need to be edited.

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 just above.

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 [ProductName ] offers you.

Rollover Style:

1. If selected, the Rollover Style will cause the text of the list 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 rollover link, all of which can be seen in the preview box.
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 to give to the background of the list. If not chosen, the background will have 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 Horizontal

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 the immedidate 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 different Font, Font Style, or Font Size to give to the list, all of which can be seen in the preview box.

Font Color: You can choose a different color 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 Horizontal Styles screen, click Next to save, or click Cancel to exit without

saving. You'll 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 Horizontal Link List will be in place.

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, [ProductName ] 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 , that is in the upper right corner of the

page. (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