SALT AND PEPPER

by Project Seven Development

Salt and Pepper 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

 Salt and Pepper 2

CONTENTS
Salt and Pepper ............................................................................................................................................. 1
Install the extension .................................................................................................................................. 3
Work in a defined Dreamweaver site ....................................................................................................... 3
Creating a Salt and Pepper page ............................................................................................................... 4
Assets folders ........................................................................................................................................ 6
Accessibility ............................................................................................................................................... 7
Editing and customizing ............................................................................................................................ 8
Background images and column widths ............................................................................................... 8
The footer ........................................................................................................................................... 12
Editing the background images........................................................................................................... 15
Editing font styles.................................................................................................................................... 16
Link styles ............................................................................................................................................ 17
Main navigation menus .......................................................................................................................... 19
Standard menus .................................................................................................................................. 19
Pop Menu Magic 2 Navigation Menus ................................................................................................ 22
PMM2 sub-menu background image.................................................................................................. 23
Can I add a second PMM2 menu to my page? ....................................................................................... 24
Adding a horizontal menu ................................................................................................................... 24
Adding a vertical menu ....................................................................................................................... 27
Can I remove one of the sidebar “sections”? ......................................................................................... 29
Can I use a PVII menu system or widget on my page? ........................................................................... 32
How do I insert my own masthead image? ............................................................................................ 32
What if I mess up my style sheet? .......................................................................................................... 32
Support and contact info ........................................................................................................................ 33
PVII Knowledge Base ........................................................................................................................... 33

Page 2
 Salt and Pepper 3

INSTALL THE EXTENSION

Look for the extension installer file p7_SPepper_110.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. Once the installation is complete, restart
Dreamweaver.

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

Page 3
 Salt and Pepper 4

CREATING A SALT AND PEPPER PAGE

Viewed from any angle, Salt and Pepper 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 > Salt and Pepper

Note: If you have older Page Packs installed, as the above image depicts, you'll notice that Salt and Pepper appears as a
dedicated entry on the menu flyout. This is normal and all future Page Packs will be listed this way.

Page 4
 Salt and Pepper 5

The Salt and Pepper interface will open.

Select a layout from the Page Design column and the Preview image will change to reflect your choice.
There are 5 layouts—each is offered with the option of a PMM2 menu or a basic CSS menu—for a total
of 10. You must have Pop Menu Magic 2 installed to use the +PMM2 layouts variations.

Note: Salt and Pepper does not support Pop Menu Magic 1. If you own PMM1 you do qualify for upgrade pricing ($65) to
PMM2.

Click the Create button.

Page 5
 Salt and Pepper 6

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

ASSETS FOLDERS

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

1. p7pmm
This folder is created if you chose a layout containing a Pop Menu Magic 2 menu. It contains
your PMM2 script and CSS; and an img sub-folder
2. p7spepper
This folder contains your Salt and Pepper CSS files and an img sub-folder
3. Fireworks
This folder contains editable Fireworks 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.

Page 6
 Salt and Pepper 7

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.

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.

Page 7
 Salt and Pepper 8

EDITING AND CUSTOMIZING

Salt and Pepper 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

Salt and Pepper uses a background image assigned to the contentwrapper DIV in each of the 2 column
layouts. This background is what renders the sidebar column color/texture, as well as the vertical dotted
rule between the columns.

SIDEBAR RIGHT LAYOUTS

For the sidebar right layouts, the image used is p7spep_sbright.jpg:

#contentwrapper {
background-color: #FFF;
background-image: url(img/p7spep_sbright.jpg);
background-repeat: repeat-y;
background-position: 680px 0px;
overflow: hidden;
}

The image is 600px wide and 200px tall and looks like this:

Page 8
 Salt and Pepper 9

We set background-position to 680px left and 0px top to force the image to render 680 pixels from the
left edge of the contentwrapper DIV—which is where the right sidebar begins. We then set the
background-repeat value to repeat-y, which causes the image to tile vertically from the top of the layout
to the bottom.

This method allows you to change the widths of your columns rather easily. If, for example, you wanted
your sidebar to be 20px wider, you would do this:

Make maincolumn 20px narrower by changing the width value from 680px to 660px:

.maincolumn {
float: left;
width: 660px;
}

Make sidebarwrapper 20px wider by changing the width value from 200px to 220px:

.sidebarwrapper {
float: left;
width: 220px;
margin: 10px;
}

Decrease the left background position on contentwrapper by 20px by changing the background-
position value from 680px 0 to 660px 0:

#contentwrapper {
background-color: #FFF;
background-image: url(img/p7spep_sbright.jpg);
background-repeat: repeat-y;
background-position: 660px 0px;
overflow: hidden;
}

Tip: It doesn't matter which columns you are changing. The key is to ensure that if you add width to one column you
subtract a like amount from the other column and also adjust the left position of the background image by the same
amount.

Page 9
 Salt and Pepper 10

SIDEBAR LEFT LAYOUTS

For the sidebar left layouts, the image used is p7spep_sbleft.jpg:

#contentwrapper {
background-color: #FFF;
background-image: url(img/p7spep_sbleft.jpg);
background-repeat: repeat-y;
background-position: -380px 0px;
overflow: hidden;
}

The image is 600px wide and 200px tall and looks like this:

Our objective is to position the image so that the dotted rule along its right edge aligns precisely
between the left and right columns.

We set background-position to -380px left and 0px top to force the image to begin rendering 380
pixels outside the left edge of the contentwrapper DIV—effectively hiding the first 380 pixels of the
image, allowing only the last 220px of the image to show. Since the sidebar is 200px wide and starts
20px from the left edge of the contentwrapper, this positions the background image perfectly inside
the sidebar so that the dotted border on the right edge of the image aligns precisely between the left
and right columns. We then set the background-repeat value to repeat-y, which causes the image to tile
vertically from the top of the layout to the bottom.

Page 10
 Salt and Pepper 11

This method allows you to change the widths of your columns rather easily. If, for example, you wanted
your sidebar to be 30px wider, you would do this:

Make maincolumn 30px narrower by changing the width value from 680px to 650px:

.maincolumn {
float: right;
width: 650px;
}

Make sidebarwrapper 30px wider by changing the width value from 200px to 230px:

.sidebarwrapper {
float: right;
width: 230px;
margin: 10px;
}

Move the background position on contentwrapper by 30px to the left by changing the background-
position value from -380px 0 to -350px 0:

#contentwrapper {
background-color: #FFF;
background-image: url(img/p7spep_sbleft.jpg);
background-repeat: repeat-y;
background-position: -350px 0px;
overflow: hidden;
}

Page 11
 Salt and Pepper 12

THE FOOTER

The footer DIV has a simple background image that is used to render the dotted rule between its 2
columns.

.footer {
overflow: hidden;
font-size: 0.7em;
color: #A09B97;
margin-top: 20px;
background-image: url(img/p7spep_vrule.gif);
background-repeat: repeat-y;
background-position: 504px 0px;
}

The background image is positioned with a left value of 504px so that it renders between the columns. If
you want to change the widths of the columns, use the same technique used above for the main
columns. For example, to make the left footer column 20px wider:

Make footercolumn1 20px wider by changing the width value from 498px to 518px:

.footercolumn1 {
float: left;
width: 518px;
margin-right: 30px;
}

Make footercolumn2 20px narrower by changing the width value from 370px to 350px:

.footercolumn2 {
float: left;
width: 350px;
}

Page 12
 Salt and Pepper 13

Move the background position on footer to the right by 20px by changing the background-position
value from 504px 0 to 524px 0:

.footer {
overflow: hidden;
font-size: 0.7em;
color: #A09B97;
margin-top: 20px;
background-image: url(img/p7spep_vrule.gif);
background-repeat: repeat-y;
background-position: 524px 0px;
}

Page 13
 Salt and Pepper 14

CHANGING THE FOOTER TO A SINGLE COLUMN

If you’d like to have a single column footer here is what you do:

Delete footercolumn2

Place your cursor inside the second footer column.

On your Tag Selector bar, which runs along the bottom of the Dreamweaver design window, click
<div.footercolumn2>

The entire second column will highlight.

Press your Delete key to remove it.

Remove the background image on the .footer class by changing its CSS rule to:

.footer {
overflow: hidden;
font-size: 0.7em;
color: #A09B97;
margin-top: 20px;
}

Page 14
 Salt and Pepper 15

Delete the entire .footercolumn1 CSS rule from your style sheet to eliminate the width and the float
from your remaining column.

Now you have a single-column footer:

EDITING THE BACKGROUND IMAGES

When you created your page, the Page Pack system created a Fireworks folder in which you'll find a
Fireworks document, p7salt_pepper.png, in which you can edit the background images. Open this
document if you'd like to edit the background images for the columns or the vertical footer rule. 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 p7spepper/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. Simply
make your column background images 600px wide by 200px tall.

Page 15
 Salt and Pepper 16

EDITING FONT STYLES

The main page font family is declared on the page's body selector, which is the first style rule in your
page style sheet:

body {
font-family: Arial, Helvetica, sans-serif;
color: #000;
background-color: #FFF;
margin: 0 0 40px 0;
padding: 0px;
font-size: 100%;
}

Font-sizes for the individual areas of the page are set on the relevant CSS rule:

.maincontent {
padding: 24px 32px;
font-size: .8em;
line-height: 1.5em;
}

.sidebar, .sidebar2 {
color: #D5D1CE;
background-color: #000;
padding: 16px;
font-size: .7em;
line-height: 1.4em;
}

.footer {
overflow: hidden;
font-size: 0.7em;
color: #A09B97;
margin-top: 20px;
background-image: url(img/p7spep_vrule.gif);
background-repeat: repeat-y;
background-position: 504px 0px;
}

Tip: Font sizes are set in em units, but feel free to use pixels if you want to.

Page 16
 Salt and Pepper 17

LINK STYLES

Each layout style sheet comes with link style rules that can be edited using Dreamweaver's CSS Styles
Panel:

MAIN CONTENT LINK STYLES

The maincontent link styles do not have any colors defined—letting the links adapt to browser default
styles. The rules are, however, still editable and you can set colors as you wish for default, visited, and
hover links by editing the following rules:

.maincontent a {}
.maincontent a:visited {}
.maincontent a:hover {}

SIDEBAR LINK STYLES

Link styles for the black Sidebar:

.sidebar a {
color: #4AB0C6;
}
.sidebar a:visited {
color: #4AB0C6;
}
.sidebar a:hover {
color: #FFF;
}

Link styles for the teal Sidebar:

.sidebar2 a {
color: #FFF;
}
.sidebar2 a:visited {
color: #FFF;
}
.sidebar2 a:hover {
color: #000;
}

Page 17
 Salt and Pepper 18

FOOTER LINK STYLES

Link styles for the left footer column:

.footercolumn1 a {
color: #4AB0C6;
}
.footercolumn1 a:visited {
color: #4AB0C6;
}
.footercolumn1 a:hover {
color: #FFF;
}

Link styles for the right footer column. These styles set the link box to display as a block, creating a
buttonized effect:

.footercolumn2 a {
color: #C0C0C0;
text-decoration: none;
display: block;
padding: 6px 6px;
border: 1px solid #333;
background-color: #161616;
}
.footercolumn2 a:hover {
color: #000;
background-color: #4AB0C6;
border-color: #FFF;
}

Page 18
 Salt and Pepper 19

MAIN NAVIGATION MENUS

Your Salt and Pepper page contains a horizontal or a vertical navigation menu. The menu can be either a
standard CSS menu or a Pop Menu Magic 2 menu.

STANDARD MENUS

Style rules for standard Horizontal CSS menus are in your Salt and Pepper page style sheet:

/*
EXTRA STYLES for BASIC MENUBAR
*/
#menubar {
width: 100%;
overflow: hidden;
font-size: 0.8em;
margin-bottom: 20px;
}
#menubar .menu {
margin: 0px;
padding: 0px;
}
#menubar .menu li {
list-style-type: none;
float: left;
margin-left: 6px;
}
#menubar .menu li.first {
margin-left: 0;
}

Note: The li.first class is assigned to the first menu item to set its left margin to zero.

Page 19
 Salt and Pepper 20

#menubar .menu a {
color: #CCC;
text-decoration: none;
display: block;
padding: 12px;
border: 1px solid #666;
}
#menubar .menu a:hover {
color: #000 !important;
border-color: #6DC0D1 #000 #000 #6DC0D1;
background-color: #4AB0C6;
}

Style rules for standard Vertical CSS menus are in your Salt and Pepper page style sheet:

/*
EXTRA STYLES for BASIC MENUBAR
*/
#menubar {
font-size: 0.8em;
margin-bottom: 2px;
}
#menubar .menu {
margin: 0px;
padding: 0px;
}
#menubar .menu li {
list-style-type: none;
margin-top: 2px;
}
#menubar .menu li.first {
margin-top: 0;
}

Note: The li.first class is assigned to the first menu item to set its top margin to zero.

Page 20
 Salt and Pepper 21

#menubar .menu a {
color: #CCC;
text-decoration: none;
display: block;
padding: 6px 12px;
border: 1px solid #000;
background-color: #000;
}
#menubar .menu a:hover {
color: #000 !important;
border-color: #6DC0D1 #000 #000 #6DC0D1;
background-color: #4AB0C6;
}

Page 21
 Salt and Pepper 22

POP MENU MAGIC 2 NAVIGATION MENUS

If you own Pop Menu Magic 2, the Salt and Pepper installer has created a new Style Theme for your
PMM2 system called, appropriately enough, Salt and Pepper. This is the style theme used for PMM2
menus in a Salt and Pepper page.

Your PMM2 menus can be edited just like any other PMM2 menu. Please refer to your PMM2 user guide
for basic editing issues.

Each Salt and Pepper style sheet contains a special rule for the root PMM2 container.

For the horizontal menu, the rule is:

#p7PMM_1 {
width: auto;
margin: 0 0 16px 0;
font-size: 0.8em;
position: relative;
z-index: 9999;
}

The bottom margin is set to 16px to provide white space below the menu. Font-size is set to .8em.
Position is set to relative, and z-index is set to 9999 to ensure the menu will open above any other
positioned content on your page.

For the vertical menu, the rule is:

#p7PMM_1 {
width: auto;
margin: 0 0 2px 0;
font-size: 0.8em;
position: relative;
z-index: 9999;
}

The bottom margin is set to 16px to provide white space below the menu. Font-size is set to .8em.
Position is set to relative, and z-index is set to 9999 to ensure the menu will open above any other
positioned content on your page.

You'll find these rules in your page style sheet—not your PMM2 menu style sheet. The rules only
affect the menus that the Salt and Pepper system builds. If you later add a second PMM2 menu to your
page, that menu will not be affected.

Page 22
 Salt and Pepper 23

PMM2 SUB-MENU BACKGROUND IMAGE

The PMM2 Salt and Pepper menus are very simple to edit. The semi-opaque sub-menus use a special
alpha-transparent PNG background image. We have provided an editable Fireworks version to allow you
to easily change the color. The Fireworks document is called p7spep_submenus.png and you'll find it
inside the Fireworks folder that Salt and Pepper created in your site. The image looks like this:

The top rectangle is the background for the horizontal menu and is slightly more transparent than the
bottom one, which is the background used in the vertical menu. Simply set a new color for both
rectangles and export the images back to your p7spepper/img folder.

The images are already optimized as PNG32 with alpha channel transparency. Do not change the
optimization settings and do not set a background color for the Fireworks canvas.

Page 23
 Salt and Pepper 24

CAN I ADD A SECOND PMM2 MENU TO MY PAGE?

Yes. You can add a vertical menu to a page that already has a horizontal one or a horizontal menu to a
page that has a vertical menu. Here’s how:

ADDING A HORIZONTAL MENU

We’ll assume that you have already created a Salt and Pepper page with a default vertical menu and,
after adding your content, you’ve learned that the client would also like a horizontal menu across the
top of the page.

Click the masthead banner image once

On your Tag Selector bar, click <div#masthead>
Press your keyboard’s left arrow key once to position your cursor just above the masthead DIV

Open the Pop Menu Magic 2 interface

Create your menu items

Set Menu Type to Horizontal
Select the Salt and Pepper Style Theme

Page 24
 Salt and Pepper 25

Click OK

The menu is built

The text is a bit large and the positioning is not optimal. Let’s fix that.

Locate the root PMM2 DIV and note its ID. If this is the second menu you are placing on your page, the
root DIV tag will look like this:

<div id=“p7PMM_2” class=“p7PMMh15”>

Page 25
 Salt and Pepper 26

Create a new style rule in your Salt and Pepper style sheet:

#p7PMM_2 {
width: auto;
margin: 0 0 16px 0;
font-size: 0.8em;
position: relative;
z-index: 9999;
}

That’s it. Your menu should now be perfect.

Page 26
 Salt and Pepper 27

ADDING A VERTICAL MENU

We’ll assume that you have already created a Salt and Pepper page with a default horizontal menu and
left sidebar and, after adding your content, you’ve learned that the client would also like a vertical menu
in the sidebar. The logical place for such a menu is at the top of the sidebar so we’ll establish an
insertion point above the sidebar’s content DIV. We don’t want to insert it inside the content DIV
because we want the menu to extend to the full width of the sidebar rather than be constrained to the
padding inside the content area.

Place your cursor inside the sidebar

On your Tag Selector bar, click <div.sidebar>
Press your keyboard’s up arrow key once to position your cursor just above the sidebar DIV

Tip: If you want to add a vertical menu to the lower sidebar section then place your cursor inside its content area and
select <div.sidebar2> on your Tag Selector bar.

Open the Pop Menu Magic 2 interface

Create you r menu items

Set Menu Type to Vertical
Set Sub Menu Offsets both to 0 (zero)
Select the Salt and Pepper Style Theme

Page 27
 Salt and Pepper 28

Click OK

The menu is built.

Page 28
 Salt and Pepper 29

CAN I REMOVE ONE OF THE SIDEBAR “SECTIONS”?

The 2-column layouts all contain 2 sidebar “sections”. One is black and the other is teal. To remove one
of them, place your cursor inside the box.

On your Tag Selector bar, click <div.sidebarbox>

The entire box will highlight

Press your Delete key to remove it

In the above scenario, the remaining sidebar “section” is teal. If you want to change it to black, place
your cursor inside the box.

Page 29
 Salt and Pepper 30

On your Tag Selector bar, right-click <div.sidebar2>

Choose Set Class > sidebar

Page 30
 Salt and Pepper 31

What do I do if I don't want “boxes” or “sections” in my sidebar?

Delete the following style rules:

 .sidebarbox
 .sidebar2

Locate the .sidebar, .sidebar2 rule and edit it so it looks like this:

.sidebar, .sidebar2 {
font-size: .7em;
line-height: 1.4em;
}

Locate the .sidebarwrapper rule and edit it so it looks like this:

.sidebarwrapper {
float: right;
width: 200px;
margin: 10px;
margin-top: 0px;
}

Your sidebar will now look like this:

Page 31
 Salt and Pepper 32

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

Yes. You can insert any of our Web Page Widgets or PVII Presentation Tools in your Salt and Pepper
pages.

HOW DO I INSERT MY OWN MASTHEAD IMAGE?

Simply replace the placeholder masthead image with your own. The masthead height will automatically
adjust to your image's height. Width will automatically be constrained to the proper layout width
because the masthead CSS rule declares overflow: hidden. Here is the masthead CSS rule:

#masthead {
overflow: hidden;
margin-bottom: 20px;
}

WHAT IF I MESS UP MY STYLE SHEET?

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 p7spepper folder. Delete the CSS file.

Your page will now appear as unstyled text and images. Don't worry.

Open the Salt and Pepper Page Pack interface and create a new page with the same layout
as your original. Save the page in the same folder as your original 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.

Page 32
 Salt and Pepper 33

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.

Page 33
 Salt and Pepper 34

RSS NEWS 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

Page 34