Installing Harmony

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

Overview:

One Design: All Devices: Perfect Harmony"

PVII Harmony is a responsive page layout tool that leverages the full power of the CSS Flexbox specification. Months of R&D have yielded a tool that gives you access to all of Flexbox's power in a simple to use automated interface running inside Dreamweaver, without having to worry about browser quirks. Harmony is a definitive solution—a bridge to the future of web page design, a new way forward that you can use today, on new or existing pages.

Harmony works seamlessly with Dreamweaver templates (dwt files).

How it works

Harmony is a flexbox grid designed and coded for laying out web pages. You can start with a blank page or add one or more Harmony grids to an existing page to augment its design.

Row and Columns

The Harmony interface allows you to set a width-basis for each column in your construct. Width-basis is what the Flexbox specification uses to allocate width.

Note: The actual CSS property is called flex-basis. We use width-basis only in the Harmony interface... for clarity.

Consider a Harmony instance where you have 3 columns defined. You set flex-basis to 25% for the first column, 50% for the second, and 25% for the third. The total equals 100%. Simple, right? This is what you get:

Width-basis: 25%

Lorem ipsum dolor sit amet.

Width-basis: 50%

Note: This Harmony instance uses the Box-Separation and rounded corners options. Mei ex quodsi inciderint, quo ad quas deleniti definitionem, vis no wisi graecis offendit.

Width-basis: 25%

Lorem ipsum dolor sit amet, ne sea vocent.

Constraint-Free Design

But Flexbox does not work like traditional floated layouts. Your columns do not have to total 100%. The Flexbox spec works with algorithms that allocate width logically. The browser looks at the width-basis you set for each column, keeping a sub-total as it loops through all of the columns in your Harmony container. If the aggregate width of all your columns exceeds 100%, a new row is created, and this process continues until all of your columns are displayed. Consider this example, where we change the width-basis of the third column to 100%:

Width-basis: 25%

Lorem ipsum dolor sit amet.

Width-basis: 50%

Note: This Harmony instance uses the Box-Separation and rounded corners options. Mei ex quodsi inciderint, quo ad quas deleniti definitionem, vis no wisi graecis offendit.

Width-basis: 100%

Lorem ipsum dolor sit amet, ne sea vocent.

The three columns above have a combined width-basis of 175%. Since that total is greater than 100%, the third column is displayed on a second row. In a floated layout, this would cause problems, because the first two columns would fill only 75% of the top row. Flexbox, however, works differently. It scales the first two columns, proportionally, until they fill the entire row, ensuring perfect symmetry... perfect design harmony.

Algorithmic Wonders

So, rows are built using algorithms that proportionally scale columns according to their assigned width-basis, until a row is filled. If that's true, we can do another version of the previous example, and instead of setting the third column to 100%, we can set it to 26%—pushing the aggregate width to one single percentage point over 100—without changing the rendered result:

Width-basis: 25%

Lorem ipsum dolor sit amet.

Width-basis: 50%

Note: This Harmony instance uses the Box-Separation and rounded corners options. Mei ex quodsi inciderint, quo ad quas deleniti definitionem, vis no wisi graecis offendit.

Width-basis: 26%

Lorem ipsum dolor sit amet, ne sea vocent.

Amazing, isn't it?

Accessing the Harmony Interface (UI)

The Harmony interface is your command center. It's simple, straightforward layout will allow you to craft cutting edge web pages, or parts of web pages, in seconds.

To access the UI, place your cursor on your page where you want to create your Harmony grid. To open the UI, locate and click the Harmony icon your Insert Bar or Panel inside Dreamweaver:

Insert Bar

Choose the PVII tab (or the PVII category if your insert bar is configured with a drop-down menu)

The Harmony icon is the last one in the screen capture above.

Insert Panel

Choose the PVII category from the drop-down list at the top of your Insert Panel.

The Harmony icon is the last one in the screen capture above.

Note: If you can't find your Insert Bar or Panel, you probably hid it at one point. To access it, choose Window > Insert from the Window menu along the top of Dreamweaver.

The Harmony UI will launch in the appropriate mode. If your cursor was positioned in a blank area of the page, and outside any other Harmony instance, the UI will open in Create New Harmony Grid mode.

If your cursor is positioned inside an existing Harmony Grid, you will see an intermediate UI that asks if you'd like to Modify an Existing HMY Grid or Create a Nested HMY Grid.

The Help Button

The Help button in any of the Harmony UI screens will open this page online, assuming you are connected to the internet.

Interface Options and Settings

Let's go over the UI, and how all of the features work. To do that, let's work with a screen capture of the UI in Modify mode:

The Column List shows each of the columns in your Harmony grid. Above the list is a row of command buttons, allowing you to Add, Delete, or move your columns Up and Down.

Column Options

These options apply to the column currently selected in the Column List.

Note: once you enter one or option for a column, subsequent columns will inherit those options. This is a convenience feature and you are free to select different options and settings for each column individually.

Column Width Basis

Width basis can be entered as a percent or in pixels.

Harmony layouts do not work like traditional floated layouts. Your columns do not have to total 100%. The Flexbox spec works with algorithms that allocate width logically. The browser looks at the width-basis you set for each column, keeping a sub-total as it loops through all of the columns in your Harmony grid. If the aggregate width of all your columns exceeds 100%, a new row is created, and this process continues until all of your columns are displayed.

Tip: After entering a width basis for your column, you can click the All button to assign that width basis to all columns in your Column List.

No Grow

Enabling this option (it is disabled by default) sets the flex-grow property to zero (no grow) for the selected column.

Column: No Grow

This column will remain 200 pixels wide until all columns linearize at smartphone width.

Column 2

This column has a width basis of 25%. The No Grow option is not enabled.

The sidebar will remain at 200px wide until all columns linearize.

Section User Class

You can assign an optional User Class to the hmy-section DIV that surrounds the currently selected column. You can also add multiple classes . To do so, enter each class name separated by a space. User classes are one of the most powerful features in Harmony. It allows you full freedom to customize individual sections beyond the options in the UI. Stylistically, there is absolutely nothing you cannot do.

Content Align

Align your column content left, right, or center.

Vertical Center

Vertically center your content.

Note: Vertical Center will only be apparent when adjacent columns are taller.

No Padding

Selecting this option will remove all padding inside your column. A typical use for this option is where your column will contain a navigation bar or an Accordion that will look best if it fills the column box in its entirety.

Borders

Configure your column(s) with borders.

Tip: Border color is determined by the text color set for the column,

Rounded

Add rounded corners to your column.

Tip: Rounded corners should only be added to a column when that column's width basis is set to 100% or if the Box Separation option is set for your grid (discussed below).

Color Scheme

For your convenience, we've included 20 color schemes that can be assigned to your columns or to the outer grid. The color choices are listed below:

None

Gray

Black

White

Green

Mint

Blue

Red

Skyblue

Silver

Purple

Lavender

Beige

Wine

Forest

Mist

Rust

Silverblue

Gold

Orange

The above color chart, as well as all other examples on this page, are actual Harmony grids, made with the Harmony interface.

How About Transparency?

If you want your color scheme's background to be semi-transparent, simply add a user class of transparent to the color you assigned the color to (or the outer grid if you've assigned the color there).

Content User Class

You can assign an optional User Class to the selected column. You can also add multiple classes . To do so, enter each class name separated by a space. User classes are one of the most powerful features in Harmony. It allows you full freedom to customize individual columns beyond the options in the UI. Stylistically, there is absolutely nothing you cannot do. For instance, let's say you have a two column layout and you want one column to have larger text than your other columns, and you want to assign a background color that is not included in our color scheme option. Here's what you'd do...

In your Harmony style sheet, create a blank line and type in the following CSS class, surrounded by a comment block identifying this section of your style sheet as being devoted to user classes:

/*
******************
My User Classes
******************
*/
.my-special-column {
font-size: 125%;
background-color: #F69;
}

Here's what the UI would look like:

Note: User Class names must never contain the word harmony or the acronym hmy.

Here's what it looks like when my-special-column is assigned to your column:

Default Column

Lorem ipsum dolor sit amet, ne sea vocent scripta abhorreant, facilisi explicari mel ne, ut quo vide ridens. Mei ex quodsi inciderint, quo ad quas deleniti definitionem, vis no wisi graecis offendit. Ius ut everti detraxit expetenda, meis civibus consectetuer ea usu. Ad qui option facilisis consequuntur, pro omnis aliquip vulputate te.

My Special Column

Font-size 125%. Background-color #F69 (pink). This column is also set to vertical center.

Grid Options

These options apply to the entire Harmony Grid.

Borders

Assign borders to any or all sides of the outer grid.

Rounded

Round the corners of the outer grid.

Box Separation

This option is unique in that it is assigned to the outer grid, while affecting each of the columns inside the grid. Each column in your grid will have space around it on all sides. Print designers would call this a gutter.

Note: The color chart above uses the Box Separation option.

Max Width

If you set a max width on your grid, the grid will center horizontally on your page and never exceed the max width setting.

Color Scheme

The same color schemes available for assignment on your columns can also be assigned to the outer grid.

Grid User Class

You can assign an optional User Class to the entire grid. You can also add multiple classes . To do so, enter each class name separated by a space. User classes are one of the most powerful features in Harmony. It allows you full freedom to customize your grid beyond the options in the UI. Stylistically, there is absolutely nothing you cannot do. For instance, let's say you want to display a matting around your columns. Here's what you'd do:

Let's add a new class (grid-matte) to the one created in the Content User Class section before:

/*
******************
My User Classes
******************
*/
.my-special-column {
font-size: 125%;
background-color: #F69;
}
. grid-matte {
padding: 10px;
}

Here's how the UI looks:

Here's how the actual grid looks:

Column 1

Lorem ipsum dolor sit amet, ne sea vocent scripta abhorreant.

Column 2

Lorem ipsum dolor sit amet, ne sea vocent scripta abhorreant, facilisi explicari mel ne, ut quo vide ridens. Mei ex quodsi inciderint, quo ad quas deleniti definitionem.

Note: User Class names must never contain the word harmony or the acronym hmy.

Harmony vs. Layout Builder Magic

The obvious difference is that LBM uses CSS floats to render rows and columns. Harmony uses the newer CSS Flexbox specification, which is a more modern technique, and one that is now ready for widespread use. Harmony is an easier tool to use, but there is absolutely no reason to change existing LBM pages. In fact, you can use Harmony inside LBM pages to create quick and elaborate grids. Going forward, you should consider Harmony for new pages for its ease of use, simplicity, and the natural flexibility attributes inherent in the Flexbox specification.

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.

Menu