Accordion Panel Magic: A PVII Web Page Component

Accordion Panel Magic by PVII Page 1
Accordion Panel Magic
A P V I I W e b P a g e C o m p o n e n t
PVII Web Page Components enable you to create interactive UI elements on your web page with a
single click. Once your component 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
© 2007 Project Seven Development 1 of 38

ACCORDION PANEL MAGIC ..................................................................................... 1
Install the extension ..................................................................................................................................................4
Before you begin........................................................................................................................................................4
OVERVIEW.................................................................................................................... 4
INSERTING A NEW ACCORDION PANEL COMPONENT ...................................... 5
Managing the User Interface Items ........................................................................................................................6
Mode ........................................................................................................................................................................6
Panel Headings ......................................................................................................................................................6
Panel Heading Command Buttons......................................................................................................................6
Heading Text ..........................................................................................................................................................7
Panel Options .............................................................................................................................................................8
Animation Method List.........................................................................................................................................8
Open Panel Options...............................................................................................................................................9
Toggle Options .....................................................................................................................................................10
Global Options .....................................................................................................................................................11
The Interface Control Buttons...............................................................................................................................12
OK ..........................................................................................................................................................................12
Cancel ....................................................................................................................................................................12
Help .......................................................................................................................................................................12
MODIFYING AN EXISTING ACCORDION PANEL ................................................ 13
REMOVING AN ACCORDION PANEL COMPONENT........................................... 14
What will be Removed ...........................................................................................................................................15
What will Not be Removed....................................................................................................................................15
The Interface Control Buttons...............................................................................................................................15
INCLUDED ACCORDION PANEL MAGIC BEHAVIORS ....................................... 16
Open Panel Behavior ..............................................................................................................................................16
Creating a new Open Panel behavior................................................................................................................17
The Interface Control Buttons ............................................................................................................................17
Modifying an existing Open Panel Behavior ...................................................................................................18

Close Panel Behavior ..............................................................................................................................................18
Creating a new Close Panel behavior................................................................................................................19
Modifying an existing Close Panel behavior....................................................................................................19
Trigger Panel Behavior ...........................................................................................................................................20
Creating a new Trigger Panel behavior ............................................................................................................21
Modifying an existing Trigger Panel behavior ................................................................................................21
CSS GUIDE .................................................................................................................. 23
Unique styles for different components on the same page .............................................................................23
CSS Rules Analysis .................................................................................................................................................24
CSS: Rule-by-Rule .................................................................................................................................................25
IMAGES ....................................................................................................................... 30
The arrows.................................................................................................................................................................30
The backgrounds .....................................................................................................................................................31
REVERTING TO DEFAULT STYLE THEMES ........................................................... 36
PUBLISHING YOUR PAGE ........................................................................................ 36
SUPPORT AND CONTACT INFO ............................................................................. 37
PVII Knowledge Base .............................................................................................................................................37
Newsgroup forum communities........................................................................................................................37
RSS News Feeds ...................................................................................................................................................38
Before you Contact us .........................................................................................................................................38

Install the extension
Look for the extension installer file p7_AP_1_0_3.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.
Before you begin
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 Accordion 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.
Overview
Accordion Panel Magic automates the process of building vertical, gliding accordion‐style user
interface (UI) components that allow you to display multiple panels of content, with access to each
content panel controlled by clicking CSS‐styled heading links. You can insert up to 10 separate
Accordion Panel components per page. Each Accordion Panel component can contain as many
individual headings (and associated content panels) as needed.
The Accordion 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 Accordion
Panel component then the user interface will automatically open in the Modify mode for that
particular component. If your insertion point is not within an existing Accordion Panel component
then the user interface will automatically open in Create mode.

Inserting a New Accordion Panel Component
‐Establish the insertion point for your new Accordion Panel component by clicking in the area of the
page where you would like the component to be created. Typically, this would be inside a DIV or a
table cell.
Note: The interface is sensitive to the insertion point, so if your cursor is currently inside an existing Accordion Panel then
the Modify interface will open instead.
‐Click the Accordion Panel Magic icon in the Common Section of Dreamweaverʹs Insert Bar.
The Accordion Panel Magic User Interface will open in the Create New Accordion Panel mode.
Tip: In addition to using the Insert Bar icon, you can open the Accordion Panel Magic interface by choosing Insert - Studio
VII - Accordion Panel Magic by PVII...
You can create up to 10 separate Accordion Panel components per page.

Managing the User Interface Items
Letʹs review all of the areas, input boxes, lists, and buttons that comprise the Accordion Panel Magic
interface.
Mode
This displays the current operational Mode for the user interface, either Create or Modify. When in
Modify mode, this will also display the ID of the Accordion Panel component being modified.
Panel Headings
This box displays the heading text for each content panel in the Accordion Panel component—one
line for each panel.
Panel Heading Command Buttons
The Panel Headings can be manipulated using the 4 Panel Heading command buttons:
Add
Create a new content panel heading. A New Heading will be created. The new heading will be
placed after the heading that is selected when the button is clicked.

Delete
Remove the currently selected heading.
Up
Move the selected heading up one row. Successive clicks will keep moving the heading up until the
line is at the top of the list.
Down
Move the selected line in the Panel Headings 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 Panel Heading. Enter or
edit the text that you wish to display for this panel heading. The box cannot be left blank.

Panel Options
These settings are applied to the current Accordion Panel component. Other Accordion Panel
components on the same page can have different Panel Options.
Animation Method List
The Accordion 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 ‐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 cause the panel to
come to a gradual stop.
• 2‐Glide ‐Normal ‐ This setting will glide the panels open or closed at a fixed rate of speed.
• 3‐Fade‐In ‐ The setting will gradually fade‐in the newly opened content panel.
Note for Advanced Users: Should you assign a height and an overflow value of auto to your component's content panels
(to insert scrollbars for each panel), the system will detect this and automatically switch from a glide animation to the fade-in.
This is necessary because of CSS rendering bugs with the overflow property in the Firefox web browser. The Component
will otherwise work fine.

Open Panel Options
You can select a specific content panel to be open when the page loads, a random panel, or you can
choose to have all panels closed.
Open Panel on Page Load
You can select which of the content panels will be opened when the page first loads into the browser
by entering the panelʹs number in the box. The panelʹs number represents its order in the Panel
Headings list.
None ‐All Closed
Check this box if you wish to have all panels closed when the page first loads.
Open Random Panel
Check this box if you wish to have the system open a random panel on page load.

Toggle Options
The Toggle Options control how the Accordion Panel system will handle clicks on the Heading Text.
Show Only One Panel at a Time
This setting will assure that only one panel is shown at a time. When a panel heading is clicked, a
new panel will open (if it is not already open) and any other open content panels will be closed.
Successive clicks on the heading text will toggle between the open state and the closed state. All
panels can be closed with this option.
Always Keep One Panel Open ‐ This option is only available if the Show Only One Panel at a Time
option is selected. This setting will prevent all content panels from being closed at the same time.
Clicking the panel heading of the currently opened panel will not close that panel.
Allow Multiple Open Panels
This setting allows all of the panels to be opened or closed individually—without affecting the state
of any other panel. Successive clicks on any of the panel headings will always toggle that panel
between the open and closed states without affecting the other panels.

Global Options
All Accordion Panel components on the same page share the same Style Theme settings. Changing
styles will affect all Accordion Panel components on the page.
Style Theme List
Select the Style Theme to be used for all of the Accordion Panel components on your page. The
Accordion Panel Magic system comes with 6 pre‐defined style themes to choose from. Choose a
theme that best matches your design goals. This will act a starting point from which you can later
make edits to the style sheet to fully customize your Accordion Panelʹs look.
Note: The box to the right of the Style Theme list provides a preview of the selected theme.

The Interface Control Buttons
OK
When youʹve configured your component in the interface, and set your desired options, click the OK
button to build the Accordion Panel component. 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 the
Accordion Panel component will be added to your page at the current insertion point
You can preview in a browser to operate the Accordion Panel and check its functionality.
Cancel
Click the Cancel button to completely abort the current Accordion 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. The Help page can remain
open for easy reference while you continue working with the Accordion Panel Magic interface.

Modifying an Existing Accordion Panel
You can modify any of the existing Accordion Panel components on your page at any time.
‐Click inside the Accordion Panel component that you wish to modify.
‐Click the Accordion Panel Magic icon in the Common Section of Dreamweaverʹs Insert Bar.
The Accordion Panel Magic User Interface will open in the Modify Existing Panel mode.
Make your changes and click OK when done.

Removing an Accordion Panel Component
The Accordion Panel Magic system includes a Remove feature that allows you to quickly remove an
existing Accordion Panel Magic component from your page. This feature allows for easy removal
when simply prototyping pages or when a total redesign is necessary.
‐Open a page that contains one or more Accordion Panel Magic components.
‐Choose Commands > Studio VII > Remove Accordion Panel Magic... to open the Remove interface.
The Remove option will be unavailable (grayed out) in the menu if there is no Accordion Panel Magic component on the
page.
The Remove Accordion Panel Magic interface will open.
The interface will provide a listing of all of the Accordion Panels on your page and will display the
ID of each Accordion Panel.
‐Select the Accordion Panel that you wish to remove from the listing. You can only remove one
Accordion Panel at a time.

What will be removed
The system will completely remove the html markup for the selected Accordion Panel from your
page. If there are other Accordion Panel components on the page they will not be affected.
If, after removal, there are no other Accordion Panel components on your page the system will also
remove the related Accordion Panel asset links from your page:
1. The link to the Accordion Panel Magic JavaScript file will be removed.
2. The link to the Accordion Panel Magic theme style sheet will be removed.
What will not be removed
The system will not remove the p7ap folder, which contains the Accordion Panel‐related assets
(images, JavaScript file, and CSS files). This ensures that you will not lose any assets you may have
modified and any other pages that depend on those modified assets will continue to look and
behave as expected.
Remove
Click the Remove button. The selected Accordion Panel Magic component will be removed from the
page
Cancel
Click the Cancel button to completely abort the current Remove Accordion 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 Accordion Panel Magic interface.

Included Accordion Panel Magic Behaviors
Accordion Panel Magic comes with 3 Dreamweaver Behaviors that you can use for added
functionality:
1. Open Panel
2. Close Panel
3. Trigger Panel
Open Panel Behavior
The Open Panel Behavior allows you to set a link on your page that will open a specific panel on any
Accordion Panel component on your page.
The Open Panel Behavior will emulate a user mouse click on the selected panel:
• If the selected panel is closed, then the behavior will open the panel.
• If the selected panel is open then the behavior will have no action, the panel will remain
open.
Note: The Open Behavior will always function according to the Toggle options set for the Accordion Panel.

Creating a new Open Panel behavior
1. Select (click) a text link or image anywhere on the page to act as the behaviorʹs trigger
2. Open Dreamweaverʹs Behaviors panel (Window :: Behaviors or Shift + F4)
3. Click the plus sign (+) on the Behaviors panel.
4. Choose Studio VII > Accordion Panel > Open Panel to open the interface.
5. Select the panel that you wish to Open.
6. Click OK to apply the behavior.
Note: The content panels are listed by their IDs, which follow a unique naming convention, beginning width "p7ABc"
followed by the Accordion Panel number, an underscore, and then the content panel number. For example, "p7ABc1_1"
would be the first content panel in the first Accordion Panel component on the page, while "p7ABc3_2" would be the second
content panel in the third Accordion Panel component on the page.
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. The Help page can remain
open for easy reference while you continue working with the Accordion Panel Magic interface.

Modifying an existing Open Panel Behavior
1. Select the text link or image that contains an existing Accordion Panel Open behavior.
2. Double‐click the Accordion Panel Magic‐ Open Panel behavior in the Behaviors panel to
open the interface.
3. Select the panel that you wish to Open.
4. Click OK to apply the behavior revision.
Close Panel Behavior
The Close Panel Behavior allows you to set a link on your page that will close a specific content
panel on any Accordion Panel component on your page.
The Close Panel Behavior will emulate a user mouse click on the selected panel:
• If the selected panel is open, then the behavior will close the panel.
• If the selected panel is closed then the behavior will have no action—the panel will remain
closed.
Note: The Close Behavior will always function according to the Toggle options set for the Accordion Panel.

Creating a new close Panel behavior
4. Choose Studio VII > Accordion Panel > Close Panel to open the interface.
5. Select the panel that you wish to Close.
Note: The content panels are listed by their ID, which follow a unique naming convention, beginning width "p7ABc" followed
by the Accordion Panel number, an underscore, and then the content panel number. For example, "p7ABc1_1" would be the
first content panel in the first Accordion Panel component on the page, while "p7ABc3_2" would be the second content panel
in the third Accordion Panel component on the page.
Modifying an existing Close Panel behavior
1. Select the element that contains an existing Accordion Panel Close behavior.
2. Double‐click the Accordion Panel Magic‐ Close Panel behavior in the Behaviors panel to
open the interface.
3. Select the panel that you wish to Close.
4. Click OK to apply the revised behavior.

OK
When you have made your selection, click the OK button to apply the behavior. By default the
Cancel
Help
Click the Help button to close the associated Help File in your browser. This page can remain open
Trigger Panel Behavior
The Trigger Behavior allows you to set a link on your page that will trigger a specific panel on any
Accordion Panel component on your page.
The Trigger Behavior will emulate a user mouse click on the selected panel:
• If the selected panel is open then the behavior will close the panel.
• If the selected panel is closed, then the behavior will open the panel.
Note: The Trigger Behavior will always function according to the Toggle options set for the Accordion Panel.

Creating a new Trigger Panel behavior
4. Choose Studio VII > Accordion Panel > Trigger Panel to open the interface.
5. Select the panel that you wish to trigger.
Note: The content panels are listed by their ID, which follow a unique naming convention, beginning width "p7ABc" followed
by the Accordion Panel number, an underscore, and then the content panel number. For example, "p7ABc1_1" would be the
first content panel in the first Accordion Panel component on the page, while "p7ABc3_2" would be the second content panel
in the third Accordion Panel component on the page.
Modifying an existing Trigger Panel behavior
1. Select the element that contains an existing Accordion Panel Trigger behavior.
2. Double‐click the Accordion 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.

OK
When you have made your selection, click the OK button to apply the behavior. By default the
Cancel
Help
Click the Help button to open the associated Help File in your browser. This page can remain open

CSS Guide
The following section will assist you in customizing the look and feel of your Accordion Panel Magic
components.
Unique styles for different components on the same
page
All Accordion Panel components on your page use the same style sheet. We have, however, built in
a way for you to make custom styles for a specific Accordion Panel on a page that contains multiple
Accordion Panels. When you create an Accordion Panel, the system assigns an ID to the root
element (the outer containing DIV). The first Panel created on a page will begin like this:
<div id=ʺp7ABW1ʺ class=ʺp7ABʺ>
The assigned IDs are incremented for every Panel you create on a page. If your page ultimately
contains 4 Accordion Panels, they will each be assigned contiguous IDs:
• p7ABW1
• p7ABW2
• p7ABW3
• p7ABW4
If you wanted each one of your 4 Panels to have different colored text in their content areas, you
would need to target the .p7ABcontent class separately for each Accordion Panel. To do that, you
would create 4 new style rules, each one prefaced with a different ID:
• #p7ABW1 .p7ABcontent {color: red;}
• #p7ABW2 .p7ABcontent {color: blue;}
• #p7ABW3 .p7ABcontent {color: green;}
• #p7ABW4 .p7ABcontent {color: brown;}
Keep this technique in mind as you read through the rule‐by‐rule analysis that follows. You can use
this method to customize any rule for a specific Accordion Panel when you have more than one
component on a page.

CSS Rules Analysis
The Accordion Panel Magic CSS approach is straightforward and economical. An Accordion Panel
Magic style sheet contains the following 10 style rules:
1. .p7AB
2. .p7ABtrig
3. .p7ABtrig h3, .p7ABtrig h4
4. #p7ABW1 .p7ABtrig a, #p7ABW2 .p7ABtrig a,
#p7ABW3 .p7ABtrig a, #p7ABW4 .p7ABtrig a,
#p7ABW9 .p7ABtrig a, #p7ABW10 .p7ABtrig a
5. #p7ABW1 .p7ABtrig a:hover, #p7ABW2 .p7ABtrig a:hover,
#p7ABW3 .p7ABtrig a:hover, #p7ABW4 .p7ABtrig a:hover,
#p7ABW9 .p7ABtrig a:hover, #p7ABW10 .p7ABtrig a:hover
6. .p7ABtrig a:active, .p7ABtrig a:focus
7. #p7ABW1 .p7ABtrig .p7ABtrig_down, #p7ABW2 .p7ABtrig .p7ABtrig_down,
#p7ABW3 .p7ABtrig .p7ABtrig_down, #p7ABW4 .p7ABtrig .p7ABtrig_down,
#p7ABW9 .p7ABtrig .p7ABtrig_down, #p7ABW10 .p7ABtrig .p7ABtrig_down
8. .p7ABcontent
9. .p7ABcontent h2, .p7ABcontent h3, .p7ABcontent h4
10. .p7ABcontent p
Numbers 6, 7, and 9 are really just 3 separate rules. We use multiple or grouped selectors to name
the rules so that you can easily add up to 10 Accordion Panel components to a single page without
worrying about conflicts with other CSS link rules you might already have on your page.

CSS: Rule-by-Rule
Now letʹs see what each of the 10 CSS rules control by examining an actual Accordion Panel Magic
Style Sheet. You should read this section thoroughly to gain an understanding of how the CSS is
structured before you attempt to edit the CSS. When you are ready to make edits, use
Dreamweaver’s built‐in CSS editing tools or you can also edit the CSS files directly.
All of the Accordion Panel style sheets are similarly structured. For this discussion we’ll use the
Greystone themeʹs CSS file: p7ap_06.css:
.p7AB
background-color: #333333;
padding: 6px;
border-bottom: 1px solid #000000;
border-right: 1px solid #000000;
border-left: 1px solid #666666;
border-top: 1px solid #666666;
font-family: Arial, Helvetica, sans-serif;
This class is assigned to the outer containing DIV of all Accordion components on your page. For the
Greystone theme, weʹve used this DIV to create a matte for the entire component by assigning 6
pixels of padding and a background color. Weʹve also assigned borders on all 4 sides to create a
box. Assigning dark borders to the bottom and right and lighter borders to the left and top sides
creates a raised effect. We also use this selector to set a font‐family for all text in all components.
Note: Because of the way the Accordion glide animation works, it's usually a good idea to assign at least a bottom border to
this element.

.p7ABtrig
margin: 0;
padding: 0;
background-image: url(images/p7ap_greystonebut.jpg);
background-repeat: repeat-x;
This class is assigned to each of the DIVs that contain your heading links (the links you click to
operate the Accordion). You can, for example, use a background image to give your triggers a
distinctive look—which is exactly what we did for the Greystone theme. The background image
looks like this:
It is set to repeat along the x‐axis, left to right, so that it fills the entire width of the heading. By
assigning a background image to this element, we can use the link tag inside the heading to carry a
second background image to display small triangles as navigational aids. We set a background color
that closely matches the shade of the image. This is important because it provides a smooth color
transition while the page and background image are loading.
.p7ABtrig h3, .p7ABtrig h4

margin: 0;
padding: 0;
font-size: 14px;
This rule styles the headings inside the .p7ABtrig DIVs. By default, the system assigns h3 tags. We
included a multiple tag selector in the event you wanted to manually assign a level 4 heading. Use
this rule to assign font‐size for your headings. Modern browsers assign default margins (and
sometimes padding) to headings, so you should always set both properties to zero.

#p7ABW9 .p7ABtrig a, #p7ABW10 .p7ABtrig a
display: block;
text-decoration: none;
padding: 4px 8px 4px 18px;
background-image: url(images/p7ap_east_black.gif);
background-repeat: no-repeat;
background-position: left center;
color: #333333;
font-weight: normal;
border-bottom: 1px solid #7A7A7A;
border-top: 1px solid #B6B6B6;

This rule sets styles for the trigger heading links. We use multiple descendant selectors covering up
to 10 unique Accordion Panel components. Display:block allows the link inside the heading to fill
the entire width of the panel. Text‐decoration set to none turns off default link underlining.
Padding is set using CSS shorthand, which means that we use 4 values separated by single spaces.
The 4 values relate to all 4 sides of the box and are always expressed in clockwise order starting with
the top. Top padding is set to 4px; right padding to 8px; bottom padding is 4px; and left padding is
18px. Left padding is set to a high enough value to leave space for a triangle graphic set as a non‐
repeating background image positioned at the left edge of the link and vertically centered. The
image ʺ ʺ is transparent so it renders on top of the background image that was assigned to the
heading DIV.
Color is set to dark gray #3333333. Font‐weight is set to normal because headings will otherwise be
rendered as bold—the default in all modern browsers. Top and bottom borders are set. The bottom
border is darker than the top border, which creates a grooved effect where the panel headings meet.


#p7ABW9 .p7ABtrig a:hover, #p7ABW10 .p7ABtrig a:hover
color: #EEEEEE;
This multiple selector defines the hover state for your trigger links. We set the text color to a very
light gray.
.p7ABtrig a:active, .p7ABtrig a:focus

outline: 1px dotted #ccc;
This rule defines the trigger links when they have focus. Setting outline values that contrast subtly
with your page will temper the typical harshness of your browserʹs default focus rectangle while not
compromising accessibility. The outline property is supported by modern browsers. Older browsers
will simply ignore it.

#p7ABW9 .p7ABtrig .p7ABtrig_down, #p7ABW10 .p7ABtrig .p7ABtrig_down
color: #DDDDDD;
font-weight: bold;
letter-spacing: 0.1em;
background-image: url(images/p7ap_south_light_gray.gif);
background-position: left center;
border-color: #333333;
This rule sets styles for the trigger links while they are in the selected (down) state. We use a
grouped descendant selector covering up to 10 unique Accordion Panel components. Background‐
color is set to charcoal gray. Text Color is set to light gray, font‐weight is bold, and letter‐spacing
set to .1em to spread the link a bit wider than default. Background‐image is set to a non‐repeating
light gray triangle positioned at the left edge of the link and vertically centered. It replaces the black
triangle that is assigned to the default link. Border‐color is set to match the background‐color.

.p7ABcontent
padding: 20px;
font-size: 12px;
line-height: 1.5em;
color: #333333;
background-color: #FFFFFF;
background-image: url(images/p7ap_light_gray_bevel.jpg);
This rule sets styles for the content DIVs inside every Accordion Panel component on your page.
You can set styles for text and also for the entire box by assigning padding, backgrounds, borders,
and margins. We set padding to 20px (a single padding value applies to all 4 sides). Font‐size is set
to 12px. Line‐height is set to 1.5em, a proportional measure that will scale well if users increase text
size in their browsers. Text color is set to charcoal gray. Background‐color is set to white. A
background‐image is set to tile left to right along the x‐axis. The image creates a subtle bevel across
the top of the content box:
.p7ABcontent h2, .p7ABcontent h3,

.p7ABcontent h4
font-size: 14px;
color: #333333;
margin: 0;
line-height: normal;
letter-spacing: 0.1em;
This descendant class selector applies to all h2, h3, and h4 elements inside the panel content DIV.
.p7ABcontent p
margin: 6px 0 12px 0;
This descendant class selector applies to all paragraphs inside the panel content DIV.

Images
This section lists all the images used in the 6 Style Themes. All images can be found inside the
p7ap/images
The arrows
The arrow images are assigned to the heading link style rules. The arrows are transparent. Weʹve
include 10 images in various colors in both right pointing (east) and down pointing (south)
orientations.
1. p7ap_east_black.gif
2. p7ap_east_light_gray.gif
3. p7ap_east_med_gray.gif
4. p7ap_east_red.gif
5. p7ap_east_white.gif
6. p7ap_south_black.gif
7. p7ap_south_light_gray.gif
8. p7ap_south_med_gray.gif
9. p7ap_south_red.gif
10. p7ap_south_white.gif
There is no need to edit these images.

The backgrounds
In addition to the arrows, all of the Themes employ at least one background image assigned to the
heading links, the down state links, or the content panel. Here is a listing of all the images used:
p7ap_yang.gif
Relevant CSS rule in p7ap_05.css:

#p7ABW9 .p7ABtrig .p7ABtrig_down, #p7ABW10 .p7ABtrig .p7ABtrig_down {
color: #FFFFFF;
letter-spacing: .1em;
background-image: url(images/p7ap_yang.gif);
background-position: right bottom;
}
p7ap_bluestonebut.jpg
Relevant CSS rule in p7ap_04.css:
.p7ABtrig {
margin: 0;
padding: 0;
background-image: url(images/p7ap_bluestonebut.jpg);
background-color: #62A0C9;
}

p7ap_citrus_grade.jpg
Relevant CSS rule in: p7ap_03.css:
.p7ABcontent {
padding: 20px;
font-size: 12px;
line-height: 1.5em;
color: #333333;
background-image: url(images/p7ap_citrus_grade.jpg);
}

p7ap_greystonebut.jpg
.p7ABtrig {
margin: 0;
padding: 0;
background-image: url(images/p7ap_greystonebut.jpg);
}

p7ap_light_gray_bevel.jpg
Relevant CSS rule in:
• p7ap_01.css:
• p7ap_04.css:
• p7ap_06.css:
.p7ABcontent {
padding: 20px;
font-size: 12px;
line-height: 1.5em;
color: #333333;
background-image: url(images/p7ap_light_gray_bevel.jpg);
}
p7ap_rubybut.jpg
.p7ABtrig {
margin: 0;
padding: 0;
background-image: url(images/p7ap_rubybut.jpg);
}

If you would like to edit these images, simply open them in the image editor of your choice and use
bitmap editing tools to change colors, hues, or saturation.

If you open p7ap_rubybut.jpg in Fireworks, for example, select the graphic and click the + symbol
above the Filters list.
Choose Adjust Color :: Hue/Saturation
Experiment with the modes and sliders to get the look you want. In the above example, we set mode
to Colorize, enabled Preview, and set Hue to 40; Saturation to 72; and Lightness to 0.
Click OK when done and save the file.

Fireworks might prompt you to save a PNG.
Click Save JPEG.
Now youʹve updated your web image. When you go to close the Fireworks file, you will be given
another chance to save an editable Fireworks PNG. If you save a PNG, you will have a version of
the file in which the filter effect you applied is editable for further tweaking. Remember where you
save it for future reference.
Unless you are quite advanced, we suggest that you do not change the size of these images. When
you are finished editing, save the image file.
If you change the color of one of the heading backgrounds be sure to edit the CSS file to adjust
border and background colors to match.

Reverting to default Style Themes
Like all PVII products, Accordion Panel Magic is designed to be resilient. When you create a
component, the system writes a folder named p7ap 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 an Accordion Panel component on page1.htm, in a folder named
tutorials, and edit the CSS for that component, your changes are restricted to that folder. Make
another page in that folder and create an Accordion Panel component using the same Style Theme
and it will use the same style sheet you edited while working on page1. If you create an Accordion
Panel component on a page in a new folder, the system will create a new p7ap folder, inside that
folder, populated 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 p7ap folder
2. Open a page in that folder that contains an Accordion Panel component that uses that bad
style sheet. Tab Accordion Panel component will appear unstyled. Donʹt worry, thatʹs
expected, given the circumstances
3. Place your cursor inside the Accordion Panel component
4. Click the APM icon to open the APM UI in Modify Mode
5. Make no changes in the UI ‐ simply click the OK button
6. The APM 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.
Publishing your page
When you are ready to publish your page, upload the page(s) that contain your Accordion Panel
components and also upload the APM assets folder: p7ap

Support and Contact info
PVII quality does not end with your purchase ‐ it continues with the best customer support in the
business.
PVII Knowledge Base
The PVII Knowledge Base is an online PVII application allowing you to access dozens of Tech Notes,
tips, and techniques relating to our products, as well as to general web development issues.
Open the Knowledge Base | View the 10 Most Recent Additions
Newsgroup forum communities
The Project VII Newsgroup community is our primary support vehicle and is available 24 hours a
day. Choose from the following newsgroups:
1. The PVII Webdev Newsgroup
2. The PVII Dreamweaver Newsgroup
3. The PVII Fireworks Newsgroup
4. The PVII CSS Newsgroup
Note: If you have trouble linking directly to news servers, use your default newsreader's program options to set up a new
account and point it at the following server:
forums.projectseven.com
Setting up a new newsgroup account in Outlook Express
Setting up a new newsgroup account in Mozilla Thunderbird
Setting up a new newsgroup account in Entourage
If you have another newsgroup‐capable program that you are using, please see its documentation to
learn how to add a new newsgroup account.
Note: PVII newsgroups are private and have nothing to do with Usenet feeds that may be provided by your ISP. That is, you
will not find our newsgroups in a list of newsgroups distributed by your internet service provider. You must set up our news
server as a new account.

RSS News Feeds
Keep up with the latest news the minute itʹs released by subscribing to our RSS news feed. If you are
not sure how to subscribe, please check this page:
PVII RSS Info
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.

Accordion Panel Magic: A PVII Web Page Component

Загружено:

Сведения о документе

Оригинальное название

Авторское право

Доступные форматы

Поделиться этим документом

Поделиться или встроить документ

Параметры публикации

Этот документ был вам полезен?

Это неприемлемый материал?

Авторское право:

Доступные форматы

Accordion Panel Magic: A PVII Web Page Component

Загружено:

Авторское право:

Доступные форматы

Accordion Panel Magic by PVII Page 1

© 2007 Project Seven Development 1 of 38

© 2007 Project Seven Development 2 of 38

© 2007 Project Seven Development 3 of 38

© 2007 Project Seven Development 4 of 38

© 2007 Project Seven Development 5 of 38

© 2007 Project Seven Development 6 of 38

© 2007 Project Seven Development 7 of 38

© 2007 Project Seven Development 8 of 38

© 2007 Project Seven Development 9 of 38

© 2007 Project Seven Development 10 of 38

© 2007 Project Seven Development 11 of 38

© 2007 Project Seven Development 12 of 38

© 2007 Project Seven Development 13 of 38

© 2007 Project Seven Development 14 of 38

© 2007 Project Seven Development 15 of 38

© 2007 Project Seven Development 16 of 38

© 2007 Project Seven Development 17 of 38

© 2007 Project Seven Development 18 of 38

© 2007 Project Seven Development 19 of 38

© 2007 Project Seven Development 20 of 38

© 2007 Project Seven Development 21 of 38

© 2007 Project Seven Development 22 of 38

© 2007 Project Seven Development 23 of 38

© 2007 Project Seven Development 24 of 38

© 2007 Project Seven Development 25 of 38

.p7ABtrig h3, .p7ABtrig h4

#p7ABW1 .p7ABtrig a, #p7ABW2 .p7ABtrig a,

© 2007 Project Seven Development 26 of 38

© 2007 Project Seven Development 27 of 38

#p7ABW1 .p7ABtrig a:hover, #p7ABW2 .p7ABtrig a:hover,

.p7ABtrig a:active, .p7ABtrig a:focus

#p7ABW1 .p7ABtrig .p7ABtrig_down, #p7ABW2 .p7ABtrig .p7ABtrig_down,

© 2007 Project Seven Development 28 of 38

.p7ABcontent h2, .p7ABcontent h3,

© 2007 Project Seven Development 29 of 38

© 2007 Project Seven Development 30 of 38

#p7ABW1 .p7ABtrig .p7ABtrig_down, #p7ABW2 .p7ABtrig .p7ABtrig_down,

© 2007 Project Seven Development 31 of 38

© 2007 Project Seven Development 32 of 38

© 2007 Project Seven Development 33 of 38

© 2007 Project Seven Development 34 of 38

© 2007 Project Seven Development 35 of 38

© 2007 Project Seven Development 36 of 38

© 2007 Project Seven Development 37 of 38

© 2007 Project Seven Development 38 of 38

Вам также может понравиться