Vanilla Home | DMM Guide | DMM Style Guide

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

Install the extensions

Vanilla comes with two extensions and each must be installed:

1. p7_Vanilla_104.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.

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_Vanilla_104.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_Vanilla_104.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 Vanilla system creates two asset folders in your defined site called p7vanilla and p7dmm. When you publish your page, make sure you upload those folders to your server.

Creating a Vanilla Page

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

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

Vanilla Row-Column Creator is an automated Dreamweaver widget that automates the process of creating extra rows and columns in your Vanilla 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.

Col Group Options

Width

Choose the overall width for the entire row construct.

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. In Layout 6, switch to Code View and locate the columns-container DIV:

<div class="columns-container">
Delete this text and deploy the Vanilla Row/Column Creator in this space.
</div>

Simply place your cursor on the line between opening and closing DIV tags, delete the boilerplate text (shown in bold above), open the Row/Column Creator, and create your rows, configured just like you want them.

Style Sheets

Vanilla comes with two CSS files: p7-vanilla.css and p7-vanilla-custom.css, which can be found inside the p7vanilla folder. You should not edit the main style sheet. When you need to add customizations, or exceptions, use the custom CSS file. This way, all your changes and additions will be in one file. The custom CSS file is linked to your page after the main CSS file, so rules in the custom CSS file will always take precedence.

Page Hyperlink Styles

We've included two sets of links styles. One is a class that you can assign to hyperlinks in your content area. The other is a descendant selector affecting only links in your footer.

The class selector is called content-link:

.content-link {
color: #000;
text-decoration: none;
border-bottom: 1px dotted;
}
.content-link:hover {
color: #AD2B2D;
border-bottom: 1px solid;
}

To deploy it, assign the class to your link:

<a href="#" class="content-link">Test link.</a>

The footer links are:

#footer a {
color: #BBB;
text-decoration: none;
border-bottom: 1px dotted;
}
#footer a:hover {
color: #FFF;
border-bottom: 1px solid;
}

The footer link styles are automatic. There is no need to assign a class.

If you would like to customize links, add copies of one, or both of the above rules, to your custom CSS file.

Layout Width

Layout width is managed by a class placed on the layout container:

<div id="layout-container" class="max-1280 sidebar-right">

If you want your page to fill the entire browser window, then you would simply set the max class to none:

<div id="layout-container" class="max-none sidebar-right">

The Vanilla CSS file contains several options for max width. You can choose 980, 1024, 1280, 1440, 1600, or none.

Two-column or Single-column masthead

The masthead is divided into two columns, allowing a logo and second element (in this case, a search box) to appear side by side. But if you don't need the second column, you can easily turn it off. How? Let's take a look at the masthead DIV:

<div id="masthead">

Pretty simple, hmm? It is. But if you want the masthead to be one column, all you need to do is add a class to the masthead DIV:

<div id="masthead" class="one-column">

If your logo is more than 300 pixels wide, you should use a single-column masthead.

The logos

Vanilla pages come with two logos. As you scroll the page, the menu becomes fixed at the top of the window, and the main logo is no longer visible. Not good for branding. So, we made it so that a smaller logo (in this case an image of the text "Vanilla") appears along the left edge of the menu.

The logo at the top of the page, the one that appears above the menu, is comprised of a level-1 heading, to which a background image is assigned. This is a good and modern approach to take. If you have a more traditional logo, you should remove the H1, and replace it with your image. The default logo code looks like this:

<div id="masthead-left">
<h1>Vanilla</h1>
</div>

Replace the H1 with an embedded image, making sure to add the scalable class:

<div id="masthead-left">
<img src="img/logo.jpg" alt="" width="300" height="48" class="scalable"/>
</div>

The secondary logo, the one that appears on the left edge of the menu bar, is an image. In our case, the image simply spells "Vanilla". It is deployed as a background image on the fixed menu DIV:

.p7dmm-fixed, .p7DMM-toolbar {
background-image: url(img/logo-small.png);
background-repeat: no-repeat;
background-position: 1em center;
padding-left: 1.35em;
border-radius: 0px !important;
}

If your small logo is short in height, like ours, no other changes are necessary. If your logo is taller than the rendered menu and toolbar, then you can use CSS to force it to be contained inside the height of the menu/toolbar. Add this rule to your custom CSS file:

.p7dmm-fixed, .p7DMM-toolbar {background-size: contain; }

Scalable images

To make an image scalable, assign the scalable class to the image tag:

<img src="p7vanilla/img/art-01.jpg" alt="" width="480" height="480" class="scalable"/>

If also want to round the edges of the image, add the rounded class:

<img src="p7vanilla/img/art-01.jpg" alt="" width="480" height="480" class="scalable rounded"/>

Responsive Videos

The following method supports videos embedded inside iframes—the typical method used by YouTube and Vimeo. For other types of videos, you will need to contact the video player's author. If you deploy videos using outdated code, such as the Insert > Media command in older versions of Dreamweaver, there is no way to make them responsive.

.video-wrapper {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px;
height: 0px;
overflow: hidden;
}
.video-wrapper iframe, .video-wrapper object, .video-wrapper embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

All you need to do is wrap your video code inside a DIV, and assign the video-wrapper class to the DIV. Here is an example using typical YouTube embed code:

<iframe width="1280" height="720" src="https://www.youtube.com/embed/YAcLViTHDOo" frameborder="0" allowfullscreen></iframe>

Now wrap it:

<div class="video-wrapper">
<iframe width="1280" height="720" src="https://www.youtube.com/embed/YAcLViTHDOo" frameborder="0" allowfullscreen></iframe>
</div>

Responsive Google Maps

The following method supports videos embedded Google maps.

.map-wrapper {
position: relative;
padding-bottom: 100%;
padding-top: 0px;
height: 0px;
overflow: hidden;
margin-bottom: 20px;
}
.map-wrapper iframe, .map-wrapper object, .map-wrapper embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

All you need to do is wrap your embed code inside a DIV, and assign the video-wrapper class to the DIV. Here is an example using typical Google map embed code:

<iframe src="https://www.google.com/maps/embed? Options omitted" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>

Now wrap it:

<div class="map-wrapper">
<iframe src="https://www.google.com/maps/embed? Options omitted" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>
</div>

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="column main-content right-border">

The search box

The search box was added to give you an idea of what can go inside the right column of the masthead. The search box is not live. It would be up to you to attach a search script. You can replace the search box with other content, such as a slogan or phone number.

Support

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