PVII Elevator Panel Magic User Guide: Dreamweaver Widgets: To A Higher Level

PVII Elevator Panel Magic User Guide
Dreamweaver Widgets: To a Higher Level
PVII Elevator Panels allow you to create collapsible boxes or groups

of boxes. The optional animation effects are unique and expertly
choreographed to make your page pop out. As far as widgets go,
PVII Elevator Panels go straight to the top.
Project Seven Development

April 9, 2008 PVII Elevator Panel Magic
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
©2008 Project Seven Development | Elevator Panel Magic 2

TABLE OF CONTENTS
Elevator Panel Magic .....................................................................................................................................................2

Install the extension ..................................................................................................................................................7
Work in a Defined Dreamweaver Web Site ...............................................................................................................7
Elevator Panel Magic assets folder ............................................................................................................................7
Elevator Panel Magic Highlights ....................................................................................................................................7
Animation Effects ......................................................................................................................................................7
The Rotator ................................................................................................................................................................7
Features .....................................................................................................................................................................8
Overview ........................................................................................................................................................................9
Inserting an Elevator Panel Widget ...............................................................................................................................9
Inserting a New Elevator Panel ..................................................................................................................................9
Asset Folders........................................................................................................................................................11
Modifying an Existing Elevator Panel ..........................................................................................................................12
Managing the User Interface Items .........................................................................................................................13
Mode ...................................................................................................................................................................13
Panel Headings ....................................................................................................................................................13
Add ......................................................................................................................................................................13
Delete ..................................................................................................................................................................13
Up ........................................................................................................................................................................13
Down ...................................................................................................................................................................13
Heading Text ........................................................................................................................................................13
Link Only -Box Associated Content Panel ............................................................................................................14
Link / Browse... ....................................................................................................................................................14
Options ....................................................................................................................................................................14
Open Content Panel X on Page Load ...................................................................................................................14
Animation Method ..............................................................................................................................................15
Toggle Panels .......................................................................................................................................................15
Enable Mouse Over Trigger Action ......................................................................................................................15
Auto Rotate Panels on Startup ............................................................................................................................16
Style Theme .........................................................................................................................................................16

The Interface Control Buttons .................................................................................................................................17

OK ........................................................................................................................................................................17
Cancel ..................................................................................................................................................................17
Help......................................................................................................................................................................17
PVII Elevator Panel Magic -Rotator..............................................................................................................................18
Overview ..................................................................................................................................................................18
Creating a new Rotator behavior ........................................................................................................................18
Modifying an existing Trigger Panel behavior .........................................................................................................18
The Interface............................................................................................................................................................19
The Interface Items ..................................................................................................................................................19
Elevator Panel ......................................................................................................................................................19
Action...................................................................................................................................................................19
Number of Cycles.................................................................................................................................................20
Start With Panel...................................................................................................................................................20
OK ........................................................................................................................................................................20
Cancel ..................................................................................................................................................................20
Help......................................................................................................................................................................20
PVII Elevator Panel Magic -Trigger Panel .....................................................................................................................21
Overview ..................................................................................................................................................................21
Creating a new Trigger Panel behavior ....................................................................................................................21
Modifying an existing Trigger Panel behavior .........................................................................................................21
The Interface............................................................................................................................................................22
Elevator Panel ......................................................................................................................................................22
Action...................................................................................................................................................................22
OK ........................................................................................................................................................................23
Cancel ..................................................................................................................................................................23
Help......................................................................................................................................................................23

PVII Elevator Panel Magic -Open/Close All ..................................................................................................................24

Overview ..................................................................................................................................................................24
Creating a new Open/Close All behavior .................................................................................................................24
Modifying an existing Open/Close All Panel behavior .............................................................................................24
The Interface............................................................................................................................................................24
Elevator Panel ......................................................................................................................................................25
Action...................................................................................................................................................................25
OK ........................................................................................................................................................................26
Cancel ..................................................................................................................................................................26
Help......................................................................................................................................................................26
PVII Elevator Panel Magic -Remove Panel ...................................................................................................................27
Overview ..................................................................................................................................................................27
Open the Remove PVII Elevator Panel Magic interface ...........................................................................................27
What will be Removed.........................................................................................................................................28
What will Not be Removed ..................................................................................................................................28
Remove ................................................................................................................................................................29
Cancel ..................................................................................................................................................................29
Help......................................................................................................................................................................29
CSS Guide .....................................................................................................................................................................30
CSS Rules Analysis ....................................................................................................................................................30
CSS: Rule-by-Rule .................................................................................................................................................31

Questions and Answers ...............................................................................................................................................37

How do I use or manage Elevators in different folders? .........................................................................................37
Can I Revert back to a default Style Theme CSS file? ..............................................................................................38
How do I set font styles for my content? ................................................................................................................38
My font styles are not showing up, what do I do? ..................................................................................................38
Can I link to a specific Elevator content panel from an external page or bookmark? .............................................39
Can I hide the Trigger bar when using the Rotator option? ....................................................................................39
How do I set my content panels and triggers to be unique colors? ........................................................................40
Can I set specific colors for the default link state of each trigger rather than just the open state? .......................41
Can I move my Trigger links to another part of the page? ......................................................................................41
Can I make my trigger links display vertically with each being the full width of my Elevator widget? ...................42
Can I insert an Elevator Panel widget inside an Accordion, Glide Panel, or Tab Panel widget? ..............................42
Can I insert a PVII Horizontal or Vertical Scroller inside an Elevator Panel widget? ...............................................42
Support and Contact info ............................................................................................................................................43
PVII Knowledge Base ...............................................................................................................................................43
Newsgroup forum communities ..........................................................................................................................43
RSS News Feeds ...................................................................................................................................................44
Before you Contact us .........................................................................................................................................44
Snail mail..............................................................................................................................................................44

INSTALL THE EXTENSIO N
Look for the extension installer file p7_EPM_131.mxp 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 need to upload the entire p7epm folder.
ELEVATOR PANEL MAGIC HIGHLIGHTS
Elevator Panel Magic raises Dreamweaver Widgets to a higher level.
ANIMATION EFFECTS
The default glide animation features a scissors-type effect as panels are revealed by sliding up over the current
panel. For deployments that require a lot of content, there is a glide with gradual stop that features a fast
animation that slows as it nears its end.
THE ROTATOR
Elevator Panel Magic includes a Rotator Behavior that allows each of the content panels to be displayed in a Slide
Show fashion—operated by special behaviors that are included with the product. This feature can also be set to
run automatically when the page first loads, which is great way to call attention to what your panels contain by
briefly exposing them. Each panel is displayed at intervals that you control. The rotation can be limited to just one
cycle or can be set to loop as many times as you like.
©2008 Project Seven Development | Elevator Panel Magic Highlights 7

FEATURES
As a PVII Widget, Elevator Panel Magic is automated and rich with useful features.
 Insert in a DIV or table cell anywhere on your page

 Insert as many widgets on a given page as you want
 Each widget can have an unlimited number of content panels
 Trigger links can be associated with content panels or can be set to link to external pages
 Select a default panel to be visible on load or set all panels to be collapsed when the page loads
 Select from 2 animation methods: scissors glide or gradual stop (or turn animation off completely)
 Set custom toggle options to control what happens when the triggers are clicked or moused over (show
only one panel at a time or allow all to be open)
 Supports URL parameters to allow you to link directly to a specific panel on your page from an external
link or bookmark
 Included suite of control behaviors allows you to trigger panels, open or close all panels, or rotate panels,
from custom links anywhere on your page
 Enable mouse over triggering or restrict actions to onclick
 Load page with auto-rotation enabled to show all available panels sequentially one time, then stop at the
default panel ready for manual operation
 Load with auto-rotation enabled and allow it to loop until the user clicks (or mouses over) a trigger
 Set the delay between panels when auto-rotation is selected
 Panels can be grouped or deployed singly
 The trigger links can be moved anywhere on your page and then styled any way you want for some really
cool effects
 Comes with 5 customizable CSS themes
 If your page contains multiple widgets, each one can be assigned a separate style theme
 User interface automates the insertion process
 User interface permits modification of all existing widgets on your page
 User interface allows adding, deleting, or re-ordering of content panels and their associated links at any
time
 User interface allows you to change the style theme for any widget at any time
 Free and unlimited tech support
©2008 Project Seven Development | Elevator Panel Magic Highlights 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 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 do not have associated content panels
and 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.
INSERTING AN ELEVATOR PANEL WIDGET
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
-Establish the insertion point for your new Elevator Panel widget by clicking in the area of the page where you
would like the widget to be created.
Note: The interface is sensitive to the insertion point. If your cursor is currently inside an existing Elevator Panel widget
then the Modify interface will open instead.
©2008 Project Seven Development | Overview 9

-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.
The Elevator Panel Magic user interface will open in the Create New Elevator Panel mode.
You can create more than one Elevator Panel widget 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.
©2008 Project Seven Development | Inserting an Elevator Panel Widget 10

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 an 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.
©2008 Project Seven Development | Inserting an Elevator Panel Widget 11

MODIFYING AN EXISTING ELEVATOR PANEL
You can modify any of the existing Elevator Panel widgets on your page at any time.
-Click inside the Elevator Panel widget 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.
©2008 Project Seven Development | Modifying an Existing Elevator Panel 12

MANAGING THE USER INTERFACE ITEMS
MODE
Displays the current operational Mode for the user interface: either Create or Modify. When in Modify mode, the
id of the 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 for this menu
item, 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 widget. Other Elevator Panel widgets 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 opened 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.

ANIMATION METHOD
The Elevator Panel system allows you to select from one of 2 different panel opening and closing animations when
the new panel is of different height than the current panel, or you can choose no animation:
 0-None: Choose this option if you do not wish to have any animated effects when the panels open or
close.
 1-Glide -Normal: This setting will glide the panels open or closed at a fixed rate of speed. This is the
default setting and provides a very nice scissors-type effect.
 2-Glide -Gradual Stop: This setting will smoothly glide the panels open or closed. The speed of the glide
changes with the height of the content panel and will come to a gradual stop. Use this method when you
have a lot of content in one or more of your panels.
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 widget -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 widget, any other Elevator Panel widgets on the page will not be affected.
2-Show One Panel at a Time in all widgets -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 open panels in all of the Elevator Panel
widgets on the page.
ENABLE MOUSE OVER TRIGGER ACTION
Check this box to allow mouse over activation of the panel headings. The associated panel will open whenever the
user moves the mouse over the panel heading. This option includes a built-in timer that adds a bit of delay in order
to maintain usability. The panel can only be closed by clicking the panel heading.

AUTO ROTATE PANELS ON STARTUP
This feature is designed to display each panel in rapid succession when the page first loads in order to gain the
user's attention and/or expose all of the content panels briefly. It works best when there is a small bit of content in
each panel. The Elevator Panel magic system also includes a fully featured Rotate Behavior that can be used to
provide interactive controls.
Check this box to enable the auto rotate feature on page startup.
NUMBER OF ROTATE CYCLES
The system will display all of the panels successively once or it can be configured to loop this display any number of
times. Enter the number of times you want the system to loop through the rotation. If you'd like your panels to
loop continuously, set the number of times to a very high number, such as 999.
DELAY TIME BETWEEN EACH DISPLAY (MS)
This controls the amount of time each panel is displayed during the rotation, in milliseconds. The default is 1000
ms, or one second. If, for example, you want the system to display each panel for 5 seconds, then enter 5000 into
the box.
STYLE THEME
Elevator Panel Magic comes with 5 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

PVII ELEVATOR PANEL MAGIC -ROTATOR
OVERVIEW
The Elevator Panel Magic system includes a Rotator Behavior that allows each of the content panels to be
displayed in a Slide Show fashion. Each of the panels will be displayed and the timing between each panel display
can be 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
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 > Rotator to open the interface.
4. Select the panel that you wish to act on.
5. Select the action and other options
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 and other options.
5. Click OK to apply the revised behavior.
©2008 Project Seven Development | PVII Elevator Panel Magic -Rotator 18

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
When you have made your selection, click the OK button to apply the behavior. By default the behavior will be
applied to the "onclick" event of the text link or image. You can change the event by selecting the desired event in
the Behaviors panel.
CANCEL
Click the Cancel button to completely abort the current operation. This will close the interface and no changes will
be made to your page.
HELP
Click the Help button to open the associated Help File in your browser. This page can remain open for easy
reference while you continue working with the Elevator Panel Magic interface.

PVII ELEVATOR PANEL MAGIC -TRIGGER PANEL
OVERVIEW
The Trigger Behavior allows you to set a link anywhere on your page to remotely operate a Trigger 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 trigger) a panel.
CREATING A NEW TRIGGER PANEL BEHAVIOR
3. Choose Studio VII > Elevator Panel > Trigger Panel to open the interface.
5. Select the action (Open, Close or Trigger).
MODIFYING AN EXISTING TRIGGER PANEL 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).
©2008 Project Seven Development | PVII Elevator Panel Magic -Trigger Panel 21
THE INTERFACE
The Elevator Panel Magic -Panel Trigger interface allows you to select the panel to trigger.
THE INTERFACE ITEMS
ELEVATOR PANEL
The interface contains a listing of all of the Trigger Links in all of the Elevator Panel widgets on the page. Select the
Link you want to trigger.
The 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 first Trigger Link in the first Elevator Panel widget on the page, while
"p7EPMtrig3_2" would be the second Trigger 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 Trigger in one of two ways:
 1. If the Panel Trigger has an associated content panel then that panel will become active.
 2. If the Panel Trigger does not have an associated content panel (Link Only option), then the hyperlink
assigned to the Panel Trigger will be activated.
OK
CANCEL
HELP
PVII ELEVATOR PANEL MAGIC -OPEN/CLOSE ALL
OVERVIEW
The Open/Close All Behavior allows you to set 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

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.
©2008 Project Seven Development | PVII Elevator Panel Magic -Open/Close All 24
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
PVII ELEVATOR PANEL MAGIC -REMOVE PANEL
OVERVIEW
The Elevator Panel Magic system 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 menu if there is no Elevator Panel Magic widget on the page.
©2008 Project Seven Development | PVII Elevator Panel Magic -Remove Panel 27
The Remove Elevator Panel Magic interface will open.
The interface will provide a listing of all of the Elevator Panel widgets on your page and will list will display the ID of
each Elevator Panel widget.
-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 p7EPM. The opening DIV tag for an 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 (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
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
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
©2008 Project Seven Development | CSS Guide 30

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.
.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. Use this rule to create effects
surrounding your content panels by, for example, assigning padding, borders, and/or background colors, which will
apply to all your content panels.
.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 second 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.
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 second and third Trigger links separately. SEE THE Q&A SECTION FOR A MORE DETAILED DISCUSSION
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.

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

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.
©2008 Project Seven Development | Questions and Answers 37

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 ST YLES 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 TRIGGE R LINKS DISPLAY VERTICALLY WITH EACH BEING THE FULL WIDTH
OF MY ELEVATOR WIDGET?
You can make your triggers display as blocks that are the full width of your widget by adding this single rule to the
bottom of your style sheet:
.p7EPM0X .p7epm_trigs li, .p7EPM0X .p7epm_trigs a {

float: none;
}
See Live Example
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.

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.
©2008 Project Seven Development | Support and Contact info 43

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
©2008 Project Seven Development | Support and Contact info 44

PVII Elevator Panel Magic User Guide: Dreamweaver Widgets: To A Higher Level

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

PVII Elevator Panel Magic User Guide: Dreamweaver Widgets: To A Higher Level

Uploaded by

Copyright:

Available Formats

PVII Elevator Panel Magic User Guide

Dreamweaver Widgets: To a Higher Level

PVII Elevator Panels allow you to create collapsible boxes or groups

Project Seven Development

ELEVATOR PANEL MAGIC

A PVII Web Page Widget

Al Sparber & Gerry Jacobsen PVII

©2008 Project Seven Development | Elevator Panel Magic 2

Elevator Panel Magic .....................................................................................................................................................2

©2008 Project Seven Development | Elevator Panel Magic 3

The Interface Control Buttons .................................................................................................................................17

©2008 Project Seven Development | Elevator Panel Magic 4

PVII Elevator Panel Magic -Open/Close All ..................................................................................................................24

©2008 Project Seven Development | Elevator Panel Magic 5

Questions and Answers ...............................................................................................................................................37

©2008 Project Seven Development | Elevator Panel Magic 6

INSTALL THE EXTENSIO N

WORK IN A DEFINED DREAMWEAVER WEB SITE

ELEVATOR PANEL MAGIC ASSETS FOLDER

ELEVATOR PANEL MAGIC HIGHLIGHTS

Elevator Panel Magic raises Dreamweaver Widgets to a higher level.

©2008 Project Seven Development | Elevator Panel Magic Highlights 7

 Insert in a DIV or table cell anywhere on your page

©2008 Project Seven Development | Elevator Panel Magic Highlights 8

INSERTING AN ELEVATOR PANEL WIDGET

INSERTING A NEW ELEVATOR PANEL

©2008 Project Seven Development | Overview 9

©2008 Project Seven Development | Inserting an Elevator Panel Widget 10

©2008 Project Seven Development | Inserting an Elevator Panel Widget 11

MODIFYING AN EXISTING ELEVATOR PANEL

©2008 Project Seven Development | Modifying an Existing Elevator Panel 12

MANAGING THE USER INTERFACE ITEMS

©2008 Project Seven Development | Modifying an Existing Elevator Panel 13

LINK ONLY -BOX ASSOCIATED CONTENT PANEL

OPEN CONTENT PANEL X ON PAGE LOAD

©2008 Project Seven Development | Modifying an Existing Elevator Panel 14

ENABLE MOUSE OVER TRIGGER ACTION

©2008 Project Seven Development | Modifying an Existing Elevator Panel 15

AUTO ROTATE PANELS ON STARTUP

NUMBER OF ROTATE CYCLES

DELAY TIME BETWEEN EACH DISPLAY (MS)

©2008 Project Seven Development | Modifying an Existing Elevator Panel 16

THE INTERFACE CONTROL BUTTONS

©2008 Project Seven Development | Modifying an Existing Elevator Panel 17

PVII ELEVATOR PANEL MAGIC -ROTATOR

CREATING A NEW ROTATOR BEHAVIOR

MODIFYING AN EXISTING TRIGGER PANEL BEHAVIOR

©2008 Project Seven Development | PVII Elevator Panel Magic -Rotator 18

THE INTERFACE ITEMS

©2008 Project Seven Development | PVII Elevator Panel Magic -Rotator 19

START WITH PANEL

CURRENT ACTIVE PANEL

THE INTERFACE CONTROL BUTTONS

©2008 Project Seven Development | PVII Elevator Panel Magic -Rotator 20

PVII ELEVATOR PANEL MAGIC -TRIGGER PANEL

CREATING A NEW TRIGGER PANEL BEHAVIOR

MODIFYING AN EXISTING TRIGGER PANEL BEHAVIOR

THE INTERFACE ITEMS

THE INTERFACE CONTROL BUTTONS

PVII ELEVATOR PANEL MAGIC -OPEN/CLOSE ALL

CREATING A NEW OPEN/CLOSE ALL BEHAVIOR

MODIFYING AN EXISTING OPEN/CLOSE ALL PANEL BEHAVIOR

THE INTERFACE ITEMS