Vibrations is a PVII Page Pack that installs inside Dreamweaver, allowing you to instantly create one of six professionally designed, responsive web pages. Each page is complete and ready to go. Simply add your content and images and you are ready to publish.
Vibrations pages are structured using our Harmony page layout tool and contain fully functional Slide Out Menus. If you enjoy coding yourself, Vibrations may be all you need. If, however, you would prefer to have the ability to edit and customize your page structure and your navigation menus, then please read on. If you do not own Harmony or Slide-Out Menu Builder, please view the price bundling options listed on the Vibrations home page.
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. Version CC and higher have dropped support for the MXP format. To continue to support all Adobe customers, regardless of version, we include both the classic MXP and the new ZXP versions.
As of CC 2015, Adobe has ceased to support its own Extension Manager. Use the PVII Extension Manager for Adobe Creative Cloud...
To open the interface, choose File > New PVII Page Pack
The Interface will open
Simple choose a Page Layout and click the Create button. A Save dialog will open.
Give your page a name and save it within your defined Dreamweaver site.
After you create your Vibrations page, there is an important decision you should make. If you wish to manage site-wide repeating content, such as mastheads, logos, navigation menus, and footers, you need to use some type of site-wide management technique. The most popular method for Dreamweaver users is DWT (Dreamweaver Template).
After creating your Vibrations page, edit the content that will be common to all the pages in your site. Finalize your logo and masthead, your menu, and your footer. Now you're ready to make a Template.
Choose File > Save As Template
Follow the onscreen prompts to save your new template.
Leave the DWT file open, as you'll be doing some work in it.
Switch to Code View in your DWT file.
Until you create an editable content region, all content on your page will be locked. You want your logo to be locked, and your menu, and your footer. But you will certainly need to have your page's main content areas be editable so that you can add relevant content to each of the pages in your site.
Here is base code for a Vibrations page after being converted to a Template:
<!-- TemplateBeginEditable name="head" -->
<!-- TemplateEndEditable -->
<div id="p7HMY_1" class="p7HMY hmy-noscript masthead" data-hmy-max-width="100,%">
<div class="hmy-section" data-hmy-basis="100,%,1">
<div class="hmy-content hmy-left">
<h1>PVII Vibrations: <span class="tagline">Performance Tuning and Engineering</span></h1>
<div id="p7HMY_2" class="p7HMY hmy-box-separation hmy-noscript" data-hmy-max-width="100,%">
<div class="hmy-section" data-hmy-basis="25,%,1">
<div class="hmy-content-wrapper hmy-vertical-center hmy-content-rounded hmy-color-content-rust">
<div class="hmy-content hmy-left">
<h2><a href="#" class="text-link">Current Offers...</a></h2>
<p>Explore new systems, special bundles, and price savings.</p>
In each Vibrations layout, there are 3 separate Harmony instances. Each instance's root DIV is assigned an ID: p7HMY_1 (masthead), p7HMY_2 (content), and p7HMY_3 (footer).
The content area is always going to be p7HMY_2, and that's the DIV we want to wrap inside of an editable region.
Place your cursor inside the p7HMY_2 DIV and click the associated tag on the Tag Selector bar that runs along the bottom of your Code window (just above the property inspector). The entire code for p7HMY_2 will highlight.
With the p7HMY_2 code still highlighted, choose Insert > Template Objects > Editable Region
Enter a name and click OK. Your Template is now ready for saving.
Save your DWT file and close it.
Now that your template is saved, you can easily create one or more child pages. To do so...
Choose File > New
The New Document Window will open.
The generated page will open. You should save it in your defined site before proceeding.
Note: Make sure you save the page within your defined Dreamweaver site, before beginning to edit it.
As you move your cursor around the page, you'll notice that only the content inside the second Harmony instance is editable.
Use the methods described above and a single Dreamweaver template can drive your entire site—a site where each and every child page can have a completely different structure and look. All you need to do is place your cursor anywhere inside the editable region and open the Harmony interface, where you can then delete columns, add columns, change their width, and so very much more.
You will not be able to edit or delete any content inside the masthead, footer, or menu. Those areas can only be edited inside your DWT file. Simply open your DWT file, make your changes (a revised logo, a new menu item to access a new page, a new year for your footer's copyright notice). When you save the DWT file, Dreamweaver will ask if you want to update pages based on the template.
Make sure to upload each of the Vibrations asset folders—p7vibes, p7hmy, and p7som—when publishing to your web server.
If you are adept at coding HTML and CSS, you will find it quite easy to customize your Vibrations page. if you own Harmony, of course, the process will be significantly easier, and fully automated. For the details on how to work with Harmony pages, please refer to:
We make liberal use of one of Harmony's most powerful features: User Classes. If you own Harmony, you will be able to see the user classes assigned to various items in the UI...
The Content User Class box for the selected column sets two classes: max-960 transparent
Tip: To assign multiple class names, simple separate each one with a single space. See also:
Once you've ascertained the class names from the Harmony UI (or from the page markup) you can then open the Vibrations CSS file and use the Find feature to locate them. The Vibrations CSS file is located at this path:
We've included a contact form page, utilizing advanced HTML5 and CSS3 styling and client-side validation. The markup and CSS is easy to follow and you can use our CSS to style your own forms if you want. Our bonus contact form can be driven by PHP, .NET, ASP, or Cold Fusion. If you are not familiar with those languages, we would suggest contracting with someone who is. If you copy a free form script from the web, please make sure it is modern, standards based, and mobile friendly. If you have questions regarding the CSS for our form, please do not hesitate to reach out to us, using the contact information in the next section.
Note: The Vibrations CSS file is located at this path: p7vibes/p7forms.css
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
Phone hours are 9:00am - 5:00pm Eastern Time U.S.