CSS List Builder User Guide

Installing CSS List Builder

Extension installer files come in 2 formats: MXP and ZXP. MXPs are supported by Extension Manager versions MX, MX2004, 8, CS3, CS4, CS5, CS5.5 and CS6. ZXP is supported by versions CS5.5 and higher. To install this product, open your Adobe Extension Manager, click the Install icon or link, and then browse to where you unzipped the installer file.

Dreamweaver CC 2015 (and higher) Extension Installation Information

As of CC 2015, Adobe has ceased to support its own Extension Manager. Use the PVII Extension Manager for Adobe Creative Cloud:

PVII Extension Manager for Adobe CC
( Windows and Mac)

Download and Install Instructions

CSS List Builder Overview

The PVII Links Toolkit is a productivity tool that enables you to manage all aspects of the hyperlinks on your page— from creating them, to linking them, to styling them, in an intuitive user interface, with absolutely no coding required. Choose foreground and background colors for any or all states (link, visited, & hover), as well as underlining, radius, glassy effect, and animation. Also set link path, target, and title—features that make the List Builder UI a one-stop destination for managing all of your links.

Accessing the CSS List Builder UI

Installing the Links Toolkit creates a new category on your Insert Bar/Panel called HTML Toolkits (the last category in the screen captures below):

Insert Bar

The HTML Toolkit tab's second icon opens the CSS List Builder UI. The first icon opens the CSS Link Builder UI.

Insert Panel

Insert Menu

Alternatively, you can use the traditional Insert Menu. Choose:

Insert > PVII HTML Toolkits > CSS List Builder

The interface will open...

The CSS Link Builder UI


There are 2 modes: Insert New CSS Link List and Modify Existing CSS Link List


Choose Horizontal or Vertical

List Item Command Buttons

Manage your Link List using the Commnd buttons atop the list to Add Item, Delete Item, Move Up, or Move Down.

List Items

This box displays all of the links in your link list. Use the Command buttons above the list to add, delete, or move items.

Item Text

Enter or Edit the text for your button.

Item Link

Enter or Browse to the page that you wish to load when your button is clicked or tapped.


Optionally enter a title for your link. Modern browsers will pop up your title in a tooltip. Typically, titles are used when the link text does not describe the link destination in sufficient detail.

The title attribute should be used for accessibility, rather than for SEO.


The target attribute allows you to set your link to open in a new window or tab. The best practice is to use your own name, such as my-window, rather than the archaic _blank. This will ensure that if you have multiple links with the my-window target, the browser will never open more than 1 additional window or tab.

Color & Decoration Options

The color & decoration options are straightforward and self-explanatory. Do note that your color and decoration options will apply to each link in your list.

The first 2 rows (Text Color and Background Color) have 3 columns. The first column describes the default link state, the second column is for the hover state, and the third column is for the visited state.

Note: We do not provide an Active selector as that state is rarely actually needed for links in modern web pages.

Text Color

Set Text Color for the default, Hover, and Visited states of each link in your list.

Background Color

Set Background Color for the default, Hover, and Visited states of each link in your list.

Text Decoration

Set bottom border attributes for the default and Hover states of each link in your list. The Visited state will inherit the default state attributes.

Styling Options


The Border option enables you to wrap each of your links in a light or dark border.


The Rounded option sets a subtle border-radius on your links.


The Glassy option sets a glass effect on your links, making it appear wet or beveled.


Sets a subtle transition from default to hover states.

User Class

Advanced CSS Authors can set one or more custom classes on the list, enabling them to set attributes and behaviors beyond the available UI options.

Note: Do not enter a leading period in the User Class box. If you are entering multiple classes, separate each one with a space. Do not use the characters p7 or tkl in your user class names. Note that for a Link List, the User Class is assigned to the parent UL, as opposed to individual links. Do keep that in mind as you write your relevant CSS rules.

Command Buttons

There are two command button configurations:

When entering a new link

A three-button column will display:

When Modifying an Existing Link

A fourth button labeled Remove will be appear:


Commit the options you have set in your UI session to the page and close the UI.

Remove (only present in Modify Mode UI)

Removes the entire list, text included. If this was the only List Builder managed list on your page, the List Builder CSS file link will also be removed. A warning will pop up explaining what will be removed. Read it carefully before you commit to the Remove action.


Discard the options you have set in your UI session and close the UI. Nothing on the page will be changed.


Load this User Guide in your default browser.

Note: Requires a live Internet connection.


Support Options

Before making a support inquiry, please be certain to have read the documentation that came with your product. Please include your Order Number, Dreamweaver version, as well as your computer operating system type in all support correspondence.

Support Forum

PVII maintains a Web Forum community. Go Direct to the Web Forum

E-Mail and Phone Support

E-Mail: support@projectseven.com

Phone: (336) 374-4611

Phone hours are 9:00am - 5:00pm Eastern Time U.S.

©2018 Project Seven Development