Extension installer files come in 2 formats: MXP and ZXP.
MXPs are supported by Extension Manager versions MX, MX2004, 8, CS3, CS4, CS5, CS5.5 and CS6.
ZXP is supported by versions CS5.5 and higher.
To install this product,
As of CC 2015, Adobe has ceased to support its own Extension Manager. Use the PVII Extension Manager for Adobe Creative Cloud:
Download and Install Instructions
There are 3 ways to access Omni Panels. Choose the one most suitable to your workflow. When you open an interface, the system will detect the appropriate mode (Insert or Modify).
Switch to the PVII category. Omni Panels is the last one (orange) in the screen capture below
Switch to the PVII category. Omni Panels is the last one (orange) in the screen capture below
Choose Insert > Studio VII > Omni Panel Magic by PVII
The Omni Panels interface provides an easy to customize your widget
The OPM UI allows you to easily Add Panels, Delete Panels, or Move them Up or Down.
For each panel you add, you can assign an optional User Class for the Trigger (Tab), the Panel, or both. Enter the name of the class without the leading period (dot). You can also add multiple classes to either element. To do so, enter each class name separated by a space. To add the classes rounded and text-centered, for instance, you would type:
rounded text-centered
The following configurations are available:
In this mode, when viewed in a browser, the system will endeavor to display your tabs in a single horizontal row. If there is not sufficient space to do this, your tabs will automatically convert to a vertical column, displayed to the left of your content panel.
Your tabs will display horizontally, wrapping to multiple lines if needed.
Your tabs will display in a vertical column, displayed to the left of your content panel.
Your tabs will be hidden. Only the content panel will be shown. In this mode you can choose from several types of navigation aids (if you want), such as Previous/Next Arrows, a Toolbar, or a Paginator.
Once you set a configuration, you can choose a Default Panel—the panel active (visible) when the page first loads—and your Tabs Alignment (left, right, or center), plus these additional options:
Set the width for your tabs when in vertical display mode. Choose either a fixed pixel or a percentage value.
When this option is selected, which it is by default, the system will detect when the browser or device viewport is less than 700 pixels wide. When it is, your Omni Panels widget will automatically convert to an accordion presentation. This mode is the most efficient and usable way to view your panels on a phone. If you disable this option, your widget will display horizontal or vertical tabs, depending on your configuration setting. If your page is responsive, we highly recommend that leave this option enabled.
This option, which is disabled by default, will enable swiping support on touch devices. Because of the various navigation options available to Omni Panels, swiping is not necessarily a good choice as it could impede normal up and down swiping of the underlying page.
This option, which is disabled by default, will start with all of the panels in the closed state when the page first loads on smaller devices.
This option is available for all configuration modes and selecting it will cause large previous and next arrows to display, vertically centered, at each end your content panels.
The Theme option allows you to select light or dark arrows.
The following options are available only when the carousel configuration mode has been selected.
Choose whether to display a toolbar or not, and whether to display it above or below your panels.
Configure your toolbar to display either or both of the following controls:
You can also set a light or dark theme for your toolbar
The Paginator is an web-standard UI element comprised of circles, each circle indicating a page or, in this case, a panel. The circles can be clicked or tapped. When in auto-play mode they also serve as an indicator of which panel is current and how many additional panels come before and after.
Panels can be animated or not. The following animation methods are available:
Set the time, in milliseconds, that the animation will span, from beginning to end. The default value of 400 is usually a good choice. Increase the number to slow the animation. Decrease the number to speed the animation up.
Select from the following themes for your Omni Panel widget:
A preview of the theme will appear, based on your selection:
Select the rounded option and the appropriate areas of your Omni Panel widget will be displayed with rounded corners.
You can set up an external link to a page that contains an Omni Panels widget, and have that link open the page and open a specific OPM panel. The URL syntax to use is:
Domain + page + ?opm=1_3 | Try it...
You can also open a page and open multiple panels, using this syntax:
Domain + page + ?opm=1_3&opm=2_2 | Try it...
Omni Panels uses 2 linked style sheets:
1. A Core style sheet (p7OPM-Core.css)
2. A Theme style sheet (p7OPM-01.css - p7OPM-07.css)
The Core CSS file should never be edited. The theme style sheet (p7OPM-01.css - p7OPM-07.css) is where you would edit colors.
When editing CSS, you should avoid using Dreamweaver's CSS panel or CSS Designer, as your CSS can easily become corrupted. Open your theme CSS file in Code View.
When in Code View, you will see that we have added comments, as depicted below. The CSS files are extremely straightforward and colors are quite easy to customize. If it is not apparent to you, then your CSS skill levels are at the beginner level and you should request support. We'll be happy to help you learn!
/*
-----------------------------------
Omni Panel Magic
by Project Seven Development
www.projectseven.com
Style Theme: 01 - Tabbed
-----------------------------------
*/
.p7OPM-01.p7OPM {
padding: 0px;
border: 1px solid #000;
}
/*
**********************************
PRIMARY COLOR RULES
**********************************
*/
.p7OPM-01 .opm-tabs-wrapper {
background-color: #222;
}
.p7OPM-01 .opm-panel-wrapper {
background-color: #FFFFFF;
color: #000000;
}
.p7OPM-01 .opm-tabs-wrapper a {
padding: 12px 20px;
}
.p7OPM-01 .opm-tabs-wrapper a,
.p7OPM-01 .opm-accordion-trig a {
background-color: #222;
color: #999;
}
.p7OPM-01 .opm-tabs-wrapper a:hover,
.p7OPM-01 .opm-accordion-trig a:hover {
color: #DDD;
}
.p7OPM-01 .opm-tabs-wrapper a.open,
.p7OPM-01 .opm-accordion-trig a.open {
color: #000;
background-color: #FFF;
position: relative;
}
/*
**********************************************
Current Tab Marker (character entity)
**********************************************
*/
.p7OPM-01 .opm-tabs-wrapper a.open:before {
content: "\2713";
}
Note: The content value is what determines the character used for a particular theme to mark the current panel. You can change this if you'd like. Use the following site to view codes: special-characters
There will be 2 codes listed below the character. Use the one on the right side and always precede it with a backslash. Style themes 5 and 6 use a more complex CSS method to display an animated ellipsis. It is recommended that you do not edit this unless your CSS skill level is advanced.
If you would like to learn more about these techniques, please request support.
/*
******************************************************
Colors for Accordion Mode (Phone View)
-By default, colors for all modes are the
same. Use the rules below if you would like
to have different colors for accordion mode.
******************************************************
EXCEPTION COLORS FOR ACCORDION (PHONE) MODE
*/
.p7OPM-01 .opm-accordion-trig a {}
.p7OPM-01 .opm-accordion-trig a:hover {}
.p7OPM-01 .opm-accordion-trig a.open {
background-color: #AAA;
}
.p7OPM-01 .opm-accordion-trig a.open {
font-weight: bold;
}
.p7OPM-01 .opm-accordion-trig {
border: none;
border-bottom: 1px solid rgba(0,0,0,0.95);
}
.p7OPM-01 .opm-accordion-trig a {
padding: 12px;
text-decoration: none;
}
/*
*********************************
Panel Content Rules
*********************************
*/
.p7OPM-01 .opm-panel-content {
padding: 20px 36px;
}
/*
********************************
Content Utility Rules
********************************
*/
.opm-panel-content img.scalable-rounded {
border-radius: 5px;
}
The blurb classes use advanced CSS animations. We recommend that you do not edit these rules. You can assign the blurb animation any element inside your panel. We recommend restricting application to headings and small images. To assign, simply select the element and assign the blurb class to it.
.p7OPM-01 .blurb {
-webkit-transition: all ease 1.25s 0s;
transition: all ease 1.25s 0s;
-webkit-transform: translateX(90%);
transform: translateX(90%);
opacity: 0;
letter-spacing: .2em;
}
.p7OPM-01 .current-panel .blurb {
-webkit-transform: translateX(0);
transform: translateX(0);
opacity: 1;
}
Before making a support inquiry, please be certain to have read the documentation that came with your product. Please include your Order Number, Dreamweaver version, as well as your computer operating system type in all support correspondence.
PVII maintains a Web Forum community. Go Direct to the Web Forum
E-Mail: support@projectseven.com
Phone: (336) 374-4611
Phone hours are 9:00am - 5:00pm Eastern Time U.S.