Scroll To Top
Scroll To Top

Enter a query to search our site. Note that you can use "*" and "?" as wildcards. Enclosing more than one word in double quotes ("CSS Layout") will search for the exact phrase.

Buy Now ($95) | Synergy Home | DMM Guide | DMM Style Guide

PVII Synergy User GuideThe Ultimate Responsive and Adaptive CSS Templates for Dreamweaver

When your client calls at 4:00pm and says "Hey dude, I really like that last design proposal, but my marketing guys say it has to look perfect on the boss's iPhone and his son's Kindle, and they need it ready for the staff meeting tomorrow." Instead of a panic attack followed by hours of coding, you can use PVII Synergy to create that perfect layout in no time. Just add your content and spend a quiet evening with the family! Affinity comes with Drop Menu Magic (DMM), a responsive menu system for Dreamweaver, and an awesome automated CSS Row and Column Creator that allows you to create just the right look for your project's pages.

Install the extensions

Synergy comes with two extensions and each must be installed:

  1. p7_Synergy_104.mxp /.zxp
  2. p7_DMM_124.mxp /.zxp

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

For version CS5.5 and older:

Open your Extension Manager and choose the Install command located in the header or in the file menu. Browse to the installer files p7_Synergy_104.mxp and p7_DMM_124.mxp in the root of the zip archive you downloaded and install them.

For Creative Cloud versions:

Open your CC Extension Manager and choose the Install command located in the header or in the file menu. Browse to the installer files p7_Synergy_104.zxp and p7_DMM_124.zxp in the root of the zip archive you downloaded and install them.

Tip: If you get an error message when installing, it probably means that you do not have the correct version of Extension Manager installed. Adobe does not automate this process for you anymore. You need to log into the Adobe Cloud and then download and install the Extension Manager that matches your version of Dreamweaver.

Work in a defined Dreamweaver site

Before you begin, make sure you are working inside a defined Dreamweaver web site. This is necessary so that Dreamweaver knows how to link required assets. If you are new to Dreamweaver or need to learn how to define a web site, follow these simple steps:

Choose Site > New Site

Specify local site location

The Site category of the Site Setup dialog box is the only one you need to fill out to begin working on your Dreamweaver site. This category lets you specify the local folder where you’ll store all of your site files. When you’re ready, you can fill out the other categories in the Site Setup dialog box, including the Servers category, where you can specify a remote folder on your remote server.

Site Name

The name that appears in the Files panel and in the Manage Sites dialog box; it does not appear in the browser.

Local Site Folder

The name of the folder on your local disk where you store site files, templates, and library items. Create a folder on your hard disk or click the folder icon to browse to the folder. When Dreamweaver resolves site root-relative links, it does so relative to this folder.

Assets Folder

When you create a page, the Synergy system creates two asset folders in your defined site called p7synergy and p7dmm. When you publish your page, make sure you upload those folders to your server.

Creating a Synergy Page

-Choose File > New PVII PagePack > Synergy from the main Dreamweaver menu.

Note: You do not need to have a page open in Dreamweaver. The Page Pack system will create and open the new page automatically.

The Page Pack Interface will open.

The PagePack Interface

Page Layout

The left panel lists all of the page designs or layout options that are available for the this Page Pack. The Page Pack is shipped with a variety of layout approaches, based on a central theme, to allow you to pick a layout that best approximates your needs.

-Select a Page Design from the list in the left panel.

Preview

The right panel provides a preview of the selected Page Design. This Preview will change whenever you select a different Page Design.

Create the New Page

-Click the Create button to create your Page Pack page.

The Save As dialog box will open.

The Save As Dialog

Use the navigation controls to navigate to an existing folder—or create a new folder—in which to save your page. All of the related page assets (images, CSS files, and scripts) will also be created in this folder.

-Enter a file name for the new page. In this example we entered my-page.htm as the file name.

Note: If you do not enter a file extension, the system will automatically assign the default extension defined by your Dreamweaver preferences, such as .htm, .html, .php, or .cfm. You can also type in a valid Dreamweaver supported file extension yourself.

-Click the Save button to create the new page.

The Finished New Page

A new Page Pack page will be created using the file name that you entered. The page will be open in Dreamweaver and ready for you to edit.

The Page Assets

The system will have created several sub-folders that contain page assets.

The Page Assets

Note: Your actual file listing might be different depending on the Page Design you chose.

With just a few clicks you created a beautiful and functional new page.

Drop Menu Magic

Synergy comes with a free and powerful menu-building tool called Drop Menu Magic (DMM). When you create a page, there will be a menu inserted for you. You can open the DMM interface at any time to edit or reset options for your menu. To do so, place your cursor inside the menu and click the DMM icon the Dreamweaver Insert Bar or Panel.

See DMM User Guide | See DMM CSS Guide

DMM UI and Help

To access the complete DMM Help File, click the Help button in the DMM UI:

DMM User Guide

There is a dedicated DMM User Guide available online. Go there now...

DMM CSS Style Guide

There is a dedicated DMM CSS Style Guide available online. Go there now...

PVII Synergy Row/Column Creator

Synergy Row-Column Creator is an automated Dreamweaver widget that automates the process of creating extra rows and columns in your Synergy page.

Inserting a New Row-Column structure

-Click at the area of the page where you wish to crate a new row construct.

-Click the Synergy Row-Column Creator icon Icon in the PVII Section of Dreamweaver's Insert Bar/Insert Panel.

The Synergy Row-Column Creator interface will open.

The Create Interface

You can create as many row constructs as you like.

Managing the User Interface Items

The Row/Column Creator is a very powerful tool, enabling you to create multi-column rows in your page.

Mode

Displays the current operational Mode for the user interface.

Columns

This box displays a line for each column in the row structure. The text represents the width option chosen for that column. You can add, delete or move colums at any time during your session in the UI. Select the line you wish to act on. When adding new columns be sure that the width total of all of the rows adds up to 100%.

Add Column

Use this button to add a column. A new line will be created with the currently selected width option. The new line will be created immediately after the currently selected line.

Delete Column

Use this button to remove the currently selected column.

Move Up

This button will move the selected line in the Columns list up one line. Successive clicks will keep moving the column up, one line per click, until it reaches the top of the list.

Move Down

This button will move the selected line in the Columns list down one line. Successive clicks will keep moving the row down, one line per click, until reaches the bottom.

Column Style

Width

Choose on of the predefined width settings from the dropdown list. Be sure that the total width of all of the columns in the row will add up to 100%.

Padding

Check this box if you wish to have padding assigned inside the column.

Row Options

Row ID

Optionally enter an ID for this row construct. The ID is used by the scroll to element option in the DMM menu interface.

Fixed BG

Select the preset background-image style that you wish to assign to this row.

Color Theme

Select the preset style theme that you wish to assign to this row.

Col Group Options

Width

Choose the overall width for the entire row construct.

Color Theme

Select the preset style theme that you wish to assign to the column group.

Using the Row/Column Creator with Layout 6

Layouts 1-5 are complete pages. Layout 6, however, contains only a masthead and footer. We've done this to accommodate those designers who desire complete control over how their page is laid out. There are coded comments that provide insertion points for up to five rows. In Layout 6, switch to Code View:

Simply place your cursor on the blank line between a beginning and ending comment, open the Row/Column Creator, and create your rows, configured just like you want them.

 

Style Sheets

Synergy comes with two CSS files: p7-synergy.css and p7-synergy-theme.css, which can be found inside the p7synergy folder. p7-synergy.css contains the core structural styles and should not be edited. To customize colors and other styling attributes, please use the p7-synergy-theme.css file, which is described below.

body

background-color: #FFFFFF;
font-family: "Segoe UI", Arial, Helvetica, sans-serif;

h1, h2, h3, h4

font-family: Federo, "Segoe UI", Arial, Helvetica, sans-serif;


.p7DMM08

font-family: Federo, "Segoe UI", Arial, Helvetica, sans-serif;
font-size: 120%

p img, h1 img, h2 img, h3 img, h4 img

border-radius: 5px;

.padded

padding: 20px 32px;

Row or Column-Group background Colors and Text Colors

These color rules correspond to options in the Row/Column Creator interface and can be assigned to either column groups or rows. The rule names are numbers to make it easier to change colors to suit your design, without having to change the name to match your color. To keep track of the colors, print yourself a cheat sheet to keep by your computer.

Note: Each of the styles below uses RGBA for transparency. The last value in the RGBA string is a decimal which sets the percent of opacity— .75, for example, means the element will be 75% opaque, which is also means it will be 25% transparent.

.synergy-color-1

background-color: #FFF;
background: rgba(255, 255, 255, .75);
color: #000;

.synergy-color-2

background-color: #151515;
background: rgba(0,0,0,.9);
color: #FFF;

.synergy-color-3

background-color: #CC3333;
background: rgba(204, 51, 51, .75);
color: #000;

.synergy-color-4

background-color: #0099FF;
background: rgba(0, 153, 255, .80);
color: #FFF;

.synergy-color-5

background-color: #669999;
background: rgba(102, 153, 153, .80);
color: #000;

Page Hyperlink Styles

These rules create separate and color-coordinated link styles to match the background colors used in each of the synergy-color styles.

.synergy-color-1 a,
.synergy-color-3 a

color: #000;

.synergy-color-1 a:hover,
.synergy-color-3 a:hover

color: #E16410;

.synergy-color-2 a

color: #AAA;

.synergy-color-2 a:hover

color: #FFF;

.synergy-color-4 a

color: #FFF;

.synergy-color-4 a:hover

color: #000;

.synergy-color-5 a

color: #000;

.synergy-color-5 a:hover

color: #FFF;

Row Background Images

These rules correspond to options in the Row/Column Creator UI. You can select one of the following background options for either a row or a column group. We even supply the images. You will want to substitute your own images. Simply place your image(s) in the p7synergy/art folder and adjust the image name in the CSS rule.

.bg-1 {
background-image: url(art/bg-01.jpg);
background-color: #D18E02;
}
.bg-2 {
background-image: url(art/bg-02.jpg);
background-color: #1D1D1D;
color: #FFF;
}
.bg-3 {
background-image: url(art/bg-03.jpg);
background-color: #A79C9A;
}
.bg-4 {
background-image: url(art/bg-04.jpg);
background-color: #000000;
color: #FFF;
}
.bg-5 {
background-image: url(art/bg-05.jpg);
background-color: #000;
color: #FFF;
}
.bg-6 {
background-image: url(art/bg-06.jpg);
background-color: #FFF;
}
.bg-7 {
background-image: url(art/bg-07.jpg);
color: #FFF;
background-color: #000;
}
.bg-8 {
background-image: url(art/bg-08.jpg);
background-color: #000;
color: #FFF;
}
.bg-9 {
background-image: url(art/bg-09.jpg);
background-color: #999;
}

Utility Rules

The following rules can be assigned to any element on your page, as needed to create vertical rules between columns or large type sections.

.left-border {border-left: 1px solid;}
.right-border {border-right: 1px solid;}

Assign one or both of these class names to a column DIV to create a vertical border. Examples:

<div class="synergy-column column-50 padded left-border right-border">

.large-type

font-size: 1.75em;
line-height: 2;
font-family: Federo, "Segoe UI", Arial, Helvetica, sans-serif;

#footer

text-align: center;

Support

See our main support page for contact information. PVII support never ends.