Vibrations User Guide: A PVII Harmony Page Pack

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.

About Vibrations

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.

Installing Vibrations

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.

Dreamweaver CC 2015 (and higher) Extension Installation Information

As of CC 2015, Adobe has ceased to support its own Extension Manager. Use the PVII Extension Manager for Adobe Creative Cloud...

PVII Extension Manager for Adobe CC
( Windows and Mac)

Download and Install Instructions

Accessing Vibrations

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.

Vibrations is made for Dreamweaver Templates

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

To convert your Vibrations page to a 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.

Create an Editable Region for page content

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 -->
</head>

<body class="p7vibes-01">
<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-wrapper">
<div class="hmy-content hmy-left">
<h1>PVII Vibrations: <span class="tagline">Performance Tuning and Engineering</span></h1>
</div>
</div>
</div>
</div>
<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.

Creating a child page based on your new template

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.

Click Create.

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.

Powered by Harmony

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.

Editing locked areas inside your DWT file

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.

Vibrations Asset Folders

Make sure to upload each of the Vibrations asset folders—p7vibes, p7hmy, and p7som—when publishing to your web server.

Editing Tips

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:

The Harmony User Guide

Harmony Tutorials

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:

Harmony Best Practices: The User Class Option

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:

p7vibes/p7VIBES-01.css

The Bonus Contact Form

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

Support Options

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.

Support Forum

PVII maintains a Web Forum community. Go Direct to the Web Forum

E-Mail and Phone Support

E-Mail: support@projectseven.com

Phones: (330) 650-3675 | (336) 374-4611

Phone hours are 9:00am - 5:00pm Eastern Time U.S.