EXISTENTIALITY

By Project Seven Development

Existentiality is a PVII CSS Page Pack that allows you to instantly create stable, standards-based CSS
pages that will perform as expected in all major browsers.

We hope you enjoy using this product as much as we did making it.

Al Sparber & Gerry Jacobsen PVII

 Install the extension 2

CONTENTS
Existentiality .............................................................................................................1
Install the extension .....................................................................................................5
Work in a Defined Dreamweaver Web Site ..........................................................................5
Creating an Existentiality Page .....................................................................................6
Assets folders ...........................................................................................................8
Accessibility .................................................................................................................9
Editing and Customizing ..............................................................................................9
Background Images and Column Widths....................................................................9
Editing the background images ...............................................................................12
Photoshop User Note ...........................................................................................12
CSS Glossary ..............................................................................................................13
The Body................................................................................................................13
Masthead...............................................................................................................13
Layout Container .....................................................................................................15
The Column DIV Class ................................................................................................15
The Main Column .....................................................................................................16
The Main Column Content ..........................................................................................16
Main Content and Side Content Paragraphs ....................................................................17
The Sidebar Column ..................................................................................................17
The Sidebar Content .................................................................................................18
The Sidebar Headings ................................................................................................18
The Main Content Headings ........................................................................................19
The Layout Bottom Curve ...........................................................................................19
The Footer..............................................................................................................20
The Quotation .........................................................................................................20
Link Styles: Main content and Footer ............................................................................21
Link Styles: Side Content ............................................................................................21
The Static Menu Styles ..............................................................................................22

2
 Install the extension 3

Tree Menu Magic CSS Glossary ...................................................................................23

Root Menu Wrapper .................................................................................................23
IE7 and Under Fix .....................................................................................................23
The Base UL Element.................................................................................................23
The Base LI Element ..................................................................................................24
The First Root Menu Item LI ........................................................................................24
Sub-Menu UL Element ...............................................................................................25
The Sub-Menu LI Element ..........................................................................................25
The Sub-Menu DIV Wrapper .......................................................................................25
Third-Level Sub-Menu UL Element ................................................................................26
The Default Link Style for Root Level Links ......................................................................26
The Hover, Focus, and Active Link Styles for Root Level Links...............................................27
The Default Link Style for Sub-Menu Links ......................................................................27
The Hover, Focus, and Active Link Styles for Sub-Menu Links ...............................................27
Page Links ..............................................................................................................27
Page Links Hover Style ...............................................................................................28
Sub-Menu Page Links Hover Style .................................................................................28
The Closed Trigger Default Link State ............................................................................28
The Closed Trigger Hover State ....................................................................................29
The Sub-Menu Closed Trigger Default Link State ..............................................................29
The Sub-Menu Closed Trigger Hover Link State ................................................................29
The Open Trigger Default Link State ..............................................................................30
The Sub-Menu Open Trigger Default Link State ................................................................30
The Sub-Menu Open Trigger Hover Link State..................................................................30
The Base Current Mark Style .......................................................................................31
The Current Mark Style for Sub-Menu Links ....................................................................31
The Optional Open All/Close All Links Rules ....................................................................32
The Open All/Close All Default Link State........................................................................32
The Open All/Close All Hover Link State .........................................................................32

3
 Install the extension 4

Questions and Answers ..............................................................................................33

Can I use a PVII menu system or widget on my page? ...........................................................33
How do I insert my own logo image? ................................................................................33
What if I mess up my style sheet or images? ......................................................................33
Support and Contact info ..............................................................................................34
PVII Knowledge Base .................................................................................................34

4
 Install the extension 5

INSTALL THE EXTENSION

Look for the extension installer file p7_Exis_108.mxp (or higher) in the root of the zip archive you
downloaded. Double-click the file to install the extension. Dreamweaver's Extension Manager will open
and you will be prompted to complete the installation. Restart Dreamweaver once the installation is
complete.

OS X users: If, upon double-clicking the installer, Extension Manager does not properly launch, you have a file association issue. To remedy the
problem locate the installer file from inside a Finder window and double-click it.

WORK IN A DEFINED DREAMWEAVER WEB SITE

Before you begin, make sure you are working inside a defined Dreamweaver web site - on a page that is
saved within that site. This is necessary so that Dreamweaver knows how to link required assets to your
page. If you are new to Dreamweaver or need to learn how to define a web site, please see this tutorial:
Defining a Dreamweaver Web Site.

5
 Creating an Existentiality Page 6

CREATING AN EXISTENTIALITY PAGE

Viewed from any angle, Existentiality is all about design that is clean and professional. Now let's see
how easy it is to create a page. To create a page, choose:

File > New PVII PagePack > Existentiality

Note: If you have older Page Packs installed, as the above image depicts, you'll notice that Existentiality appears as a dedicated entry on the
menu fly out. This is normal and all recent and future Page Packs are listed this way.

The Existentiality interface will open.

Select a layout from the Page Design column and the Preview image will change to reflect your choice.

6
 Creating an Existentiality Page 7

There are 6 layouts—each is offered with the option of a TMM2 menu or a basic CSS menu—for a total
of 12. You must have Tree Menu Magic 2 installed to use the Tree Menu Magic 2 System Menu Type
option.

Note: Existentiality does not support Tree Menu Magic 1. If you own TMM1 you do qualify for upgrade pricing ($65) to TMM2.

Click the Create button.

The Save As dialog will open.

Browse to a folder within your current Dreamweaver-defined site so that it appears in the Save in box.

Enter a File name.

Click Save.

7
 Creating an Existentiality Page 8

ASSETS FOLDERS

When your page is created, the Page Pack system generates several new folders

1. Fireworks
This folder contains editable Fireworks images for your Existentiality layouts and for Tree Menu
Magic 2 (if you have it).
2. p7existential
This folder contains your Existentiality CSS files and images
3. p7tmm
This folder is created if you chose a layout containing a Tree Menu Magic 2 menu. It contains
your TMM2 script, CSS, and images.

The Page Pack system will create these folders in the same folder where you save your Page Pack page. Keep that in mind as it is a powerful
tool that enables you to create multiple testing folders in which to play, but you must be mindful of where your relevant assets folders are
when you ultimately publish your page or when you edit assets.

Do I need to upload these folders to my web server?

When you publish your page, you need to make sure that all assets folders are uploaded—except for
the Fireworks folder.

8
 Editing and Customizing 9

ACCESSIBILITY

What's a web page if it's not accessible and usable? Section 508 guidelines are adhered to, giving you a
solid base on which you can build in the accessibility features you require, right on up to the highest
WAI checkpoints. All content is, of course, always accessible to search engine spiders and the adaptable
columns provide a unique level of usability on a wide range of large and small devices.

EDITING AND CUSTOMIZING

Existentiality pages are CSS-based, making customizations easy to accomplish using Dreamweaver's
built-in CSS editing features.

Note: Advanced CSS coders can edit the CSS directly or with a dedicated editor.

BACKGROUND IMAGES AND COLUMN WIDTHS

Columns heights are always equal and determined by the tallest column. This is accomplished through
the use of a CSS technique called faux columns. The visible columns are drawn by background images.
In the case of Existentiality, the columns in each layout are comprised of 2 background images. Below
are the images used for the Black theme with sidebar on the left. We've placed a dotted red border
around the images so you can better visualize their dimensions.

The first image, existBlack_sbl_middle.jpg, is assigned to the layout DIV, which acts as the container for
the 2 column DIVs inside.

existBlack_sbl_middle.jpg is set, via CSS, to tile vertically along the y-axis so that is extends the entire
height of the columns that are inside. The left part of the image draws the black sidebar, which is
actually 220 pixels wide. The sidebar DIV is 200 pixels wide and positioned with CSS margins to be
centered within the 220 pixel black space. The main part of the image draws the off-white (light gray)
main column and is 750 pixels wide. Its margins position it 10 pixels to the right of the sidebar and it
ends at the 10 pixel black bar along the right edge of the layout. If you add up the widths, they equal
980:

Sidebar (220) + Main Column (750) + Black Bar on Right (10) = 980.

9
 Editing and Customizing 10

Here is the CSS rule for the layout DIV:

#layout {
background-image: url(img/existBlack_sbl_middle.jpg);
background-repeat: repeat-y;
margin: 0 auto;
width: 980px;
}

The image is 980 pixels wide, which is the width assigned to the layout DIV. Margin is set to 0 auto—
which is CSS shorthand syntax for:

margin-top: 0
margin-right: auto;
margin-bottom: 0;
margin-left: auto;

The auto left and right margins serve to center the Layout DIV.

Here are the style rules for the sidebar and main column DIVs:

#sidebar {
width: 200px;
margin-right: 10px;
}

#main-column {
width: 750px;
margin-right: 10px;
}

Both the sidebar and main-column DIVs are assigned a class of column, floating them right and causing
them to appear side-by-side:

.column {
float: right;
}

10
 Editing and Customizing 11

The second image, existBlack_sbl_bottom.jpg, is assigned to the layout-bottom DIV, which is an empty
DIV that comes right after the layout DIV in the page code. Its sole purpose is to draw the curved bottom
of the layout.

Here is the style rule for the layout-bottom DIV:

#layout-bottom {
background-image: url(img/existBlack_sbl_bottom.jpg);
background-repeat: no-repeat;
height: 32px;
background-position: left bottom;
clear: both;
}

Height is equal to the height of the image. The clear property clears the floated columns and allows the
layout DIV to render correctly.

Note: Background-position is not necessary so long as the height assigned is the same as the image height but is declared as a safeguard in the
event you accidentally change the height of the image so that it is less than the height of the DIV. The resulting gap will be your clue that you
need to adjust the DIV height.

11
 Editing and Customizing 12

EDITING THE BACKGROUND IMAGES

When you created your page, the Page Pack system created a Fireworks folder in which you'll find
several Fireworks documents in which you can edit the background images. There is a corresponding
Fireworks file for each layout, plus 1 for the Black masthead and logo and another for the Yellow
masthead and logo:

1. exist-black-masthead.png
2. exist-black-sbleft.png
3. exist-black-sbmiddle.png
4. exist-black-sbright.png
5. exist-yellow-masthead.png
6. exist-yellow-sbleft.png
7. exist-yellow-sbmiddle.png
8. exist-yellow-sbright.png

Note: Fireworks image documents will be added to the Fireworks folder only when you create the related Existentiality page. The Fireworks
folder will also contain Tree Menu Magic image documents if you have Tree Menu Magic installed.

The images are very simple and should pose no problem so long as you understand image editing basics.
The image slices are already set up for export so it is recommended that you not change the dimensions
of the images. Simply edit colors and textures. When you are done, choose File > Export to export the
images back to your web site's p7existential/img folder to overwrite the default images.

PHOTOSHOP USER NOTE

If you use Photoshop, you can create your own background images to replace the default ones.

12
 CSS Glossary 13

CSS GLOSSARY
The CSS for each layout is very similar so we will discuss p7exist01.css, which is the CSS for the Black
Theme with Left Sidebar. Some of the properties are obvious in their purpose and we will not include
those in the discussion. It is assumed that you have a fundamental understanding of CSS and how to edit
it using Dreamweaver's CSS Styles panel, direct editing, or a third-party code editor.

THE BODY

body {
font-family: Calibri, Arial, sans-serif;
color: #000;
background-color: #FFF;
margin: 0px;
padding: 0px;
min-width: 980px;
}

Use the above rule to change the font used on your page. Min-width should be set equal the width of
your layout DIV.

MASTHEAD

#masthead {
background-image: url(img/existBlack_masthead.jpg);
background-repeat: repeat-x;
background-color: #000;
}

We set a background image and matching color.

LOGO

#logo { width: 980px; margin: 0 auto; }

We set the logo container to a width that matches the width assigned to the layout DIV and then use
auto left and right margins to center it. The result is that the logo image aligns with the left edge of the
page layout.

13
 CSS Glossary 14

14
 CSS Glossary 15

LAYOUT CONTAINER

#layout {
background-image: url(img/existBlack_sbl_middle.jpg);
background-repeat: repeat-y;
margin: 0 auto;
width: 980px;
}

The image is 980 pixels wide, which is the width assigned to the layout DIV. Margin is set to 0 auto—
which is CSS shorthand syntax for:

margin-top: 0
margin-right: auto;
margin-bottom: 0;
margin-left: auto;

The auto left and right margins serve to center the Layout DIV.

THE COLUMN DIV CLASS

.column {
float: right;
}

The .column class is assigned to the main-column and the sidebar. Floating them right allows us to place
the main-column before the sidebar in the code. Although the main-column displays to the right of the
sidebar, search engines encounter it first.

15
 CSS Glossary 16

THE MAIN COLUMN

#main-column {
width: 750px;
margin-right: 10px;
}

The width of the main-column, the sidebar, and any left or right margins assigned, is equal to the total
layout width. The right-margin is assigned so that the main-column's right edge stops 10 pixels short of
the layout's right edge and clears its 10 pixel wide right border.

THE MAIN COLUMN CONTENT

.maincontent {
padding: 20px 32px 0px 32px;
font-size: 13px;
line-height: 1.5;
}

The maincontent DIV is nested inside the main-column DIV. While a CSS expert might dispense with this
element and assign padding to the main-column DIV it also means that the width assigned to the main-
column would need to be mathematically calculated to include left and right padding. Using this nested
DIV to style the content inside the column simplifies your job and allows you, for instance, to quickly
adjust padding without having to re-calculate and reset the width of your main-column.

16
 CSS Glossary 17

MAIN CONTENT AND SIDE CONTENT PARAGRAPHS

.maincontent p, .sidecontent p {
margin: 3px 0 12px 0;
}

Margins are set for all paragraphs inside both the maincontent and sidecontent DIVs. CSS allows us to
name a rule to include multiple elements, separated by a comma. Should you want to have separate
paragraph margins for maincontent and sidecontent, create 2 rules to replace this one, as follows:

.maincontent p {
margin: 12px 0 12px 0;
}

.sidecontent p {
margin: 3px 0 12px 0;
}

Margin is set using CSS shorthand syntax. The above rule could also be stated as:

.sidecontent p {
margin-top: 3px;
margin-right: 0;
margin-bottom: 12px;
margin-left: 0;
}

THE SIDEBAR COLUMN

#sidebar {
width: 200px;
margin-right: 10px;
}

The width of the main-column, the sidebar, and any left or right margins assigned, is equal to the total
layout width. The right-margin is assigned so that the main-column's right edge stops 10 pixels short of
the layout's right edge and clears its 10 pixel wide right border.

17
 CSS Glossary 18

THE SIDEBAR CONTENT

.sidecontent {
font-size: 13px;
line-height: 1.35;
padding: 8px 16px;
color: #CCC;
}

The sidecontent DIV is nested inside the sidebar DIV and allows you to quickly adjust padding without
having to re-calculate and reset the width of your sidebar.

THE SIDEBAR HEADINGS

.sidecontent h2, .sidecontent h3 {

text-transform: uppercase;
font-size: 14px;
margin: 20px 0px 6px 0px;
}

.sidecontent h3 {
font-size: 13px;
}

18
 CSS Glossary 19

THE MAIN CONTENT HEADINGS

.maincontent h1, .maincontent h2, .maincontent h3 {

margin: 24px 0 0 0;
font-size: 18px;
text-transform: uppercase;
font-weight: normal;
letter-spacing: 0.15em;
}

.maincontent h2 {
font-size: 16px;
}

.maincontent h3 {
font-size: 14px;
}

THE LAYOUT BOTTOM CURVE

#layout-bottom {
background-image: url(img/existBlack_sbl_bottom.jpg);
background-repeat: no-repeat;
height: 32px;
background-position: left bottom;
clear: both;
}

The layout-bottom DIV is empty. Its purpose is to carry the bottom curve of the layout and it does so via
a background image—and to clear the floated elements inside the layout DIV.

19
 CSS Glossary 20

THE FOOTER

#footer {
margin: 12px auto;
width: 980px;
font-size: 10px;
text-transform: uppercase;
letter-spacing: 0.3em;
text-align: center;
}

The width is the same as the width assigned to the layout DIV and auto left and right margins serve to
center it—keeping it in alignment with the main layout.

THE QUOTATION

.quotation {
font-size: 11px;
text-transform: uppercase;
}

This class defines the quotation that appears at the top of the main content column.

20
 CSS Glossary 21

LINK STYLES: MAIN CONTENT AND FOOTER

.maincontent a, #footer a {
color: #06C;
}
.maincontent a:hover, .maincontent a:focus,
#footer a:hover, #footer a:focus {
color: #000;
}

CSS allows us to name a rule to include multiple elements, separated by a comma. If you want to have
separate link styles for maincontent and sidecontent, create separate rules for maincontent and footer
link styles to replace the original ones.

.maincontent a {
color: #06C;
}
#footer a {
color: #999;
}
.maincontent a:hover, .maincontent a:focus {
color: #000;
}
#footer a:hover, #footer a:focus {
color: #333;
}

LINK STYLES: SIDE CONTENT

.sidecontent a {
color: #699;
}
.sidecontent a:hover, .sidecontent a:focus {
color: #FFF;
}

21
 CSS Glossary 22

THE STATIC MENU STYLES

The following rules define the Static CSS Menu option. This menu is created automatically if you do not
have Tree Menu Magic 2 or if you select it as the Menu Type option in the Existentiality interface when
you create your page.

.menubar {
margin: 0px;
padding: 0px;
font-size: 14px;
}
.menubar li {
list-style-type: none;
margin-bottom: 4px;
}
.menubar a {
background-color: #699;
display: block;
color: #000;
text-decoration: none;
padding: 6px 12px;
border-top: 1px solid #81ABAB;
border-right: 1px solid #568181;
border-bottom: 1px solid #568181;
border-left: 1px solid #81ABAB;
zoom: 1;
}
.menubar a:hover, .menubar a:focus {
background-color: #999;
border-color: #ACACAC #8B8B8B #8B8B8B #ACACAC;
}

22
 Tree Menu Magic CSS Glossary 23

TREE MENU MAGIC CSS GLOSSARY

The 2 Existentiality TMM2 Style Themes are identical except for colors and background images, so we
will discuss p7TMM13.css, which is the CSS for the Black Theme. Some of the properties are obvious in
their purpose and we will not include those in the discussion. It is assumed that you have a fundamental
understanding of CSS and how to edit it using Dreamweaver's CSS Styles panel, direct editing, or a third-
party code editor.

ROOT MENU WRAPPER

.p7TMM13 {
font-size: 14px;
font-family: Calibri, Arial, sans-serif;
padding: 0px;
zoom: 1;
}

Use this rule to change the default font family and the base font size for the menu.

IE7 AND UNDER FIX

.p7TMM13 div {zoom: 1;}

This rule works around CSS bugs in old versions of IE.

THE BASE UL ELEMENT

.p7TMM13 ul {
margin: 0;
padding: 0;
}

The menu is an unordered list. This rule turns off browser default list indentation.

23
 Tree Menu Magic CSS Glossary 24

THE BASE LI ELEMENT

.p7TMM13 ul li {
list-style-type: none;
margin: 4px 0;
}

To turn off the default bullet character for unordered lists, we set list-style-type to none. Margin is set to
4px top and bottom and 0 left and right. The top and bottom margin provide 4 pixels of vertical
separation between links.

THE FIRST ROOT MENU ITEM LI

.p7TMM13 ul li.root_1 {
margin-top: 0;
}

TMM2 assigns special classes to the first and last list items for every menu level. This allows us to turn
off the top margin for the first menu item so that its top aligns properly with the top of its column.

24
 Tree Menu Magic CSS Glossary 25

SUB-MENU UL ELEMENT

.p7TMM13 ul ul {
border-top: 1px solid #C3C3C3;
border-right: 1px solid #909090;
border-bottom: 5px solid #909090;
border-left: 1px solid #C3C3C3;
background-color: #949494;
background-image: url(img/tmm_exist_submenu.jpg);
background-repeat: repeat-y;
position: relative;
top: 4px;
padding: 4px 0;
}

This rule sets the background color, background image, and border effects for the sub-menus. The
properties listed above in bold are critical to maintaining the vertical separation between the menu
triggers and the sub-menus at all times. While you can change any of the border colors, border-bottom
must remain 5px. Do not edit or delete the position, top, or padding properties unless your CSS skills are
advanced and you know what you're doing.

THE SUB-MENU LI ELEMENT

.p7TMM13 ul ul li {
margin: 0;
}

We only want vertical separation between the root menu items, so we set margin to 0 for the sub-menu
list items.

THE SUB-MENU DIV WRAPPER

.p7TMM13 ul ul div {
padding-left: 9px;
}

We assign 9px of left padding to indent the sub-levels.

25
 Tree Menu Magic CSS Glossary 26

THIRD-LEVEL SUB-MENU UL ELEMENT

.p7TMM13 ul ul ul {
background-color: transparent;
background-image: none;
border: 0;
border-left: 1px dotted #000;
position: static;
padding: 0;
}

Because the Existentiality Tree Menus are set to Reveal Right, we need to remove all background color,
borders, and padding from level 3 sub-menus so they slide in cleanly and transparently. We do,
however, want a dotted left border to display that acts as a usability aid and allows users to better
visualize the different sub-levels.

THE DEFAULT LINK STYLE FOR ROOT LEVEL LINKS

.p7TMM13 ul a {
display: block;
padding: 6px 8px 6px 18px;
border-top: 1px solid #7BA8A8;
border-right: 1px solid #588585;
border-bottom: 1px solid #588585;
border-left: 1px solid #7BA8A8;
background-color: #699;
color: #000;
text-decoration: none;
zoom: 1;
outline: 0;
}

Use this rule if you want to edit the background color, (text) color, or border effects for the default link
state of your root (top-level) menu items.

26
 Tree Menu Magic CSS Glossary 27

THE HOVER, FOCUS, AND ACTIVE LINK STYLES FOR ROOT LEVEL LINKS

.p7TMM13 ul a:hover, .p7TMM13 ul a:focus, .p7TMM13 ul a:active {

color: #FFF;
}

THE DEFAULT LINK STYLE FOR SUB-MENU LINKS

.p7TMM13 ul ul a {
font-size: 95%;
color: #000;
padding: 3px 8px 3px 18px;
border: 0;
background-color: transparent;
}

Use this rule to change the font size for sub-menu items. By default it is set to 95% of the base font size
set on the root menu wrapper rule.

THE HOVER, FOCUS, AND ACTIVE LINK STYLES FOR SUB-MENU LINKS

.p7TMM13 ul ul a:hover, .p7TMM13 ul ul a:focus, .p7TMM13 ul ul a:active {

color: #FFF;
}

PAGE LINKS

.p7TMM13 a.p7tmm_page {
background-image: url(img/tmm_exist_page_black.gif);
background-repeat: no-repeat;
background-position: left center;
}

The p7tmm_page class is a special CSS class assigned by the TMM2 system at runtime to all links that do
not trigger sub-menus. We use this rule to assign a little round bullet that displays next to the link. If you
don't want the bullet, simply delete this rule—but do not delete the hover rules below.

27
 Tree Menu Magic CSS Glossary 28

PAGE LINKS HOVER STYLE

.p7TMM13 a.p7tmm_page:hover {
background-color: #999;
border-color: #ACACAC #8B8B8B #8B8B8B #ACACAC;
}

This rule assigns a hovered background color and borders for page-only links so that they look like the
trigger links. Do not delete this rule.

Tip: Why don't we just assign a background color and borders to the default .p7TMM13 ul a:hover rule? We could, but we would need to undo
or counteract those rules for sub-menus and both trigger link states. Additionally, the colors would "stick" after a trigger link was clicked and
remain stuck until focus is removed from the link. The method we use allows for crisp and instant response as states are changed by the TMM2
script.

SUB-MENU PAGE LINKS HOVER STYLE

.p7TMM13 ul ul a.p7tmm_page:hover {
background-color: transparent;
border: 0;
}

We need to turn off background and borders for the sub-menu items so they slide in transparently.

THE CLOSED TRIGGER DEFAULT LINK STATE

.p7TMM13 a.trig_closed {
background-image: url(img/tmm_east_black.gif);
background-repeat: no-repeat;
background-position: left center;
}

This rule assigns a right pointing arrow icon to the Trigger links when they are in the closed state (sub-
menus hidden).

28
 Tree Menu Magic CSS Glossary 29

THE CLOSED TRIGGER HOVER STATE

.p7TMM13 a.trig_closed:hover {
background-color: #999;
border-color: #ACACAC #8B8B8B #8B8B8B #ACACAC;
}

We set a background color and border effects on the trigger links when they are hovered. This rule's
properties match those in the .p7TMM13 a.p7tmm_page:hover rule.

THE SUB-MENU CLOSED TRIGGER DEFAULT LINK STATE

.p7TMM13 ul ul a.trig_closed {
color: #000;
background-color: transparent;
}

We set a color and turn off background color for closed triggers in sub-menus.

THE SUB-MENU CLOSED TRIGGER HOVER LINK STATE

.p7TMM13 ul ul a.trig_closed:hover {
color: #FFF;
background-color: transparent;
}

We set a color and turn off background color for closed triggers in sub-menus when they are hovered
over.

29
 Tree Menu Magic CSS Glossary 30

THE OPEN TRIGGER DEFAULT LINK STATE

.p7TMM13 a.trig_open {
background-image: url(img/tmm_south_white.gif);
background-repeat: no-repeat;
background-position: left center;
color: #FFF;
border: 0;
background-color: transparent;
}

This rule assigns a downward pointing arrow icon to the Trigger links when they are in the open state
(sub-menus showing). We also change color to white, turn off borders, and set background color to
transparent.

THE SUB-MENU OPEN TRIGGER DEFAULT LINK STATE

.p7TMM13 ul ul a.trig_open {
color: #000;
background-color: transparent;
background-image: url(img/tmm_south_black.gif);
}

We set color to black, turn off background color, and change the downward pointing arrow from white
to black.

THE SUB-MENU OPEN TRIGGER HOVER LINK STATE

.p7TMM13 ul ul a.trig_open:hover {
color: #FFF;
}

30
 Tree Menu Magic CSS Glossary 31

THE BASE CURRENT MARK STYLE

.p7TMM13 a.current_mark {
font-weight: bold;
}

TMM2 includes a current marking feature. When a link in your menu matches the address of your
current page, the system assigns that link, and all of its parent links up to the root, a class of
current_mark. This is a very powerful usability aid that provides your visitors a visual indicator of where
they are in your site.

THE CURRENT MARK STYLE FOR SUB-MENU LINKS

.p7TMM13 ul ul a.current_mark {
color:#FFF;
}

The base current marker style rule sets font-weight to bold. For sub-menu current marked links we also
set color to white.

31
 Tree Menu Magic CSS Glossary 32

THE OPTIONAL OPEN ALL/CLOSE ALL LINKS RULES

.p7TMMtoggle {
display:none;
margin: 0 0 12px 0;
font-size: 12px;
}

This rule hides the Open All / Close All Links in Dreamweaver Design View. The TMM2 script will make
sure they are visible in browsers.

THE OPEN ALL/CLOSE ALL DEFAULT LINK STATE

.p7TMM13_toggle_all a {
color: #06C;
outline: 0;
}

THE OPEN ALL/CLOSE ALL HOVER LINK STATE

.p7TMM13_toggle_all a:hover, .p7TMM13_toggle_all a:focus, .p7TMM13_toggle_all a:active {

color: #EEE;
}

Note: The Open All/Close All feature is optional and set in the TMM2 interface by enabling the Include Open All / Close All Links option.

32
 Questions and Answers 33

QUESTIONS AND ANSWERS

CAN I USE A PVII MENU SYSTEM OR WIDGET ON MY PAGE?

Yes. You can insert any of our Menu Systems, Web Page Components, or Image Gallery Tools in your
Existentiality pages.

HOW DO I INSERT MY OWN LOGO IMAGE?

Simply replace the logo image with your own by editing the appropriate Fireworks document: exist-
yellow-masthead.png or exist-black-masthead.png—then export your images back to the
p7existential/img folder to overwrite the original.

Note: The Logo text in the Fireworks document is not editable. It is a bitmap. To edit it, simply delete it and add your own text or image to
create a custom logo.

WHAT IF I MESS UP MY STYLE SHEET OR IMAGES?

In the event that you break your style sheets beyond repair, you can revert back to a default style sheet
by deleting the broken one. To do so, find the broken style sheet that is linked to the page you are
working on. It will be inside the p7existential folder. Delete the CSS file.

Your page will now appear as un-styled text and images. Don't worry.

Open the Existentiality Page Pack interface and create a new page with the same layout as
your original. Save the page in the same folder as your origi nal page.

The system will generate a fresh style sheet.

You can delete the new page if you want.

Depending on the version of Dreamweaver you are running, you might have to save, close, and then re-
open the page to see your styles restored.

You can also delete images in the p7existential/img folder and create a new page, as above. When the
new page is created, the system will re-populate the img folder with default images for any image that
you deleted.

33
 Questions and Answers 34

SUPPORT AND CONTACT INFO

PVII quality does not end with your purchase—it continues with the best customer support in the
business.

PVII KNOWLEDGE BASE

The PVII Knowledge Base is an online PVII application allowing you to access dozens of Tech Notes, tips,
and techniques relating to our products, as well as to general web development issues..

Open the Knowledge Base | View the 10 Most Recent Additions

Newsgroup forum communities

The Project VII Newsgroup community is our primary support vehicle and is available 24 hours a day.
Choose from the following newsgroups:

1. The PVII Webdev Newsgroup

2. The PVII Dreamweaver Newsgroup
3. The PVII Fireworks Newsgroup
4. The PVII CSS Newsgroup

Use a news reader program such as Outlook Express, Windows Mail, Thunderbird, or Entourage to set
up a new news account pointing to our news server:

forums.projectseven.com

If you are not sure how to do this, the following links will help you:

 Setting up a new newsgroup account in Outlook Express

 Setting up a new newsgroup account in Mozilla Thunderbird
 Setting up a new newsgroup account in Entourage

If you have another newsgroup-capable program that you are using, please see its documentation to
learn how to add a new newsgroup account.

Note: PVII newsgroups are private and have nothing to do with Usenet feeds that may be provided by your ISP. That is, you will not find our
newsgroups in a list of newsgroups distributed by your internet service provider. You must set up our news server as a new account.

34
 Questions and Answers 35

RSSNews Feeds

Keep up with the latest news the minute it's released by subscribing to our RSS news feed. If you are not
sure how to subscribe, please check this page:

PVII RSS Info

Before you Contact us

Before making a support inquiry, please be certain to have read the documentation that came with your
product. Please include your Dreamweaver version, as well as your computer operating system type in
all support correspondence.

E-Mail: support@projectseven.com

Phones: 330-650-3675 | 336-374-4611

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

Snail mail

Project Seven Development

339 Cristi Lane
Dobson, NC 27017

35