CSS Link Builder User Guide

Installing CSS Link 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 Link 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 Link Builder UI a one-stop destination for managing all of your links.

Accessing the CSS Link 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 first icon opens the CSS Link Builder UI. The second icon opens the CSS List Builder UI.

Insert Panel

Insert Menu

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

Insert > PVII HTML Toolkits > CSS Link Builder

The interface will open...

The CSS Link Builder UI

Mode

There are 2 modes: Insert Link and Modify Existing Link

Note: When inserting a new link, you can either select an existing link, a string of text, or simply place your cursor where you want the link to go. The UI will assess your actions and set the Link Text to your selected text or to a default placeholder called Link Text.

Link Type

There 3 possible link types—

Default Text Link

Choose this option if you just want to use the Link Builder UI to set and manage the HREF, title, and target attributes of your link. The styling will be based on your own page CSS.

A default Text Link based on PVII Harmony CSS

Styled Text Link

Use this option if you also want to set styling attributes for your link.

Sample of Styled Text Link

Button Link

Use this option if you would like to configure your link to look like a button.

Sample Button Link

Note: If you set a link to Styled Text Link or Button Link, and later reset it to Default Text Link, any colors or other attributes set will be removed.

Link Text

Enter or Edit the text for your link or button.

Link Path

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

Title

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.

Target

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.

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 your link.

Background Color

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

Text Decoration

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

Styling Options

Border (Button Links Only)

The Border option enables you to wrap the entire link in a light or dark border. This option is only available for Button Links.

Rounded (Button Links Only)

The Rounded option sets a subtle border-radius on your link. This option is only available for Button Links.

Glassy (Button Links Only)

The Glassy option sets a glass effect on your link, making it appear wet or bevelled. This option is only available for Button Links.

Animation

Sets a subtle transition from default to hover states.

User Class

Advanced CSS Authors can set one or more custom classes on the link, 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.

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:

OK

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 link, text included. If this was the only Link Builder managed link on your page, the Link 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.

Cancel

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

Help

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

Menu