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

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

Install the extensions

Allegro comes with two extensions and each must be installed:

1. p7_Allegro_103.mxp /.zxp
2. p7_DMM_130.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.

NOTE: If you have a prior version of Drop Menu Magic installed, you will get a notification asking if you would like to replace it. SAY YES. REPLACE IT.

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_Allegro_103.mxp and p7_DMM_130.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_Allegro_103.zxp and p7_DMM_130.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 Allegro system creates two asset folders in your defined site called p7Allegro and p7dmm. When you publish your page, make sure you upload those folders to your server.

Creating a Allegro Page

-Choose File > New PVII PagePack > Allegro 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.

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.

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.

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

Allegro 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 Allegro Row/Column Creator

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

Inserting a New Row-Column structure

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 8

Layouts 1-7 are complete pages. Layout 8, 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 8, 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

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

body

background-color: #FFFFFF;
font-family: "Segoe UI", Arial, Helvetica, sans-serif;
padding-bottom: 40px;
font-size: 1em;

#logo

background-color: #222;
height: 3em;
background-image: url(img/logo-light.png);
background-repeat: no-repeat;
background-size: contain;

.masthead

font-family: Federo, "Segoe UI", Arial, Helvetica, sans-serif;
font-size: 1.35em;
color: #FFF;

h1, h2, h3, h4

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

.p7DMM09

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

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— .85, for example, means the element will be 85% opaque, which is also means it will be 15% transparent.

.Allegro-color-1

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

.Allegro-color-2

background-color: #000000;
background: rgba(0,0,0,.85);
color: #FFFFFF;

.Allegro-color-3

background-color: rgb(88,127,150);
background: rgba(88,127,150,0.85);
color: #000;

.Allegro-color-4

background-color: rgb(176,160,150);
background: rgba(176,160,150,0.85);
color: #000;

.Allegro-color-5

background-color: rgb(102, 153, 153);
background: rgba(102, 153, 153, .85);
color: #000;

Page Hyperlink Styles

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

.Allegro-color-1 a,
.Allegro-color-3 a

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

.Allegro-color-2 a

.Allegro-color-2 a:hover

.Allegro-color-4 a

.Allegro-color-4 a:hover

.Allegro-color-5 a

.Allegro-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 p7Allegro/art folder and adjust the image name in the CSS rule.

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

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="Allegro-column column-50 padded left-border right-border">

.large-type

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

#footer

padding: .5em .3em;
text-align: center;
box-sizing: border-box;
color: #000;
font-size: 0.7em;
text-transform: uppercase;

Tab Panel Styles for Portal with TPM3 Option

.p7tp3-col-wrapper {max-width: 1280px; border-radius: 0px 0px 20px 20px;}
.p7TP3content:after {
content: "";
display: block;
height: 30px;
}

#p7TP3c1_1 {
background-image: url(img/art-06.jpg);
}
#p7TP3c1_1 .p7tp3-col-wrapper {width: 90%; max-width: 1440px;}

#p7TP3c1_2 {background-image: url(img/art-07.jpg);}
#p7TP3c1_2 .p7tp3-col-wrapper {width: 90%; max-width: 1440px;}

#p7TP3c1_3 {
background-image: url(img/art-04.jpg);
}
#p7TP3c1_3 .p7tp3-col-wrapper {width: 90%; max-width: 1100px;}

#p7TP3c1_4 {
background-image: url(img/art-05.jpg);
}
#p7TP3c1_4 .p7tp3-col-wrapper {width: 90%; max-width: 1440px;}

#p7TP3c1_1 .p7tp3-col-wrapper {
background-color: rgb(104,136,136);
background: rgba(104,136,136,0.75);
color: #000;
}
#p7TP3c1_2 .p7tp3-col-wrapper {
background-color: rgb(88,127,150);
background: rgba(88,127,150,0.6);
color: #000;
}
#p7TP3c1_3 .p7tp3-col-wrapper {
background-color: #000000;
background: rgba(0,0,0,.8);
color: #CCCCCC;
}
#p7TP3c1_4 .p7tp3-col-wrapper {
background-color: rgb(176,160,150);
background: rgba(176,160,150,0.6);
color: #000;
}

.p7TP3_content_17 {
font-family: Federo, "Segoe UI", Arial, Helvetica, sans-serif;
font-size: 125%;
}

.p7tp3-col-wrapper {
margin: 0px auto;
line-height: 1.5;
}
.p7tp3-column-content {
padding: 0 .5em .5em 1.75em !important;
display: block;
margin-top: 2.25em;
}
.p7tp3-column:last-child div {
padding-right: 1.75em;
}

.p7tp3-col-wrapper.no-columns {
padding: 1.25em 1.75em .5em 1.75em;
margin-top: 2em;
}

Contact Form CSS

.form-wrapper {
margin:2em auto;
max-width: 80%;
border:1px solid;
border-color: rgba(255,255,255,.25);
border-radius: 7px;
padding: 0 1em;
}
form.allegro-form, .allegro-form label, .allegro-form textarea {
font-family: "Segoe UI", Arial, Helvetica, sans-serif;
font-size: 1.25em;
}
.allegro-form {
padding: 25px 15px 25px 10px;

}
.allegro-form h2 {
font-size: 1.35em;
margin: 0 0 1em 0;
}

.allegro-form label {
font-size: .85em;
padding: 0 0 .3em .15em;
display: block;
display: block;
padding: .5em;
}

.allegro-form input[type="text"], .allegro-form input[type="email"], .allegro-form textarea, .allegro-form select {
border: 1px solid;
border-color: rgba(255, 255, 255, .25);
height: 2.25em;
outline: none;
padding: .5em 1em .5em .5em;
width: 95%;
margin-bottom: .5em;
line-height: 1.5;
border-radius: 4px;
background-color: rgba(0, 0, 0, .2);
color: #EEE;
}
.allegro-form textarea {
resize: none;
font-size: .75em;
overflow: auto;
}
.allegro-form select {
text-indent: 0.01px;
text-overflow: '';
line-height: 25px;
width: auto;
}
.allegro-form option {
background: rgba(255,255,255,.5);
color: #000;
}
.allegro-form textarea {
height: auto;
}
.allegro-form .button {
background-color: #B44040;
background: rgba(180,64,64,.8);
border: 1px solid;
border-color: rgba(255,255,255,.5);
padding: 1em 2em;
color: #FFF;
border-radius: 3px;
cursor: pointer;
transition: all linear .5s .1s;
}
.allegro-form .button:hover {
background-color: #222;
}

Social Media Icons

.social {
display: block;
text-align: left;
}
.social ul {
display: inline-block;
margin: 0;
padding: 0;
}
.social li {
float: left;
list-style-type: none;
margin: 0.5em .5em .5em 0;
}
.social a {
opacity: .75;
transition: all linear .5s .1s;
}
.social a:hover {
opacity: 1;
}

Media Queries

Small screens - all devices

@media only screen and (min-width: 0px) and (max-width: 700px) {
body {-webkit-text-size-adjust: none;}
.allegro-row .column-group .allegro-column { float: none; width: auto !important;}
#p7DMM_1 ul {padding: 0px 0px;}
.p7tp3-col-wrapper {width: auto !important; max-width: none !important; border-radius: 0px !important; padding-top: 2.5em !important;}
.p7tp3-column-content {margin: 0 !important;}
.column-group {border-radius: none !important; margin-bottom: 0px !important; width: auto;}
.p7TP3content:after {display: none !important;}
}

Smartphones Only

@media only screen and (max-device-width: 480px) {
.allegro-row .column-group .allegro-column { float: none; width: auto !important;}
#p7DMM_1 ul {padding: 0px 0px;}
.p7tp3-col-wrapper {width: auto !important; max-width: none !important; border-radius: 0px !important;}
.p7tp3-column-content {margin: 0 !important; padding-left: 1.75em !important; padding-right: 1.75em !important;}
.column-group {border-radius: none !important; margin-bottom: 0px !important; width: auto;}
.p7TP3content:after {display: none !important;}
.p7TP3-17 .p7TP3-17-arrow-prev, .p7TP3-17 .p7TP3-17-arrow-next {top: 20%;}
.p7TP3-17 .p7TP3-17-arrow-prev, .p7TP3-17 .p7TP3-17-arrow-next {-webkit-transform: scale(1.3,1.3); transform: scale(1.5,1.5);}
}

Smartphones Only when in Landscape Orientation

@media only screen and (max-device-width: 480px) and (orientation : landscape) {
body {-webkit-text-size-adjust: none; font-size: .8em;}
.large-type {font-size: 1em; line-height: 1.25;}
.p7tp3-column-content {margin: 0 !important; font-size: .8em;}
.p7TP3-17 .p7TP3-17-pags ul a {padding: 5px;}
.p7TP3-17 .p7TP3-17-arrow-prev, .p7TP3-17 .p7TP3-17-arrow-next {-webkit-transform: scale(.85,.85); transform: scale(.85,.85);}
}

Support

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