Scroll To Top
Scroll To Top

Enter a query to search our site. Note that you can use "*" and "?" as wildcards. Enclosing more than one word in double quotes ("CSS Layout") will search for the exact phrase.

Buy Now ($40) | Finished Page | Lux Home

Lux Add-On Pack for TPM3: User GuideThe Ultimate Responsive and Adaptive Widgets for Dreamweaver

The Lux Pack is a showcase add-on for Tab Panel Magic 3: the ultimate WYSIWYG tabbed panel widget for Dreamweaver. Lux provides an automated interface, inside Dreamweaver, that allows you to make a gorgeous page, with a fabulous Tab Panel widget at its core. Click the image below to see what you'll be able to create... in seconds!

Install the extensions

Lux comes with two installation files:: p7_Lux_102.mxp and p7_Lux_102.zxp

MXPs are supported by Extension Manager versions MX, MX2004, 8, CS3, CS4, CS5, CS5.5 and CS6. ZXP is supported by versions CS6 and higher (including all Creative Cloud versions).

For version CS6 and older:

Open your Extension Manager and choose the Install command located in the header or in the file menu. Browse to the installer file p7_Lux_102.mxp in the root of the zip archive you downloaded and install them.

For Creative Cloud versions CC 2015 (and higher)

As of CC 2015, Adobe has ceased to support its own Extension Manager.

There are several extension manager alternatives that you can use:

PVII Extension Manager for Dreamweaver CC 2015
( Windows only)

Double-click to install. You will get a security alert because we have not yet digitally signed it, but simply click "Install Anyway" (or similar). After installation, make sure you restart Dreamweaver CC 2015. To access the EM, open Dreamweaver CC 2015 and you will find it on the Commands menu. The EM is launch-able only via CC 2015, but when you install an extension (or uninstall) it will effect CC and CC 2014 as well. Only those extensions installed via our EM will appear in the listing. If you have an extension previously installed through Adobe's EM, simply re-install it using ours and it will appear in the listing.

Mac users may use the DMX Zone Extension Manager

DMX Zone EM (recommended)

Work in a defined Dreamweaver site

Before you begin, make sure you are working inside a defined Dreamweaver web site. This is necessary so that Dreamweaver knows how to link required assets. If you are new to Dreamweaver or need to learn how to define a web site, follow these simple steps:

Choose Site > New Site

Specify local site location

The Site category of the Site Setup dialog box is the only one you need to fill out to begin working on your Dreamweaver site. This category lets you specify the local folder where you’ll store all of your site files. When you’re ready, you can fill out the other categories in the Site Setup dialog box, including the Servers category, where you can specify a remote folder on your remote server.

Site Name

The name that appears in the Files panel and in the Manage Sites dialog box; it does not appear in the browser.

Local Site Folder

The name of the folder on your local disk where you store site files, templates, and library items. Create a folder on your hard disk or click the folder icon to browse to the folder. When Dreamweaver resolves site root-relative links, it does so relative to this folder.

Assets Folder

When you create a page, the following asset folders are created in your defined site:

When you publish your page, make sure you upload these folders to your server.

Creating a Lux Page

-ChooseFile > New PVII Page Pack > Lux... from the main Dreamweaver menu.

Note: You do not need to have a page open in Dreamweaver. The Page Pack system will create and open the new page automatically.

The Lux Interface will open.

The PagePack Interface

Create the New Page

-Click the Create button to create your Page Pack page.

The Save As dialog box will open.

Use the navigation controls to navigate to an existing folder—or create a new folder—in which to save your page. All of the related page assets (images, CSS files, and scripts) will also be created in this folder.

-Enter a file name for the new page.

Note: If you do not enter a file extension, the system will automatically assign the default extension defined by your Dreamweaver preferences, such as .htm, .html, .php, or .cfm. You can also type in a valid Dreamweaver supported file extension yourself.

-Click the Save button to create the new page.

The Finished New Page

A new Page Pack page will be created using the file name that you entered. The page will be open in Dreamweaver and ready for you to edit.

Manage your Lux Page

Once your page is created, you can use the Tab Panel Magic 3 interface to manage the TPM3 widget on your Lux page. You can add additional panels and tabs, re-order the default tabs, change animation options (or any other options) just as you can with any TPM3 widget.

The Hamburger Link ≡

The Tab Panel widget in your Lux page contains a menu panel whose tab (by default) looks like this:

But the menu on our finished page demo looks like this:

What happened?

Glad you asked. It was really easy!

The default code looks like this:

<li class="tp3first"><a href="#p7TP3c1_1" id="p7TP3tab1_1">&equiv; Menu</a></li>

And we simply removed the word Menu, leaving the character entity for the hamburger (&equiv;):

<li class="tp3first"><a href="#p7TP3c1_1" id="p7TP3tab1_1">&equiv;</a></li>

Then we used the ID on the <a> tag to create three simple rules:

#p7TP3tab1_1 {
background: none !important;
font-size: 300% !important;
line-height: 14px;
color: #AAA;
#p7TP3tab1_1:hover {color: #FFF;} {color: #22838B !important;}

Adjust as necessary so that the ID in your code matches the ID name in the CSS rule. In this case, #p7TP3tab1_1 signifies the first tab in your TPM3 tab bar. If your menu link were the 4th tab, then its ID would be #p7TP3tab1_4. Easy peasy.

Tip: The line-height assures that the increased font-size does not increase the overall height of your tab bar.


Lux comes with a page CSS file: lux.css and a TPM3 theme CSS file p7TP3-18.css

These files are fully editable using Dreamweaver or your favorite CSS editor. If you need help editing the CSS please contact PVII support...


See our main support page for contact information. PVII support never ends.