Glide Panel Magic

A PVII Web Page Widget

Project Seven Development
 Glide Panel Magic 2

GLIDE 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

Page 2
 Glide Panel Magic 3

TABLE OF CONTENTS

Glide Panel Magic ...................................................................................................................................................2

Install the extension ..............................................................................................................................................6

Mac OS X Issue ....................................................................................................................................................6

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

Glide Panel Magic assets folder .......................................................................................................................6

PVII Glide Panel Magic Highlights ........................................................................................................................7

Overview .....................................................................................................................................................................8

Inserting a New Glide Panel ..................................................................................................................................8

Asset folders ......................................................................................................................................................... 10

Modifying an Existing Glide Panel ...................................................................................................................... 11

Managing the User Interface Items ............................................................................................................... 11

Mode ................................................................................................................................................................. 11

Trigger Links....................................................................................................................................................... 11

Add ..................................................................................................................................................................... 12

Delete ................................................................................................................................................................ 12

Up ........................................................................................................................................................................ 12

Down .................................................................................................................................................................. 12

Trigger Text ........................................................................................................................................................ 12

Link Only - No Associated Content Panel ................................................................................................ 12

Link / Browse... ................................................................................................................................................. 12

Options .................................................................................................................................................................. 13

Open Content Panel X on Page Load ..................................................................................................... 13

Animation Method ......................................................................................................................................... 13

Use Current Marker ........................................................................................................................................ 13

Enable Back Button Support ....................................................................................................................... 13

Page 3
 Glide Panel Magic 4

Style Theme ...................................................................................................................................................... 14

The Interface Control Buttons ......................................................................................................................... 14

OK ....................................................................................................................................................................... 14

Cancel ............................................................................................................................................................... 14

Help .................................................................................................................................................................... 14

Glide Panel Magic -Trigger Panel Behavior .................................................................................................... 15

Overview ............................................................................................................................................................... 15

Creating a new Trigger Panel behavior ....................................................................................................... 15

Modifying an existing Trigger Panel behavior ............................................................................................ 15

The Interface ........................................................................................................................................................ 16

The Interface Control Buttons ......................................................................................................................... 16

OK ....................................................................................................................................................................... 16

Cancel ............................................................................................................................................................... 16

Help .................................................................................................................................................................... 16

PVII Glide Panel Magic -Remove Panel ........................................................................................................... 17

Overview ............................................................................................................................................................... 17

Open the Remove PVII Glide Panel Magic interface .............................................................................. 17

What will be removed ................................................................................................................................... 18

What will not be removed ........................................................................................................................... 18

The Interface Control Buttons ......................................................................................................................... 18

Remove ............................................................................................................................................................. 18

Cancel ............................................................................................................................................................... 18

Help .................................................................................................................................................................... 18

CSS Guide ................................................................................................................................................................. 19

CSS Rules Analysis ............................................................................................................................................... 19

CSS: Rule-by-Rule ............................................................................................................................................ 20

Page 4
 Glide Panel Magic 5

Editable Fireworks Images .................................................................................................................................... 24

The images ........................................................................................................................................................... 24

p7gp_fadetoaero.jpg ................................................................................................................................... 25

p7gp_aerobut.jpg .......................................................................................................................................... 25

Editing the images.......................................................................................................................................... 25

The Export process.......................................................................................................................................... 26

Questions and Answers ......................................................................................................................................... 27

Can I change the width of the trigger links? .............................................................................................. 27

Can I display the trigger links on the right side of my widget? .............................................................. 27

Can I Revert back to a default Style Theme CSS file? ............................................................................. 28

How do I set font styles for my content? ...................................................................................................... 28

My font styles are not showing up, what do I do? .................................................................................... 28

Can I move my trigger links to another part of the page? .................................................................... 29

Can I make my trigger links display horizontally? ...................................................................................... 30

Can I insert a Glide Panel widget inside an Accordion or Tab Panel widget? ................................ 31

Can I insert a PVII Horizontal or Vertical Scroller inside a Glide Panel widget? ................................ 31

How do I change the background color below my trigger link bar? ................................................. 31

Support and Contact info .................................................................................................................................... 32

PVII Knowledge Base ......................................................................................................................................... 32

Newsgroup forum communities ................................................................................................................. 32

RSS News Feeds ............................................................................................................................................... 33

Before you Contact us .................................................................................................................................. 33

Snail mail ........................................................................................................................................................... 33

Page 5
 Glide Panel Magic 6

Install the extension

Look for the extension installer file p7_GPM_168.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
you must restart Dreamweaver.

Version Numbers: It is possible that the original version number that shipped with the original release might have been
updated one or more times. In that event, the actual version number of the MXP installer in your possession might be
different. It could, for example, be p7_GPM_169.mxp or higher.

Mac OS X Issue

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

Glide Panel Magic assets folder

When you publish your page, you need to upload the entire p7gp folder.

Page 6
 PVII Glide Panel Magic Highlights 7

PVII GLIDE PANEL MAGIC HIGHLIGHTS

As a PVII Widget, Glide 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
 Navigation bar supports links to external pages, as well as to content panels
 Automatic link state management and current link marking
 Choose which panel shows on page load
 Choose from 2 glide animations or a fade
 Supports URL parameters to open a specific content panel from an external link
 Includes a Dreamweaver behavior to assign panel control behaviors to any existing link
on your page
 Comes with 6 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
 Included editable Fireworks images
 Comprehensive user guide included
 Free and unlimited tech support

Page 7
 Overview 8

OVERVIEW
Glide Panel Magic automates the process of building gliding 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 Glide Panel widgets per page and
each Glide 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 Glide 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 Glide
Panel widget the user interface will open in the Modify mode for that widget. If your insertion
point is not within an existing Glide Panel widget the user interface will open in the Create mode.

INSERTING A NEW GLIDE PANEL

Glide Panel Magic widgets can be inserted anywhere on your page. Do be mindful, however,
that the default configuration of a Glide Panel has a trigger link navigation bar on the left with
the content on the right―so your insertion point should be inside an element wide enough to
accommodate the entire widget. If you do need to have your widget in a narrow sidebar, you
will need to separate the navigation bar from the content panel as described in the Questions
and Answers of this User Guide.

Once you’ve established your insertion point, click the Glide Panel icon to open the
interface. Alternatively, you can choose Insert > Studio VII > Glide Panel Magic by PVII. You can
insert the Glide Panel into any area of your page. The Glide Panel will automatically adapt to its
location, even when placed inside flexible DIVs or table cells. You can insert as many individual
Glide Panel widgets as you like on your page. Each Glide Panel widget can be optioned
independently to set different modes and features. Glide Panel widgets on a single page can
share the same style theme or be set to separate style themes. Each Glide Panel can contain
any content that you like. Each content panel is directly editable in Dreamweaver Design View
using normal Dreamweaver editing techniques.

-Establish the insertion point for your new Glide 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 Glide Panel widget then
the Modify interface will open instead.

Page 8
 Inserting a New Glide Panel 9

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

The Glide Panel Magic user interface will open in the Create New Glide Panel mode.

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

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

Page 9
 Inserting a New Glide Panel 10

Asset folders
When you create a Glide Panel Magic widget, the system creates an assets folder named p7gp
at the same level as the page that contains your Glide Panel widget. This folder will contain the
Glide Panel JavaScript file, as well as a sub-folder for each style theme you have used. For
example, if you use Style Theme 01: Carbon, the system will create a gp1 folder inside the p7gp
folder. The gp1 folder contains the CSS file for Style Theme 01 and an img folder that contains all
the images used by the Style Theme. The folder structure looks like this:

When you publish your site, make sure you upload the entire p7gp folder.

Page 10
 Modifying an Existing Glide Panel 11

MODIFYING AN EXISTING GLIDE PANEL

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

-Click inside the Glide Panel widget that you wish to modify.

-Click the Glide Panel Magic icon in the Common Section of Dreamweaver's Insert Bar or
choose Modify > Studio VII > Modify Glide Panel Magic by PVII

The Glide Panel Magic User Interface will open in the Modify Existing Glide Panel mode.

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 Glide Panel widget being modified will also be displayed.

Trigger Links
This box displays the text for each navigation link in the Glide Panel, one line for each panel or
external link. Select (click) the line you wish to act on.

Page 11
 Modifying an Existing Glide Panel 12

Add
Click the Add button to add a new trigger link and associated content panel. A new line will be
created with the default text "New Trigger Link ". The new line will be created immediately after
the currently selected line.

Delete
Click the Delete button to remove the currently selected line, the trigger link, and any
associated content panel.

Up
The Up button will move the selected line in the Trigger Links 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 Trigger Links list down one row. Successive
clicks will keep moving the line down until the line is at the bottom of the list.

Trigger Text
The Trigger Text box will always display the text of the currently selected line in the Trigger Links
list. Enter or edit the text that you wish to display for this trigger link. The box cannot be left blank.

Link Only - No Associated Content Panel

Check this box if you wish to have the selected Trigger Link 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.

Page 12
 Modifying an Existing Glide Panel 13

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

Open Content Panel X on Page Load

You can select which of the content panels will be opened when the page first loads into the
browser. Enter the number of the content panel that you wish to have open initially. The number
must correspond with an existing content panel.

Animation Method
The Glide Panel system allows you to select from one of three different panel opening and
closing animations 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
if the new panel is a different height than the current one.
 2-Glide -Gradual Stop -This setting will smoothly glide the panels open or closed if the
new panel is a different height than the current one. The speed of the glide changes
with the height of the content panel and will come to a gradual stop.
 3-Fade-In - The setting will gradually fade-in the newly opened content panel.

Use Current Marker

Check this box if you wish to have the system automatically look for a match between the
current page address and the hyperlink assigned to any of the Trigger Links. If the system finds a
match it will automatically select that link and open its associated panel. In cases where the
matched link does not have an associated content panel (Link Only option) the system will
assign the "p7GPcurrentmark" style class to that link while opening whichever panel is the default
one for that page.

Enable Back Button Support

Ordinarily the Glide Panel will display in its startup configuration when coming back to a Glide
Panel page using the browser Back button. With this option active, the system will append a
special page anchor to the page address each time a Trigger Link is clicked. When returning to
the page by using the Back button, the system will analyze the page address (and appended
anchor link) and restore the Glide Panel back to its last used state.

Page 13
 Modifying an Existing Glide Panel 14

Style Theme
Glide 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 Glide Panel(s). You can change to a different style
type at any time without affecting the contents of the Glide 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 options, click the OK button to build the Glide 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 a Glide 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 Glide Panel and check its functionality.

Tip: To make further changes, click inside a Glide Panel to open the Glide Panel Magic interface and begin your
modifications.

Cancel
Click the Cancel button to completely abort the current Glide 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 reference while you continue working with the Glide Panel Magic interface

Page 14
 Glide Panel Magic -Trigger Panel Behavior 15

GLIDE PANEL MAGIC -TRIGGER PANEL BEHAVIOR

Overview
The Trigger Behavior allows you to set a link anywhere on your page to remotely operate a
Trigger Link in any Glide Panel widget on your page.

The Trigger Behavior will emulate a user mouse click on the Trigger Link in one of two ways:

1. If the Trigger Link has an associated content panel then that panel will become active.
2. If the Trigger Link does not have an associated content panel ( Link Only option), then
the hyperlink assigned to the Trigger Link will be activated.

Creating a new Trigger Panel behavi or

1. Select (click) an element to act as the behavior trigger—a text link or image, for
example.
2. Open the Behaviors panel
3. Click the plus sign (+) to open the Behaviors menu.
4. Choose Studio VII > Glide Panel > Trigger Panel to open the interface.
5. Select the panel that you wish to trigger.
6. Click OK to apply the behavior.

Modifying an existing Trigger Panel behavior

1. Select the element that contains an existing Glide Panel Trigger behavior.
2. Double-click the Glide Panel Magic- Trigger Panel behavior in the Behaviors panel to
open the interface.
3. Select the panel that you wish to trigger.
4. Click OK to apply the revised behavior.

Page 15
 Glide Panel Magic -Trigger Panel Behavior 16

The Interface
The Glide Panel Magic -Panel Trigger interface allows you to select which panel to trigger.

The interface contains a listing of all of the Trigger Links in all of the Glide Panel widgets on the
page. Select the Trigger Link you want to trigger.

The Trigger Links are listed by their ID, which follow a unique naming convention, beginning with
"p7GPtrg" followed by the Glide Panel widget number, an underscore, and then the content
panel number. For example, "p7GPtrig1_1" would be the first Trigger Link in the first Glide Panel
widget on the page, while "p7GPtrig3_2" would be the second Trigger Link in the third Glide
Panel widget on the page.

The Interface Control Buttons

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

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

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

Page 16
 PVII Glide Panel Magic -Remove Panel 17

PVII GLIDE PANEL MAGIC -REMOVE PANEL

Overview
The Glide Panel Magic system includes a Remove feature that allows you to quickly remove an
existing Glide 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 Glide Panel Magic interface

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

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

The Remove option will be unavailable (grayed out) in the menu if there is no Glide Panel Magic widget on the page.

The Remove Glide Panel Magic interface will open.

The interface will provide a listing of all of the Glide Panel widgets on your page, displaying the
ID of each one.

-Select the Glide Panel widget that you wish to remove. You can only remove one Glide Panel
widget at a time.

Tip: If you are unsure about which Glide Panel 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 Glide Panel widget looks like this: <div
id="p7GP_1" class="p7GP01"">

Page 17
 PVII Glide Panel Magic -Remove Panel 18

What will be removed

The system will completely remove the html markup for the selected Glide Panel widget from
your page. If there are other Glide Panel widgets on the page they will not be affected. The
system will also remove the link to the Glide Panel CSS file if no other Glide Panel widget on the
page is using the same style theme.

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

What will not be removed

The system will not remove the p7gp folder, which contains the Glide 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.

The Interface Control Buttons

Remove
Click the Remove button. The selected Glide Panel Magic widget will be removed from the
page

Cancel
Click the Cancel button to completely abort the current Remove Glide 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 reference while you continue working with the Glide Panel Magic interface.

Page 18
 CSS Guide 19

CSS GUIDE
The following section will assist you in customizing the look and feel of your Glide Panel Magic
widgets.

Each Glide Panel widgets on your page can be set to use a separate style theme. Each of the 6
available style themes uses a dedicated style sheet. All style sheets are editable.

CSS Rules Analysis

The Glide Panel Magic CSS approach is straightforward and economical. All Glide Panel Magic
style sheets contain the following style rules:

 .p7GP01
 .p7GP01 .p7GPinnerwrapper
 .p7GP01 .p7GPtwrapper
 .p7GP01 .p7GPtwrapper ul
 .p7GP01 .p7GPtwrapper ul a
 .p7GP01 .p7GPtwrapper ul a:hover
 .p7GP01 .p7GPtwrapper ul a.down, .p7GP01 .p7GPtwrapper ul a.down:hover
 .p7GP01 .p7GPcwrapper
 .p7GP01 .p7GPcontent
 .p7GP01 .p7GPcontent a
 .p7GP01 .p7GPcontent a:visited
 .p7GP01 .p7GPcontent a:hover
 .p7GPcurrentmark
 .p7GP01 .clearfloats
 .p7GP01 .sidecontent
 .p7GP01_external
 .p7GP01_external ul
 .p7GP01_external ul li
 .p7GP01_external ul a
 .p7GP01_external ul a:hover
 .p7GP01_external ul a.down

The first part of each rule's name, in this case .p7GP01, corresponds to the style theme being
used, and will differ based on your style theme, as follows:

 .p7GP01 = Carbon
 .p7GP02 = Greystone
 .p7GP03 = Bluestone
 .p7GP04 = Ruby
 .p7GP05 = Aero
 .p7GP06 = Citrus

Page 19
 CSS Guide 20

CSS: Rule-by-Rule
Now let's see what each of the 10 CSS rules control by examining an actual Glide Panel Magic
Style Sheet, the Carbon theme's CSS file: p7GP01.css:

.p7GP01
background-color: #FFFFFF;
border: 1px solid #000000;
padding: 3px;

This rule styles the root Glide Panel element—the DIV that wraps an entire Glide Panel Magic
widget's markup, enveloping both the trigger link navigation bar and the content panels.

.p7GP01 .p7GPinnerwrapper
padding: 0;
background-color: #000000;

This rule styles a DIV nested inside the .p7GP01 root DIV. Like the root DIV, it envelops both the
trigger link navigation bar and the content panels. The background-color assigned to this
element is what determines the background color that appears below the trigger link navigation
bar.

.p7GP01 .p7GPtwrapper
width: 200px;
float: left;
margin: 0;
background-color: #000000;

This rule styles the DIV that wraps (contains) the trigger link navigation bar. This DIV is floated left
to make the navigation bar render as a left column. Edit the width property to make your trigger
links wider or narrower. The width value set must always equal the left margin value set on the
.p7GP01 .p7GPcwrapper rule.

.p7GP01 .p7GPtwrapper ul
margin: 0;
padding: 0;
list-style-type: none;

This rule applies to the unordered list that contains the trigger navigation bar. It turns off
indentation and bullet characters.

Page 20
 CSS Guide 21

.p7GP01 .p7GPtwrapper ul a
color: #CCCCCC !important;
text-decoration: none;
display: block;
padding: 6px 10px;
border-top: 1px solid #585858;
border-bottom: 1px solid #282828;
background-image: url(img/p7gp_carbonbut.jpg);
background-repeat: repeat-x;
background-color: #2b2b2b;

This rule styles the default link state for each link in your trigger navigation bar. The !important
notation prevents conflicts between this style and any other CSS styles assigned to your page.

.p7GP01 .p7GPtwrapper ul a:hover

color: #999999 !important;
background-color: #2b2b2b;

This rule styles the hover link state for each link in your trigger navigation bar. The !important
notation prevents CSS conflicts.

.p7GP01 .p7GPtwrapper ul a.down, .p7GP01 .p7GPtwrapper ul a.down:hover

background-color: #151515 !important;
color: #DFDFDF !important;
border-color: #000000;
background-image: url(img/p7gp_fadetocarbon.jpg);
background-repeat: repeat-y;

This rule styles the selected link state for each link in your trigger navigation bar. The !important
notations prevent CSS conflicts.

.p7GP01 .p7GPcwrapper
margin: 0 0 0 200px;
background-color: #FFFFFF;
border-left: 1px solid #151515;

This rule styles the DIV that wraps all the content panels in your widget. The margin values are
expressed in CSS shorthand, which includes 4 values, separated by single spaces, that
correspond to each side of the box in clockwise order starting from the top. The given value set
of 0 0 0 200px, therefore, means we've assigned zero (0) to the top, right, and bottom sides, and
200px to the left side. The left margin value must always correspond to the width set in the
.p7GP01 .p7GPtwrapper rule. The background color defines the background for all of the
content panels.

Page 21
 CSS Guide 22

.p7GP01 .p7GPcontent
padding: 24px;
line-height: 1.5em;
color: #000000;

This rule styles each content panel. If the color you set does not match the color of the text in
your panels, you likely have a CSS conflict and should assign an !important notation to the color
value: color: #000000 !important;

.p7GP01 .p7GPcontent a
color: #0033FF;

This rule styles the default link state for each link inside your content panels. In the absence of an
!important notation, the color set will be overridden by a more specific link style you might have
set up in your page style sheet.

.p7GP01 .p7GPcontent a:visited

color: #486CFF;

This rule styles the visited link state for each link inside your content panels.

.p7GP01 .p7GPcontent a:hover

color: #CC0000;

This rule styles the hover link state for each link inside your content panels.

.p7GPcurrentmark
font-weight:bold !important;

This rule styles describes a special class that is assigned to a trigger link whose value matches the
current page address. This would occur if you used the Link Only - No Associated Content Panel
option for one of the links in your trigger navigation bar.

Page 22
 CSS Guide 23

.p7GP01 .clearfloats
clear: both;
height: 0;
line-height: 0.0;
font-size: 0;

This rule serves to clear the floated trigger navigation bar 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 .p7GP01 .p7GPcwrapper DIV. The markup looks
like this:

<div class="clearfloats">&nbsp;</div>
</div> (closing tag for .p7GP01 .p7GPcwrapper)

.p7GP01 .sidecontent
padding: 12px;
color: #CCCCCC;

This class can be used to style content below the trigger navigation bar. By default, the system
creates a DIV that you can use for this purpose or delete if you will not need it.

.p7GP01_external
font-size: 0.75em;

This is a special class that you would assign to the trigger navigation bar inner wrapper when you
want to move the trigger bar to a different area of your page, outside the Glide Panel markup.
See the Questions and Answers section later in this user guide for some examples of how to do
this.

.p7GP01_external ul
margin: 0;
padding: 0;
list-style-type: none;

This rule applies to the unordered list that contains the externalized trigger navigation bar. It
turns off indentation and bullet characters.

.p7GP01_external ul li
margin: 0;

This rule applies to the individual list items inside the unordered list that contains the trigger
navigation bar.

Page 23
 Editable Fireworks Images 24

.p7GP01_external ul a
color: #0033FF;

This rule styles the default link state for each link in your externalized trigger navigation bar.

.p7GP01_external ul a:hover
color: #000000;

This rule styles the hover link state for each link in your externalized trigger navigation bar.

.p7GP01_external ul a.down
color: #CC0000;

This rule styles the selected link state for each link in your externalized trigger navigation bar.

EDITABLE FIREWORKS IMAGES

Included in your product download is a fireworks folder that contains editable Fireworks
documents for each Glide Panel Style Theme:

The images
Each Fireworks document contains 2 images. Let's examine the aero.png image, which relates
to the Aero Style Theme.

Page 24
 Editable Fireworks Images 25

There are 2 images contained in this Fireworks document:

p7gp_fadetoaero.jpg
This is a background image assigned to the selected state CSS rule for the trigger links:

.p7GP05 .p7GPtwrapper ul a.down, .p7GP05 .p7GPtwrapper ul a.down:hover

background-color: #FFFFFF;
color: #000000 !important;
border: 0;
background-image: url(img/p7gp_fadetoaero.jpg);
background-repeat: repeat-y;
font-weight: bold;

p7gp_aerobut.jpg
This is a background image assigned to the default state CSS rule for the trigger links:

.p7GP05 .p7GPtwrapper ul a
color: #CCCCCC !important;
text-decoration: none;
display: block;
padding: 6px 10px;
border-bottom: 1px solid #000000;
border-top: 1px solid #535353;
background-image: url(img/p7gp_aerobut.jpg);
background-repeat: repeat-x;
background-color: #010101;

Editing the images

If you edit the images, you simply need to export them from Fireworks to the relevant img folder
inside your p7gp folder. If, for instance, you are using the Aero Style Theme, you would export
your edited images to the following folder:

p7gp\gp5\img

Page 25
 Editable Fireworks Images 26

The Export process

After editing your images, choose File > Export

Browse to the appropriate img folder and ensure that:

 Export is set to Images Only

 HTML set to None
 Slices set to Export Slices
 Current page only is checked
 Then click Save

Fireworks will ask you if you'd like to replace the existing files.

Click OK

Page 26
 Questions and Answers 27

QUESTIONS AND ANSWERS

The following questions and answers should prove helpful as you build your Glide Panel widgets.

Can I change the width of the trigger links?

Sure. It's a simple 2-step process.

In your Glide Panel style sheet, locate the following rule, where X is a number from 1-6 that
corresponds to the number of the Style Theme being used:

.p7GP0X .p7GPtwrapper {
width: 200px;
float: left;
margin: 0;
background-color: #000000;
}

Change the width value from 200px to whatever you want.

In your Glide Panel style sheet, locate the following rule:

.p7GP0X .p7GPcwrapper {
margin: 0 0 0 200px;
background-color: #FFFFFF;
border-left: 1px solid #151515;
}

Change the left margin value (200px by default) to match the new width you set in the .p7GP0X
.p7GPtwrapper rule.

Can I display the trigger links on the right side of my widget?

Yes. You simply need to...

Change the float direction on the .p7GP06 .p7GPtwrapper rule from left to right.

Edit the margin property on the .p7GP06 .p7GPcwrapper rule to change the default value set
margin: 0 0 0 200px; to margin: 0 200px 0 0;

See live example

Page 27
 Questions and Answers 28

Can I Revert back to a default Style Theme CSS file?

Like all PVII products, Glide Panel Magic is designed to be resilient. When you create a widget,
the system writes a folder named p7gp in the folder that contains the page you are working on -
and uses that folder to store style sheets, scripts, and images. This allows for easy and safe
prototyping. If you create a Glide 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 a Glide Panel widget using the same Style Theme and it will use the same
style sheet you edited while working on page1. If you create a Glide Panel widget on a page in
a new folder, the system will create a p7gp folder and populate it with default style sheets,
images, and scripts. This allows you to test and prototype with complete freedom - without
affecting finalized pages in other folders. 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 p7gp/gpX folder (where X is a number from 1-6
corresponding with your Style Theme choice).
2. Open a page in that folder that contains a Glide Panel widget that uses that bad style
sheet. Your Glide Panel widget will appear unstyled. Don't worry, that's expected, given
the circumstances
3. Place your cursor inside the Glide Panel widget
4. Click the Glide 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 .p7GP0X .p7GPcontent rule.

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 .p7GP0X rule so that it becomes #maincontent .p7GP0X. If that does not work, then you can
add an !important notation to the affected properties, like this:

#maincontent .p7GP0X .p7GPcontent {

color: #CCCCCC !important;
Font-size: 11px !important;
}

Page 28
 Questions and Answers 29

Can I move my trigger links to another part of the page?

Yes. Here's how you do it:

 Create your Glide 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.p7GPtwrapper#p7GPt_X> tag:

 Choose Edit > Cut

 Insert your cursor where you would like to move your trigger links.
 Choose Edit > Paste
 Insert your cursor inside the trigger links area
 On the Tag Selector Bar, locate and right-click the <div.p7GPtwrapinner> tag:

 Choose Set Class > p7GP0X_external

 In your Glide Panel Style sheet, locate the .p7GP0X .p7GPcwrapper rule and set the
margin value to 0 0 0 0

Now you can edit the external style rules to customize your external trigger links. These are the
style rules to edit:

 .p7GP04_external
 .p7GP04_external ul
 .p7GP04_external ul li
 .p7GP04_external ul a
 .p7GP04_external ul a:hover
 .p7GP04_external ul a.down

See live example

Page 29
 Questions and Answers 30

Can I make my trigger links display horizontally?

Yes. Here's how you do it:

 Create your Glide 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.p7GPtwrapper#p7GPt_X> tag:

 Choose Edit > Cut (CTRL + X)

 Insert your cursor where you would like to move your trigger links.
 Choose Edit > Paste (CTRL + V)
 Insert your cursor inside the trigger links area
 On the Tag Selector Bar, locate and right-click the <div.p7GPtwrapinner> tag:

 Choose Set Class > p7GP0X_external

 In your Glide Panel style sheet, locate the .p7GP0X .p7GPcwrapper rule and set the
margin value to 0 0 0 0
 In your Glide Panel style sheet, locate the .p7GP04_external ul li rule.
 Edit the margin property to include a right value of 4px and add a display property with
a value of inline:

.p7GP04_external ul li {

margin: 0 4px 0 0;

display: inline;

See live example

Page 30
 Questions and Answers 31

Can I insert a Glide Panel widget inside an Accordion or Tab Panel widget?
Yes. Glide Panel Magic is fully compatible with Accordion Panel Magic and Tab Panel Magic.

Can I insert a PVII Horizontal or Vertical Scroller inside a Glide Panel widget?
Yes. Both Horizontal Scroller Magic and Vertical Scroller Magic are compatible.

How do I change the background color below my trigger link bar?

The background color that renders below your trigger link navigation bar is set by editing the
background-color value of the .p7GP0X .p7GPinnerwrapper rule.

Page 31
 Support and Contact info 32

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.

Page 32
 Support and Contact info 33

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

Page 33