PVII Logo

PVII Zeitgeist User Guide

Zeitgeist is a collection of 8 gorgeous web pages that you can create with a single click from inside a special interface that runs inside Dreamweaver.

What is a sticky box and why should I care?

One of the bright stars of Zeitgeist is the use of CSS sticky, a new value for the position property. Position: sticky allows us to freeze this box as the page scrolls, until you reach the next row. We use sticky boxes throughout this guide and, of course, on the Zeitgeist pages you will be creating. Scroll down the page and you should see the content in this box move down to the bottom, until the next row is reached.

Zeitgeist overview

Zeitgeist is a PVII Page Pack, a product that installs into Dreamweaver, giving you a visual and automated means to create fully-styled pages with a single click. The Zeitgeist user interface allows you to choose among 8 different layouts. Once you create your page, you can manage its content statically, with server-side or PHP includes, or by using Dreamweaver's built-in Template features. The choice is yours.

Zeitgeist and Harmony

We built each Zeitgeist layout using our Harmony Page Builder tool, which brings a couple of really important things to the table. It ensures that your page is built using modern CSS that will be relevant for many years to come. It also means that if you own a copy of Harmony, you can edit the layout structure of your pages at will, instantly changing column and row structure, colors, alignment, and many other integral design facets. But owning Harmony is a choice, too. If you prefer to code yourself, then by all means, do so.

Zeitgeist and Adaptive Menu Magic

Zeitgeist pages come with menus powered by Adaptive Menu Magic (AMM). They are fully functional, responsive, and mobile-friendly. We provide a single menu that can be easily edited manually to add or re-order links. The menu is contained, along with the logo, in a 2-column Harmony instance at the top of the page. This Harmony instance is set to position: sticky so that the menu always floats on top of the page, always visible and accessible. Adaptive Menu Magic is also priority-based. This means that the menu will never wrap to more than a single line. Instead, a dynamic menu item called "More" will be created and any menu items that do not fit in a single row at the root level will be moved to the "More" link as child (drop-down) items. The bottom line is that AMM menus always fit.

Do I need to purchase Adaptive Menu Magic?

No. The menus we deliver are fully functional, and the user guide covers simple menu edits (below), such as adding or removing links. You should consider purchasing AMM if you'd like the convenience of an automated user interface in which you can customize colors, behaviors, animations, as well as adding an unlimited number of sub-levels with just a few clicks. The choice is yours.

Installation and Updates

Unzip the product file

Unzip your product file before installing.

Save for a rainy day

Save your original product file in logical folders, named and situated where you will be able find them when you need them. A good idea is to create a new folder on your hard drive and name it PVII Extensions. When you download a product file from us, place the zip file in this folder.

Installer file types

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. CC (Creative Cloud) versions 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 Creative Cloud

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

Product updates

We regularly issue updates to address emerging browser issues, bugs, and also to add or enhance features. Critical updates are announced via email. For scheduled updates, please check our home page regularly for a listing of updates, or go straight to our updates page. Compare the version number of the update to the version number of your installed product. Versions are included in the product file name, as well as in your Dreamweaver Extension Manager. For instance, a product file named p7_Zeitgeist_103.zip indicates version 1.0.3 of Zeitgeist.

Creating a page and accessing the Zeitgeist UI

When creating a Zeitgeist page, you should remember that you are not performing this task on an existing page. You are creating a new page. The act of creating a Zeitgeist page will not affect any other Dreamweaver documents that might be open.

Accessing the Zeitgeist interface

To open the interface, choose File > New PVII Page Pack

The Interface will open

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

Dreamweaver Templates

Zeitgeist is made for Dreamweaver Templates

After you create your Zeitgeist 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). With Zeitgeist, it's easy to set up.

Converting your page to a Dreamweaver template

After creating your 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 on screen prompts to save your new template. Name it Zeitgeist-01 for clarity

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.

In most Zeitgeist layouts, there are 3 separate Harmony instances. Each instance's root DIV is assigned an ID: p7HMY_1 (Navigation and logo), p7HMY_2 (main content), and p7HMY_3 (footer). The only exception is the Team directory page (Layout-04), which has an added Harmony instance to house the team member photos in a grid.

The content area is always going to be p7HMY_2 or, in the case of the Team Directory page, p7HMY_2 and p7HMY_3, and that's the area 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

Note: If using the Team Directory page, make sure you have selected both the p7HMY_2 and p7HMY_3 elements.

Enter a name (Editable_Content is pretty appropriate) 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.

Select Zeitgeist-01

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 appropriate 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. Click Update to execute all changes.

Sticky Columns

Sticky columns automatically establish a relationship with their row mates. For an example, this column is set to be sticky. Since the column at right is significantly higher, this column's content will move down the page, within its borders, until the column at right is fully scrolled, at which point the sticky column will continue to scroll with the page, normally.

Setting a sticky column

Nothing could be easier. Once you've decide that a column should be sticky, you can use the Harmony UI to assign the sticky class. If you do not have Harmony, we'll show you how to do it in Code View yourself later.

Setting a sticky column using Harmony

Open the Harmony UI. Select the column you wish to make sticky.

In the Section User Class box, type the word sticky.

That's it.

Setting a sticky column manually

Place your cursor near the top of the column you wish to make sticky.

Switch to Code View.

Move upwards a couple of lines until you find the hmy-section DIV your column is inside of. It will look like this:

<div class="hmy-section" data-hmy-basis="40,%,1">

Note: The data attribute will reflect your column's width setting, so it will likely be a bit different than our code. This is not a problem.

Locate the class attribute:

class="hmy-section"

Add a second class of sticky.

class="hmy-section sticky"

That's it.

Note: position: sticky will not work if the element, or any of its parents is set to overflow: hidden.

Team Directory page image animation

The animated images in this page are done quite simply, with a little CSS. Here is the fully commented block from the p7Zeitgeist-01.css file:

/*
--------------------------------------------------------
Set custom styles for the Team Grid Harmony instance
in Layout-04, including animating the images on hover.
--------------------------------------------------------
*/
.team-grid .hmy-section.member .hmy-content {
padding: 10px;
overflow: hidden;
}
.team-grid .hmy-section.member img {
transition: all ease-out .5s;
transform: scale(1);
transform-origin: center;
opacity: 1;
}
.team-grid .hmy-section.member img:hover {
transform: scale(1.75);
opacity: .5;
}
.image-caption {
margin: 0px;
letter-spacing: .5em;
}
.image-description {
font-size: 80%;
}

The first three rules are descendant selectors, based on the team-grid user class being assigned to the Harmony instance that houses the grid. The last two classes are utility rules to allow you to set specially styled captions and descriptions above or below your images.

Working with Adaptive Menu Magic

The Adaptive Menus included with Zeitgeist can be edited two ways. If you own Adaptive Menu Magic, you can simply open AMM and every facet of menu management can be accomplished quickly from within an automated UI. If you would rather not purchase AMM at this time, you can edit your Zeitgeist menus manually.

Adding or removing menu items manually

Zeitgeist menus use the Adaptive Menu Magic scripts and CSS to provide extensive functionality, including fixed positioning on page scroll, current link marking, an menu prioritization with a generated More link when needed to prevent root item wrapping.

Note: If you use the AMM UI, do not enable the Fixed Position on Page Scroll option. The menu is already fixed at the top, controlled by position: sticky on its parent Harmony header element.

If you do not yet own Adaptive Menu Magic, you can still perform basic menu editing, such as adding or removing links. You simply need to do it in Code View. The AMM menu code you'll work with looks like this:

<ul class="closed" aria-label="Navigation Menu">
<li data-amm-priority="0"><a href="#">Menu Item</a></li>
<li data-amm-priority="0"><a href="#">Menu Item Number Two</a></li>
<li data-amm-priority="0"><a href="#">Menu Item</a></li>
<li data-amm-priority="0"><a href="#">Menu Item</a></li>
</ul>

To add or remove a menu item, simply add a new list (li) element, like this:

<ul class="closed" aria-label="Navigation Menu">
<li data-amm-priority="0"><a href="#">Menu Item</a></li>
<li data-amm-priority="0"><a href="#">Menu Item Number Two</a></li>
<li data-amm-priority="0"><a href="#">Menu Item</a></li>
<li data-amm-priority="0"><a href="#">Menu Item</a></li>
<li data-amm-priority="0"><a href="#">New Menu Item</a></li>
</ul>

That's it!

The Pop Down Search Box

The Search Box

The search box is a full-width Harmony column just below, and in the same Harmony instance, as the menu. Here is the code:

<div class="hmy-content-wrapper hmy-vertical-center popper scs-noscript" id="popper">

It has User Classes of popper and scs-noscript, and an ID of popper.

The box drops down when the search icon in the menu is clicked or tapped. Here is the menu link involved:

<a href="#" class="search scs-noscript" data-scs="show-popper,1,0,popper,0,1,">&#8981;</a>

Note: If you decide on another use for the Pop Down, you can change the character entity or substitute a plain text link. If you change it to a text link, make sure to remove the search class.

The search, scs-noscript, and the character entity (&#8981;) that renders the icon are all entered in AMM UI (if available).

The data-scs attribute, call on the included p7SCSscripts.js file to toggle an additional class of show-popper on the element with an ID of popper when the icon is clicked or tapped. This is how the Pop Down is shown and hidden.

The Pop Down box can be used for other purposes than a search form. The box's content can be edited in Design or Code Views.

To delete the Pop Down

In the event you want to remove the Pop Down, simply delete the menu item housing the search icon and use the Harmony UI (if available) to remove the popper column.

PVII Style Class Switcher

The Pop Down box is controlled by the free PVII Style Switcher extension. This tool, though free, is extremely powerful and useful. Read more...

Styling Notes...

If you are using Harmony, then changing column colors, adding borders, rounding corners, and much more, are tasks you can accomplish in the Harmony user interface with just a few clicks. If, on the other hand, you are using Zeitgeist without benefit of Harmony, then you probably have a decent-to-advanced grasp of CSS.

In either case, the Zeitgeist CSS file is well-commented and should be studied. The file is called p7Zeitgeist-01.css, and is located in the p7Zeitgeist folder, which was created in your local site, when you created your page. This file is heavily commented—a user guide in its own right—and should be thoroughly read to gain an understanding of how Zeitgeist pages are styled. For instance...

If you want to learn how the pointer arrow that appears when a sub-menu opens in the main navigation bar, look it up!

Open the CSS file, right-click anywhere inside and choose Find and Replace. Enter the word pointer in the Find box

Click Find Next

You will be taken to the "pointer" section of the style sheet:

Note: To banish the Find and Replace dialog simply click the Close button.

Needless to say, reading the entire style sheet is a very good idea. In fact, we would recommend printing a copy and using it as a reference.

If there are tasks you need to perform, and you need assistance, simply contact us via email or post on our forum (see support options below) and we'll be happy to help.

Google Fonts

Zeitgeist uses a free Google font called Montserrat.

It is linked to in the head of every Zeitgeist page:

<link href="https://fonts.googleapis.com/css?family=Montserrat:300,400,600,700,800" rel="stylesheet">

The font comes in 5 font-weights: 300, 400, 600, 700, and 800. The font, along with a weight is set in the Zeitgeist style sheet for body text, headings, as well as the <b> and <strong> tags:

body {
font-family: Montserrat, Verdana, Geneva, sans-serif;
font-weight: 300;
font-size: 100%;
}
.hmy-section h1,
.hmy-section h2,
.hmy-section h3,
.hmy-section h4,
.hmy-section h5 {
font-family: Montserrat, Verdana, Geneva, sans-serif;
font-weight: 600;
}
strong, b {font-weight: 600;}

Feel free to change the weights used, but be sure to limit yourself to the weight choices listed in the Google font link.

Learn more about Google fonts

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

Phone: (336) 374-4611

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

Menu