P7epm Guide

PVII Elevator Panel Magic
A PVII Web Page Widget
PVII Web Page Widgets enable you to create interactive UI elements on your web page with a single click. Once
your widget is created, you can customize it by editing styles with Dreamweaver's CSS editor. Everything you
need is included.
We hope you enjoy using this product as much as we did making it.
Al Sparber & Gerry Jacobsen PVII

PVII Elevator Panel Magic 2
Contents
PVII Elevator Panel Magic ...........................................................................................................................................1
Install the extension ...............................................................................................................................................7
Work in a Defined Dreamweaver Web Site............................................................................................................7
Elevator Panel Magic assets folder.........................................................................................................................7
Megavator Menus ..................................................................................................................................................7
Overview.....................................................................................................................................................................8
Inserting a New Elevator Panel ............................................................................................................................... 10
Asset Folders ........................................................................................................................................................... 12
Modifying an Existing Elevator Panel ...................................................................................................................... 13
The User Interface Items ..................................................................................................................................... 14
Mode ............................................................................................................................................................... 14
Panel Headings ................................................................................................................................................ 14
Add................................................................................................................................................................... 14
Delete .............................................................................................................................................................. 14
Up .................................................................................................................................................................... 14
Down................................................................................................................................................................ 14
Heading Text .................................................................................................................................................... 14
Link Only -Box Associated Content Panel ........................................................................................................ 15
Link / Browse... ................................................................................................................................................ 15
Options ................................................................................................................................................................ 15
Open Content Panel X on Page Load ............................................................................................................... 15
Current Marking .............................................................................................................................................. 15
Animation Method .......................................................................................................................................... 16
Toggle Panels ................................................................................................................................................... 17
Mouse Action................................................................................................................................................... 17
Rotator............................................................................................................................................................. 18
Style Theme ..................................................................................................................................................... 18
2 © 2009 Project Seven Development

The Interface Control Buttons ............................................................................................................................. 19

OK .................................................................................................................................................................... 19
Cancel .............................................................................................................................................................. 19
Help.................................................................................................................................................................. 19
Elevator Panel Magic Behaviors .............................................................................................................................. 20
Trigger Panel Behavior ........................................................................................................................................ 20
Creating a new Trigger Panel behavior ........................................................................................................... 20
Modifying an existing Trigger Panel behavior ................................................................................................. 20
The Interface ................................................................................................................................................... 21
The Interface Items.......................................................................................................................................... 21
The Interface Control Buttons ......................................................................................................................... 22
Rotator Behavior ................................................................................................................................................. 23
Creating a new Rotator behavior .................................................................................................................... 23
Modifying an existing Rotator behavior .......................................................................................................... 23
The Interface ................................................................................................................................................... 24
Open All / Close All Behavior ............................................................................................................................... 26
Creating a new Open/Close All behavior......................................................................................................... 26
Modifying an existing Open/Close All Panel behavior .................................................................................... 26
The Interface ................................................................................................................................................... 27
Advanced Current Marker Utility ............................................................................................................................ 29
Opening the Advanced Current Marker .............................................................................................................. 30
Modifying the Advanced Current Marker ........................................................................................................... 32
Removing the Advanced Current Marker............................................................................................................ 33

Advanced Current Marker "None - Disable All" Option ...................................................................................... 34

Opening the Advanced Current Marker .......................................................................................................... 34
Select the Current Marker Option ................................................................................................................... 36
Finished............................................................................................................................................................ 36
Advanced Current Marker Link Text Marking Option ......................................................................................... 37
Select the Link Text.......................................................................................................................................... 39
Finished............................................................................................................................................................ 39
Advanced Current Marker URL Match Option .................................................................................................... 40
Select the URL to Match .................................................................................................................................. 42
Finished............................................................................................................................................................ 42
Advanced Current Marker "Folder:Text Match" Option ..................................................................................... 43
Define the Folder Name :: Link Text Pairs ....................................................................................................... 45
Adding another Folder Name :: Link Text Pair................................................................................................. 47
Using a Compound Folder Name..................................................................................................................... 48
Ordering the Defined Pairs .............................................................................................................................. 49
Deleting a Defined Pair .................................................................................................................................... 49
Finished............................................................................................................................................................ 50
Remove Panel Command ........................................................................................................................................ 51
Open the Remove PVII Elevator Panel Magic interface ...................................................................................... 51
What will be Removed .................................................................................................................................... 52
What will Not be Removed.............................................................................................................................. 52

CSS Guide ................................................................................................................................................................. 53

CSS Rules Analysis................................................................................................................................................ 53
CSS: Rule-by-Rule............................................................................................................................................. 54
Questions and Answers ........................................................................................................................................... 60
How do I use or manage Elevators in different folders? ..................................................................................... 60
Can I Revert back to a default Style Theme CSS file? .......................................................................................... 61
How do I set font styles for my content? ............................................................................................................ 61
My font styles are not showing up, what do I do? .............................................................................................. 61
Can I link to a specific Elevator content panel from an external page or bookmark? ........................................ 62
Can I hide the Trigger bar when using the Rotator option? ................................................................................ 62
How do I set my content panels and triggers to be unique colors? .................................................................... 63
Can I set specific colors for the default link state of each trigger rather than just the open state? .................. 64
Can I move my Trigger links to another part of the page? .................................................................................. 64
Can I make my trigger links display vertically? .................................................................................................... 65
Can I insert an Elevator Panel widget inside an Accordion, Glide Panel, or Tab Panel widget? ......................... 65
Can I insert a PVII Horizontal or Vertical Scroller inside an Elevator Panel widget? ........................................... 65

Addendum: Megavator by PVII ............................................................................................................................... 66

Creating a Megavator menu ................................................................................................................................ 66
Modifying an Existing Megavator ........................................................................................................................ 72
Editing the Megavator Font Styles ...................................................................................................................... 74
Setting Custom Widths for Panel Headings......................................................................................................... 76
Custom Sub-Menu Widths and Positioning......................................................................................................... 81
Adding and Styling Sub-Menu Panel Content ..................................................................................................... 85
Can you add other PVII widgets inside Megavator panels? ............................................................................ 85
How do I make multiple columns inside Megavator panels?.......................................................................... 85
What about 3 columns? .................................................................................................................................. 90
Making a Vertical Megavator .............................................................................................................................. 91
Custom Positioning Sub-Menu Panels for a Vertical Megavator .................................................................. 101
Support and Contact info ...................................................................................................................................... 103
PVII Knowledge Base ......................................................................................................................................... 103
Newsgroup forum communities .................................................................................................................... 103
RSS News Feeds ............................................................................................................................................. 104
Before you Contact us ................................................................................................................................... 104
Snail mail........................................................................................................................................................ 104

Install the extension
Look for the extension installer file p7EPM213.mxp (or higher) in the root of the zip archive you downloaded.
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.
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 assets required by Elevator Panel Magic to your page. 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.
Elevator Panel Magic assets folder
When you publish your page, you also need to upload the entire p7epm folder.
Megavator Menus
Megavator Menus is a separate add-on component you can purchase for Elevator Panel Magic that introduces a
fresh new genre of Web menus that are usable, accessible, versatile and utterly captivating. Megavator sub-
menu panels can contain links, paragraphs, lists, tables, images, and even forms—and your content is fully
editable in Dreamweaver Design View.
Explore Megavator Menus...
We've included an addendum to this user guide that contains a step-by-step Megavator tutorial so that if you do
purchase the Megavator add-on, you'll have its documentation conveniently integrated with your Elevator Panel
Magic documentation.

Overview 8
Overview
Elevator Panel Magic automates the process of building sliding content panel widgets that allow you to display
multiple panels of content, with access to each content panel controlled by clicking or hovering over CSS-styled
panel trigger links. You can insert multiple Elevator Panel widgets per page and each Elevator Panel widget can
contain as many individual trigger links as you need. You can also add integrated links, that don't have
associated content panels, that link to external pages. The Elevator Panel user interface is designed to
automatically open to the correct mode based on your current insertion point in the document. If your insertion
point is inside an existing Elevator Panel widget, the user interface will open in the Modify mode for that
widget. If your insertion point is not within an existing Elevator Panel widget, the user interface will open in the
Create mode.
Dreamweaver Template Support: The system is designed to be 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.
Current Link Marking and Auto Panel Opening: The system includes an optional feature that looks for links in
the widget that match the current page URL (address). When a match is found, the link is highlighted and the
panel that contains the link can be set to automatically open. The system assigns a special style class named
current_ mark to this link and also to its parent panel heading. This provides a visual you are here indicator.
This feature can easily be turned on or off for each widget on your page directly from the user interface.
Additionally, the system includes an Advanced Current Marker system to allow you to set the current mark
for pages that do not appear as links in the widget.
External Linking and Bookmark Support: An opener detection system is included that looks for a special URL
parameter in the current page address that asks to open a specific Elevator content panel. The opener will look
for the EPM widget number, an underscore, and the EPM content panel number. There are 2 methods available:
 Anchor Method: The system will look for "#epm" plus a panel reference after the anchor. The anchor,
index.htm#epm1_4, will trigger panel 4 in the first EPM Widget on the page.
 URL Parameter Method: The system will look for "epm=" in the URL parameter. A URL parameter,
index.htm?epm=2_4, will trigger panel 4 in the second EPM Widget on the page. You can then give out
the link so people can go directly to your specific content panel.

Overview 9
Included Dreamweaver Behaviors: The system also includes a suite of Behaviors that can be used to create
custom Elevator Panel actions on links located anywhere on your page:
 Trigger Panel - The Trigger Behavior allows you to set a link anywhere on your page to remotely operate
a Heading Link in any Elevator Panel widget on your page. The behavior can be used to Open, Close or
Trigger (emulate a mouse click on the heading) a panel.
 Open All / Close All - The Open All/Close All Behavior allows you to set links anywhere on your page that
remotely Open or Close all panels in any Elevator Panel widget on your page. The behavior can be set to
act on a single Elevator widget or on all widgets 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)
between panels. The rotation can be limited to one cycle of panels or can be set to loop multiple times.
Removal -The Elevator Panel Magic system also includes a handy Remove Elevator Panel command is included
that can be used to quickly and thoroughly remove any Elevator widget from your page.
Insertion - Elevator Panel Magic widgets can be inserted anywhere on your page. Once you have established
your insertion point, click the Elevator Panel icon to open the interface. Alternatively, you can choose
Insert > Studio VII > Elevator Panel Magic by PVII
You can insert the Elevator Panel into any area of your page. The Elevator Panel will automatically adapt to its
location, even when placed inside flexible DIVs or table cells. You can insert as many individual Elevator Panel
widgets as you like on your page. Each Elevator Panel widget can be optioned independently to set different
modes and features. Elevator Panel widgets on a single page can share the same style theme or be set to
separate style themes. Each Elevator Panel can contain any content that you like. Each content panel is directly
editable in Dreamweaver Design View using normal Dreamweaver editing techniques.

Inserting a New Elevator Panel 10
Inserting a New Elevator Panel
Establish the insertion point for your new Elevator Panel component by clicking in the area of the page where
you would like the component to be created.
Note: The interface is sensitive to the insertion point. If your cursor is currently inside an existing Elevator Panel component then
the Modify interface will open instead.
Click the Elevator Panel Magic icon in the Common Section of Dreamweaver's Insert Bar or choose Insert
> Studio VII > Elevator Panel Magic by PVII.
Dreamweaver CS4 Insert Panel
Dreamweaver CS4 Users: We highly recommend switching to Classic Workspace mode, which allows for a conventional Insert Bar
across the top of your Design View window. If you use the new CS4 workspaces, the Insert Bar becomes a vertical panel that
violates Windows and OS X interface conventions. In addition to being hard to use, the vertical Insert Bar has no support for
mouse wheel scrolling making it highly unusable. We are hoping Adobe will fix this (and other) UI issues in the next version of
Dreamweaver.

Inserting a New Elevator Panel 11
The Elevator Panel Magic user interface will open in the Create New Elevator Panel mode.
You can create more than one Elevator Panel component on your page. Add as many as you like.
Note: When you insert an Elevator Panel, all content will be visible and fully expanded in Dreamweaver to make adding and
editing content a simple task. The Elevator Panel functionality can be tested by previewing in your browser.

Asset Folders 12
Asset Folders
When you create an Elevator Panel Magic widget, the system creates an assets folder named p7epm at the
same level as the page that contains your Elevator Panel widget. This folder will contain the Elevator Panel
JavaScript file, as well as a sub-folder for each style theme you have used. For example, if you use Style Theme
01: Multicolor, the system will create a epm1 folder inside the p7epm folder. The epm1 folder contains the CSS
file for Style Theme 01. The folder structure looks like this:
When you publish your site, make sure you upload the entire p7epm folder.

Modifying an Existing Elevator Panel 13
Modifying an Existing Elevator Panel
You can modify any of the existing Elevator Panel components on your page at any time.
Click inside the Elevator Panel component that you wish to modify.
Click the Elevator Panel Magic icon in the Common Section of Dreamweaver's Insert Bar or choose
Modify > Studio VII > Modify Elevator Panel Magic by PVII
The Elevator Panel Magic User Interface will open in the Modify Existing Elevator Panel mode.

The User Interface Items
A description of each relevant part of the EPM user interface.
Mode
Displays the current operational Mode for the user interface: either Create or Modify. When in Modify mode,
the id of the Elevator Panel widget being modified will also be displayed.
Panel Headings
This box displays the text for each navigation link in the Elevator Panel, 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 panel heading and associated content panel. A new line will be created with
the default text "New Heading 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 panel heading, and any associated content
panel.
Up
The Up button will move the selected line in the Panel Heading 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 Panel Heading 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.
Heading Text
The Heading Text box will always display the text of the currently selected line in the Panel Headings list. Enter
or edit the text that you wish to display for this panel heading. The box cannot be left blank.

Link Only -Box Associated Content Panel
Check this box if you wish to have the selected Heading Text serve as a normal page link with no content panel
associated with it.
Link / Browse...
The Link box is activated whenever the Link Only box is checked. Enter the path to the linked page or use the
Browse button to open the Select File to Link dialog box. If no entry is made the system will automatically
supply a "javascript:;' null link.
Options
These settings are applied to the current Elevator Panel component. Other Elevator Panel components on the
same page can have different Options.
Open Content Panel X on Page Load
You can select to have the panel system start with no content panels open or you can select which of the
content panels will be opened when the page first loads into the browser.
Un-check the box to have the panel system start with no content panels open.
Check the box to have the system start with the open content panel you specify. Enter the number of the
content panel that you wish to have open initially. The number must correspond with an existing content panel.
The Elevator Panel magic system also includes a dedicated Panel Trigger Behavior that can be used to open,
close or trigger any panel on the same page.
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 in your Elevator Panel. The system
looks for links in the Elevator Panel that match the current page URL (address). When a match is found, the link
is highlighted and the panel that contains the link can be set to automatically open. The system assigns a special
style class named current_ mark to this link and also to its parent panel heading. 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.
Open Panel on Match
Check this box if you want the system to also open the associated content panel when applying the Current
Marking. Un-check the box and the system will not open the associated content panel.
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 Method
You can select one of three different animation options:
 0-None -Choose this option to disable animation.

 1-Glide-Normal - This setting will glide the panels open or closed based on a time duration. The more
content you have in a panel, the faster the animation will appear to be. You can adjust the Duration
setting to increase or decrease the animation's speed.
 2-Glide-Gradual Stop -This setting will smoothly glide the panels open or closed. Glide speed
automatically adjusts to the height of the content panel and the animation will come to a gradual stop.
Duration
This option is only enabled when the Glide-Normal animation method is used and allows you to control the
speed of the gliding effect. Duration defines the total amount of time that the animation will run, in
milliseconds, regardless of a content panel's height. The default 250 (a quarter 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.

Toggle Panels
The Elevator Panel system can be configured to automatically close other open panels whenever the user open a
new panel, or the panels can be opened and closed individually
 0-Allow Multiple Open Panels -Select this option if you want to allow more than one panel open at a
time. Each panel can be opened or closed by successive clicks on the panel heading.
 1-Show One Panel at a Time in this Component -Select this option to automatically close any other
opens panels when a new panel is opened, this assures that only one panel is displayed. This option
toggles open panels only within the same Elevator Panel component, any other Elevator Panel
components on the page will not be affected.
 2-Show One Panel at a Time in all Components -Select this option if you want the toggle option (1) to
affect all of the Elevator Panels on the page. Opening a new panel will close all of the panels in all of the
Elevator Panel Components on the page.
Always Keep One Panel Open
This option is only available if the Toggle Panels option is set to 1-Show One Panel at a Time in this Component
or 2- Show One Panel at a Time in all Components. This setting will assure that the Elevator Panel system will
never be completely closed, a successive click on the currently open panel heading text will not close that panel.
Mouse Action
The system also supports Mouse Over and Mouse Out action in addition to the standard Click trigger action.
This option includes a built-in timer that adds a bit of delay in order to maintain usability.
Enable Mouse Over Open Action
Check this box to allow mouse over activation of the panel headings. The associated panel will open whenever
the user moves his mouse over the panel heading. The click behavior to open or close the panel will still remain
enabled.
Enable Mouse Out Close Action
Check this box if you wish to allow a close action when the user mouses off the widget onto another area of the
page. Mouse Out close action will also take place when the user moves his mouse out of the content panel.

Rotator
This feature is designed to open each panel in succession when the page first loads—letting visitors see all of the
content panels. You can set the timing between panel exposures to any interval you want and you can also set
the number of cycles to loop. The Elevator Panel Magic system also includes a fully featured Rotate Behavior
that can be used to provide additional control interactively.
Check this box to enable the auto rotate feature on page startup.
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.
Delay -This controls the amount of time each panel is displayed during the rotation, in milliseconds. The default
is 1000ms (1 second). To display each panel for 5 seconds, for example, enter 5000 into the Delay box.
Style Theme
Elevator Panel Magic comes with six pre-defined CSS style themes. Choose a theme that best approximates the
look you desire. This will act a starting point from which you can later make edits to the style sheet to fully
customize your Elevator Panel(s). You can change to a different style type at any time without affecting the
contents of the Elevator Panel 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.

The Interface Control Buttons

OK
When you are done setting your desired options, click the OK button to build the Elevator Panel. 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 an Elevator Panel will be added to your page or updated — depending on whether you
are in Create mode or Modify mode. You can then preview in a browser to operate the Elevator Panel and
check its functionality.
Tip: To make further changes, click inside an Elevator Panel to open the Elevator Panel Magic interface and begin your
modifications.
Cancel
Click the Cancel button to completely abort the current Elevator Panel Magic 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 Elevator Panel Magic interface.

Elevator Panel Magic Behaviors 20
Elevator Panel Magic Behaviors
The system also includes a suite of Behaviors. The Behaviors are not part of the main Elevator Panel Magic
Interface but are accessed through Dreamweaver's Behaviors panel and can be assigned to any image or link on
your page to create custom Elevator Panel actions.
Trigger Panel Behavior
The Trigger Behavior allows you to set a link anywhere on your page to remotely operate a Heading Link in any
Elevator Panel widget on your page. The behavior can be used to Open, Close or Trigger (emulate a mouse click
on the heading) a panel.
Creating a new Trigger Panel behavior
1. Select (click) an element to act as the behavior trigger, a text link or image.
2. Click the plus sign (+) on the Behaviors panel.
3. Choose Studio VII > Elevator Panel > Trigger Panel to open the interface.
4. Select the panel that you wish to act on.
5. Select the action (Open, Close or Trigger).
6. Click OK to apply the behavior.
Modifying an existing Trigger Panel behavior
1. Select the element that contains an existing Elevator Panel Trigger behavior.
2. Double-click the Elevator Panel Magic- Trigger Panel behavior in the Behaviors panel to open the
interface.
4. Select the action (Open, Close or Trigger).
5. Click OK to apply the revised behavior.

The Interface
The Elevator Panel Magic -Panel Trigger interface allows you to select which panel to trigger.
The Interface Items
Elevator Panel
The interface contains a listing of all of the Heading Links in all of the Elevator Panel components on the page.
Select the Heading Link which you want to trigger.
The Heading Links are listed by their ID, which follow a unique naming convention, beginning with "p7EPMtrg"
followed by the Elevator Panel widget number, an underscore, and then the content panel number. For
example, "p7EPMtrig1_1" would be the firstHeading Link in the first Elevator Panel widget on the page, while
"p7EPMtrig3_2" would be the second Heading Link in the third Elevator Panel widget on the page.
Action
Select the action you wish to apply. Any toggle options set for this widget will also apply.
Open
This will open the selected panel. If the panel is already open then it will remain open.
Close
This will close the selected panel. If the panel is already closed then it will remain closed.

Trigger
This will emulate a user mouse click on the Panel Heading in one of two ways:
 1. If the Panel Heading has an associated content panel then that panel will become active.
 2. If the Panel Heading does not have an associated content panel ( Link Only option), then the hyperlink
assigned to the Panel heading will be activated.
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

Rotator Behavior
The Elevator Panel Magic system includes this Rotator Behavior that allows each of the content panels to be
displayed in a Slide Show fashion, each of the panels will be displayed, the timing between each display can be
easily set. The rotation can be limited to just one full display of each panel or can be set to loop as many times as
you like.
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 Elevator Panel
interface.
Creating a new Rotator behavior
3. Choose Studio VII > Elevator Panel > Rotator to open the interface.
5. Select the action and other options
Modifying an existing Rotator behavior
1. Select the element that contains an existing Elevator Panel Rotator behavior.
2. Double-click the Elevator Panel Magic- Rotator behavior in the Behaviors panel to open the interface.
4. Select the action and other options.

The Interface
The Elevator Panel Magic -Rotator interface allows you to select the Rotation options.
The Interface Items
Elevator Panel
The interface contains a listing of all of the Elevator Panel widgets on the page. Select the Elevator Panel you
wish to act on.
The Elevator Panels are listed by their ID, which follow a unique naming convention, beginning with "p7EPM_"
followed by the Elevator Panel widget number.
Action
Select the action you wish to apply. Any toggle options set for this widget will also apply.
Pause
This will stop or pause the Rotator and whichever panel is currently displayed will remain displayed.
Play or Resume
This will start a Rotator cycle. Each panel will be displayed successively and rotation will continue for the number
cycles specified.

Number of Cycles
This controls the number of times the system will loop each rotation. All panels are displayed in one rotation,
the system will start the rotation again for the number of times specified in this option.
Start With Panel
You can select which panel the rotation will start with.
Current Active Panel
Check this box if you wish to have the rotation start with the panel that is currently open. This is the default and
is also that option to use if you are creating a "Resume" behavior.
Panel Number
Enter the number of the panel with which you want the rotation to start. You must also un-check the Current
Active Panel box to enable this feature.
OK
Cancel
Help

Open All / Close All Behavior
The Open All/Close All Behavior allows you to set a link anywhere on your page to remotely Open or Close all
panels in any Elevator Panel widget on your page. The behavior can be set to act on a single Elevator Panel
widget or all of the Elevator Panel Widgets on your page.
Creating a new Open/Close All behavior
3. Choose Studio VII > Elevator Panel >Open/Close All to open the interface.
5. Select the action and other options
Modifying an existing Open/Close All Panel behavior
1. Select the element that contains an existing Elevator Panel Trigger behavior.
2. Double-click the Elevator Panel Magic- Open/Close All behavior in the Behaviors panel to open the
interface.
4. Select the action and other options.

The Interface
The Elevator Panel Magic -Open/Close All interface allows you to select the options.
The Interface Items
Elevator Panel
The interface contains a listing of all of the Elevator Panel widgets on the page and the "All on This Page" option.
Select the Elevator Panel you wish to act on or select "All on This Page" to act on all of the Elevator Panels
widgets on your page.
The Elevator Panels are listed by their ID, which follow a unique naming convention, beginning with "p7EPM_"
followed by the Elevator Panel widget number.
Action
Select the action you wish to apply. If the "Toggle Panels" option is set to "Show One Panel at a Time" the
system will over-ride the toggle option set on the Elevator Panel widget and open or close all of the panels.
Open
This will open all of the panels in the selected Elevator Panel widget.
Close
This will close all of the panels in the selected Elevator Panel widget.

OK
Cancel
Help

Advanced Current Marker Utility 29
Advanced Current Marker Utility
The Elevator Panel Magic system includes a built-in feature that applies a Current Marker to the 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 setting the Enable Auto Current Marking box 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, Elevator Panel Magic includes an Advanced Current Marker
system to allow you to handle these exceptions so that even pages that do not appear 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. 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.

Opening the Advanced Current Marker
To open the interface:
-Click inside the Elevator Panel Magic widget that you wish to act on.
-Choose Commands > Studio VII > Elevator Panel Magic by PVII > Advanced Current Marker...
Note: The Advanced Current Marker option will be unavailable (grayed out) if there is no Elevator Panel Magic 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

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

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.

Advanced Current Marker "None - Disable All" Option
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 for other pages.
the page or if you have not clicked inside the widget you wish to act on.

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.

Advanced Current Marker Link Text Marking Option
The Link Text option allows you to select the text of any one of the existing links in your Elevator Panel Magic
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 matching
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.

-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 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

Advanced Current Marker URL Match Option
The URL Match option allows you to select the link value (the href) of any one of the existing links in the Elevator
Panel Magic 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
matching 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.
does have a corresponding link in the widget then that link will be used by the default current marker instead.

-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 an item 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

Advanced Current Marker "Folder:Text Match" Option
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 specific link text "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.
does have a corresponding link in the widget then that link will be used by the default Current Marker instead.



-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 that resembles the structure of the menu on projectseven.com. There is a
single Extensions link in the root menu of all interior pages, but there are quite a few pages (close to one
hundred) that are related to Extensions and stored in a folder named extensions. Naturally, all of these pages
do not appear in the 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.

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 link 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.
-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 Menu Systems link whenever the page contains
products/menusystems in its URL.

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/menusystems 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

Remove Panel Command 51
Remove Panel Command
The Elevator Panel Magic command includes a Remove feature that allows you to quickly remove an existing
Elevator Panel Magic widget from your page. This feature allows for easy removal when simply prototyping
pages or when a total redesign is necessary.
Open the Remove PVII Elevator Panel Magic interface
-Open a page that contains one or more Elevator Panel Magic widgets.
-Choose Commands > Studio VII > Remove Elevator Panel Magic... to open the Remove interface.
The Remove option will be unavailable (grayed out) in the widget if there is no Elevator Panel Magic widget on the page.
The Remove Elevator Panel Magic interface will open.
The interface will provide a listing of all of the Elevator Panel widgets on your page, the list will display the ID of
each Elevator Panel widget.

Remove Panel Command 52
-Select the Elevator Panel widget that you wish to remove from the listing. You can only remove one Elevator
Panel widget at a time.
Tip: If you are unsure about which Elevator Panel widget relates to which ID, click the Cancel button and switch to Code View. In
Code View, locate all IDs that begin with p7GP. The opening DIV tag for a Elevator Panel widget looks like this: <div id="p7EPM_1"
class="p7EPM01"">
What will be Removed
The system will completely remove the html markup for the selected Elevator Panel widget from your page. If
there are other Elevator Panel widgets on the page they will not be affected. The system will also remove the
link to the Elevator Panel CSS file if no other Elevator Panel widget on the page is using the same style
theme.
If there are no remaining Elevator Panel widgets on your page, the system will also remove the link to the
Elevator Panel JavaScript file.
What will Not be Removed
The system will not remove the p7epm folder, which contains the Elevator Panel-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.
Remove
Click the Remove button. The selected Elevator Panel Magic widget will be removed from the page
Cancel
Click the Cancel button to completely abort the current Remove Elevator Panel Magic operation. This will close
the interface and no changes will be made to your page.
Help

CSS Guide 53
CSS Guide
The following section will assist you in customizing the look and feel of your Elevator Panel Magic widgets.
Each Elevator Panel widgets on your page can be set to use a separate style theme. Each of the 5 available style
themes uses a dedicated style sheet. All style sheets are editable.
CSS Rules Analysis
The Elevator Panel Magic CSS approach is straightforward and economical. All Elevator Panel Magic style sheets
contain the following style rules:
 .p7EPM01 .p7epm_trigs
 .p7EPM01 .p7epm_trigs ul
 .p7EPM01 .p7epm_trigs li
 .p7EPM01 .p7epm_trigs a
 .p7EPM01 .p7epm_trigs a:hove
 .p7EPM01 .p7epm_cwrapper
 .p7EPM01 .p7epm_content
 .p7EPM01 .p7epm_content.pan1 {}
 .p7EPM01 .p7epm_trigs .p7epm_open
 .p7EPM01 .p7epm_trigs .t1 .p7epm_open {}
 .p7EPM01 .p7epm_ie5clear
 .p7EPM01 .p7epm_trigs a.current_mark
 .p7EPM01 .p7epm_content a.current_mark

CSS Guide 54
The first part of each rule's name, in this case .p7EPM01, corresponds to the style theme being used, and will
differ based on your style theme, as follows:
 .p7EPM01 = Multicolor
 .p7EPM02 = Charcoal
 .p7EPM03 = Slate
 .p7EPM04 = Carbon
 .p7EPM05 = Basic
CSS: Rule-by-Rule
Now let's see what each of the 10 CSS rules control by examining an actual Elevator Panel Magic Style Sheet, the
Multicolor theme's CSS file: p7EPM01.css:
.p7EPM01 .p7epm_trigs
margin-bottom: 12px;
overflow: hidden;
This rule styles the DIV that contains the Trigger Links. Change the margin-bottom value if you want more space
between the Triggers and the content panels. The overflow property must not be edited or removed.
.p7EPM01 .p7epm_trigs ul
margin: 0px;
padding: 0px;
This rule applies to the unordered list that contains the Trigger Links navigation bar. It turns off indentation.

CSS Guide 55
.p7EPM01 .p7epm_trigs li
list-style-type: none;
margin: 0 6px 3px 0;
float: left;
This rule applies to the unordered list items in the Trigger navigation bar. It turns off bullets, sets a right and
bottom margin, and floats each item left to enable a horizontal display.
Note: The margin values are expressed in CSS shorthand, which allows you to set margins for all 4 sides of the element starting
with the top and continuing clockwise in this order: Top Right Bottom Left.
.p7EPM01 .p7epm_trigs a
color: #000000;
padding: 6px 6px;
line-height: 1.5em;
float: left;
display: block;
border: 1px solid #FFFFFF;
This rule styles the default link state for each link in your Trigger navigation bar. Do not edit or remove the float
or display properties.
.p7EPM01 .p7epm_trigs a:hover
color: #FF9900;
border-color: #000000;
This rule styles the hover link state for each link in your Trigger navigation bar.
.p7EPM01 .p7epm_cwrapper
border: 0;
This rule styles the DIVs that wrap each of the content panels in your widget. Do not edit this rule.

CSS Guide 56
.p7EPM01 .p7epm_content
padding: 12px 24px;

line-height: 1.5em;
background-color: #FFFFFF;
border: 1px solid #333;
color: #000000;
This rule styles each content panel.
.p7EPM01 .p7epm_content.pan1
color: #CCCCCC;
background-color: #333333;
This rule applies only to the first content panel in your widget. It is used by the Multicolor Theme to assign
separate colors to each content panel. In other Style Themes, this rule is included but is blank—to allow you to
style your content panels independently no matter which Style Theme you are using, if you want. The following
2 style rules allow you to style the scond and third content panels separately. See the Q&A Section for a
more detailed discussion.
background-color: #99CC33;
color: #FFFFFF;
This rule applies only to the second content panel in your widget.
background-color: #FF9900;
color: #FFFFFF
This rule applies only to the third content panel in your widget.

CSS Guide 57
color: #CCCCCC;
This rule applies only to the fourth content panel in your widget.
color: #FFFFFF;
This rule applies only to the fifth content panel in your widget.
Note: If you have more than 5 content panels and you wish to style them separately, then add as many specific rules to your style
sheet as you need. If, for example, you have 6 content panels, add a new rule called .p7EPM01 .p7epm_content.pan6.
.p7EPM01 .p7epm_trigs .p7epm_open
color: #000000;
border-color: #000000;
background-color: #FFFFFF;
This rule styles the selected link state for each link in your Trigger navigation bar.
.p7EPM01 .p7epm_trigs .t1 .p7epm_open
color: #CCCCCC !important;

text-decoration: none;
This rule applies only to the first Trigger link in your widget. It is used by the Multicolor Theme to assign
separate colors to each Trigger link. In other Style Themes, this rule is included but is blank—to allow you to
style your Trigger links independently no matter which Style Theme you are using. The following 2 style rules
allow you to style the scond and third Trigger links separately. See the Q&A Section for a more detailed
discussion

CSS Guide 58
color: #FFFFFF !important;

This rule applies only to the second Trigger link in your widget.

background-color: #FF9900;
This rule applies only to the third Trigger link in your widget.

This rule applies only to the fourth Trigger link in your widget.

This rule applies only to the fifth Trigger link in your widget
Note: If you have more than 5 Trigger links and you wish to style them separately, then add as many specific rules to your style
sheet as you need. If, for example, you have 6 Trigger links, add a new rule called .p7EPM01 .p7epm_trigs .t6 .p7epm_open.

CSS Guide 59
.p7EPM01 .p7epm_ie5clear
font-size: 0;
height: 0;
line-height: 0.0;
This rule serves to clear the floated Trigger navigation bar in IE5.x, preventing conflicts with any other floated
elements you might have on your page. This class is assigned to a special DIV that is placed just before the
closing DIV tag for the .p7epm_trigs DIV. The markup looks like this:
<div class="p7epm_ie5clear"> </div>
</div> (closing tag for .p7epm_trigs)
Do not edit or remove this style rule.
.p7EPM01 .p7epm_trigs a.current_mark
font-weight: bold;
This rule styles the current marker panel heading link.
.p7EPM01 .p7epm_content a.current_mark
font-weight: bold;
This rule styles the current marker link in the content panels.

Questions and Answers 60
Questions and Answers
The following questions and answers should prove helpful as you build your Elevator Panel widgets.
How do I use or manage Elevators in different folders?
When you create a widget, the system writes a folder named p7epm in the folder that contains the page you are
working on - and uses that folder to store style sheets and scripts. This allows for easy and safe prototyping. If
you create an Elevator Panel widget on page1.htm, in a folder named tutorials, and edit the CSS for that widget,
your changes are restricted to that folder. Make another page in that folder and create an Elevator Panel widget
using the same Style Theme and it will use the same style sheet you edited while working on page1. If you create
an Elevator Panel widget on a page in a new folder, the system will create a p7epm folder and populate it with
default style sheets and scripts. This allows you to test and prototype with complete freedom - without affecting
finalized pages in other folders.
There may, however, be times when you want Elevators in different folders to use the same Style Sheets. To do
that, create your Elevators first. Then decide which p7epm assets folder you want to use for all your pages.
You'll need to set the paths for all Elevator Panel CSS files, and the JavaScript file, to point to the p7epm assets
folder you want to use. The CSS and script links look like this:
<link href="p7epm/epm1/p7EPM01.css" rel="stylesheet" type="text/css" />

<script type="text/javascript" src="p7epm/p7EPMscipts.js"></script>
You can change the path to CSS or script files visually in Dreamweaver by displaying Head Content in a toolbar at
the top of your design window. To turn this feature on, choose View > Head Content.
Click the appropriate icon and your Property Inspector will change to reflect your choice, easily enabling you to
browse to the location of the assets folder you want to use.

Can I Revert back to a default Style Theme CSS file?
Should you ever make a large error and need to revert back to a default and working CSS file, do this:
1. Delete the bad CSS file from your p7epm/epmX folder (where X is a number from 1-5 corresponding
with your Style Theme choice).
2. Open a page in that folder that contains an Elevator Panel widget that uses that bad style sheet. Your
Elevator Panel widget will appear unstyled. Don't worry, that's expected, given the circumstances
3. Place your cursor inside the Elevator Panel widget
4. Click the Elevator Panel icon to open the UI in Modify Mode
5. Make no changes in the UI - simply click the OK button
6. The system will create a new version of your CSS file
Depending on your DW version, you might not see the changes at first. If that be the case, save and close the
file, then re-open it.
How do I set font styles for my content?
Set all font properties to the.p7EPM0X .p7epm_content rule. You can also use the special individual content
panel rules, such as .p7EPM0X .p7epm_content.pan1, .p7EPM0X .p7epm_content.pan2, .p7EPM0X
.p7epm_content.pan3, or higher.
My font styles are not showing up, what do I do?
Chances are there are rules in other style sheets attached to your page. If, for example, your widget was
inserted into a DIV that has an ID of maincontent and a corresponding CSS rule, and that rule contains
competing font properties, you will need to make your widget's CSS rule more specific. You do that by adding
the ID of the element your widget is inside of to the beginning of the .p7EPM0X rule so that it becomes
#maincontent .p7EPM0X. If that does not work, then you can add an !important notation to the affected
properties, like this:
#maincontent .p7EPM0X .p7epm_content {

Font-size: 11px !important;
}

Can I link to a specific Elevator content panel from an external page or bookmark?
Yes. Elevator Panel Magic includes an opener detection system that will look for a special URL parameter in the
current page address and will open the specified content panel. The opener will look for the EPM component
number, an underscore, and the EPM content panel.
Anchor Method:
The system will look for epm plus a panel reference after the anchor. The anchor, index.htm#epm1_4, will
trigger panel 4 in the first EPM Widget on the page.
URL Parameter Method:
The system will look for epm= in the URL parameter. A URL parameter, index.htm?epm=2_4, will trigger panel 4
in the second EPM Widget on the page.
You can then give out the entire link, plus the parameter, so people can go directly to your specific content
panel.
See Example
Can I hide the Trigger bar when using the Rotator option?
Yes. Locate the .p7EPM0X .p7epm_trigs rule in your Elevator Panel style sheet and set it to display: none:
.p7EPM0X .p7epm_trigs {
overflow: hidden;
display: none;
}
See Example

How do I set my content panels and triggers to be unique colors?
Each style theme comes with special style rules to allow you to easily assign unique attributes to each of your
content panels and trigger links. The rules you use to style your content panels are:
 .p7EPM0X .p7epm_content.pan1 {}
These rules can be used to assign colors or other attributes to up to 5 content panels. If you have more than 5
content panels, then you would add a new rule to your style sheet, following our naming convention. To style
the sixth content panel in your widget, add this rule to your style sheet:
.p7EPM01 .p7epm_content.pan6 {}
The rules you use to style your trigger links are
 .p7EPM0X .p7epm_trigs .t1 .p7epm_open {}

These rules can be used to assign colors or other attributes to up to 5 trigger links when they are in the open
state—that is, when their related content panel is showing. If you have more than 5, then you would add a new
rule to your style sheet, following our naming convention. To style the sixth content trigger link in your widget,
add this rule to your style sheet:
.p7EPM01 .p7epm_trigs .t6 .p7epm_open {}

Can I set specific colors for the default link state of each trigger
rather than just the open state?
Sure. You'll need to create custom rules. Each <li> tag that contains a trigger link is assigned a class of tX where X
is the number of the link. So to style each one independently, you would need to create specific CSS rules like
this:
.p7EPM0X .p7epm_trigs .tX a {}
Can I move my Trigger links to another part of the page?
Yes. Here's how you do it:
 Create your Elevator Panel widget

 Place your cursor inside the trigger links area
 On the Tag Selector Bar that runs along the bottom edge of your Dreamweaver window, locate and click
the <div.p7epm_trigs#p7EPMt_X> tag:
 Choose Edit > Cut (CTRL + X)

 Insert your cursor inside the DIV or table cell where you would like to move your trigger links. Assign this
new container element a class of p7EPM0X, where X is the number of the style theme you are using.
 Choose Edit > Paste (CTRL + V)
See live example

Can I make my trigger links display vertically?
Yes. Use Style Theme: 02 - Charcoal—it is designed to display Triggers vertically.
Can I insert an Elevator Panel widget inside an Accordion, Glide Panel, or Tab Panel
widget?
Yes. Elevator Panel Magic is fully compatible with Accordion Panel Magic, Glide Panel, and Tab Panel Magic.
Can I insert a PVII Horizontal or Vertical Scroller inside an Elevator Panel widget?
Yes. Both Horizontal Scroller Magic and Vertical Scroller Magic are compatible.

Addendum: Megavator by PVII 66
Addendum: Megavator by PVII
Megavator is an add-on for Elevator Panel Magic that can be purchased separately. The following tutorial is
included as a convenience for those of you who have purchased the Megavator add-on. If you'd like more
information, please visit the Megavator Web page or the online Megavator tutorials page.
Megavator utilizes the core Elevator Panel Magic script engine—in concert with special style themes—to create
a fresh new type of Web menu that is usable, accessible, versatile and utterly captivating. Megavator sub-menu
panels are designed to be editable in Dreamweaver Design View—enabling you to easily add any type of content
you want—including links, paragraphs, lists, tables, images, and even forms. The automated Elevator Panel
Magic interface enables you to add, remove, or re-order panels as often as you need to and to change style
themes and options.
Now let's build and customize a Megavator menu.
Creating a Megavator menu
Before you create your menu you need to establish an insertion point.
We've created a work page for you with banner, 2 floated columns, and footer.

Before you begin, download the workpage. Create a test folder within your defined Dreamweaver Web site,
unzip the download, and place the contents of the file inside your test folder. The zip archive contains 3 files:
1. work01.htm
2. work02.htm
3. vrule.gif
Open work01.htm
Here is the page Markup (with text content truncated):
<div id="wrapper">
<div class="banner">Banner / Logo</div>
<div class="leftcolumn">
<div class="column-content">
<h1>Left Column</h1>
<p>Lorem ipsum dolor sit amet...</p>
</div>
</div>
<div class="rightcolumn">
<h1>Right Column</h1>
<p>A re-engineering of your current...</p>
</div>
</div>
<div id="footer">Footer</div>
</div>
There are 2 logical insertion points you might choose: inside the wrapper and either above or below the banner.
Let's establish our insertion point above the banner.
Place your cursor inside the Banner.

On your Tag Selector bar, which runs along the bottom of Dreamweaver's window, click <div.banner>
The banner DIV will highlight.
Press your keyboard's left arrow key once. This will position your cursor just above the banner DIV.
Tip: To position your cursor just below the banner you would use your right arrow key instead of the left.
Your insertion point is now established above your banner.

-Click the Elevator Panel Magic icon in the Common Section of Dreamweaver's Insert Bar (or CS4 Insert
Panel).
mouse wheel scrolling, making it rather unusable. We are hoping Adobe will fix this (and other) UI issues in the next version of
Dreamweaver.
Alternatively, you can choose Insert > Studio VII > Elevator Panel Magic by PVII.
The Elevator Panel Magic interface will open.

Add 2 additional Panel Headings and edit the Heading Text to be:
 Products
 Services
 Company Information
To add your Headings, click the Add button above the Panel Headings list
Leave all options as they are (for now) but for Style Theme select 53-Megavator Cayenne
Tip: Clicking the Help button will launch a complete Help file in a browser window, covering all aspects of the interface and its
options.
Click OK

Your Megavator is built and your page should look like this:
The sub-menu content panels are visible in your page intentionally so that you can easily enter and edit the
content inside.
Preview the page in a browser:
You've got a working Megavator, but the first panel is open and you need to click the panel headings for
anything to happen. Let's edit the Megavator to set some additional options.

Modifying an Existing Megavator
Place your cursor inside one of your Megavator's panels.
Choose Modify > Studio VII > Modify Elevator Panel Magic by PVII...
Tip: You can also use the Insert Bar or Insert Panel icon. Since your cursor is inside an existing Megavator, the Elevator system will
detect this and automatically open in Modify mode.
The interface will open in Modify mode.
Uncheck the Open Content Panel 1 on Page Load box

Change the Animation Method to 2-Glide-Gradual Stop
Check the Enable Mouse Over Open Action and the Enable Mouse Out Close Action boxes
Click OK

Preview in a browser.
You have a better working Megavator—but you would like the panel heading text to be a little bit smaller... and
a little bit taller.

Editing the Megavator Font Styles
Dreamweaver's CSS editing capabilities are fairly robust, but sometimes confusing. If you are not a CSS expert,
we recommend that before continuing with this exercise you change Dreamweaver's preferences for CSS
editing.
To do so, choose Edit > Preferences

Select The CSS Styles category
Set your options to match the screen above and then click OK
To change the font size for your panel headings, open the CSS Styles panel in Dreamweaver (Shift + F11)
At the panel's top, make sure the All button is selected
Inside the panel, locate your Megavator style sheet, which will always begin with p7EPM followed by the
number of your selected theme (in the case of Cayenne, the number will be 53)
Expand the style sheet (if it is not already) to see its contents and select .p7EPM53 .p7epm_trigs

The lower pane of the CSS Styles panel will display the rule's properties and values
Change the font-size value to .8, leaving em as the unit of measure

Click outside the panel to establish the change.
To make your panel headings taller, select .p7EPM53 .p7epm_trigs a
For the padding property, there are 2 values. This is CSS shorthand. The first value represents both the top and
the bottom padding. The second value represents the left and right.
Change the top/bottom value to one higher than 10px to increase the panel heading height or to one less
than 10px to decrease the height.
Tip: In CSS shorthand, you can express all 4 sides independently by using 4 values instead of 2. The 4 values represent each side of
the box in clockwise order starting with the top—top right bottom left.

Setting Custom Widths for Panel Headings
By default, each panel heading will be as wide as its text + the left/right padding assigned in the panel heading
link style rule. There may, however, be times when you want your headings to be specific widths. A case in point
would be if you wanted your headings to fill the available width of your layout. Let's do just that—but before we
begin, we'll add 2 more headings to our Megavator.
Open the Elevator Panel Magic interface in Modify mode (remember to insert your cursor inside the
Megavator first)
Click the Add button to create 2 new headings:
1. Job Opportunities
2. Press Releases
Click OK

The layout width is 752 pixels and we have 5 headings. We'll assign a width to each of the headings to fill up the
layout.
The Megavator system automatically assigns an ID to each panel heading link. This is what the code for your
Megavator panel headings looks like:
<li class="t1"><a href="#p7EPMc1_1" id="p7EPMtrg1_1">Products</a></li>

<li class="t2"><a href="#p7EPMc1_2" id="p7EPMtrg1_2">Services</a></li>
<li class="t3"><a href="#p7EPMc1_3" id="p7EPMtrg1_3">Company Information</a></li>
<li class="t4"><a href="#p7EPMc1_4" id="p7EPMtrg1_4">Job Opportunities</a></li>
<li class="t5"><a href="#p7EPMc1_5" id="p7EPMtrg1_5">Press Releases</a></li>
The ID begins with p7EPMtrg1. The number 1 at the end indicates that this is the first widget on your page. If
you had a second Megavator somewhere else on your page, the ID would begin with p7EPMtrg2.
The ID ends with an underscore and another number, which represents the order of your panel headings—so ID
p7EPMtrg1_1 is always the first panel heading in the first Megavator on your page.
Tip: As you use this technique on other pages, make sure you use the relevant ID if you have more than one Megavator on your
page.
CSS has what's called a box model and your Megavator links are CSS boxes. The width of a CSS box
encompasses the element's assigned width + padding + borders. So before we set widths for each of the panel
headings we will remove the left/right padding by setting the CSS value to zero.

In your CSS Styles panel, select .p7EPM53 .p7epm_trigs a
Set the second padding value to 0 to zero out your left and right padding.
Now we'll also center the heading text.
Click the Add Property link and select text-align
In the value column select center
Now let's set our widths.

Open your Megavator style sheet. In this case p7EPM53.css, which you will find inside the p7epm folder that
was created when you built your menu.
Make a new line at the bottom of the file and add these style rules:
#p7EPMtrg1_1 {
width: 112px;
}
#p7EPMtrg1_2 {
width: 112px;
}
#p7EPMtrg1_3 {
width: 180px;
}
#p7EPMtrg1_4 {
width: 180px;
}
#p7EPMtrg1_5 {
width: 164px;
}
Save and close the style sheet file.

We've done the math for you. The sum of the widths is 748. Since each heading link has a right border, the box
model width is actually 748 + 5 = 753, which is 1 pixel over our layout width of 752. Did we mess up?
No, our custom-sized headings would look better if the last one did not have a right border. So let's remove that
border.
In your CSS Styles panel, select #p7EPMtrg1_5

Click the Add Property link and select border-right
In the value column enter 0
Preview your page in a browser.
We have a lovely Megavator whose headings perfectly fill the layout width.
By default, Megavator sub-menu panels each fill the entire layout width. We like this effect, but there will likely
be projects or clients that demand custom widths, and even custom positioning for the sub-menus. Let's do that
right now.

Custom Sub-Menu Widths and Positioning
Here is the markup for the first sub-menu panel (with text content truncated):
<div id="p7EPMc1_1" class="p7epm_content pan1">

<p>Lorem ipsum dolor...</p>
</div>
Each panel is assigned a custom class. p7epm_content pan followed by a second class that corresponds to the
order of your panels—so p7epm_content pan1 is the first sub-menu, p7epm_content pan2 is the second, and
so on.
We've included these classes (for 5 sub-menus) in each of the Megavator style sheets:
Tip: Should you have more than 5 sub-menus, simply add .p7EPM53 .p7epm_content.pan6 {}, and so on to your style sheet.
Let's add a custom width to the first sub-menu.
In your CSS Styles panel, select .p7EPM53 .p7epm_content.pan1
Click the Add Property link and select width

In the value column enter 300 and px for the unit of measure

Now let's add a custom width to the second sub-menu and let's also position it so that it starts at the left edge of
its heading.
Set the width to 300px
As for positioning, we'll use the margin-left property and set it to 113px.
We arrived at 113px because the first heading (#p7EPMtrg1_1) was set to 112px and it has a 1px right border,
making the box model width 113.
Let's quickly finish up. Select each of the 3 remaining sub-menu panel classes in your CSS Styles panel and assign
a width and a margin-left as follows:
.p7EPM53 .p7epm_content.pan3 {
width: 300px;
margin-left: 226px;
}
width: 300px;
margin-left: 406px;
}
width: 300px;
margin-left: 586px;
}

All sub-menu panels are lining up perfectly, but we have a slight problem with the last 2. Sub-menu panel 4 ends
several pixels short of the layout and Sub-menu panel 5 goes well beyond the layout boundary.
We'll fix this by increasing the width of Sub-menu panel 4 and decreasing the margin-left value for Sub-menu
panel 5.
For sub-menu panel 4, change the width to 306px
width: 306px;
margin-left: 406px;
}
For sub-menu panel 5, change the width to 306px and the margin-left value to 406px
width: 306px;
margin-left: 406px;
}

That's better.
Looking very good.

Adding and Styling Sub-Menu Panel Content
When you create a Megavator menu your sub-menu panels are populated with boilerplate text that you replace
with your own content. You can do this in Dreamweaver Design View just as you would enter content on any
other part of your page. There are no restrictions on what can be placed inside a panel. Here are some
examples of what you can add:
 Paragraphs of text
 Images
 Ordered or unordered Lists
 Hyperlinks
 Forms
 Tables
 DIVS
Simply delete the boilerplate text and add whatever you want!
Can you add other PVII widgets inside Megavator panels?
Yes you can. You can add Accordions, Tab Panels, Scrollers, Tree Menus, Menu Bar Magic menus, Slide Shows,
Image Galleries, or Lightshows.
Note: The only thing you cannot add is a popup or flyout menu because the Megavator panels have overflow hidden as part of the
animation sequence and any flyout that flies out past the edge of a panel will be truncated. You can, however, add a single level
PMM or PMM2 menu.
How do I make multiple columns inside Megavator panels?
You can use CSS or tables to make multiple columns.
If you are not proficient with CSS, the easiest way to achieve multiple columns in a Megavator sub -
menu panel would be to insert a multi-column table.
If you are a CSS whiz feel free to cook up your own column recipe—there are no limits.

We've included some special style rules that you can use to build multiple column structures inside your panels.
Let's go through the steps using the Megavator menu you created earlier.
Open work01.htm
Place your cursor inside the first sub-menu panel and then switch to Code View.
Select the paragraph inside the p7EPMc1_1 DIV
Delete it
Your cursor should wind up on a blank line between the opening <div id="p7EPMc1_1" class="p7epm_content
pan1"> tag and its closing </div> tag as pictured below.
Leave your cursor in its position between the opening and closing DIV tags and enter the following code:
<div class="panelColumnWrapper">
<div class="panelColumn_50">
Left Column
</div>
<div class="panelColumn_50 rightcolumn">
Right Column
</div>
</div>

Switch back to Design View
You can now add paragraphs or links inside your columns. You can also add content above or below the
panelColumnWrapper DIV, like so:

<h3>Heading above the columns</h3>
Left Column
</div>
Right Column
</div>
</div>
<p>Paragraph below the columns</p>
</div>
Can I place styled links in my columns?
We've provide some style rules to make it easy for you to add nice CSS links to your columns. First, we'll need to
make a list of links in each column. We'll provide you with the finished code as a starting point.
Place your cursor inside the text "Left Column" and switch to Code View

Delete the text "Left Column" and, in its place, enter the following unordered list code:
<ul class="linklist">
<li><a href="#">Link 1</a></li>
</ul>
Now replace the text "Right Column" with the same unordered list code. Your entire p7epm_content pan1 DIV
code should now look like this:

</ul>
</div>
</ul>
</div>
</div>
</div>

Save your file and preview in a browser.
Table Users: If you are using a table for your columns and want to use our link styles simply assign the class linklist to the TD tags
that contain your links.

What about 3 columns?
For a 3 column structure you would use this code inside your panelColumnWrapper DIV:
</ul>
</div>
</ul>
</div>
</ul>
</div>
</div>

Making a Vertical Megavator
There may be times when a project calls a Megavator menu with vertically stacked panel headings and sub-
menu panels that align to the right. We've made Megavator flexible enough to allow this type of modification.
Let's go through the steps.
Open work02.htm
Here is the page Markup (with text content truncated):
<div id="wrapper">
<div class="banner">Banner / Logo</div>
<div class="leftcolumn">
<h1>Left Column</h1>
<p>Lorem ipsum dolor sit amet...</p>
</div>
</div>
<div class="rightcolumn">
<h1>Right Column</h1>
<p>A re-engineering of your current...</p>
</div>
</div>
<div id="footer">Footer</div>
</div>
We'll establish an insertion point at the top of the rightcolumn DIV, but before the beginning of the column-
content DIV.

Place your cursor inside the right column.
On your Tag Selector bar, which runs along the bottom of Dreamweaver's window, click <div.column-content>
The column-content DIV will highlight.
Press your keyboard's left arrow key once. This will position your cursor just above the column-content DIV.
Your insertion point is now established just above the column-content DIV, but still inside the rightcolumn
DIV.

-Click the Elevator Panel Magic icon in the Common Section of Dreamweaver's Insert Bar (or CS4 Insert
Panel).
mouse wheel scrolling, making it rather unusable. We are hoping Adobe will fix this (and other) UI issues in the next version of
Dreamweaver.
Alternatively, you can choose Insert > Studio VII > Elevator Panel Magic by PVII.
The Elevator Panel Magic interface will open.
Create 3 Panel Headings as follows:
 Products
 Services
 Company Info

To add your Headings, click the Add button above the Panel Headings list
Uncheck the Open Content Panel 1 on Page Load box
Change the Animation Duration to 150
Check the Enable Mouse Over Open Action and the Enable Mouse Out Close Action boxes
Select Style Theme select 54-Megavator Basic
Tip: Clicking the Help button will launch a complete Help file in a browser window, covering all aspects of the interface and its
options.
Click OK

Your Megavator is built and your page should look like this:
Now we'll move the panel headings into the left column.
Place your cursor inside the first panel heading text "Products".
On your Tag Selector bar click <div.p7epm_trigs#p7EPMt_1>
The panel heading DIV will highlight
Choose Edit > Cut
Now place your cursor inside the left column text and click <div.column-content> on your Tag Selector bar

The left column content will highlight
Press your keyboard's left arrow key once to position your cursor between the leftcolumn and the column-
content DIVs
Choose Edit > Paste
The panel headings are now in the left column. They are no longer styled (we'll take care of that in a moment),
but if you preview your page you'll see that the Megavator is working just fine.
To get our headings styled we will simply wrap the panel heading DIV inside another DIV and assign it the
Megavator basic style theme class.

Place your cursor inside the panel heading text (it doesn't matter where) and click
<div.p7epm_trigs#p7EPMt_1> on your Tag Selector bar
Switch to Code View
Click the Wrap Tag icon (yellow pencil)
Type div inside the angle brackets and press Enter (Return) twice to create the new DIV
Your code will now look like this:
<div>
<div id="p7EPMt_1" class="p7epm_trigs">
<ul>
<li class="t3"><a href="#p7EPMc1_3" id="p7EPMtrg1_3">Company Info</a></li>
</ul>
</div>
</div>

Assign the p7EPM54 class to the new DIV so it looks like this:
<div class="p7EPM54">
<div id="p7EPMt_1" class="p7epm_trigs">
<ul>
<li class="t3"><a href="#p7EPMc1_3" id="p7EPMtrg1_3">Company Info</a></li>
</ul>
</div>
</div>
Switch to Design View
We have style, but our headings are displayed horizontally. Let's make a quick edit to the Megavator syle sheet
to fix that.
Open your CSS Styles panel

Locate and select the .p7EPM54 .p7epm_trigs rule
Click the Add Property link and select padding from the list
Enter 3px for the padding value
select the .p7EPM54 .p7epm_trigs li rule
Set the float value to none
Change the margin value to 0
Change the padding values to 0 0 3px 0

Your panel headings should now look like this
Preview the page in a browser
You have a working vertical Megavator.
Of course, depending on your sub-menu content you might want to position and size your panels. Let's tackle
that task next.

Custom Positioning Sub-Menu Panels for a Vertical Megavator
To position and size the sub-menu panels we'll create a special CSS rule for the outer DIVs that enclose each of
the sub-menu panels. These DIVs have an ID that begins with p7EPMw1, followed by an underscore and a
number that represents their order inside the Megavator. The outer wrapper for the first sub-menu panel,
therefore, would be p7EPMw1_1. The second would be p7EPMw1_2, and so on.
The Megavator we've built has 3 sub-menu panels, so we'll need to create 3 CSS rules.
Open your Megavator style sheet. In this case p7EPM53.css, which you will find inside the p7epm folder that
was created when you built your menu.
Make a new line at the bottom of the file and add these style rules:
#p7EPMw1_1 {
width: 400px;
top: 3px;
left: -4px;
}
#p7EPMw1_2 {
width: 400px;
top: 12px;
left: -4px;
}
#p7EPMw1_3 {
width: 400px;
top: 50px;
left: -4px;
}
Save and close the style sheet file.

As you can see, you can manipulate the width, the top position, and the left position to get your sub-menus just
the way you want them. Depending on content, each can have a different width, as well as different offsets and
overlaps.

Support and Contact info 103
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.

Support and Contact info 104
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
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:
support@projectseven.com
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

P7epm Guide

Încărcat de

Informații document

Titlu original

Drepturi de autor

Formate disponibile

Partajați acest document

Partajați sau inserați document

Opțiuni de partajare

Vi se pare util acest document?

Este necorespunzător acest conținut?

Drepturi de autor:

Formate disponibile

P7epm Guide

Încărcat de

Drepturi de autor:

Formate disponibile

PVII Elevator Panel Magic

A PVII Web Page Widget

Al Sparber & Gerry Jacobsen PVII

2 © 2009 Project Seven Development

The Interface Control Buttons ............................................................................................................................. 19

3 © 2009 Project Seven Development

Advanced Current Marker "None - Disable All" Option ...................................................................................... 34

4 © 2009 Project Seven Development

CSS Guide ................................................................................................................................................................. 53

5 © 2009 Project Seven Development

Addendum: Megavator by PVII ............................................................................................................................... 66

6 © 2009 Project Seven Development

Install the extension

Work in a Defined Dreamweaver Web Site

Elevator Panel Magic assets folder

Explore Megavator Menus...

7 © 2009 Project Seven Development

8 © 2009 Project Seven Development

Insert > Studio VII > Elevator Panel Magic by PVII

9 © 2009 Project Seven Development

Inserting a New Elevator Panel

Dreamweaver CS4 Insert Panel

10 © 2009 Project Seven Development

11 © 2009 Project Seven Development

12 © 2009 Project Seven Development

Modifying an Existing Elevator Panel

13 © 2009 Project Seven Development

The User Interface Items

A description of each relevant part of the EPM user interface.

14 © 2009 Project Seven Development

Link Only -Box Associated Content Panel

Open Content Panel X on Page Load

15 © 2009 Project Seven Development

Open Panel on Match

Include URL Parameters in Match

You can select one of three different animation options:

 0-None -Choose this option to disable animation.

16 © 2009 Project Seven Development

Always Keep One Panel Open

Enable Mouse Over Open Action

Enable Mouse Out Close Action

17 © 2009 Project Seven Development

18 © 2009 Project Seven Development

The Interface Control Buttons

19 © 2009 Project Seven Development

Elevator Panel Magic Behaviors

Trigger Panel Behavior

Creating a new Trigger Panel behavior

Modifying an existing Trigger Panel behavior

20 © 2009 Project Seven Development

The Interface Items

21 © 2009 Project Seven Development

The Interface Control Buttons

22 © 2009 Project Seven Development

Creating a new Rotator behavior

Modifying an existing Rotator behavior

23 © 2009 Project Seven Development

The Interface Items

24 © 2009 Project Seven Development

Start With Panel

Current Active Panel

The Interface Control Buttons

25 © 2009 Project Seven Development