PVII TPM2 (TPM2)

Tab Panel Magic is a very modern, very engaging, and very easy tool with which to create Tabbed Panel widgets using a
fully automated graphical user interface that installs into Dreamweaver.

We hope you enjoy using this product as much as we did making it.

Al Sparber & Gerry Jacobsen PVII

 PVII TPM2 (TPM2) 2

Contents

PVII TPM2 (TPM2) ................................................................................................................................................ 1

Installation............................................................................................................................................................... 9

Before you begin ..................................................................................................................................................... 9

Work in a Defined Dreamweaver Web Site ....................................................................................................... 9

Overview ............................................................................................................................................................... 10

Creating a New TPM2 Widget Interface Walkthrough .................................................................................... 12

Asset Folders ................................................................................................................................................. 14

Modifying an Existing TPM2 Widget .............................................................................................................. 15

Managing the User Interface Items ................................................................................................................... 17

Mode ............................................................................................................................................................. 17

Panels ............................................................................................................................................................ 17

Trigger Text .................................................................................................................................................. 17

Link Path / Browse........................................................................................................................................ 18

Trigger Image / Browse... ............................................................................................................................. 18

Alt Text ......................................................................................................................................................... 18

Content Layout.............................................................................................................................................. 18

2
 PVII TPM2 (TPM2) 3

Options .............................................................................................................................................................. 18

Page Load...................................................................................................................................................... 18

Auto Rotate ................................................................................................................................................... 18

Triggers ......................................................................................................................................................... 19

Current Marking............................................................................................................................................ 20

Animation ..................................................................................................................................................... 20

Image Swap Options ..................................................................................................................................... 21

Style Theme .................................................................................................................................................. 21

Command Buttons ........................................................................................................................................ 22

CSS Glossary ........................................................................................................................................................ 23

The root TPM container .................................................................................................................................... 23

Images inside the widget ................................................................................................................................... 24

Trigger (Tabs) container ................................................................................................................................... 24

Left and Right scrolling control arrows ............................................................................................................ 24

Padding and font synchronization for tabs and arrows ..................................................................................... 25

Trigger (Tabs) container ................................................................................................................................... 25

Trigger (Tabs) unordered list ............................................................................................................................ 25

Utility rule to remove image borders ................................................................................................................ 25

Trigger (Tabs) list items.................................................................................................................................... 25

3
 PVII TPM2 (TPM2) 4

Margin Reset Rule for first tab ......................................................................................................................... 26

Link styles for your tabs ................................................................................................................................... 26

Tab hover and focus .......................................................................................................................................... 26

Tab list item open state ..................................................................................................................................... 27

Tab open link state ............................................................................................................................................ 27

Content panels wrapper..................................................................................................................................... 27

Content panels wrapper when scrolling arrows are enabled ............................................................................. 27

Panels Viewport ................................................................................................................................................ 28

The content in each panel ................................................................................................................................. 28

Important notes ..................................................................................................................................................... 28

About Fading .................................................................................................................................................... 28

Content Layout...................................................................................................................................................... 29

Content Layout CSS ......................................................................................................................................... 30

Customizing Content Layout Columns ............................................................................................................. 30

How do I edit the Tabs in the iTabs or Glassy Green Themes? ....................................................................... 31

Changing the default link color for old browsers ......................................................................................... 31

Changing the default link color for modern browsers .................................................................................. 31

Changing the hover color for old browsers................................................................................................... 32

Changing the hover color for modern browsers ........................................................................................... 33

Changing the open color for old browsers .................................................................................................... 33

Changing the open color for modern browsers ............................................................................................. 33

4
 PVII TPM2 (TPM2) 5

Converting a TPM1 Widget to TPM2 .................................................................................................................. 34

Overview ........................................................................................................................................................... 34

Choose an Action .......................................................................................................................................... 34

PVII Tab Panel Magic 2 Image File Naming Convention .................................................................................... 36

Overview ........................................................................................................................................................... 36

Tab Panel Magic 2 Default Naming Convention:......................................................................................... 36

Changing the image naming convention....................................................................................................... 37

PVII Tab Panel Magic 2 -Remove ........................................................................................................................ 38

Overview ........................................................................................................................................................... 38

Open the Remove PVII Tab Panel Magic 2 interface....................................................................................... 38

What will be removed ................................................................................................................................... 39

What will Not be Removed........................................................................................................................... 39

PVII Tab Panel Magic 2 -Open Panel Behavior ............................................................................................... 40

Overview ....................................................................................................................................................... 40

Creating a new Open Panel behavior ............................................................................................................ 40

Modifying an existing Open Panel behavior ................................................................................................ 40

The Interface ................................................................................................................................................. 40

The Interface Items ....................................................................................................................................... 40

The Interface Control Buttons ...................................................................................................................... 41

5
 PVII TPM2 (TPM2) 6

PVII Tab Panel Magic 2 -Rotator Behavior ..................................................................................................... 42

Overview ....................................................................................................................................................... 42

Creating a new Rotator behavior .................................................................................................................. 42

Modifying an existing Rotator behavior ....................................................................................................... 42

The Interface ................................................................................................................................................. 42

The Interface Items ....................................................................................................................................... 43

The Interface Control Buttons ...................................................................................................................... 44

Advanced Current Marker .................................................................................................................................... 45

Overview ........................................................................................................................................................... 45

Opening the Advanced Current Marker ............................................................................................................ 46

Modifying the Advanced Current Marker ........................................................................................................ 47

Removing the Advanced Current Marker ......................................................................................................... 48

Advanced Current Marker "None - Disable All" .................................................................................................. 49

Overview ........................................................................................................................................................... 49

Opening the Advanced Current Marker ............................................................................................................ 49

Select the Current Marker Option ..................................................................................................................... 50

Finished ............................................................................................................................................................. 50

6
 PVII TPM2 (TPM2) 7

Advanced Current Marker Link Text Marking Option......................................................................................... 51

Overview ........................................................................................................................................................... 51

Opening the Advanced Current Marker ............................................................................................................ 51

Select the Current Marker Option ..................................................................................................................... 52

Select the Link Text .......................................................................................................................................... 52

Finished ............................................................................................................................................................. 52

Advanced Current Marker URL Match Option .................................................................................................... 53

Overview ........................................................................................................................................................... 53

Opening the Advanced Current Marker ............................................................................................................ 53

Select the Current Marker Option ..................................................................................................................... 54

Select the URL to Match................................................................................................................................... 54

Finished ............................................................................................................................................................. 54

7
 PVII TPM2 (TPM2) 8

Advanced Current Marker "Folder:Text Match" .................................................................................................. 55

Overview ........................................................................................................................................................... 55

Opening the Advanced Current Marker ............................................................................................................ 55

Select the Current Marker Option ..................................................................................................................... 56

Define the Folder Name :: Link Text Pairs ....................................................................................................... 56

Specify the Folder Name .............................................................................................................................. 56

Specify the Link Text.................................................................................................................................... 57

Adding another Folder Name :: Link Text Pair ................................................................................................ 57

Using a Compound Folder Name ..................................................................................................................... 58

Ordering the Defined Pairs ............................................................................................................................... 59

Deleting a Defined Pair ..................................................................................................................................... 59

Finished ............................................................................................................................................................. 59

Support and Contact info ...................................................................................................................................... 60

PVII Knowledge Base....................................................................................................................................... 60

Newsgroup forum communities .................................................................................................................... 60

RSS News Feeds ........................................................................................................................................... 60

Before you Contact us ................................................................................................................................... 61

Snail mail ...................................................................................................................................................... 61

8
 Installation 9

Installation
Look for the extension installer file p7_TPM2_250.mxp (or higher) in the root of the zip archive you downloaded. If you
purchased the upgrade to TPM1, the installer file name will be p7_TPM2_250_upg.mxp (or higher). Double-click the file
to install the extension. Dreamweaver's Extension Manager will open and you will be prompted to complete the
installation. Once the installation is complete, restart Dreamweaver.

OS X users: If, upon double-clicking the installer, Extension Manager does not properly launch, you have a file association issue. To remedy the problem
locate the installer file from inside a Finder window and double-click it.

Before you begin

Work in a Defined Dreamweaver Web 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, please see this tutorial: Defining a Dreamweaver Web Site.

9
 Overview 10

Overview
Tab Panel Magic 2 includes some very powerful features. The list below describes some important features that you can
use to streamline your workflow and meet your project requirements.

Automatic Upgrade of Tab Panel 1 widgets: The TPM2 system includes an auto-convert feature that allows you to
convert existing Tab Panel Magic 1 widgets to TPM2.

Create or Modify - with Nesting Support: The user interface is designed to open to the correct mode, Create or Modify,
based on your current insertion point in the document:

 If your insertion point is not within an existing TPM2 widget the user interface will open in Create mode.
 If your insertion point is inside an existing TPM2 widget a dialog box will open allowing you to choose whether to
modify the existing widget or Create a Nested One. This allows you to easily add new TPM2 widgets into the
content panels of existing TPM2 widgets, a process called nesting.

When you nest one TPM2 widget inside another you need to select the same Style Theme for the nested widget as the one that is assigned to the
parent widget. This is not a product limitation but rather a limitation of the natural way that CSS cascades from parent element to child elements.

Style Themes: TPM2 includes 12 Style Themes, including freshened versions of the original TPM1 themes plus several
new themes employing some visually striking CSS3 effects.

Trigger Actions: TPM2 widgets can be set to work on Click or on Click and Mouse Over. These actions can be set
individually for each TPM2 widget on the page. Either method is compatible with Apple iDevices and phones.

Auto Width and Auto Height: By default, a TPM Widget automatically adapts to the width of the page element into which
you insert it—but can also be set to a fixed width by assigning a width in the CSS Style sheet. By default, a TPM Widget
automatically adapts to the height of each content panel.

Scrolling Triggers (Tabs) Support: The TPM system can automatically provide scrolling control arrows when the
number of triggers is such that they will not all fit within the width of your layout container. This allows you to add as
many triggers and panels as you like and still have the triggers fit into the allocated space. Arrows at either end of the Tabs
bar allow you to scroll the Tabs left and right to reveal those that do not fit in the available horizontal space. If you turn
this option off and your triggers do not fit on one line, they will wrap to multiple lines.

Dreamweaver Template Support: The system is 100% Dreamweaver Template compatible. You can insert one or more
widgets into a template (.dwt) page at any time. You can also insert one or more widgets into a template-based page. The
system will automatically detect the template and adjust to allow insertion into an editable region.

Visible Panel at Startup: Your widget can be set to open a specific or a random panel each time the page loads.

Animations: Your choices are:

 No animation
 Vertical Panel Slider (the default)
 Horizontal Panel Slider
 Fade

Image Support: The system supports using images for the panel triggers and automatically handles pre-loading,
swapping, multiple state management and current marking. This automation requires that you follow an image file name
convention discussed later in this guide. The system supports up to 3 different image states.

10
 Overview 11

External Linking and Bookmark Support: An opener detection system is included that allows you to set up links with
special parameters that will load a page and also trigger a specific panel in a TPM widget on that page. The opener will look
for the TPM widget number, an underscore, and the TPM content panel number. There are 2 methods available:

 Anchor Method: The system will look for "#tpm" plus a panel reference after the anchor. The anchor
index.htm#tpm1_4 will trigger panel 4 in the first TPM Widget on the page.
 URL Parameter Method: The system will look for "tpm=" in the URL parameter. The URL parameter
index.htm?tpm=2_4 will trigger panel 4 in the second TPM Widget on the page. You can then give out the link so
people can go directly to your specific content panel.

Note: This feature is meant to be used on links to your page from external locations—not on links that are in your page.

Included Dreamweaver Behaviors: The system also includes a suite of Behaviors that can be used to create custom
TPM2 actions on links located anywhere on your page:

 Open Panel - The Open Panel Behavior can be used to create Open Panel actions on links located anywhere on
your page:
 Auto Panel Rotator - The Rotator Behavior allows you to display each of your widget's panels in slide show
fashion. Each panel will be displayed sequentially with a timed pause (that you can adjust in the main TPM2
interface) between panels.

Removal: A handy Remove TPM2 command is included that can be used to quickly and thoroughly remove any TPM2
widget from your page.

11
 Overview 12

Creating a New TPM2 Widget

Interface Walkthrough
TPM2 widgets can be inserted anywhere on your page, even into the content panel of an existing TPM2 widget. Once you
have established your insertion point, click the TPM2 icon to open the interface. Alternatively, you can choose Insert
> Studio VII > Tab Panel Magic 2 by PVII.

TPM2 will adapt to the width of the element in which it was inserted—whether that width is fixed or flexible. In the
absence of a containing element, the widget will stretch the full available width of your browser window. You can insert as
many individual TPM2 widgets as you like on your page. Each one can be configured independently with different options
and features. Different TPM2 widgets on a single page can share the same style theme or be set to separate style themes. A
nested widget, however, should be set to the same theme as its parent. Each widget can contain any type of content. Content
panels are directly editable in Dreamweaver Design View using normal Dreamweaver editing techniques.

-Establish the insertion point for your new TPM2 widget by clicking in the area of the page where you would like the
widget to be created.

-Click the TPM2 icon in the PVII Section of Dreamweaver's Insert Bar or choose Insert > Studio VII > Tab Panel
Magic 2 by PVII.

Classic Dreamweaver Insert Bar

Dreamweaver CS4-CS6 Insert Panel

12
 Overview 13

TPM2 user interface will open in the Create New mode.

Configure your widget, set your options, and then click OK to build the widget at your insertion point.

You can create more than one TPM2 widget on your page. Add as many as you like.

Tip: When you insert a TPM2 widget, all content will be visible and fully expanded in Dreamweaver to make adding and editing content a simple task. TPM2
functionality can be tested by previewing in your browser.

13
 Overview 14

Asset Folders
When you create a TPM2 widget, the system creates an assets folder named p7tpm at the same level as the page that
contains your widget. This folder will contain a JavaScript file, relevant CSS file (or files), as well as an img sub-folder that
contains the background images used by the CSS. A Fireworks folder will be created at the same level as the p7tpm folder
and will contain editable versions of all necessary background images. Each Fireworks file is named to correspond with its
associated Style Theme: tpm01.png through tpm12.png. The Fireworks folder does not need to be uploaded to your Web
server. If you choose to insert multi-column content into panel, the system will also create a p7ehc folder, which will
contain a small script used to display your columns equal height.

When you publish your site, make sure you upload the entire p7TPM folder. The Fireworks folder does not need to be
uploaded to your Web server.

14
 Overview 15

Modifying an Existing TPM2 Widget

You can modify any of the existing TPM2 widgets on your page at any time.

-Click inside the TPM2 widget that you wish to modify.

-Click the TPM2 icon in the PVII Section of Dreamweaver's Insert Bar or Insert Panel—or choose:

Modify > Studio VII > Modify Tab Panel Magic 2 by PVII

Note: If you use a Macintosh computer, Apple bugs will sometimes cause the Modify menu to be inactive (grayed out). If this happens to you, use the icon to
launch the interface. You can also launch the interface from the Insert menu. The system will open the interface in the appropriate mode whether you use the
Insert Menu, Insert Panel/Bar or the Modify menu.

Select Action Dialog

The Select Action dialog box will be displayed to allow you to choose whether to create a new Panel widget nested inside of
the existing Panel, or to Modify the existing Panel widget.

Note: This dialog only appears when your insertion point is inside of another Panel system. If your insertion point is not inside a Panel widget the interface
will open directly to the main Panel interface in Create mode. If you are nesting, make sure that the nested widget is set to use the same Style Theme as its
parent.

15
 Overview 16

TPM2 User Interface will open in Modify mode.

Configure your panels and options and click OK.

16
 Overview 17

Managing the User Interface Items

Mode
Displays the current operational Mode for the user interface: either Create or Modify. When in Modify mode, the id of the
TPM2 widget being modified will also be displayed.

Panels
This box displays the text for each panel trigger in the TPM2—one line for each panel or external link. Select (click) the line
you wish to act on.

Add
Click the Add button to add a new content panel. A new line will be created with the default text "Trigger Text". The new
line will be created immediately after the currently selected line.

Delete
Click the Delete button to remove the currently selected line. The content panel will be removed.

Up
The Up button will move the selected line in the Panels list up one row. Successive clicks will keep moving the line up, one
row per click, until the line is at the top of the list.

Down
The Down button will move the selected line in the Panels list down one row. Successive clicks will keep moving the line
down, one row per click, until the line is at the bottom of the list.

Trigger Text
The Trigger Text box will always display the text of the currently selected line in the Panels list. The system will display
Trigger Text as the default text when first adding a new content panel. Enter or edit the text that you wish to display for
this panel heading. The box cannot be left blank.

Note: If an image has been assigned, this box will be disabled (grayed out) and contain the file name of the assigned image. Removing the Image Path will re-
enable this box.

Link Only -No Associated Content Panel

Check this box if you wish to have the selected Trigger Text serve as a normal page link with no content panel associated
with it.

17
 Overview 18

Link Path / Browse...

The Link box is activated whenever the Link Only box is checked. Enter the path to the linked or use the Browse button. If
no entry is made, the system will automatically supply a named anchor to the associated content panel.

Trigger Image / Browse...

Note: The Image Path box is only used if you are using images for your headings. For text-based headings this box should be left empty.

Enter the path to your image, or Browse to it. Valid image types are: gif, jpg, and png. The image you select must always
be the default state image. TPM2 will automatically locate your over and open images based on the Image Swap Option
you select.

Alt Text
Enter a description (Alt Text) for the related image.

Content Layout
Select a custom column configuration for your content panel. This option is only available when you create a new panel
inside your widget. If you want to change the layout of an existing panel, create a new one below the existing one and set
the Content Layout you desire. After your widget is updated, copy the content from the existing panel into the new one.
Then open the TPM2 interface again and delete the original panel.

Options
These settings are applied to the current TPM2 widget. Other TPM2 widgets on the same page can have different options.

Page Load
You can configure how TPM2 sets up when the page first loads into the browser.

Start With Panel

Enter the number of the panel which you would like as the current panel when the page first loads.

Start With Random Panel

Select this option if you wish to have the system randomly select a panel to open.

Auto Rotate
TPM2 includes an automated panel rotator system that will display each panel in succession, starting with the currently
active panel. The system also includes a Rotate Behavior that allows you to control the Rotator actions externally.

Play on Startup
Check this box if you want to have the panel rotator start automatically when the page first loads.

18
 Overview 19

Show Each Panel For

This controls the amount of time each panel is displayed during the rotation, in milliseconds. The default is 5000ms (5
seconds). To display each panel for 8 seconds, for example, enter 8000 into the box.

Number of Cycles
The system will display all of the panels in succession once—or you can set it to loop any number of times. Enter the
number of times you want the system to loop through the rotation. To have the Rotator loop indefinitely simply enter a
very high number, such as 9999.

Triggers

Enable Mouse Over on Triggers

Check this box to allow mouse over activation of the Trigger Panel links. The associated panel will open whenever the user
moves his mouse over the Trigger link. The click behavior to open the panel will still remain enabled.

Scrolling
The TPM system can automatically provide scrolling control arrows when the number of triggers is such that they will not
all fit within the width of your layout container. This allows you to add as many triggers and panels as you like and still
have the triggers fit into the allocated space. If you turn this option off and your triggers do not fit on one line, they will
wrap to multiple lines. This option's animation speed can be adjusted using the Duration box.

None - Scrolling is disabled and no scrolling arrows will show. If there are more Tabs than can fit in one row then the Tabs
will wrap to a second row to assure that all of the Tabs are visible and accessible to the user.

Auto Tab Positioning - Scrolling is enabled. Scroll arrows will show at the left and right of the Tabs row. When scrolling
right the scroller will align the first Tab in the next series to the left of the Tab viewport. When scrolling left the scroller
will align the last Tab in the next series to the right of the viewport. This assures that each tab is fully visible at least once
through a complete scrolling session.

Normal Scrolling - Scrolling is enabled, scroll arrows will show at the left and right of the Tabs row. The scroller will
advance the Tab row by the width of the Tab viewport. No Auto Tab positioning is performed. This scrolling mode is the
ideal choice when using images for the Tab triggers.

Duration
This option allows you to control speed for the trigger Auto Scrolling animation. Duration defines the total amount of time
that the scrolling will run, in milliseconds, regardless of a trigger panel's dimensions. The default 250 (a quarter of a
second) is fine in most cases. Lower the Duration setting and the scrolling will be faster. Raise the setting to make the
scrolling slower.

19
 Overview 20

Current Marking
These settings control the operation of the included automatic Current Marking system.

Enable
Check this box to enable automatic current marking (highlighting) of links. The system looks for links in the widget's
panels that match the current page URL (address). When a match is found, the link is highlighted and the panel that
contains the link is set to be the currently active one. The system assigns a special style class named current_ mark to this
link and also to its associated Trigger Link. This provides a visual "you are here" indicator.

Note: This box must be checked in order to use the Advanced Current Marker features for the widget.

Include URL Parameters in Match

This option controls whether the automatic current marking feature will include any URL parameters in the page's
address when looking for a matching link in the widget. Check this box if you wish to have your URL parameters included
in the match criteria.

Animation
You can choose from 3 animation methods or animation can be turned off.

Animation List

Duration
This option allows you to control the animation speed. Duration defines the total amount of time that the animation will
run, in milliseconds, regardless of a content panel's dimensions. The default 300 (a bit less than one third of a second) is
fine in most cases. Lower the Duration setting and the animation will be faster. Raise the setting to make the animation
slower.

20
 Overview 21

Image Swap Options

The system supports using images for any of the Trigger links and is designed to automatically handle pre-loading,
swapping, maintaining states, and assigning a current marker. This automation requires that you follow the image file
name convention.

Select the Swap Option that you would like to use:

 Single Image Only -Choose this option if you are using just a single image and do not want any image swap
actions on any of the trigger states.
 Normal and Over - Choose this option if you are using two images: one normal image and one for the over
(hover) state. The over state image will also be used as the open (down) state and current mark images.
 Normal, Over and Open Images - Choose this option if you are using three images: one normal image, one for
the over (hover) state, and one for the open (down) state. The open state image will be used for the current
marker images.

Note: Be sure to choose the option carefully to match the number of image states you are using. The system will pre-load the various state images based on
this selection.

Rollover Open State

This controls the swap action when the trigger link is in its open state. The system will swap to the over image if the
trigger link is in the open state and you have a 3-state swap option set. Uncheck the box if you want to disable this swap
action.

Rollover Mark State

This controls the swap action taken when the trigger link is in its current marked state. The system will swap to the over
image on rollover if the trigger link is in the current marked state and you have a 3-state swap option set. Uncheck this box
if you want to disable this feature.

Style Theme
TPM2 comes with a variety of pre-defined CSS style themes. Choose a theme that best approximates the look you desire.
You can later make edits to the style sheet to fully customize your TPM2 widgets. You can change to a different style theme
at any time without affecting the contents of the TPM2 widget.

A preview of the selected Style Theme is displayed to the right of the Style Theme select list. This Preview will change
whenever you select a different Style Theme.

21
 Overview 22

Command Buttons
The following command buttons are available.

OK
When you are done, click the OK button to build the TPM2 widget. The system will verify your selections and alert you to
any problems that need your attention. If there are no problems, the interface will close and a TPM2 will be added to your
page or updated—depending on whether you were in Create mode or Modify mode. You can then preview in a browser to
operate the TPM2 and check its functionality.

Tip: To make further changes, click inside an existing widget then open the TPM2 interface.

Cancel
Click the Cancel button to completely abort the current operation. This will close the interface and no changes will be made
to your page.

Help
Click the Help button to open the associated Help File in your browser. This page can remain open for easy reference while
you continue working with the TPM2 interface.

22
 CSS Glossary 23

CSS Glossary
Each of the TPM2 Style Themes has its own related CSS file, which is named to match the theme. For example, the CSS file
associated with Style Theme 01-Win Tabs is named p7tpm01.css and each rule in the style sheet begins with the
matching class name ".p7tpm01". Let's explore each rule in the p7tpm01.css style sheet to see what it does and how you
can customize it.

The root TPM container

TPM2 widgets are contained within a root DIV. In all themes the width is set to auto, which allows your widget to adapt to
the width of the element in which you created it.
.p7TPM01 {
width: auto;
margin: 0 auto;
padding: 12px;
background-color: #EDEBDE;
border-top: 1px solid #F9F8F2;
border-right: 1px solid #D9D5B9;
border-bottom: 1px solid #D9D5B9;
border-left: 1px solid #F9F8F2;
font-family: Calibri, Arial, Helvetica, sans-serif;
border-radius: 5px;
}

Under certain circumstances, you might want to set a fixed width. If you do set a fixed width, your widget will
automatically center when placed in a wider container or if it is a direct child of the body. Centering occurs because margin
is set to "0 auto". If you set a fixed width but would like your widget left aligned, simply change the margin value from "0
auto" to "0".

In most of the themes the container provides a matte, which is created using padding, background color, and sometimes
borders. You can adjust these as you see fit.

Font-family for the entire widget and all its contents is set.

For some themes, we use border-radius to round the outer corners. Some themes also use the CSS3 box-shadow property
to assign drop shadows to the outer box. To read about the border-radius and box-shadow specifications, refer to the
actual W3 Specification.

Note: CSS3 border-radius and box-shadow are supported by modern browsers including Firefox, Opera, Safari, Chrome, and IE9. Older browsers default to
rectangular corners and no shadows.

23
 CSS Glossary 24

Images inside the widget

This rule ensures that any images within your widget display properly for all declared document types. Don't change it.
.p7TPM01 img {
vertical-align: top;
}

Trigger (Tabs) container

This is the outer container for your widget's tabs and tab scrolling control arrows. Do not edit or change this rule in any
way.
.p7TPMtabs_01 {
position: relative;
z-index: 999;
overflow: hidden;
zoom: 1;
}

Left and Right scrolling control arrows

The following 8 rules govern the position of the left and right arrows that control scrolling tabs (if you've elected to enable
that option). These rules should not be edited.
.p7TPM_arrows_01 .p7TPM_arrow_L, .p7TPM_arrows_01 .p7TPM_arrow_R {
float: left;
position: relative;
z-index: 9999999999;
}

.p7TPM_arrows_01 .p7TPM_arrow_R {
float: right;
}

.p7TPM_arrows_01 a {
display: block;
text-decoration: none;
color: #CCC;
text-indent: -9999px;
width: 26px;
background-repeat: no-repeat;
background-position: 0px 0px;
}

.p7TPM_arrows_01 .p7TPM_arrow_L a {
background-image: url(img/tpm01_west.jpg);
}

.p7TPM_arrows_01 .p7TPM_arrow_R a {
background-image: url(img/tpm01_east.jpg);
}

.p7TPM_arrows_01 a:hover, .p7TPM_arrows_01 a:focus {

outline: 0;
}

.p7TPM_arrows_01 a.off {
display: block;
background-position: 0px -138px;
cursor: default;
}

.p7TPM01 .p7TPMtabs_viewport {
position:relative;
overflow:hidden;
zoom: 1;
}

24
 CSS Glossary 25

Padding and font synchronization for tabs and arrows

This is a special multiple element rule that sets font-size, padding-top, and padding-bottom for both the arrows and the
tabs. These properties must always be in synch for both elements to ensure they are always rendered the same height.
Adjust the padding to increase or decrease the height of your tabs. Do not edit the font-size.
.p7TPM_arrows_01 a, .p7TPM_tabs_01 a, .p7TPM_tabs_01 a:visited {
font-size: 14px;
padding-top: 16px !important;
padding-bottom: 6px !important;
}

Trigger (Tabs) container

This is the containing DIV for your Tabs. This rule should not be edited or changed.
.p7TPM01 .p7TPMtabs_wrapper {
position:relative;
}

Trigger (Tabs) unordered list

Your tabs are displayed inside an unordered list. Use this rule to set the font size for your tabs. Do not edit or change the
other properties.
.p7TPM_tabs_01 {
font-size: 12px;
margin: 0;
padding: 0px;
position: relative;
z-index: 999;
zoom: 1;
}

Utility rule to remove image borders

By default, all browsers place borders around images that are inside links. This rule removes those borders.
.p7TPM_tabs_01 a img {
border: 0;
}

Trigger (Tabs) list items

These are the individual list items that contain each of your tabs. Style Theme 1 is the only theme that has a background
image for this element. It is used to create the left edge of the rounded tab. We could do this with border-radius, but Style
Theme 1 is one of the freshened TPM1 Themes and so it is designed to match the older version. This rule should not be
edited.
.p7TPM_tabs_01 li {
float: left;
list-style-type: none;
margin-left: -1px;
background-image: url(img/tpm01_tab_left.jpg);
background-repeat: no-repeat;
position: relative;
}

If you want to customize the image, do so in the included Fireworks file named tpm01.png in the Fireworks folder
generated when you created your Tab Panel. After editing the images, export the web slices back to your p7tpm/img
folder to overwrite the originals.

25
 CSS Glossary 26

Margin Reset Rule for first tab

Margin left is set to -1px on the tabs LI element to get the tags to snug up against each other. This rule sets the first tab's
margin-left to zero.
.p7TPM_tabs_01 .tpmfirst {
margin-left: 0;
}

Link styles for your tabs

These are the link styles for your tabs. Adjust as you please. Style Theme 1 does use a background image for this element
to carry the right side of the tabs.
.p7TPM_tabs_01 a, .p7TPM_tabs_01 a:visited {
display: block;
color: #000;
text-decoration: none;
padding-right: 18px;
padding-left: 18px;
background-image: url(img/tpm01_tab_right.jpg);
background-repeat: no-repeat;
background-position: right top;
border-bottom: 1px solid #CCC;
}

If you want to customize the image, do so in the included Fireworks file named tpm01.png in the Fireworks folder
generated when you created your Tab Panel. After editing the images, export the web slices back to your p7tpm/img
folder to overwrite the originals.

In other Style Themes, no images are used. Instead, you might see background-color, CSS3 box-shadow, CSS3 border-
radius, and CSS3 linear-gradient. To read more about CSS3 linear gradients, see the actual W3 specification. Here is a quick
example of how CSS linear gradients are deployed in the Carbon Style Theme:
.p7TPM10 {
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#222222', endColorstr='#444444');
background: -webkit-gradient(linear, left top, left bottom, from(#222222), to(#444444));
background: -moz-linear-gradient(top,#222222,#444444);
background: linear-gradient(#222222, #444444);
}

It's really quite simple and all you need to be concerned with are the starting and ending colors in each version of the
property. We are created a simple linear gradient that starts on the top with color #222222 and ramps down to an ending
bottom color of #444444.

The Carbon Theme is quite remarkable in that it creates a gradient-based look that works in most modern browsers and
even in versions of IE down to IE5.5. And it's all done without using a single image.

Tab hover and focus

Sets the properties for the tabs when they are hovered over or tabbed into. Edit as you please but do not change or remove
the outline property.
.p7TPM_tabs_01 a:hover, .p7TPM_tabs_01 a:focus {
outline: 0;
color: #E39658;
}

26
 CSS Glossary 27

Tab list item open state

This special class is assigned to the LI element of a tab when that tab's panel is showing. For Style Theme 1 we reposition
the background image to expose the section of it that contains the orange blur. We also adjust the top position to hide the
bottom border, which allows the open tab's bottom to blend into the content panel. Do not edit this rule in any way.
.p7TPM_tabs_01 li.open {
background-position: left -127px;
top: 1px;
}

Tab open link state

This special class is assigned to the "A" element of a tab when that tab's panel is showing. For Style Theme 1 we reposition
the background image to expose the section of it that contains the orange blur. We also set the border color to transparent,
which allows the open tab's bottom to blend into the content panel. Do not edit this rule in any way.
.p7TPM_tabs_01 a.open, .p7TPM_tabs_01 a.open:visited {
text-decoration: none;
color: #000;
background-position: right -127px;
border-color: transparent;
}

Content panels wrapper

This element is the wrapping container for all of the content panels. Do not edit or change the position or top properties.
The remaining properties set the color of the content panels, their borders, and their border-radius (roundedness) for
Theme 1. All Themes are assigned a background-color, while only some themes are assigned radius corners.
.p7TPMcwrapper_01 {
position: relative;
top: -1px;
border: 1px solid #CCC;
background-color: #FFF;
border-radius: 0 5px 5px 5px;
}

The border-radius in this rule is expressed in CSS shorthand, with 4 values. The 4 values represent the 4 corners of the
box, starting with the top left, then moving clockwise to top right, bottom right, and bottom left. So the values "0 5px 5px
5px" render a 5px curve for all sides except for the top left, which remains rectangular.

Content panels wrapper when scrolling arrows are enabled

This special class is assigned to the .p7TPMcwrapper element when scrolling arrows have been enabled. In Theme 1 the
panels wrapper has round corners but if the scroll arrows are showing we want to square off the top right corner to match
up with the arrow box.
.p7TPMcwrapper_01.arrows_on {
border-radius: 0 0 5px 5px;
}

Not all Themes use this rule due to different arrow designs or because the panel wrapper corners are not rounded.

27
 Important notes 28

Panels Viewport
This special class turns off all Microsoft filters to ensure that the viewport element in a nested TPM widget will not inherit
filters assigned to its parent’s viewport.
.p7TPMcwrapper_01 .p7TPM_vp {
filter: none;
}

The content in each panel

This rule is assigned to the actual content panels. Use it to adjust padding inside the panels, text color, font size, and line
height.
.p7TPM_content_01 {
padding: 20px;
color: #000;
font-size: 13px;
line-height: 1.5em;
}

Important notes
Please note the following points

About Fading
Firefox and IE8 have some cosmetic issues with text fading that could cause flashing or ghosting until the fade
completes. The Firefox issue is duly noted on Mozilla's development site and will likely be fixed in Firefox version
4. The bug manifests itself only when using certain text colors over certain background colors. Black text over a
white background is fine, while gray text over white will cause ghosting. Setting a background color on the
content panel will sometimes help, but this is not always viable with some of the more advanced CSS3 style
themes. The IE8 issue will be fixed for IE9. This is not an issue caused by our script and is apparent when any
script is used for text fading. The fade animation works wonderfully and elegantly for content that is mostly
image-based. A little text here and there is not a problem, but you might want to consider another animation if
your content is all text.

28
 Content Layout 29

Content Layout
When adding a new panel you can choose from 7 content layouts:

 Default -A simple paragraph of boilerplate text

 2 Columns - 50/50
 2 Columns - Sidebar Left
 2 Columns - Sidebar Right
 3 Columns - 33/33/33
 3 Columns - Wide Middle
 4 Columns - 25/25/25/25

Note: This option is available ONLY for newly created panels and it will unavailable (grayed out) for any existing panels. If you want
to change the layout of an existing panel, create a new one below the existing one and set the Content Layout you desire. After your
widget is updated, copy the content from the existing panel into the new one. Then open the TPM2 interface again and delete the
original panel.

29
 Content Layout 30

Content Layout CSS

The column structures that you can choose from the Content Layout list are controlled through a separate CSS file named p7tpm-
columns.css, which is linked to your page. The file can be found inside your p7tpm folder.

It is recommended that you DO NOT edit the p7tpm-columns.css file.

Customizing Content Layout Columns

Column layouts are all percentage based. This allows the structures to adapt to the width of your page. If your page is fixed-width,
then the columns will be fixed.

If you want to customize the appearance of a column, it is best to assign a custom class to the relevant DIV and create a CSS rule in
your page style sheet. As an example, let’s say you wanted to set a background color of orange on the left column of a 2-column 50-
50 structure. The default markup would look like this:

<div class="p7tpm-column width-50">

<div class="p7tpm-column-content p7ehc-1">
<p>Left column content is here.</p>
</div>
</div>
<div class="p7tpm-column width-50">
<div class="p7tpm-column-content border-left p7ehc-1">
<p>Right column content is here.</p>
</div>
</div>

Locate the content DIV for the left column:

<div class="p7tpm-column-content p7ehc-1">

Add an additional custom class of orange:

<div class="p7tpm-column-content p7ehc-1 orange">

Create a new CSS rule in your page style sheet:

.orange {background-color: orange;}

That’s it!

30
 Content Layout 31

How do I edit the Tabs in the iTabs or Glassy Green Themes?

The glassy look of the Tabs looks terribly complex when the CSS is viewed, but changing the Tab color is an extremely easy
task. Here are the style rules involved and the steps to take when you want to change the colors. The rules used are from
the iTabs Theme. The same methods will work for Glassy Tabs.

Changing the default link color for old browsers

To change the default link color for old browsers, use this rule:
.p7TPM11 .p7TPM_tabs a, .p7TPM11 .p7TPM_tabs a:visited {
background-color: #000;
border-top: 1px solid #333;
border-right: 1px solid #000;
border-bottom: 1px solid #000;
border-left: 1px solid #333;
}

Simply change the background-color and border colors to suit.

Changing the default link color for modern browsers

To change the default link color for modern browsers, use the following rule. As scary as the rule looks, you only need to
edit one property, which is marked in bold below:
.p7TPM11 .p7TPM_tabs a, .p7TPM11 .p7TPM_tabs a:visited {
display: block;
text-decoration: none;
padding-right: 12px;
padding-left: 12px;
color: #999;
border-radius: 5px;
border: 1px solid rgba(0,0,0,1);
background-color: rgba(10,10,10,1);
box-shadow: 0 2px 6px rgba(0,0,0,0.5), inset 0 1px rgba(255,255,255,0.3), inset 0 10px
rgba(255,255,255,0.2), inset 0 10px 20px rgba(255,255,255,0.25), inset 0 -15px 30px
rgba(0,0,0,0.3);
}

You simply need to change the background-color value. The value is expressed using RGBA, which stands for Red-Green-
Blue-Alpha. Dreamweaver can help you to determine the RGB values. The Alpha value is simply a percentage of
transparency.

31
 Content Layout 32

To determine the RGB values, use the Hex color you set in the "old browser" rule above. Let's say you set that to #6C6.
Locate the property in your CSS Styles Panel and open the color picker. Click the System Color Picker icon (beach ball):

The System Color Picker will open:

Your RGB numbers are listed as the Red, Green, Blue values: 102, 204, 102. So change your background color to:

background-color: rgba(102,204,102,1);

Changing the hover color for old browsers

To change the hover color for old browsers, use this rule:
.p7TPM11 .p7TPM_tabs a:hover, .p7TPM11 .p7TPM_tabs a:focus {
background-color: #FC0;
border-color: #FFD11C #EABB00 #EABB00 #FFD11C;
}

Simply change the background-color and border colors to suit.

32
 Content Layout 33

Changing the hover color for modern browsers

To change the hover color for modern browsers, use the following rule. Edit the background-color property's RGB values,
as you did for the default link above.
.p7TPM11 .p7TPM_tabs a:hover, .p7TPM11 .p7TPM_tabs a:focus {
outline: 0;
color: #000;
background-color: rgba(255,204,0,1);
border: 1px solid rgba(0,0,0,1);
}

Changing the open color for old browsers

To change the open color for old browsers, use this rule:
.p7TPM11 .p7TPM_tabs a.open, .p7TPM11 .p7TPM_tabs a.open:visited {
background-color: #C30;
border-color: #F03D00 #B92F00 #B92F00 #F03D00;
cursor: default;
}

Simply change the background-color and border colors to suit.

Changing the open color for modern browsers

To change the open link color for modern browsers, use the following rule. Edit the background-color property's RGB
values, as you did for the default link above.
.p7TPM11 .p7TPM_tabs a.open, .p7TPM11 .p7TPM_tabs a.open:visited {
color: #DDD;
background-color: rgba(204,51,0,1);
z-index: 999;
border: 1px solid rgba(0,0,0,1);
}

33
 Converting a TPM1 Widget to TPM2 34

Converting a TPM1 Widget to TPM2

Overview
The Tab Panel Magic 2 system is designed to automatically convert (Upgrade) an existing Tab Panel Magic 1 widget to the
Tab Panel Magic 2 widget. Converting is as easy as clicking inside the existing Tab Panel Magic 1 widget and clicking the
Tab Panel Magic 2 icon.

The Tab Panel Magic 2 user interface is designed to open to the correct mode based on your current insertion point in the
document:

 If your insertion point is not within an existing Tab Panel Magic 1 widget the user interface will open in the
normal Tab Panel Magic 2 Create mode.
 If your insertion point is inside an existing Tab Panel Magic 1 widget the Convert from Tab Panel 1 dialog box will
open allowing you to choose whether to Convert (Upgrade) the existing widget or Create a new Tab Panel Magic 2
widget inside the existing Tab Panel Magic 1 widget —a process known as nesting. If you do decide to nest, please
make sure you set your nested widget to the same Style Theme as its parent.

Whenever the current insertion point is inside of an existing Tab Panel Magic 1, the Convert from Tab Panel 1 interface will
open.

Choose an Action

Convert to TPM2
Click this button to launch the Convert (Upgrade) process. The system will open the Tab Panel Magic 2 Modify interface
populated with the existing Tab Trigger and Panel data from the Tab Panel Magic 1 system. The Style Theme and
Animation options will be reflected in the interface.

When the Tab Panel Magic 2 interface opens make any additional changes and set any new options as desired, then Click
OK to finish the Convert process.

34
 Converting a TPM1 Widget to TPM2 35

The Conversion Process:

 The entire html markup of the original Tab Panel Magic 1 widget will be replaced by the new Tab Panel Magic 2
html markup.
 The Tab Panel Magic 1 style sheet link will be removed, and a new, default, Tab Panel Magic 2 style sheet be
linked in its place.
 The Tab Panel Magic 1 script link will be replaced by the Tab Panel Magic 2 script link.
 The Tab Panel Magic 1 initializer, normally set to the <body> onLoad event, will be removed.

Create a new TPM2 Panel inside TPM1

Click this button to launch Tab Panel magic 2 Create mode. The system will create the new Tab Panel Magic 2 at the
current insertion point inside of the existing Tab Panel Magic 1. The existing Tab Panel Magic 1 widget will not be altered.

35
 PVII Tab Panel Magic 2
36
Image File Naming Convention

PVII Tab Panel Magic 2

Image File Naming Convention
Overview
Tab Panel Magic 2 supports the use of image-based trigger links with preloading, swapping, multiple state management
and current marking automatically handled.

The system supports up to 3 different image states:

 Normal - the base image

 Over - appears on mouse hover
 Open - appears when the menu item's related sub menu is open

The system automatically loads the appropriate image based on the Image Swap option chosen in the User Interface.
When you choose an image in the TPM User Interface, you only choose the Normal (base) image. The system will look at
your Swap Options and, if additional images are required, it will look for those images in the folder that contains your
Normal image.

This automation requires that you follow an image file naming convention. Your base (normal state) image file name can
be anything you like, but you must follow a naming convention for the "Over" and "Open" state images. For example, if you
name your base image myButton.gif, the following conventions must be used for your additional state images:

 The image that displays when users mouse over the base image would be named: myButton_over.gif
 The image that displays when its associated panel is showing would be named: myButton_down.gif

Tab Panel Magic 2 Default Naming Convention:

 Normal Image: myButton.gif

 Over Image: myButton_over.gif
 Open Image: myButton_down.gif

The default naming convention is designed to work with the default Fireworks (CS4) naming convention for exporting
multiple state images. Our naming convention is user-definable to allow you to match your image editor's capabilities or
your own requirements.

36
 PVII Tab Panel Magic 2
37
Image File Naming Convention

Changing the image naming convention

The basic image name must be the same for all four button images, but the appendage you use to differentiate the over,
open and mark state images can be anything you like.

1. Open the p7TPMscripts.js file located in the p7pmm folder. Near the top of the file you will see 3 lines (not counting the
comments):

// define the image swap file naming convention

// rollover image for any image in the normal state

var p7TPMover='_over';

// image for any trigger that has an open sub menu -no rollover
var p7TPMopen='_down';

2. To change the naming convention simply change the assigned text that follows the equal (=) sign in each of the three
lines.

For example, if you want to change the naming convention to use the appendages _over, _open, and _marked, change the
assignments so they look like this:

// define the image swap file naming convention

// rollover image for any image in the normal state

var p7TPMover='_hover';

// image for any trigger that has an open sub menu -no rollover
var p7TPMopen='_open';

3. Save and close the file.

Now the Tab Panel Magic 2 system will use this revised naming convention to locate the over, open and mark state images.
The image file names, using this customized naming convention, would look like:

 Normal Image: myButton.gif

 Over Image: myButton_hover.gif
 Open Image: myButton_open.gif

As you can see, any naming convention will work by managing the text assignment for each image state in the scripts file.

Note: If you create a system in another folder or site, and you want to use a revised naming convention, you will need to update the script file in that folder.

37
 PVII Tab Panel Magic 2 -Remove 38

PVII Tab Panel Magic 2 -Remove

Overview
The Tab Panel Magic 2 system includes a Remove command that allows you to quickly remove an existing Tab Panel
Magic 2 widget from your page.

Open the Remove PVII Tab Panel Magic 2 interface

-Open a page that contains one or more Tab Panel Magic 2 widgets.

-Choose Commands > Studio VII > Remove Tab Panel Magic 2... to open the Remove interface.

Note: The Remove option will be unavailable (grayed out) if there is no Tab Panel Magic 2 widget on the page. Some Mac systems have compatibility
problems with Dreamweaver. If the Remove command is grayed out and completely inaccessible download and install this command: Return False Fix

After installing it, restart Dreamweaver and your menus will be accessible.

The Remove Tab Panel Magic 2 interface will open.

The interface will provide a listing of all of the Tab Panel Magic 2 widgets on your page. The list will display the root ID of
each widget.

-Select the widget that you wish to remove from the listing (you can only remove one widget at a time).

Tip: If you are unsure about which widget relates to which ID, click the Cancel button and switch to Code View. In Code View, locate all IDs that begin with
p7TPM. The opening DIV tag for a Tab Panel Magic 2 widget looks like this: <div id="p7TPM_1" class="p7TPM01">

38
 PVII Tab Panel Magic 2 -Remove 39

What will be removed

The system will completely remove the html markup for the selected widget from your page, along with any widgets that
are nested inside. If there are other Tab Panel Magic 2 widgets on the page they will not be affected. The system will also
remove the link to the relevant CSS file if no other widget on the page is using the same style theme.

If there are no remaining Tab Panel Magic 2 widgets on your page, the system will also remove the link to the Tab Panel
Magic 2 JavaScript file.

What will Not be Removed

The system will not remove the p7TPM folder, which contains the widget-related assets (images, JavaScript file, and CSS
files). This ensures that you will not lose any assets you may have modified and any other pages that depend on those
modified assets will continue to look and behave as expected.

39
 PVII Tab Panel Magic 2 -Remove 40

PVII Tab Panel Magic 2 -Open Panel Behavior

Overview
The Tab Panel Magic 2 system includes an Open Panel Behavior that allows you to remotely open any panel in any Tab
Panel Magic 2 widget on your page.

Creating a new Open Panel behavior

1. Select (click) a text link or image to act as the behavior trigger.
2. Open the Behaviors Panel (Shift + F4)
3. Click the plus sign (+) on the Behaviors panel
4. Choose Studio VII > Tab Panel Magic 2 > Open Panel to open the interface
5. Select the panel to act on
6. Enter the panel number to open.
7. Click OK to apply the behavior

Modifying an existing Open Panel behavior

1. Select the element that contains an existing Open Panel behavior
2. Double-click the Tab Panel Magic 2 - Open Panel behavior in the Behaviors panel to open the interface
3. Select the panel to act on
4. Enter the panel number to open.
5. Click OK to apply the revised behavior

The Interface

The Interface Items

Tab Panel Magic 2

The interface contains a listing of all of the Tab Panel Magic 2 widgets on the page. The widgets are listed by ID, which
follow a unique naming convention, beginning with "p7TPM_" followed by the Panel Tab Panel Magic 2 widget number.

Select the widget that you wish to apply the action to.

40
 PVII Tab Panel Magic 2 -Remove 41

Panel Number to Open

Enter the panel number that you wish to open.

The Interface Control Buttons

OK
When you have made your selection, click the OK button to apply the behavior. By default the behavior will be applied to
the "onClick" event of the text link or image. You can change the event by selecting the desired event in the Behaviors
panel.

Cancel
Click the Cancel button to completely abort the current operation. This will close the interface and no changes will be
made to your page.

Help
Click the Help button to open the associated Help File in your browser. This page can remain open for easy reference while
you continue working with the Tab Panel Magic 2 interface.

41
 PVII Tab Panel Magic 2 -Remove 42

PVII Tab Panel Magic 2 -Rotator Behavior

Overview
The Tab Panel Magic 2 system includes a Rotator Behavior that allows you to display each of your widget's panels in slide
show fashion. Each panel will be displayed sequentially with a timed pause (that you can adjust) between panels. The
rotation can be limited to one cycle of panels or can be set to loop multiple times.

This feature can also be set to run automatically when the page first loads, in order to gain the user's attention and/or
expose all of the content panels briefly, and is controlled as an option in the main Panel Tab Panel Magic 2 interface.

Creating a new Rotator behavior

1. Select (click) a text link or image to act as the behavior trigger.
2. Open the Behaviors Panel (Shift + F4)
3. Click the plus sign (+) on the Behaviors panel
4. Choose Studio VII > Tab Panel Magic 2 > Rotator to open the interface
5. Select the panel to act on
6. Select the action and other options
7. Click OK to apply the behavior

Modifying an existing Rotator behavior

1. Select the element that contains an existing Rotator behavior
2. Double-click the Tab Panel Magic 2 - Rotator behavior in the Behaviors panel to open the interface
3. Select the panel to act on
4. Select the action and other options
5. Click OK to apply the revised behavior

The Interface
The Rotator interface allows you to select the Rotation options.

42
 PVII Tab Panel Magic 2 -Remove 43

The Interface Items

Tab Panel Magic 2 to Act On

The interface contains a listing of all of the Tab Panel Magic 2 widgets on the page. The widgets are listed by ID, which
follow a unique naming convention, beginning with "p7TPM_" followed by the Panel Tab Panel Magic 2 widget number.

Select the widget that you wish to apply the action to.

Action
Select the action to apply:

Start
This will start a new Rotator cycle. Each panel will be displayed successively and rotation will continue for the number of
cycles specified in the Number of Cycles box in the main Tab Panel Magic 2 user interface. The Rotation will start from the
currently active panel.

Stop
This will Stop the Rotator completely at its current panel location.

Pause
This will Pause the Rotator at its current panel location.

Resume
This will resume a Rotator cycle. Each panel will be displayed successively and rotation will continue until number of
cycles specified in the Number of Cycles box in the main Tab Panel Magic 2 user interface is reached. The Rotation will
start from the currently active panel.

Number of Cycles
This controls the number of times the system will repeat each rotation. All panels are displayed in one rotation. The
system will replay the rotation again for the number of times specified in this option. If you want the rotations to run
indefinitely, set a very large number of cycles such as 9999.

43
 PVII Tab Panel Magic 2 -Remove 44

The Interface Control Buttons

OK
When you have made your selection, click the OK button to apply the behavior. By default the behavior will be applied to
the "onClick" event of the text link or image. You can change the event by selecting the desired event in the Behaviors
panel.

Cancel
Click the Cancel button to completely abort the current operation. This will close the interface and no changes will be
made to your page.

Help
Click the Help button to open the associated Help File in your browser. This page can remain open for easy reference while
you continue working with the Tab Panel Magic 2 interface.

44
 Advanced Current Marker 45

Advanced Current Marker

Overview
The Tab Panel Magic 2 system includes a built-in feature that applies a Current Marker to a link in the widget that matches
the current page's URL. The system sets this link to a special style class named current_mark. This provides a visual trail
to the current page in the widget—a you are here indicator. This feature can be turned on or off by checking the Enable
box for Current Marking in the user interface for each widget on the page.

This default Current Marker feature works automatically, without user intervention—but it does rely on matching the
current page's URL to the hyperlinks contained in the widget. In most cases this will work just fine. However, when the
current page is not reflected as a link in the widget, the current marker will not be able to find a match and no marker is
applied. Fortunately, Tab Panel Magic 2 includes an Advanced Current Marker system to allow you to handle these
exceptions so that even pages that do not appear as links in the widget can have a specified link Current Marked.

Note: Use the Advanced Current Marker ONLY when the page does NOT appear as a link within the widget system. In other words, the Advanced Current
Marker is designed to handle the exceptions that go beyond the capabilities of the default current marking feature.

The Advanced Current Marker system is designed to be 100% Dreamweaver Template friendly. It can be applied to any
template or template-based page. The system will detect the page type and process accordingly.

45
 Advanced Current Marker 46

Opening the Advanced Current Marker

To open the interface:

-Click inside the Tab Panel Magic 2 widget that you wish to act on.

-Choose Commands > Studio VII > Tab Panel Magic 2 by PVII > Advanced Current Marker Options...

Note: The Advanced Current Marker option will be unavailable (grayed out) if there is no Tab Panel Magic 2 html markup on the page or if you have not
clicked on the widget you wish to act on.

The Advanced Current Marker user interface will open.

The interface allows you to manage each of four options and also allows you to Remove an existing Advanced Current
Marker.

To activate the Advanced Current Marking feature you simply click the radio button next to the option you wish to use:

1. Using the None Option

2. Using the Text Link Option
3. Using the URL Match Option
4. Using the Folder/Text Option

46
 Advanced Current Marker 47

Modifying the Advanced Current Marker

The system also includes the ability to Modify the parameters of a page that already has one of the Advanced Current
marker options applied.

On a page that already contains an Advanced Current Marker...

-Click inside the widget that you wish to act on.

-Choose Commands > Studio VII > Tab Panel Magic 2 by PVII > Advanced Current Marker...

The interface will open in Modify mode.

Note: When the Advanced Current Marker interface is in Modify mode, a Remove button appears in the column of command buttons on the right edge of the
interface window.

In this example, the interface opens with the URL option selected. The system will detect which option is being used on the
page and set the interface accordingly.

47
 Advanced Current Marker 48

Removing the Advanced Current Marker

The Advanced Current Marker system includes a handy Remove utility that allows you to quickly remove an existing
Advanced Current Marker from any page. If the system detects an Advanced Current Marker on your page, it will open in
Modify mode - in which case, a Remove button will be present below the OK button.

-Click the Remove button.

The system will completely remove the Advanced Current Marker settings from your page.

48
 Advanced Current Marker
49
"None - Disable All"

Advanced Current Marker

"None - Disable All"
Overview
The None - Disable All option allows you to completely turn off all current marking for this widget on this page only. This
is a special override that allows you to have the widget working with current marking turned off on a specific page while it
is enabled on other pages.

Opening the Advanced Current Marker

To open the interface:

-Click inside the Tab Panel Magic 2 widget you wish to act on.

-Choose Commands > Studio VII > Tab Panel Magic 2 by PVII > Advanced Current Marker Options...

Note: The Advanced Current Marker option will be unavailable (grayed out) if there is no Tab Panel Magic 2 html markup on the page or if you have not
clicked inside the widget you wish to act on.

49
 Advanced Current Marker
50
"None - Disable All"

The Advanced Current Marker user interface will open.

The interface has four options from which to choose. The radio button to the left of each option determines which option is
currently active. The default setting is always the second option.

Select the Current Marker Option

-Click on the first radio button to select the None -Disable All Current Marking option.

Finished
-Click the OK button to apply the selected Advanced Current Marker to the current page.

-You can preview and test the widget now.

Note: If your preferences are set to Preview using temporary file, this feature will not work locally. To preview locally, turn off the Preview using temporary file
option in Dreamweaver Preferences.

50
 Advanced Current Marker
51
Link Text Marking Option

Advanced Current Marker

Link Text Marking Option
Overview
The Link Text option allows you to select the text of any one of the existing links in your Tab Panel Magic 2 widget as the
target for the current marker. When the page loads, the system will look for this text in the widget markup. If a match is
found it will apply the current marker style class (current_mark) to the widget link.

This feature should only be used on pages that are NOT linked in the widget. The Advanced Current Marker is designed to
address current marking only for those pages that are not represented in the widget. If the page does have a corresponding
link in the widget then that link will be used by the default current marker instead.

Opening the Advanced Current Marker

To open the interface:

-Click inside the Tab Panel Magic 2 widget that you wish to act on.

-Choose Commands > Studio VII > Tab Panel Magic 2 by PVII > Advanced Current Marker Options...

Note: The Advanced Current Marker option will be unavailable (grayed out) if there is no Tab Panel Magic 2 html markup on the page or if you have not
clicked on the widget you wish to act on.

The Advanced Current Marker user interface will open.

51
 Advanced Current Marker
52
Link Text Marking Option

The interface has four options from which to choose. The radio button to the left of each option determines which option is
currently active. The default setting is always the second option.

Select the Current Marker Option

-Click on the second radio button to select the Link Text option.

Select the Link Text

The Link Text option includes a drop down listing of all of the links in your widget.

For this example, let's assume that you want to highlight the root trigger link that contains Page Three as its text.

-Select Page Three from the drop down list.

This tells the system to look for the item in the widget that contains Page Three as its text. When found, the system will
apply the special current marker style class to it.

Finished
-Click the OK button to apply the selected Advanced Current Marker to the current page.

-You can preview and test the widget now.

Note: If your preferences are set to Preview using temporary file, this feature will not work locally. To preview locally, turn off the Preview using temporary file
option in Dreamweaver Preferences.

52
 Advanced Current Marker
53
URL Match Option

Advanced Current Marker

URL Match Option
Overview
The URL Match option allows you to select the link value (the href) of any one of the existing links in the Tab Panel Magic 2
system as the target for the current marker. When the page loads, the system will look for this link value in the widget
markup. If a match is found it will apply the current marker style class (current_mark) to the widget link. The simplest
and most direct method for Advanced Current Marking is to use the Text Option. However, there may be occasions where
you have duplicate text values in the widget. In these cases you can use the URL match option to target a specific link for
current marking. This feature should only be used on pages that are NOT linked in the widget. The Advanced Current
Marker is designed to address current marking only for those pages that are not represented in the widget. If the page does
have a corresponding link in the widget then that link will be used by the default current marker instead.

Opening the Advanced Current Marker

To open the interface:

-Click inside the Tab Panel Magic 2 widget that you wish to act on.

-Choose Commands > Studio VII > Tab Panel Magic 2 by PVII > Advanced Current Marker Options...

Note: The Advanced Current Marker option will be unavailable (grayed out) if there is no Tab Panel Magic 2 html markup on the page or if you have not
clicked on the widget you wish to act on.

The Advanced Current Marker user interface will open.

53
 Advanced Current Marker
54
URL Match Option

The interface has four options from which to choose. The radio button to the left of each option determines which option is
currently active. The default setting is always the second option.

Select the Current Marker Option

-Click on the third radio button to select the URL Match option.

Select the URL to Match

The URL Match option includes a drop down listing of the link values (href) for all of the links in your widget.

For this example, let's assume that you have a page that pertains to the "Products" section of your site, but this page is not
represented as a link in the widget. Your products section is represented in the widget with a link (href) value of
page_three.htm.

-Select page_three.htm in the listing.

This tells the system to look for the link value (href) in the widget that contains page_three.htm. When it's found, the
special current marker style class is assigned to it.

Finished
-Click the OK button to apply the selected Advanced Current Marker to the current page.

-You can preview and test the widget now.

Note: If your preferences are set to Preview using temporary file, this feature will not work locally. To preview locally, turn off the Preview using temporary file
option in Dreamweaver Preferences.

54
 Advanced Current Marker
55
"Folder:Text Match"

Advanced Current Marker

"Folder:Text Match"
Overview
The Folder:Text Match option is designed to allow you to handle large numbers of current marker exceptions and is
typically used as a global option applied to every page. Use this option when you have a large number of pages that are not
represented in the widget. This option allows you to specify a series of folder names and link text values that the system
will use for determining the current marked link in the widget. For example, you can specify that any page which contains
the folder "support" in its URL will be matched to the specific text link "Information". This is referred to as a Folder Name
:: Link Text pair. You can specify as many of these Folder Name :: Link Text pairs as you like. The system will test each
pair until it finds a match. If a match is found it will apply the current marker style class, current_mark, to the widget link
to provide the "you are here trail" in the widget. You can use this system to automatically handle current marking for all of
your site's pages without having to edit any of them individually. This feature should only be used on pages that are NOT
linked in the widget. The Advanced Current Marker is designed to address current marking only for those pages that are
not represented in the widget. If the page does have a corresponding link in the widget then that link will be used by the
default Current Marker instead.

Opening the Advanced Current Marker

To open the interface:

-Click inside the Tab Panel Magic 2 widget that you wish to act on.

-Choose Commands > Studio VII > Tab Panel Magic 2 by PVII > Advanced Current Marker Options...

Note: The Advanced Current Marker option will be unavailable (grayed out) if there is no Tab Panel Magic 2 html markup on the page or if you have not
clicked on the widget you wish to act on.

The Advanced Current Marker user interface will open.

55
 Advanced Current Marker
56
"Folder:Text Match"

The interface has four options from which to choose. The radio button to the left of each option determines which option is
currently active. The default setting is always the second option.

Select the Current Marker Option

-Click on the fourth radio button to select the Folder Name :: Link Text option.

The interface allows you to add as many Folder Name :: Link Text pairs as you like. The first pair is always pre-defined and
ready for editing.

Define the Folder Name :: Link Text Pairs

This example will work with a widget system that resembles the structure of the projectseven.com web site menu. You
have an Extensions link that links to a main extensions page, but there are quite a few pages that are related to Extensions
and stored in a folder named extensions. Naturally, all of these pages do not appear in your widget. A Folder Name :: Link
Text rule can be defined to apply the current marker to the Extensions link for any page that contains "extensions" in the
page's URL.

Specify the Folder Name

The folder name is case sensitive and should match the actual folder name as used in your site.

-Enter the folder name extensions into the If Url contains this Folder Name box.

56
 Advanced Current Marker
57
"Folder:Text Match"

Specify the Link Text

The Mark this Link Text list is an alphabetized listing of all of the links in the widget.

-Select the Extensions link text.

The interface now reflects your changes. The first Folder Name :: Link Text pair is defined.

The system will apply the current marker to the Extensions widget item whenever the page contains the extensions
folder in its address (URL).

Adding another Folder Name :: Link Text Pair

The site contains many pages that relate to the Products section but are not represented as links in the widget. To handle
these pages you can add another Folder Name :: Link Text pair.

-Click the Add button. A new Folder Name :: Link Text line item is created in the interface. The values are preset to default
values, ready for editing.

-Enter the folder name, products, into the If Url contains this Folder Name box.

57
 Advanced Current Marker
58
"Folder:Text Match"

-Select the Products link text in the Mark this Link Text drop down.

The interface now reflects your changes. Two Folder Name :: Link Text pairs are defined.

Using a Compound Folder Name

The site also contains sub-folders in the products area. You can define a compound folder name to allow a set of pages to
current mark a more specific link.

-Click the Add button.

A new Folder Name :: Link Text line item is created in the interface.

-Enter the folder name, products/menusystems into the If Url contains this Folder Name box.

This will instruct the system to apply the current mark to the widget Systems link item whenever the page contains
products/menusystems in its URL.

58
 Advanced Current Marker
59
"Folder:Text Match"

Ordering the Defined Pairs

The system will apply the current mark to the first match it finds. It will search in the same order as the pairs are listed in
the interface. In this case it will always find the products match before it finds the compound products/menusystens
match since the page URL contains the word products and the products pair is listed before the products/menusystems
pair.

-With the products/menusystems pair selected, click the Up button.

The system moves the selected item up one line. Now the search for the compound folder name will be made before the
search for the products folder name.

You can move any selected line Up or Down. Each time the button is clicked the selected item will move one line.

Deleting a Defined Pair

You can delete an existing defined Folder Name :: Link Text pair at any time. Select the Folder Name :: Link Text pair you
wish to delete and simply click the Delete button.

Finished
-Click the OK button to apply the selected Advanced Current Marker to the current page.

-You can preview and test the widget now.

Note: If your preferences are set to Preview using temporary file, this feature will not work locally. To preview locally, turn off the Preview using temporary file
option in Dreamweaver Preferences.

59
 Support and Contact info 60

Support and Contact info

PVII quality does not end with your purchase - it continues with the best customer support in the business.

PVII Knowledge Base

The PVII Knowledge Base is an online PVII application allowing you to access dozens of Tech Notes, tips, and techniques
relating to our products, as well as to general web development issues..

Open the Knowledge Base | View the 10 Most Recent Additions

Newsgroup forum communities

The Project VII Newsgroup community is our primary support vehicle and is available 24 hours a day. Choose from the
following newsgroups:

1. The PVII Webdev Newsgroup

2. The PVII Dreamweaver Newsgroup
3. The PVII Fireworks Newsgroup
4. The PVII CSS Newsgroup

Note: If you have trouble linking directly to news servers, use your default newsreader's program options to set up a new account and
point it at the following server:

forums.projectseven.com

Setting up a new newsgroup account in Outlook Express

Setting up a new newsgroup account in Mozilla Thunderbird

Setting up a new newsgroup account in Entourage

If you have another newsgroup-capable program that you are using, please see its documentation to learn how to add a
new newsgroup account.

Note: PVII newsgroups are private and have nothing to do with UseNet feeds that may be provided by your ISP. That is, you will not find
our newsgroups in a list of newsgroups distributed by your internet service provider. You must set up our news server as a new account.

RSS News Feeds

Keep up with the latest news the minute it's released by subscribing to our RSS news feed. If you are not sure how to
subscribe, please check this page:

PVII RSS Info

60
 Support and Contact info 61

Before you Contact us

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

E-Mail:
[email protected]

Phones:
330-650-3675
336-374-4611

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

Snail mail
Project Seven Development
339 Cristi Lane
Dobson, NC 27017

61