Site Grinder 3 Docs PDF March29 2010

1
Home
Copyright © Media Lab Inc. All Rights Reserved.

2
Where To Begin
The SiteGrinder documentation is divided into "Essentials Guides" and "Reference Guides".
Anyone new to SiteGrinder should begin with the Essentials Guides and read the first 3 or 4 (or watch the
associated videos) in order, starting with the SiteGrinder 3 Essentials Introduction.
If you are a SiteGrinder 2 user you may want to begin with the "SiteGrinder 3 for SiteGrinder 2 Users"
section, but you will also want to go through the Essentials Guides for a clear understanding of how
SiteGrinder 3 works.
The point of the essentials guide is to provide the vital information every user needs to know about a
feature area.
When you are ready to learn more about a particular feature you can move on to the reference guide for
that feature or start playing around in Photoshop.
Collapse all
Expand all Collapse all
You may also want to peruse the Complete Hint List.

3
Getting Started
Where To Begin
The SiteGrinder documentation is divided into "Essentials Guides" and "Reference Guides".
Anyone new to SiteGrinder should begin with the Essentials Guides and read the first 3 or 4 (or watch the
associated videos) in order, starting with the SiteGrinder 3 Essentials Introduction .
If you are a SiteGrinder 2 user you may want to begin with the " SiteGrinder 3 for SiteGrinder 2 Users "
section, but you will also want to go through the Essentials Guides for a clear understanding of how
SiteGrinder 3 works.
The point of the essentials guide is to provide the vital information every user needs to know about a
feature area.
When you are ready to learn more about a particular feature you can move on to the reference guide for
that feature or start playing around in Photoshop.
Installing and Activating

Essentials Guides
SiteGrinder 3 for SiteGrinder 2 Users
You may also want to peruse the Complete Hint List.
Installing and Activating
Contents
Contents
Installing and Activating SiteGrinder 3
Installing
Activating SiteGrinder 3
Reactivating To Add Commerce or Control
Installing an Updated Version of SiteGrinder 3
Transferring To a New Machine or Version of Photoshop
Mac Installer Troubleshooting
Installing Manually on a Mac
Uninstalling SiteGrinder 3
Using Both SiteGrinder 2 and SiteGrinder 3

4
Installing and Activating SiteGrinder 3
Installing
1. Download the SiteGrinder Demo Installer (even if you have purchased SiteGrinder) appropriate to
your platform and Photoshop version.
2. Quit Photoshop if it is running.
3. Run the installer application. If you have a previous version of SiteGrinder 3 installed, the
installer will delete it prior to installing the new version.
4. Select a Photoshop or Elements plug-ins folder to install into.
5. Now you can launch Photoshop.
6. Once you have a PSD you want to build open in Photoshop, launch SiteGrinder from Photoshop's
File->Automate menu.
Note: SiteGrinder 2 and SiteGrinder 3 can be installed at the same time. Just don't try to use the same
Photoshop file with both.
Activating SiteGrinder 3
Open SiteGrinder 3 and click the "Activate" button.
This will present the following window:
Fill out the requested information and click the "Activate" button next to the activation code field.
Finally, close the Activation window.

5
IMPORTANT: Be sure to use a valid email address.
Reactivating To Add Commerce or Control
If you are changing your SiteGrinder activation (for example, if you are upgrading to the Control or
Commerce add-ons) you will need to "reactivate".
1. Open SiteGrinder and click the "Activate" button. You'll see the Activation window already filled
out with your information but you won't be able to edit it.
2. Click "Reactivate".
3. This will allow you to edit your activation info but normally you won't need to unless you are
switching to a new activation code. If you change any of the other fields you will have to approve
the change through an email sent to the previous email address you used to activate initially.
4. Click "Activate".
5. Close the Activation window.
At this point your activation status will change to reflect your add-on activation(s).
Installing an Updated Version of SiteGrinder 3
Media Lab periodically releases free updates with bug fixes and new features. These versions are usually
numbered by .01, as in "3.01", "3.02" etc.
SiteGrinder will let you know if you are not running the latest version.
To install one of these updates visit medialab.com and download the latest version of the demo for your
platform. Run the demo installer to install the updated version of SiteGrinder. SiteGrinder will
automatically uninstall the previous version and, unless the activation system has changed in the new
version (very rare), you won't have to reactivate.
Transferring To a New Machine or Version of Photoshop
You can transfer your activation to a new computer (even a new platform, as in Windows to Mac) or to a
new version of Photoshop on the same machine using the same process:
1. Once you have installed your new copy of Photoshop on your new location, install the latest
version of SiteGrinder there.
2. Launch Photoshop.
3. Open SiteGrinder from Photoshop's file->automate menu.
4. Click the "Activate" button.
5. Fill out the all of the fields in the activation window that appears. Use your current activation
code.
6. Click Activate in the activation window.
At this point the Activation window will close and the activation system will send an email to the email
address you provided when you activated or last transferred activation. You'll need to click on a link
contained in that email to grant permission for the transfer.
Finally return to SiteGrinder, open the Activation window again and click Activate to complete the
process.

6
Mac Installer Troubleshooting
Please let Media Lab know at help@medialab.com about any problems you may be having with the
installer so we can improve it in the future.
When the SiteGrinder installer encounters a problem it can often be fixed by restarting your computer
and running the installer again.
Here are a few other suggestions, especially if the error indicates a permissions problem:
If you are not logged in as an administrator you may need to do so to install.

You may need to repair your permissions. Click here to find out how
If all else fails you can follow the instructions below to install manually.
Installing Manually on a Mac

1. Quit Photoshop
2. Double click the installer disk image to open it
3. Control-click (or right-click) on the installer application icon
4. Choose "Show Package Contents" from the menu that appears
5. In the Finder window that opens you'll see a folder named "contents"
6. Double click "contents" to open it and you'll see a folder named "Media Lab SiteGrinder 3"
7. Drag the "Media Lab SiteGrinder 3" folder to your Photoshop Plug-Ins folder
8. Also in "Contents" you'll find a folder named "SiteGrinder 3"
9. Drag the "SiteGrinder 3" folder to your Applications folder
10. Optionally drag "SiteGrinder Helpers" from "Contents" to the "Scripts" folder found in
Photoshop's "Presets" folder.
Uninstalling SiteGrinder 3
To remove SiteGrinder 3 delete these directories:
SiteGrinder 3 in your Applications (Mac) or Program Files (Windows) directory.
Media Lab SiteGrinder 3 in your Photoshop plug-ins directory.
SiteGrinder Helpers in Photoshop's Presets->Scripts directory.
SiteGrinder builds and registration information are kept in SiteGrinderData in your user account's Home
directory. You may not want to delete it.
Using Both SiteGrinder 2 and SiteGrinder 3
SiteGrinder 2 and SiteGrinder 3 can be installed at the same time. You can't use the same Photoshop file
with both, but otherwise you can use them at different times with different files.

7
Essentials Guides
The Essentials Guides Are Essential
SiteGrinder has an enormous variety of features, many of which have a great deal of depth. Almost no
one needs to know everything about every feature, so we've divided up the crucial information into
feature-specific "Essentials Guides". These contain only the information that every single user must know
before jumping into a feature.
If you haven't already, you should start with the general "SiteGrinder Essentials" guide and the next few
guides it leads to. After that, read the appropriate guides as you start using features you haven't tried
before.
If you ask a question on the forums or of tech support that is covered in one of these guides you will be
directed to the appropriate guide in a firm but friendly manner.
Essentials Guide Contents
SiteGrinder 3 Introduction
Workflow Part 1 (Design)
Workflow Part 2 (Content)
Web Text
Page Creation and Management
Page Layout
Hyperlinking Buttons and Text
Buttons, Animation and Interactivity
Content Management
Video, Flash, and Other External Media
Uploading
Image Quality and Compression
Galleries and Slideshows
Email and Other Forms
E-Commerce
Web Hosts & Web Servers
SiteGrinder 3 Introduction
The Essentials: What every user needs to know about SiteGrinder 3
This guide has a video version and a text version found below the video.
All of the SiteGrinder 3 training videos are collected on the SiteGrinder TV page at Media Lab's website.

8
How To Learn SiteGrinder

At last count, SiteGrinder 3 has 1.7 kazillion features. Luckily you only need to learn the skills that you'll
be using to make your particular website. Even luckier you will never have to learn HTML, CSS, JS,
PHP, CGI or any other scary acronym. You don't even need to know what they stand for! (For extra
credit, however, you can learn S.R.Y.W., which stands for "SiteGrinder Rocks Your World!")
To get you grinding out websites as soon as possible, we have divided even the introductory
documentation into short "Essentials Guides" (like this one) which introduce you to crucial concepts you
should grasp before you start experimenting with a feature that is new to you. This guide is one of them,
and is the first of several that we suggest every SiteGrinder user read to get started. You'll find a link to
the next guide at the end of this one.
Once you finish the initial few Essentials Guides you will be ready to start building your site. Each time
you want to add something you haven't read about yet like, for example, video, you will read the
Essentials Guide for that feature.
If you need more detailed information than the essentials guide provides, every feature category has a
"Learning Center" with links to all of the resources available for learning that feature.
Resources include:
Detailed reference guides

Step by step tutorials
Training videos
Sample Photoshop files
SiteGrinder is...
SiteGrinder is a Photoshop plug-in that converts layered Photoshop designs into standard finished
websites and can even upload them to your server.
The Photoshop menu command to launch SiteGrinder lives in Photoshop's File -> Automate menu, not
the Filters menu.

9
SiteGrinder 3 also includes a separate application called the "SiteGrinder 3 Engine". You won't directly
interact with this application very often. It acts as an assistant to SiteGrinder to help it display and edit
web pages in a browser before you upload them. When you launch the SiteGrinder 3 plugin the
SiteGrinder 3 Engine application also launches if it is not already running.
The SiteGrinder Engine can run by itself even when Photoshop and the SiteGrinder plug-in aren't
running. This is to allow you to use SiteGrinder 3's browser-based Design and Content Managers
without having to launch Photoshop.
The SiteGrinder Engine presents a single small window which acts as a quick-launch tool for opening
your recent Photoshop files and built sites, as seen below:

10
General Stuff You Should Know About Photoshop

There are a few things you need to know about Photoshop layers to use SiteGrinder effectively:
Double-clicking on a layer's name in the layers palette allows you to give it any name you want.
This is even true of type layers.
Layers are not the same dimensions as the Photoshop document. They are only as big as what
they contain. If you make a new image layer and paint a single pixel in it, that's how big it is, one
pixel.
The order of layers in the layers palette is the same as their stacking order in the document. The
content of layers that are higher in the palette will, in the document, cover content in layers below
them in the layers palette.
Even empty areas of a layer can block the mouse from triggering layers below it in the layers
palette. A layer containing nothing but a single dot in the upper left corner and another in the
lower right corner will still block clicks meant for any lower layer.
You can easily drag and drop layers in the layers palette to change their stacking order.
It is easier to keep track of many layers when you organize them with layer groups, which are the
folders you can make in the Layers palette.
You will learn about Photoshop "layer comps". It's the one Photoshop feature most people aren't
very familiar with when they first learn SiteGrinder. Don't worry, we'll teach you all about them!
If you have any questions about Photoshop layers please visit our forum and we'll be more than happy to
answer them. There is documentation about Photoshop features related to SiteGrinder here.

11
Photoshop Layers With "Hints" Tell SiteGrinder What To Do

When you create Photoshop layers for your design you will add "hints" to certain layers' names that tell
SiteGrinder something extra about them. A hint is just a word you place at the end of a layer's name after
a dash to tell SiteGrinder about any special function you may want a layer to have. An example hint is
the word "button." A layer you would like SiteGrinder to make into a button linking to your home page
could be named "home-button" or "My Company Homepage-button".
Sometimes SiteGrinder will create functionality from several different layers working together. You tell
SiteGrinder about layers that work together by giving them the same names, but with different hints. To
tell SiteGrinder that an image layer named "home-button" should display a different layer when your site
visitor hovers over it with the mouse you will create a second layer with the hover version and name it
"home-hover". Because both layers are named "home" SiteGrinder knows they are two parts of the same
thing.
Some hints can be used on layer groups (the folders in the layers palette) as well as on layers.
Multiple hints can be placed in a layer name when necessary as long as each hint has its own dash, as in
"Company Description-text-scroll".
When you see a word in the SiteGrinder documentation that starts with a dash, as in -button, you know it
is a hint.
There are many hints, but most users employ only a few common ones. There is a list of all SiteGrinder
3 hints.
Some Hinted Layers Act As Placeholders or Boundaries

Sometimes SiteGrinder just needs a rectangle to indicate something special about an area of your design.

12
Placeholder Layers
Since you can't import something like a web video into Photoshop directly, you create a simple
rectangular layer that is the same pixel dimensions as the video and position it where you'd like the video
to be on the page. You are free to use an image layer or an object layer to do this. Such layers should
contain nothing other than this rectangle.
Placeholder layers themselves never appear on the final built web page. Instead they are replaced by
something else, such as video, gallery images, or Flash animations. If you want your video or gallery
picturebox to have some decoration, like a dropshadow or a frame around it, you don't make the
decoration in the placeholder layer. Instead, you would create a separate layer beneath the placeholder
layer and create the decoration there.
Common hints used with placeholder layers include -xmedia (for external media), -picturebox (for
galleries) and -embed (for embedding web code for things like PayPal or YouTube videos).
Boundary Layers
Boundary layers are also simple rectangular image or shape layers, but boundary layers indicate
rectangular areas that SiteGrinder should put other layers or page elements in.
A -thumbsheet layer, for example, tells SiteGrinder about the boundaries it should use to display thumbs
for a gallery. Like placeholder layers, you won't see boundary layers themselves on the final page but
you will see the way they affect other layers.
Often placeholder and boundary layers can work together. A larger boundary layer can represent a
rectangle that has a layout effect on smaller placeholder layers contained within its boundaries. A basic
example of this is the way "-thumbsheet" and "-thumb" layers work together in Galleries.
Layers With Certain Names Can Control Page Layout Options

You can control the alignment and background settings of your pages by creating layers with certain
complete special names. If you create a layer called "browser-background" and apply a pattern overlay
or gradient layer style to the layer, SiteGrinder will use that information to set the background tile of the
browser window. These kinds of layers allow you to set up complex background tiles, pages from the
same document with varying sizes and alignments, and more. See the "Page Layout Essentials Guide" to
learn more about these features.
One Photoshop Document Can Produce Multiple Pages

You create different pages within the same Photoshop document using Photoshop's "layer comps" feature
in concert with the "-page" hint. You can learn more about layer comps and pages in the "Page Creation
and Management Essentials" guide.
Initial Settings For Your Photoshop Document

You may wish to begin your project with one of the SiteGrinder "Site Starter" documents which already
have their initial settings and layout prepared.
If you are beginning a design from scratch then these are some recommended Photoshop "New
Document" settings for a basic site:

13
The SiteGrinder Workflow

There are 2 phases to the SiteGrinder 3 workflow, Design and Content.
Design
In the design phase you start in Photoshop, simply creating the layers that make up your page designs.
This is where you will spend most of your time adjusting the look of your website and giving layers hints
when necessary.
When you are ready to see your design in a browser you open SiteGrinder from Photoshop's
File->Automate menu. Launching the plug-in will also launch the "SiteGrinder 3 Engine" helper
application if it isn't already launched. Once the plug-in window opens, it will show you the Report tab
which advises you if anything in your design seems problematic. If there are problems that you need to
address you can close SiteGrinder and return to Photoshop to fix things.
When your design is ready to try you will switch to the "Build & Deploy" tab of the SiteGrinder window
and click the "Build" button. SiteGrinder will open the built design(s) in your default web browser.
There, right in the browser window, you can use SiteGrinder's "Design Manager" controls to adjust
appearance settings for various parts of your design that are difficult or impossible to change in
Photoshop. Text elements on web pages can have highly customizable borders and backgrounds, for
example, that Photoshop doesn't support. Best of all you can immediately see the effects of those
adjustments in the browser. You will often return to Photoshop in this phase to make more adjustments,
rebuild, tweak, and repeat. When you are happy with your design you can move on to the content phase.
Content
In the previous steps your site can't be built or function in a browser without the "SiteGrinder Engine"
application running. To finish your site and make it function independent of SiteGrinder you need to
have SiteGrinder create the final versions of the files which can stand on their own. This is called "
deploying" your site. After you deploy you can edit existing page content and even generate new pages
right in your web browser using SiteGrinder's "Content Manager".
Finally, once you have deployed your pages and made all final adjustments to their content you are ready
to upload the files to your web server. SiteGrinder 3 can upload your site for you and synchronize your

14
online site with local changes you have made since the last upload.
If you want to move your files into a tool like Dreamweaver instead of uploading with SiteGrinder, the
Content Manager can do that too.
Important: SiteGrinder 3 remembers Design and Content Manager settings by the name of your
Photoshop file. If you save under a different name the newly named PSD file will have generic settings
again.
SiteGrinder and Web Text

SiteGrinder can optionally convert any type layer in your Photoshop document to CSS text; automatically
translating the character styles (such as font size) and paragraph styles (such as alignment) you set in
Photoshop.
You can later edit this text in the Content Manager.
Mouse Interactivity
SiteGrinder includes many ways for your elements to react to mouse clicks and hovers. You can create
CSS text or image buttons that change in appearance on both hover and click.
Other layers anywhere on a page design can be made to appear or disappear on hover or click of your
buttons, and can even be given animated effects like fading or animated movement when they do so.
These effects are accomplished using hints like "-button", "-hovershow", and "-clickshow" in your
Photoshop document and then selecting options for features like animation in the Design Manager.
It is easiest to set links on buttons in SiteGrinder's Content Manager, but there are also hints that let you
set links using Photoshop type layers.
There is an Essentials Guide for Buttons, Animations and Interactivity you will want to read later.
Text Menus
Many sites use CSS text menus for navigation, so SiteGrinder makes it very easy to generate them from
Photoshop type layers by just adding the "-menu" hint.
There are two basic types of text menus, vertical and horizontal.
SiteGrinder creates a vertical menu automatically from a type layer that has the -menu hint and that
contains more than one line.
Each line becomes a unique menu item, as seen below:

15
SiteGrinder creates a horizontal text menu from a type layer that has only one line.
You create separate items in a horizontal menu by separating them with either multiple spaces or spaces
and the vertical bar character, as seen below:
SiteGrinder text menus have two big advantages over individual buttons:
1. The code SiteGrinder uses to create them greatly enhances search engine optimization
2. You can add new menu items to link to new pages in the Content Manager long after you build &
deploy
You'll find further discussion of text menus in the Buttons, Animations and Interactivity Essentials Guide
and the Hyperlinking Essentials Guide.
CMS and eCommerce

SiteGrinder's "Control" add-on gives you the ability to edit your page contents from a browser on any
computer that's connected to the internet.
SiteGrinder's "Commerce" add-on allows you to create ecommerce buttons and forms you can use to
create web stores and ecommerce-enabled galleries.
Where to Go From Here
Now that you've had a thorough overview of what SiteGrinder can do, move on to Part I of Workflow
Essentials to find out how you use SiteGrinder to do it.

16
Where To Go Next
At this point you know enough about SiteGrinder to start experimenting with it, but we highly
recommend continuing from this guide to the part one of the " Workflow Essentials".
Workflow Part 1 (Design)
About This Guide
This is part of the SiteGrinder 3 Essentials series of short guides and videos which present crucial, "must
know" information about various SiteGrinder feature areas.
This guide assumes you have already read general SiteGrinder Introductory Essentials Guide (or watched
the associated video), so please do so now if you haven't.
SiteGrinder employs a comfortable workflow that encourages you to experiment with and adjust parts of
your site quickly and repeatedly until you are completely happy. Once you have built and deployed your
site you can continue to develop it interactively in a browser using SiteGrinder's unique Content
Manager.
Site creation takes place in two phases: the design phase (described here) and the content phase
(described in Workflow Part 2).
Workflow Phase 1: Design

Create Your Page Designs in Photoshop
The first step, where you will spend the majority of your time, is simply creating the layers that make up
your site design in Photoshop and giving them hints when necessary. You can start from scratch with a
new empty document, or you may find it easier to start with one of the "Starter Files" SiteGrinder installs
with, or with a template file. If you decide to start from scratch you can find guidelines for the initial
dimensions and other settings to use when you create your file in the Page Size and Alignment Reference.
Once you are satisfied with an initial version of a page design (don't worry about making it perfect...you
can always change it later) you will preserve it by creating a "layer comp" in Photoshop and adding the
"-page" hint to the layer comp's name. You can always alter your layer comps later if you decide to add
or remove layers from any of your page designs. If you are new to Photoshop's Layer Comps feature
you will want to check out the layer comp training materials we have created about using them. These
are located in our Pages Reference.
For smaller sites you will often create one layer comp for each page in your site. For larger sites you can
think of these layer comp page designs as templates. Later, in the content manager, you can make new
pages based on your page designs and then add content to the new pages right in the browser.
Whenever you are ready, whether you have completed a single page, a whole site, or just want to

17
experiment with a single feature, you will open SiteGrinder from Photoshop's File->Automate menu.
Check SiteGrinder's Report

When you first open SiteGrinder you will see the Report Panel:
Here SiteGrinder advises you if anything in your design seems problematic. Some of these suggestions
are more crucial than others, so they are divided into errors, which are usually important to deal with, and
warnings, which are less important and can sometimes be ignored. If you see an error you should make
note of it, close SiteGrinder, address the problem in your Photoshop file, and open SiteGrinder again.
Because you can't use any of Photoshop's tools when SiteGrinder is open you may wish to save the report
so you can refer to it as you make the suggested adjustments. To create an HTML version of the report
that you can view or print using your web browser select "Save Report" from SiteGrinder's File menu or
click the "Save Report" button in the Report Panel.
As an example of using the report, if you name a button "Contact-batten" by accident then SiteGrinder
will report an incorrectly spelled hint error. You will have to return to Photoshop to change that layer
name to "Contact-button" in order for your button to function. But if you name a layer "Birthday-party"
SiteGrinder will notice the hyphen and warn you that "party" might be a misspelled hint. In that case you
can ignore the error. (Unfortunately "party" is not an actual SiteGrinder hint. If you can think of a
function to associate with it let us know!)
Once you have dealt with or decided to ignore the advice in the Report you can move on to the next step.
If you have no errors or warnings whatsoever, congratulations, you're a perfectionist!

18
Build and Adjust Your Designs

The next step is to build your designs. "Building" is when SiteGrinder creates the files necessary to view
your design in a browser. These site files are located in a directory only used by SiteGrinder and you
won't need to get at them.
To begin building, select the "Build & Deploy" tab in the SiteGrinder window:
You'll notice a list of your page designs. Next to each page listing is a checkbox which determines if that
page will be built when you click the "Build" button. Below these checkboxes is the "Build" button.
(Further to the right is the Deployment area. You'll use that later - just ignore it for now.)
Select the page designs you want to build and click the "Build" button. You can always rebuild page
designs later so don't worry about having everything perfect before you build!
SiteGrinder will start to build the pages you have selected. While it's building it will open your default
browser to a special web page. You'll see an informational message in the main area of the page and a
list of the pages being built in a column at the left side of the browser window. This browser window is
called the SiteGrinder "Design Manager."
As SiteGrinder finishes building your pages it will play a sound and the associated progress wheels will
stop. Once the first page has finished you can click on its entry in the page list to start editing that page's
design.
This is where the fun begins. SiteGrinder will show the selected page on the right and you can now alter
any design settings you need to using the controls on the left. These include text menu rollover
appearance, borders and background colors for various page areas, appearance and functional options for
image galleries, appearance of web forms, etc. Keep in mind that this phase is only for altering how
these things look. You'll add to or edit the actual page content, such as your gallery images, in Phase 2,
the content phase.
As you make changes in these panels you can click the "Apply" button to see your changes reflected
instantly in the main area of the browser window.
Some parts of your designs, such as the images in gallery components, will display generic content at this

19
stage just for preview purposes (sort of like the snapshots of models that come when you purchase a
frame).
If you wish to change the way any of the layers themselves look or you need to add new layers to your
designs, etc. now is a good time to return to Photoshop and make any changes. At that point you rebuild
and reevaluate in the design manager until you are happy. This organic Photoshop->Build->Design
Manager->Repeat process is where you will spend most of your time.
Remember, the Content Manager is a real web page on your computer...it's just being provided to your
browser by the SiteGrinder Engine application instead of a server somewhere on the internet. If you
close the window or tab showing the Design Manager by mistake just reopen it from your browser
history or using the list of recent builds in the SiteGrinder plug-in window or SiteGrinder Engine
window.
Important: SiteGrinder associates the settings you change in the Design and Content Managers with
your Photoshop file name. If you save your Photoshop file under a different name and rebuild you will
lose your settings. (You can get them back by saving the file again using the original name.)
Where to Go Next
If you are reading this for the first time you should now proceed to Workflow Part 2.
For a complete detailed breakdown of which features and elements are created or modified during the
various phases see the Workflow Reference.
Workflow Part 2 (Content)
About This Guide
This guide assumes you have already viewed both the SiteGrinder Introductory Essentials Guide, and
Workflow Essentials Part 1, so please do so now if you haven't.
Workflow Phase 2: Finish Your Content And Upload
When you are happy with your page designs it is time to "deploy" them, which locks in the design
choices you made in the Design Manager and allows you to move forward to the browser-based Content
Manager. (Even after deploying there are still ways to alter the design which you will read about in
"Redeploying" below.)
NOTE: You don't have to close SiteGrinder after you build and before you deploy. If you build and are
in the browser-based Design Manager you can just switch back to Photoshop where the SiteGrinder
window is still open and deploy right away.
Creating Your SiteGrinder Site

Before you deploy you will need to create a new SiteGrinder "site" or select an existing one.

20
In this context "site" refers to not only your chosen destination folder but also your choices of several site
options, for example whether or not to deploy your site with content management and ecommerce. You
can deploy page designs to many different sites in different folders with different settings, which is handy
if you are using a single template design multiple times for different customers with different content.
The "New site" command appears in the "Sites" menu of the SiteGrinder plug-in window and the
"Deploy to" menu of the Build and Deploy tab. It presents this window:
Most of the time you'll just type in a Site Name, select a Site Directory, choose "Local Only" in the CMS
area, and click OK. The other options are for owners of the optional Control and Commerce add-ons
who want to have remote CMS capabilities and/or a shopping cart on the site they are building.
Choosing Content Management Site Options

In almost every case you will elect to have content management for your site. Sites without content
management can't take advantage of any SiteGrinder Content Manager tools, including the ftp uploader.
Sites with content management allow you make changes and additions to your pages interactively in a
browser window. SiteGrinder 3 can deploy with "local" content management even if you don't own the
Control add-on. Local content management works on your pages as long as they reside on your local
computer running SiteGrinder.
If you or your clients need to edit a site from a browser on any web-connected computer after it has been
uploaded, you will need the optional "SiteGrinder Control" add-on. Control lets you select a remote
content management option in the New Site window. (As of this writing, "PHP" is the only supported

21
remote content management option.)
Choosing SiteGrinder Commerce Site Options

If you have purchased the optional SiteGrinder Commerce add-on then the ecommerce option in the Site
options window allow you to select one of the supported store technologies for your ecommerce buttons
and forms. As of this writing "FoxyCart" is the only supported system, so your choice is either "none" or
"FoxyCart."
Deploying Your Site

Once you have created or selected a SiteGrinder site, switch to the Build and Deploy tab if you aren't
already there. The controls for deployment are on the right side of the window.
Choose whichever of your previously built page designs you'd like to deploy to the Content Manager by
placing checkmarks in the "Deploy?" column. You can deploy different pages at different times so you
don't have to worry about finishing all of them before deploying any of them.
After checking the pages you want to deploy, click the "Deploy Designs" button. Deploying usually only
takes a few seconds.
Finishing Your Content In The Content Manager

After deploying your pages, SiteGrinder will open them in a browser along with SiteGrinder's Content
Manager in an area to the left of the page content, much like the Design Manager from the previous
phase. When you click on a page in the list it will become visible in the main browser window and
editing controls will appear in panels in the Content Manager listing editable page elements.
In the Content Manager you can finish your site's content in the following ways:
Choose external files such as videos or Lightroom galleries to play in the areas you created for
them in Photoshop
Change the content of text areas using a live text editor
Add new pages and galleries spawned from existing page designs
Add new menu items to your text menus

22
Set links for buttons and menu items

Change page content images
Configure your ecommerce buttons and forms (SiteGrinder Commerce add-on required)
Make folders and create new pages inside them for more complex site organization
For very simple sites it's possible that you won't need to do any editing in this phase because the content
was all complete in layers in the original Photoshop file. More often you will at least connect media to
galleries or xmedia layers and set links for buttons.
Uploading your Site
When you are ready to take your pages online you can upload your site to your web server directly from
the Content Manager via ftp. You will need to know your ftp server account's login, password, and the
path to your web folder.
SiteGrinder's Content Manager has two commands in the "Upload" menu for placing your pages online:
"Upload Changes" and "Upload Everything".
Upload Changes is almost always preferable because it tells SiteGrinder to do a smart update, only
replacing files as needed. Upload Changes will also keep your local version up to date with changes you
make online with the SiteGrinder Control remote content manager. If you become out of sync for any
reason an upload will do a complete replacement of remote files with your local files.
Warning: If you alter your uploaded SiteGrinder-created files outside of SiteGrinder's Content Manager
(ie using Dreamweaver) and then upload from SiteGrinder's Content Manager you will lose those
changes.
A common workflow is to upload your site to a temporary test directory on your server that you create (ie
"yourdomain.com/testing") and then, once you are ready to sell out and go all mainstream and show your
work to the world, re-upload to the top level web directory. This is just a matter of changing the ftp path
in the ftp settings window to point to the top level directory and uploading again.

23
For a deeper introduction to uploading, see the Uploading Essentials guide and for details about
uploading, see the Sites Reference Guide.
Editing Deployed Sites With 3rd Party Tools

If you don't want to use SiteGrinder to upload and would like to move your pages to a different tool, like
Adobe Dreamweaver, you can save your site as a static HTML site from the Content Manager's Upload
menu. You will no longer be able to edit the saved static pages with SiteGrinder's Content Manager after
you do this.
On-going Maintenance of Sites

For nontrivial sites you will often want to make changes over time after your initial upload. This section
describes the most common changes you will make to deployed sites.
Editing Content On Existing Pages

All of the Content Manager features work not only for setting up your pages for the first time, but also
keeping them up to date over time. Editing a page is as simple as changing the content of a text layer and
selecting "Upload Changes" from the Content Manager's Upload menu.
SiteGrinder's optional Control add-on can give this power to anyone with the right login information
using any web-connected computer, meaning you or your clients can keep pages up to date from
computers that don't even have SiteGrinder installed. Perfect for church activity calendars, restaurant
menu changes and specials, etc. This is probably the most commonly requested feature from SiteGrinder
2 users.
Adding New Pages

You can add new pages to an existing site in two ways:
1. From the Content Manager's File menu you can create a new page as a copy of an existing page
and then customize the content. When you do this you can even have SiteGrinder add menu items
to an existing text menu to link to this page.
2. You can create an entirely new layer comp page design in a Photoshop document and deploy it to
an existing site as a new page. In this case you will need to manually provide links from the old
pages either by adding menu items using the Content Manager's menu editor or adding links in
text areas using the text editor.
Page designs are not locked to any particular site. You can deploy pages from multiple Photoshop files to
multiple sites with different site settings just by making new sites and deploying the pages to them. Page
names are important when you deploy to a site that already has previously deployed pages. Two pages
with the same name can't live in the same site, so deploying a page name "contact" will always overwrite
any previously deployed "contact" page in a given site.
Redeploying Pages
You will discover the real power of SiteGrinder's technique of separating design from content when you
make changes to a previously deployed page design in Photoshop and then deploy it again to the same
site.
When you deploy a page you have two choices available from the "Deploy What" menu near the
SiteGrinder plug-in window's Deploy button: "Keep any Content Manager Edits" or "Replace Content
Manager Edits."
When deploying a page to a site for the first time the two choices have the same effect because you will

24
have made no Content Manager changes.
But if you are deploying a page to a site that you have previously deployed the same page to then this
choice become important.
If you choose Replace Content Manager Edits you will simply replace everything, including any
content changes you made in the Content Manager to the previously deployed version of the page.
If you choose Keep any Content Manager Edits you won't affect the content of the older version
but SiteGrinder will replace design aspects, including the appearance of image layers and the
position of all layers.
The second option above is one of the most powerful features of SiteGrinder 3. It means that if you are
careful you can completely alter the appearance of an existing site without losing any of your existing
content. Let that sink in.
Redeploying can be dangerous. Deleting content layers in your original Photoshop file, for example, can
be problematic when you redeploy if you are trying to Keep any Content Manager Edits you made in the
Content Manager when you redeploy.
Where to Go Next
For a complete detailed breakdown of which features and elements are created or modified during the
various phases of the workflow Workflow Reference.
If you want to continue with learning SiteGrinder Essentials then the SiteGrinder 3 Essentials will show
you links to the rest of the essentials guides.
Web Text
About this Guide
This guide assumes you have already viewed both the SiteGrinder 3 Introduction and the Workflow
Essentials Guides, so please do so now if you haven't.
Basic Text Creation and Editing
SiteGrinder is very good at converting styled Photoshop type layers to CSS Web Text. All you have to
do is add the "-text" hint to a type layer's name to tell SiteGrinder to make real searchable text rather than
a rasterized image of text on the built page. If you leave off the -text hint then any anti-aliased type layer
will become a rendered image on the pages SiteGrinder creates, which is perfect for things like logos and
banners.
Because web browsers don't support advanced typography like rotated or scaled text you won't see those
effects if you put the text -hint on a type layer that uses them.
Important: In almost all cases you should create Photoshop "paragraph" type layers. These are type

25
layers you create by clicking and dragging out a rectangle with Photoshop's Type tool, as opposed to
"Point" type layers which you create by simply clicking (and not dragging) in your document using the
type tool. This rectangle tells Photoshop and SiteGrinder where to wrap text, place margins, etc. You
should avoid "point type", which you create by clicking and letting go with the type tool without
dragging out a rectangle. For details about the difference between point and paragraph text see the Text
Reference.
The "-scroll" hint on a type layer tells SiteGrinder to add a scroll bar to the right edge of a type layer's
rectangle on your built page for scrolling through text that is too much for the rectangle to display at
once. (SiteGrinder can alternately create layers which grow automatically to show all the text at once.)
Editing Text Outside of Photoshop

There are a number of reasons why you may want to consider some of the other methods SiteGrinder
provides for editing the text on your page.
These include:
Photoshop type layers are difficult to work with if your text is very long
Photoshop type layers don't allow text to mix with and wrap around images in scrollable layouts
Photoshop type layers don't support some web formatting such as bullet lists and tables
You may want to build your designs as templates with text placeholders in Photoshop and add the
real content later
Editing Text with the SiteGrinder Content Manager

In SiteGrinder's Content Manager you can edit page text directly in the browser window using a
full-featured text editing panel.
This panel even has an option for entering HTML code directly:

26
The workflow for using this feature is as follows:
1. Create and position a "paragraph" type layer in Photoshop and give it the "-text" hint.
2. Type or paste some text into the layer. This could be your final text or just placeholder text like
lorem ipsum.
3. Build and Deploy your page design.
4. In the Content Manager select the text area you want to edit
5. Use the editor window to edit the contents as styled text or HTML. You can even paste from
Microsoft Word!
If you have the "Control" SiteGrinder add-on you can allow site visitors with login and password
information to use the text editor to change content from any computer on the Web.
If you wish to create text layers that can't be changed in the Content Manager you can place the "-noedit"
hint at the end of its layer name.
Designing for Text That Changes in Content or Size
A frequent and frustrating challenge of website construction is creating design elements around and
behind page contents in a way that can maintain design integrity even if the contents change in size
because of changes to their style or text.
In a typical scenario you may have a footer that should move down to accommodate all the content areas
of the page, as well as some sub-elements that will need to grow and shift around other sub-elements as
they do so.
A design might start like this in Photoshop:

27
But what if we use SiteGrinder's awesome content editing features to add a lot more text to the top left
and top right paragraphs?
If the page isn't set up for this you might see the enlarged text areas run over the lower text areas.
The result might look like this in a browser:

28
Notice the now longer text in each column has increased in height but the elements below (the
yellow-orange image and the lower text) have not moved to accommodate.
One of SiteGrinder 3' most amazing features, the "-column" hint, makes it easy to create these kinds of
areas using its innovative "column" system.
Using this system you will see results more like this in the browser after lengthening the text:

29
For an overview of columns and other layout features see Layout Essentials.
For details on creating designs with columns see the Columns Reference.
Text and Search Engines
There are strategies for making your site come up near the top of search results when people type in
relevant search queries. These strategies are collectively referred to as "Search Engine Optimization" or
"SEO".
The topic is a little murky because different search engines use different principles, some of which are
trade secrets, but one thing is known: the more your content uses "real" text (as opposed to rasterized
images of text) the better.
So go ahead and use rendered images of text for logos and decorations, but stick to real text for the
content.

30
Where To Go From Here
At this point you can return to the SiteGrinder 3 Essentials Index to pick another topic or simply proceed
to Page Creation and Management Essentials.
For detailed information about using text see the Text Reference Guide, and for information about setting
links on word and phrases within text see the Hyperlinking Reference Guide .
Page Creation and Management
About This Guide
This guide is an introduction to how you will determine what content will be on the pages of your site,
how new pages can be added to a site, and how buttons and menus link pages to one another. It is not a
guide to page layout. To find information about page dimensions, alignment, flow of elements or
background colors and tiles, see the Page Layout Essentials Guide.
If you are unfamiliar with Photoshop's "Layer comps" feature you will want to read the layer comps
guide or watch the layer comps training video before continuing.
This guide assumes you have already read both the general SiteGrinder 3 Introduction (or watched the
associated video) and the Workflow Essentials Guides.
Once you have read this document you can find more information on this topic in the Pages Reference
Guide.
Page Designs and the Page Workflow
Determining how many pages your site will have, designating the content that will appear on each, and
linking pages to one another are some of the primary requirements of web design.
SiteGrinder provides several approaches which support widely varying web design projects.
The basic workflow:
1. Design a page in Photoshop by creating and positioning the layers that will be displayed on the
page
2. Create a layer comp using Photoshop's "Layer comps" palette and add the "-page" hint to the
Layer comp's name
3. Repeat 1 & 2 until you have as many page designs as you need
4. When you are ready to build, open SiteGrinder. In the build panel you will see all of your layer
comp page designs listed. You can choose which to build using the checkboxes by their names
and then build and deploy them to a site.
After you build and deploy the first version of your site there are two ways to add additional pages:
Create new layer comp designs in your Photoshop file and build and deploy them to the same site
or...
...use the SiteGrinder Content Manager to create pages that are copies of existing designs, and

31
them customize them using the Content Manager tools
Re-read the second option above very carefully. This is why we refer to pages more often as "Page
Designs". Creating new pages from existing designs and then customizing them is one of the most
powerful aspects of SiteGrinder 3. If you have purchased the "Control" add-on for SiteGrinder you can
even create and customize new pages for your site from any computer on the internet - right in the
browser window!
Here are just a few of the common scenarios that are simple to achieve thanks to the flexibility of this
system:
1. A photographer can create a new gallery from an existing one and populate it with new images
2. A videographer can create a template video player page design and then copy that page as many
times as necessary changing the video each new page will present.
3. A web designer can identify a few common designs for a site and build them using generic
placeholder content. Later, in the Content Manager, the designer can add new pages based on
whichever of the original designs is required and then add the content using the Content Manager
tools.
You are free to think of your layer comp pages in Photoshop as either final designs or, more flexibly, as
templates you can customize later and spawn new pages from in the Content Manager.
Linking Between Pages
Pages aren't much good if you can't navigate from one to another with hyperlinks, so SiteGrinder makes
this very simple.
There are three ways of linking buttons and menus to pages:
1. A button or text menu item will automatically link to a page that has the matching layer comp
name. This means a button named "Contact Us-button" will automatically link to a page whose
layer comp is named "Contact Us-page".
2. The link for any button, menu item, or phrase within text can be set or changed in SiteGrinder's
Content Manager.
3. Links can be set in the Photoshop file itself using layers with the "-link" and "-links" hints.
Page Organization And Multi-Level Sites
When you first deploy, SiteGrinder creates all of your layer comp pages at the same directory level. Once
you are in the Design Manager you can create new pages from existing ones at the same level.
You can add sub-folders by choosing "New Folder..." from the Content Manager's File menu. You can
create new pages within a sub-folder by selecting the folder in the "Pages" area of the Content Manager
and choosing "New Page..." from the Content Manager's File menu. When you create a new page in the
Content Manager you must choose a page design to base it on. You can optionally have SiteGrinder add a
menu item linking to this page to any one of your text menus.
You cannot directly move a page from one level to another. To achieve the same result you must create a
page based on the top level original but in the level you would like to put it in. At this point you will
have a copy of this page at the top level and another in the sub-folder where you just created it. You can
now delete the original.

32
Where to go From Here
Now that you are familiar with process of creating pages and determining which layers appear on them
you may wish to check out these features in greater detail in the Pages Reference Guide or you may want
to proceed to the Page Layout Essentials to learn how pages can be given backgrounds and alignments.
Page Layout
About This Guide
This guide describes the basics of how to use SiteGrinder to divide pages up into areas that can grow and
move as well as how to create decorative background colors and tiles for such areas.
This guide assumes you have already read both the general SiteGrinder 3 Introduction, the Workflow
Essentials Guide , and the Page Creation Essentials Guide.
Introduction
SiteGrinder gives you total control over the size and alignment of each page in your site. For the page
content, SiteGrinder doesn't use restrictive templates that determine where elements can go. Instead it
gives you complete freedom to place page elements wherever you like. It also provides tools and
techniques that allow those elements to change in position in sophisticated ways based on how other
elements may grow or shrink.
The simplest way to determine the size of the content area of your site is simply to make your Photoshop
document that size. If you want your page contents to be 800 pixels wide then make your Photoshop
document 800 pixels wide and as tall as the tallest page in your site.
The simplest way to lay out the page elements within that content area is to create and position layers
within your document and build a web page that looks exactly like the document did in Photoshop. It's
fast and provides almost total "WYSIWYG".
For more advanced page control you can provide one or more rectangular layers with the -pagesize hint
which will allow you to create, if you need to, different dimensions and alignment for every page in your
site.
You can think about a web page design as breaking out into three areas:
1. The browser background. Think of this as what the browser displays in the entire area of its
window, no matter how large the window is. You can control the color and a repeating tile at this
level. Everything else draws on top of browser background.
2. The page content area. This is the stuff people come to your site to see. Many web sites use a
different color or tile behind the content area to set it off from the browser background. This is
very easy to do with SiteGrinder.
3. Individual elements or rectangular areas within the page content area, including boxes, columns,
and footers.
SiteGrinder 3 provides a number of powerful hints and techniques to control the appearance and dynamic
positioning of page elements without limiting your design freedom:

33
The Browser-background and browser-backgroundcolor hints control the appearance of the

full browser window.
Layers using the "-pagesize" hint allow different pages within the same document to have unique
dimensions.
The "-column" hint allows you to specify any rectangular area that should have special layout
features.
Columns can grow and reorganize automatically if their contents change in size. They can also
shift position if other areas change in size.
Columns can be positioned inside other columns for advanced layout techniques.
The "-centercut" hint provides powerful background image and tile support for individual
columns.
The "-wrap" hint gives you the ability to specify how text should wrap around images in the final
build.
Several footer hints allow you to lock a layer group to the bottom of your content or the bottom of
the browser window and optionally provide a footer background color and/or tile.
Techniques That Control The Entire Page
If you use no layers with page layout hints then SiteGrinder defaults to center alignment and a white
background for the browser window. In that case there is no distinction between the background of your
content and the background of the browser window.
Optionally you can create layers with the "-pagesize" hint that tell SiteGrinder what the content
boundaries are for any page as well as specify an alignment other than center aligned.
Here is a list of the most common SiteGrinder techniques for controlling the appearance of browser
background and and page content areas:
Set the browser background color: Add an image layer with the Color Fill layer style and the "
browser-backgroundcolor" hint will set the entire browser window background to whatever
color is specified for the Color Fill.
Set a repeating tile for the browser background: Add an image layer with either the Pattern
Overlay or Gradient Overlay layer style and the "browser-background" hint. Determine how
this tile repeats (vertically, horizontally, both, or never) by where you position it in the document.
See the Background Colors and Tiles Reference for full details.
Tell SiteGrinder what the content boundaries are for any page: You can create separate pagesize
layers for every page in your document, though usually they are only used when pages are very
different in size from one another. The names of pagesize layers don't need to match the pages
they are on. When a pagesize layer is visible on a page's layer comp it is used no matter what its
name is. (Only one -pagesize layer can be visible on any given layer comp.)
Set a background color for your pagesize area: Apply the Color Overlay layer style to your
"pagesize" layer.
Set a repeating tile for the pagesize background: Add an image layer named after the -pagesize
layer with either the Pattern Overlay or Gradient Overlay layer style and add the "- background"
hint. (ie "Contact-background") Determine how this tile repeats (vertically, horizontally, both, or
never) by where you position it within the boundaries of the -pagesize layer. See the Background
Colors and Tiles Reference for full details.
All of the above techniques can be used in almost any combination.
Click here for a set of pages demonstrating many of the more common combinations.

34
Techniques That Control Elements Within Your Pages
SiteGrinder 3 gives you amazing control over how your page elements behave as browser and element
sizes require.
The most common SiteGrinder techniques for controlling elements are:
Create flexible growing pages that can accommodate expanding or shrinking elements by using
-column layers
Flow text around images using the -wrap hint
Create smart footers that can stick to the bottom of the browser window or the bottom of your
page content
These are discussed in more detail below.
Columns
SiteGrinder columns are loose rectangular groupings of elements that automatically shift position
vertically when any of the elements change in size.
Figure 1.
The example above displays the same SiteGrinder-created page after different content edits. The page
design features a wide column and a narrow column. Notice in the screenshot on the left the leftmost
column is the tallest and in the screenshot on the right the rightmost column is taller. The position of the
footer elements is based on whichever column is taller.
Because SiteGrinder can't guess which items are part of your background and which should be "alive"
within a column, you need to indicate columns by creating a rectangular layer below column-organized
layers with the -column hint.
The below example shows in orange the column layer that produced the above results:

35
Figure 2.
Any of the page elements fully contained by a column can grow and push down the others when changed
in the Content Manager - even other columns. This nesting of columns is incredibly powerful and
flexible.
Notice in the example above that columns are not limited to containing elements only in a direct vertical
stack. Elements can sit next to each other horizontally and SiteGrinder will maintain this side-by-side
relationship even as different elements change in size. Elements that may need to grow cannot overlap
other elements that need to grow.
The other major benefit of columns is that they can have their own background colors and tiles, including
tiles that can grow with the column. Apply the Color Overlay layer style in Photoshop to a column to
assign its background color. Give a column a background tile by creating a -background layer that
matches the column's name and apply the Pattern Overlay layer style to it in Photoshop.
There are a few restrictions to column use:
The main limitation of columns is that they cannot partially overlap each other: nested columns
must be completely contained by other columns.
Columns cannot be used in a -footer layer group
If you use a -pagesize layer it must completely contain any columns.
If you want your columnized content to be able to expand within a rectangle that stays a constant size you

36
can use the -scroll hint on a column layer, which will allow the page visitor to scroll through the content
of your column if it grows larger than the -column layer's height.
IMPORTANT: At least one big -column layer such as that depicted above is required if you want your
page to be able to expand as elements change in size.
For complete information about columns see the Columns Reference.
Wrapping Text Around Images

Photoshop doesn't have the ability to wrap text around images, but web pages do.
SiteGrinder 3's "-wrap" hint on an image layer allows you to position that image on top of type layers in a
Photoshop document and have the text wrap around the image once on the final web page.
In the picture below we see the Photoshop document in front. Behind it we see the web page as it finally
appears in the browser:
Figure 3.
Images are always positioned at the top of a given type layer and can be aligned top left or top right.
Where you place the image in the Photoshop file relative to the text below determines the alignment of
the image and the margins between the image and the text.
For details about SiteGrinder's wrapping features see the Text Wrapping Reference.

37
Footers
There are three approaches to creating footer elements in SiteGrinder:
1. You can create a big -column layer surrounding every layer except your footer layers. In this case
the layers whose top edges are below the -column layer's bottom edge will maintain their distance
from the bottom of the column even as changes to the contents of the column cause it to become
taller or shorter. This technique is used in Figure 2 above.
2. You can create a rectangular layer named "footer-background" and/or "footer-backgroundcolor
" which will not only define the background color or tile for the footer area but will also serve as a
boundary that groups footer elements. Any layer whose contents are entirely contained by a
footer-background or footer-backgroundcolor layer's rectangle will become part of the footer.
3. For the most flexible footer you can add the -footer hint to a layer group's name in the layers
palette and put your footer layers in the group. This allows footer elements to be outside the
footer-background or footer-backgroundcolor layer rectangle.
For 2 & 3 above, if the browser window showing your page is taller than the content of the page, the
layers in this layer group will be attached to the bottom of the browser window. If the contents of the
page are taller than the browser window can display without scrolling then the contents of the -footer
group will be attached to the bottom of the content. (If you find this description confusing just trust that
the footer layers will do the right thing.)
For details about footers see the Page Footers Reference.
If you have not yet read it you should continue to the Page Creation and Management Essentials Guide
which explains how to designate unique content for multiple pages, how to organize pages, and how to
spawn new pages after you deploy your site.
For details on all of SiteGrinder's layout features see the Layout Reference.
To continue exploring SiteGrinder feature essentials you can move on to the Hyperlinking Buttons and
Text Essentials Guide or the Essentials Index .
Hyperlinking Buttons and Text
About This Guide
A web page without hyperlinks is like a room without doors or windows. No matter how nicely
decorated the room is, you are eventually going to want to go somewhere else or at least order a pizza.
This document introduces the many ways SiteGrinder provides for adding links to your pages so you can
go somewhere else. (Or even order a pizza.)
Common Linking Techniques
SiteGrinder supports all the different kinds of hyperlinks you will ever need, including email links, links
to pages on your site or pages on other sites, links to PDF files, etc.
The most common ways of creating links in SiteGrinder are:

38
Buttons or menu items named after one of your layer comp pages will link to that page
automatically. A layer named "Home-button" will link to a layer comp named "Home-page".
Link for buttons or menu items can be added and edited using the menu and button editors in
SiteGrinder's Content Manager.
URLs and email addresses (such as "www.medialab.com" or "help@medialab.com") that appear
in Photoshop text layers will automatically be made clickable when the layers are exported as
CSS text by SiteGrinder.
Any kind of link to any word or phrase in CSS text can be assigned using the text editor in
SiteGrinder's Content Manager.
The -link and -links Hints
As you can see from the previous section you will most commonly create links using either SiteGrinder's
automated page name matching system or using controls in the Content Manager after you build and
deploy your pages.
Less frequently you may want to set an arbitrary link on a button or on a word or phrase within text in the
Photoshop document before you build.
There are two common reasons for this:
You want to test the link in the Design Manager before you deploy to the Content Manager
You are creating a page that you will deploy to multiple sites and you want to avoid setting the
same link in the Content Manager for each
You can set links right inside your Photoshop document using layers with the -link hint for buttons and
menu items and the -links hint for words and phrases inside paragraph text. Notice the difference: one is
"link" without the "s" and the other is "links".
-link
To specify a single link for a button, you create a type layer named after the button with the "-link" hint
and set the contents of the type layer to be your link. A layer named "Support-button" will take its link
from the contents of a type layer named "Support-link".
-links
To specify a link for words or phrases inside paragraph text, create a type layer named after the type layer
that contains your paragraph text and add the "-links" hint. Inside this layer you place the word or phrase
you want to add a link to followed by the link on the next line. Imagine a type layer named
"Content-text" which contains the text "Email me for more information." To add the
"help@medialab.com" email link to the phrase "Email me" you would create another type layer named
"Content-links" and inside it place the following two lines of text:
"Email me
help@medialab.com"
Important: Because they are just references for SiteGrinder, layers using the -link and -links hints never
themselves appear on a built web page - regardless of their visibility on a page layer comp.
You can set multiple phrases in a given type layer to have unique links by adding multiple pairs of text
and their links in a -links layer.

39
See the Hyperlinks Reference Guide for complete details about placing links on words or phrases in text.
Linking to PDFs and Other Downloadable Files
SiteGrinder lets you link to a PDF file or any other kind of file for your site visitor to download or view
in the browser window. Unfortunately web sites can't control whether a file will be downloaded or
displayed. This is based on each site visitor's browser and what browser plugins they have installed.
Some browsers will display a PDF right in the browser window while others will ask the visitor to locate
a folder and download the PDF to that folder.
To link a button or menu item to a file you edit the button in the "Buttons" control in the Content
Manager. You can use a file selection dialog to select files inside your site folder or files outside your
site folder. Files outside the site folder will be copied into the site folder. Lastly, you can link to a file
you've already uploaded or to one on someone else's site by typing in the file URL directly.
Changing the Appearance of Text Links
[[description of 'text_link' style here]]
At this point, you may want to continue on to the Buttons, Animation, and Interactivity Essentials Guide
or explore details of linking in the Hyperlinks Reference.
Buttons, Animation and Interactivity
About This Guide
This guide describes the ways that SiteGrinder buttons change in appearance and how they can make
other page elements change in appearance. This guide does not describe how you link buttons and menu
items to other web pages, files, etc. Hyperlinking is covered in its own Hyperlinking Essentials guide.
This document assumes you have read the SiteGrinder 3 Introduction and the Workflow Essentials
guides. Please do so now if you haven't.
Introduction
A web page without interactivity is like, well, a page. As in, you know, paper. Remember paper? Good
times!
Anyway, luckily for your soon to be amazed site visitors, SiteGrinder 3 provides a liberating range of
features for creating hover and click effects that can have a huge visual impact on your pages.
Interactivity Basics
The most popular techniques for making pages respond visually to mouse movements and clicks include:
Text and Image buttons that change appearance on hover and/or click
Images or text that appear or disappear elsewhere on the page when a button is hovered over or

40
clicked
Popup/dropdown menus that are triggered when rolling over a button or menu item
Animation options for most of the above including movement and fade in/out
Button/Menu Basics
Like most things in SiteGrinder, you create buttons and menus by adding hints to layers in Photoshop and
setting various options later in the Design and Content Managers. Image buttons and CSS text buttons
are handled a little differently from each other.
Image Buttons (aka graphical buttons)

The simplest functional image button is just an image layer with the "-button" hint added to it. This is
enough to let SiteGrinder know that you want something to happen, usually going to some other page on
your site, when that layer gets clicked. Adding new button states for click and hover is just a matter of
adding layers with the same name but with "-click" and "-hover" instead of "-button". A layer named
"contact-button", for example, can have a hover and a click state named "contact-hover" and
"contact-click" for example. (Click states are frequently avoided in modern web design.)
The alternate button versions completely replace the original button image when the mouse hovers or
clicks. Because the user determines the visibility of these elements on the final page, only the "-button"
layer has to be visible in the page's layer comp.
The "Image" in "Image Buttons" refers to the fact that these buttons end up as images on your website,
but you create them by placing the "-button" and related hints on any kind of layer in Photoshop,
including anti-aliased type layers and even layer groups. In most cases Layer Groups with -button hints
will merge to create one image when you build, which allows you to create visually complex but flexible
buttons because you don't have to pre-merge the layers.
There are other powerful and labor-saving techniques involving layer group buttons which you can find
in the Interactivity Reference.
Text Buttons
Text buttons appear as real CSS text on the final page, and so can only be created by adding the "-button"
hint to type layers in Photoshop. In addition, if the layer has an anti-aliasing setting other than "none"
you will have to add the -text hint as well as the -button hint.
The main difference between text and image buttons is that text buttons don't have separate layers that
indicate their click and hover states. Instead you will determine how the button text changes in
appearance in the Design Manager. There are many options available, including background color,
border, etc.
Text buttons aren't used very much because text menus (described in the next section) are so much more
useful.
Text Menus
Text buttons don't usually like to be alone. They prefer to congregate on web pages in little text button
clubs known as "menus."
Because text menus are so common, SiteGrinder provides a "-menu" hint that can turn a single type layer
in Photoshop into a flexible, search-engine friendly multi-item text menu on the built web page. Text

41
menus are one of the most important and powerful features of SiteGrinder.
Like text buttons, text menu item hover and click states (how the menu items change in appearance when
they are hovered over or clicked on) are set in SiteGrinder's Design Manager, not using alternate layers.
There are two types of text menus, vertical and horizontal.
All "-menu"-hinted type layers that have more than one line become vertical menus, and each line in
them becomes a menu item.
If a "-menu" layer has only one line then each item is separated from the next by multiple (more than
one) spaces or spaces and the "|" vertical bar character.
Text menus have a number of super-powers including:
You can add more menu items in the Content Manager after deploying your pages
They are great for search engine optimization
Just like buttons, menu items can have associated layers with -clickshow, -hovershow, hoverhide,
etc. (see below)
Items can have a "visited" style as well to indicate links to pages the site visitor has already seen
The main limitation of -menu layers is that they restrict you to rectilinear layout of the items. You are
always free to use individual -button layers (either CSS or image) for complete layout freedom.
Special Hover and Click Effects
Buttons and menu items can not only change themselves on hover and click, they can also change other
parts of the page.

42
Basics
A button or menu item can cause a layer to appear or disappear on hover or click. The hints for these
actions are "-hovershow", "-clickshow","-hoverhide", and "-clickhide".
Thus a layer named "wow-button" will cause a layer anywhere on a page to become visible on hover if it
is named "wow-hovershow". Not surprisingly the same thing can be done on click with
"wow-clickshow". Likewise, "wow-hoverhide" and "wow-clickhide" layers will hide on hover or click of
"wow-button".
Since clicks mostly take people away from your page immediately if they have a link, there is not much
point in having a click state unless it doesn't link to anything and you have a -clickshow to reveal
something.
Animation
Fade In/Out Animation
Showing and hiding of layers is all well and good, but wouldn't it be cool if they could hover and show
with some sort of Web 2.0-style animation? Yes, yes it would.
The simplest form of animation is to have hover and hide layers fade in or out. This is controlled using
the Animation panel in the Design Manager. Every show or hide layer is listed there, and you can decide
if they should fade in or out and even the timing of the fade.
Motion Animation
Almost as simple as fade in/out is to have a layer move from one spot on the page to another in response
to a hover or click. You tell SiteGrinder where a layer should start out in its animation by creating a layer
with a matching name, positioning this layer where you want your motion to start, and giving it the
"-movefrom" hint. The destination is set by the position of the layer with the show/hide hint.
In this way a layer named "wow-hovershow" will animate to its position from the position of the contents
of a layer named "wow-movefrom", triggered by a button named "wow-button".
Popup/Dropdown Menus
A very popular technique for navigating larger sites is to have a submenu appear when you hover over a
menu item. In SiteGrinder this is as simple as naming a "-menu" layer after the appropriate trigger menu
item and adding the "-hovershow" hint.
As an example, if you have a text menu with an item named "Weddings", you can create a submenu for it
in a type layer named "weddings-menu-hovershow".
The "-menu-hovershow" layer will appear wherever you place it in your design when the trigger item is
hovered over. Popup menus can have animation just like any other -hovershow layer.
Layer Groups as Menus

You can create a submenu made of image buttons by placing the image buttons (and any decorative
background elements) in a layer group and giving the layer group the appropriate name and "-hovershow"
hint.
IMPORTANT: You don't use the "-menu" hint in this case because such a group isn't a true SiteGrinder

43
menu. You cannot dynamically add buttons to this sort of menu in the Content Manager the way you can
with text menus.
The -hide Hint

Sometimes you will want a layer to hide when any button with a "-hovershow" is hovered over, which is
what the "-hide" hint accomplishes. You don't need to match the name with any layer, because every
button or menu item with a "-hovershow" on a page will cause a layer with the "-hide" hint to disappear
on hover.
Hover and Click Elements in Columns

If you are using SiteGrinder's amazing -column feature to organize elements so they shift down to make
room for others, you can include -hovershow and -clickshow layers in this readjustment.
If you have your -hovershow or -clickshow elements inside a column and you want them to be part of the
column's dynamic element shifting then just make them visible in the page layer comp. If they are
hidden they will appear over and cover the contents of the column rather than moving things around to
make room for them when they appear.
At this point you may want to explore the techniques described here in more detail in the Interactivity
Reference, or you can move on to the Content Management Essentials Guide.
Content Management
About This Guide
This guide describes the kinds of changes you can make to sites using SiteGrinder's Content Manager.
This document assumes you have read the SiteGrinder 3 Introduction and the Workflow Essentials
guides. Please do so now if you haven't.
Content Management Basics
The SiteGrinder Content Management System (CMS) is the final phase of the workflow and is what you
use to make changes to your site and its pages after you deploy them (if you chose a CMS option when
you created your site in the SiteGrinder plug-in window).
This guide does not apply to sites without CMS, which are created by choosing "none" under "CMS" in
the New Site window. For such sites you will make changes and additions using non-SiteGrinder tools,
such as Adobe DreamWeaver.
You can also save out a non-CMS site after editing with the CMS by selecting "Save As Static HTML"
from the Content Manager's "Upload" menu, which is usually preferable because it allows editing with
SiteGrinder's content tools before moving into DreamWeaver.
Content Manager Tasks

These are the most common Content Manager tasks:
Editing the contents of text areas

44
Adding and editing gallery images and metadata

Changing content images
Adding subfolders to your site
Adding new pages based on existing deployed page designs
Setting page titles
Adding new menu items
Linking buttons and menu items to pages, documents, etc.
Changing blog settings
Choosing which pages are homepages for each subfolder
Setting external content like embedded videos
Synchronizing your local changes with your remote site
Remote vs. Local CMS

You are using the "local" Content Manager when you are editing your content on the computer where
you have installed SiteGrinder and deployed the site. The local Content Manager requires the
"SiteGrinder Engine" application to be running, though not the SiteGrinder plug-in or Photoshop. Local
content editing is what you will use most of the time.
"Remote" content management requires that you own the optional "SiteGrinder Control" add-on to
SiteGrinder 3. If you do then you can select a remote CMS option from the New Site window. You will
still use the local Content Manager when you are editing your pages on the computer where you created
them, but, once you upload your site, you or your clients can use the remote CMS from any
web-connected computer with a modern browser.
There are two separate methods to log in to your uploaded site to edit it remotely:
You can add a button named "edit-button" to any page in your Photoshop file. Clicking that
button will take you to a login page for the CMS.
SiteGrinder always creates a special page at "www.YOURDOMAIN.com/sg_admin.html" that
you can use in your browser's address bar.
For details about the remote CMS consult the documentation for the SiteGrinder 3 Control add-on.
Content Management of Elements on Multiple Pages

Pages in a SiteGrinder site come from two places: layer comps in Photoshop with the -page hint added to
their names, and new pages created in the Content Manager based on those layer comp pages. When you
create a new page based on an existing page design it is identical to the original page until you start
making changes in the CMS.
In any given site there are elements that are the same on every page (such as site-wide menus), and
elements that change from page to page (such as page contents).
If you add a new menu item to a site-wide menu while editing a particular page you will want your edit to
affect every page that menu appears on. These kinds of elements that appear on multiple pages but are
the same on every page are called "shared". There is a "-shared" hint you can use to tell SiteGrinder a
layer that you use is to be the same on every page you use it on. This allows you to change the layer in
the CMS and have that change automatically reflected on all pages that layer appears on.
On the other hand if you create a page design that you are going to use for multiple pages created in the
CMS with different content on each, the content elements (images, text, external media, etc) will need to

45
be editable in a way that does not affect every page that's based on the same design. Elements that don't
affect other pages when they are edited in the CMS are called "unique." There is a "-unique" hint you can
use in Photoshop to tell SiteGrinder not to share a layer among multiple pages - even if you use that layer
in multiple page designs.
SiteGrinder will usually guess your unique vs. shared intentions correctly based on layers that you re-use
on different layer comps and layers you don't. As a result the -unique and -shared hints are often not
needed.
IMPORTANT: Menu layers are always considered shared and can't be used with the -unique hint. If
you need to do this for some reason then make a new menu layer with a different layer name but the same
items. Galleries and ecommerce elements are also always unique.
Applications of Content Management
There are endless applications of SiteGrinder 3's powerful CMS work style.
Here are a few common ones:
A photographer might start a site with two or three galleries. Later they can add a new gallery
page in the CMS and use a completely different set of images.
xmedia layers are for adding media and other external elements. Each time you make a new page
from a design with an xmedia element you can link to completely different content.
Where to go From Here
At this point you may want to explore the details of content management in the Content Management
Concept Reference or you may want to proceed to the Video, Flash, and Other External Media Essentials
guide.
Video, Flash, and Other External Media
About This Guide
This guide describes the essentials that every SiteGrinder user needs to know about the glamorous,
exciting, Hollywood portion of SiteGrinder's feature set: how to include video, animation, music, etc. on
your website. This guide will also describe how to add slightly less exciting but no less powerful
external content like HTML files, Google Docs and more.
For details about importing external media into your pages see the External Media Reference.
What is External Media?
"External Media" is a broad concept that covers pretty much anything you want to put on your page that
is outside your Photoshop document. All of the following count as external media and are supported by
SiteGrinder:
Video files, including Quicktime, FLVs, YouTube videos etc.

Custom video players
Embeddable badges, gadgets, and widgets, including Twitter and FaceBook displays
SWF Flash banners and animated GIF files
Third party galleries or slideshows, including those created by ShowItWeb and Adobe Lightroom
Google Docs, including word processor, and Presentation documents

46
MP3 music files

HTML documents and snippets, whether on your local machine or hosted by a web server
somewhere
"Zoomify" images
External Media Workflow
Even though there are so many different kinds of external media, the workflow for including them on
your pages is the same:
1. Create a rectangular placeholder layer in your Photoshop document that matches the dimensions
of your external media. The marquee tool's "Fixed size" style makes this very easy. Remember,
as a placeholder this layer will tell SiteGrinder how to size and position your media but whatever
is in the layer, including any layer styles, will not appear on the final page.
2. Give that layer the "-xmedia" hint and position the layer where you want your external media to
go on the page design (you'll need to update your comp if your comp is already created)
3. Build your design. In the Design Manager you won't see your actual media, but you can view
some sample media to make sure your layout works with, for example, variable amounts of text.
4. Deploy your design to a site folder.
5. Create a subfolder somewhere in your site folder (usually the top level is easiest) and name it
something you can remember, like "media".
6. Copy your media files into the folder you created in the previous step. Don't put your media into
any of the folders SiteGrinder creates, which have names beginning with "sg_".
7. In the Content Manager for your site you will tell SiteGrinder what kind of media you want to
import and select it from the folder you created in step 5.
As you can see the main events here are creating the rectangular -xmedia layer, creating a folder in your
site folder to hold the media, and then selecting the media in the Content Manager.
Selecting Media in the Content Manager
After you deploy to SiteGrinder's Content Manager you will use the controls there to tell SiteGrinder
what kind of media you want to use and where the files are that make up that media.
Sometimes that file location will be on your local disk and other times it will be a URL on the Web.
Reusing the Same Xmedia Layer on Multiple Pages
When you create a layer comp page design in Photoshop it can represent only one page...or it can
represent many pages based on the same layout but each with different content from the others. This is
because the Content Manager can duplicate a page and then allow you to alter the content on the new
version.
When you do this with a page that has an xmedia layer you can choose different media to be displayed on
each new copy of a single page design. They don't even have to be the same kind of media. One page
might show a Flash movie and another a Google document. See the documentation on external media as
well as the documentation for the Content Manager for more details.

47
Media Files That Require Other Files
Some file types are self contained, meaning that the file depends upon no others to function properly.
Examples of self contained files are: digital video (.mpeg, .mov, .wmv); PDF files (.pdf); digital audio
(.mp3, etc.); and images (.jpg, .gif, png).
But some file types depend upon other files for proper function. Examples of these files include most
web pages (.html) and some Flash files (.swf). As mentioned previously, to prepare a file for import
means moving it into the site directory. With media that depends on other files you must be careful to
move all the files to the site directory (the main file and the dependent files) and to preserve their path
relationships. It is often easier to move the folder that contains the files into the site directory, rather than
moving the files individually.
When working with composite files be sure to test that they are working after you move them into the site
directory and before you attempt to import them. You can do this by just opening the slideshow or other
media by itself in a browser window. If the media is not working after merely being moved, it means you
didn't move everything and there is no way it'll work after being imported.
The -embed Hint
The -embed hint provides a different, somewhat more direct approach to adding media to your pages in
type layers.
Embed allows you to add arbitrary web code to anywhere on a page. This kind of code is usually copied
and pasted from services like YouTube, PayPal, or Twitter to embed videos, buy now buttons, twitter
feeds, etc.
To use this hint you create a type layer by clicking and dragging with the type tool. The rectangle you
drag out will be the rectangle the embedded code draws its contents in, such as a YouTube video.
After you create the rectangle you paste the embed code you want to use into the contents of the type
layer. Finally you add the -embed hint to the layer name, as in "Surprised Kitty -embed".
For a step by step example of the -embed hint see the Adding a Twitter Feed tutorial.
At this point you may want to explore the details of importing external media into your pages in the
External Media Reference, or you may want to continue to the Uploading Essentials guide.
Uploading
About This Guide
This guide describes the process of getting your site files from your local computer (where you have
SiteGrinder installed) to your web host using SiteGrinder's Content Manager Uploading tools.
Uploading Basics
Once you have deployed your pages, edited their content, and are ready to take them online you have a
few choices:
1. Have SiteGrinder's Content Manager transfer the files that make up your site to your web server,

48
1.
or
2. Save your site as "Static HTML" and upload with another tool like DreamWeaver or an ftp
program.
There are a number of advantages to using SiteGrinder's uploading/synchronizing system:
SiteGrinder tracks changes you make locally, so each time you use the "synchronize" command
SiteGrinder only copies the files to the server that it needs to.
If you are using the optional SiteGrinder 3 "Control" add-on then you can download changes that
have been made on your host from another machine.
It is easier to move backwards and forwards through the design/deploy/redesign/redeploy
workflow if you have SiteGrinder do everything.
Upload Everything vs. Upload Changes
SiteGrinder has two ways of copying file to your web server via ftp: "Upload Changes" and "Upload
Everything."
"Upload Changes" is what you will use most of the time. When you choose to Upload Changes,
SiteGrinder uploads only those files from your local machine that have been changed since the last
Upload. Changes that need to be uploaded include the addition of new pages as well as the modification
of existing pages in the Design Manager or the Content Manager. In addition if you have made changes
to your site remotely using the optional SiteGrinder Control CMS tools then SiteGrinder will download
those changes to your local machine, keeping everything up to date. This is called "synchronization".
When you choose to "Upload Everything", SiteGrinder always copies every file from the site on your
local machine to the ftp directory you specify. This can take a long time depending on the size of your
site. If any changes have been made to the files online, either through SiteGrinder's "Control" add-on
CMS or through other tools, these will be lost when the "Upload Everything" command overwrites files
on your server with those from your local machine. The "Upload Everything" command should be used
with care. Mostly you will use it if "Upload Changes" is failing for some reason or if files are missing on
the server.
The first time you use SiteGrinder to place your files on your web host Uploading Changes and
Uploading Everything have the exact same effect, since every file will need to be copied to your server.
FTP Connection Settings
Before you can upload your files you must fill out the information in the connection settings window,
which you open from the Content Manager's "Upload" menu.

49
The information for this window will be provided by your web host. For details about filling out these
fields see the Sites Reference.
SiteGrinder allows you to non-destructively cancel your upload because it doesn't erase the files on your
server until all of the new versions have been successfully uploaded.
Once your site has finished uploading you can see it by selecting "Open Site" from the Upload menu.
At this point you may want to explore details of site management in the Sites Reference or you may want
to continue on to the Image Compression Essentials guide.
Image Quality and Compression
About This Guide
This guide assumes you have already viewed both the SiteGrinder 3 Introduction, and Workflow
Essentials, so please do so now if you haven't.
Introduction
Image compression is exactly the kind of tedious yet complicated drudgery that many web tools make
you spend a lot of time laboring over. This guide describes how SiteGrinder lets you retain a maximum
of control with a minimum of effort.

50
Images and Photoshop's Color Model
It's important that your file's color profile and Photoshop's color workspace be set to sRGB, the standard
for the web. If you build with the wrong color space selected you may notice a difference between your
Photoshop layer colors and the colors that appear on the final page.
When you create a new file you can select its profile. You can change it later using Photoshop's "Assign
Profile" or "Convert to Prfile" commands in Photoshop's "Edit" menu.
Photoshop CS4's "Edit->Color Settings" window lets you select "North America Web/Internet" from the
"Settings" menu as shown below to set Photoshop's workspace to "North America Web/Internet".
Figure 1.
Image Compression For The Easily Bored
Photoshop files take up a lot of disk space because Photoshop image layers contain such a high level of
color and transparency information. The geniuses who created the Web settled on several image file
formats that are quicker to download at the cost of losing some detail. These formats are called gif, jpeg,
and png.
Gif files are the most common because they work well for computer generated graphics, which means
pretty much everything except photographs. The gif format is shockingly good at compressing large
areas of solid color. Gifs can have "holes" - ie transparent areas that let you see through to the
background - but not semi-transparent areas that blend with the background.
Jpeg files should always be used for photographs or photo-realistically rendered 3D images and generally
not for anything else. Jpegs can't have transparent or semi-transparent areas and so are always
rectangles. Because of this, if a layer with jpeg compression is not rectangular then SiteGrinder will
include parts of other background graphics to fill out the layer to its smallest rectangle.
Png files are less common because older browsers don't support them well and they tend to be a bit larger
than the other two. The main advantage to png files is that their "24-bit" option allows them to retain full
color and transparency information at the cost of being much larger than gifs or jpegs. Png files cannot
be used as repeating tiles.
Each of these formats has many associated options controlling size and quality.

51
The SiteGrinder Compression Workflow
SiteGrinder saves the images in your page using any of the "Save For Web and Devices" settings. You
manage these options by selecting or creating presets in Photoshop's File->Save for Web window. You
don't save out your graphics there...SiteGrinder worries about that when you build...but you can preview
and create different combinations of settings. Most users don't need to create custom settings.
SiteGrinder's philosophy is that most of your image layers will use the same compression setting, almost
always a gif setting. As a result SiteGrinder supports a default compression setting and then allows you
to specify, when necessary, exceptions to that default on a layer-by-layer basis. You select compression
settings, both default and layer-specific, in SiteGrinder's Compression panel before you build.
Figure 2.
The compression workflow goes like this:
1. Open the SiteGrinder plug-in window and switch to the "Compression" tab
2. Select a default compression setting from the menu at the top of the panel (#1 above) if you want
something different from SiteGrinder's initial setting of "gif 128 dithered". You should never use
a jpeg setting as the default.
3. If necessary, set other compression settings for individual layers by clicking in the "Save for Web
Preset" column (#3 above) in the row corresponding to the layer in the "Layer" column (#1
above). A dialog box will appear with a menu listing all of the Save for Web presets.
4. Build your design
5. If you are unhappy with any of the graphics go back to step 2
Most SiteGrinder users get by using the SiteGrinder default ("Gif 128 dithered") for all non-photo layers
and "jpeg medium" for photographs.
A Zen master once said "the smallest image is the image that doesn't exist." Think about that for a
second. Okay now stop thinking about it. When SiteGrinder finds an image or object layer that consists
entirely of a rectangle of solid color it doesn't need to create an image at all. It just does the right thing,

52
which is to create a rectangle of solid color using nothing but a little snippet of web code.
Auto Merging And Compression
Sometimes you won't see layers listed in the Compression panel because SiteGrinder has decided it will
merge them with other layers when it builds. This is because it is better from a download standpoint for
your pages to have a minimum of individual image files.
IMPORTANT: If you need to change the compression preset of a particular layer and you don't see it
listed in the compression panel you should close SiteGrinder and add the "-nomerge" hint to the name of
the layer. When you next open SiteGrinder that layer is guaranteed to not merge with any other and will
appear as its own entry in SiteGrinder's Compression panel layer list.
SiteGrinder Galleries and Compression
The Compression panel has no control over your gallery images and thumbnails. Gallery images aren't
layers in your Photoshop document, they are separate files that you will select in the Content Manager.
For details about when and how gallery images are compressed see the Gallery Editor Reference.
For complete details about compressing images in SiteGrinder see the Images Reference or you may wish
to continue on to the Galleries and Slideshows Essentials guide.
Galleries and Slideshows
About This Guide
This guide assumes you have already read both the general SiteGrinder 3 Introduction (or watched the
associated video) and the Workflow Essentials Guides.
Complete reference documentation for galleries is found in the Galleries Reference.
Introduction
A gallery is a way of navigating and displaying a body of images in various ways on a web page. You
design galleries by making layers in Photoshop to represent the components you'd like to use and giving
them the appropriate hints. These components are tied together using layer name matching. For
example, a layer named "Weddings-next-button" will advance a gallery picturebox layer named
"Weddings-picturebox". Their names not only associate them together but they also tell SiteGrinder what
the name of the gallery is, in this case "Weddings".
Note for SiteGrinder 2 users: In SiteGrinder 3 you place layers representing gallery elements on any
page you like. The "gallery" hint is no longer used.
You can place as many galleries on a page as you wish, giving each a different name.
One of the most powerful aspects of SiteGrinder 3 is the management and display of galleries with
multiple different images representing each item or "exhibit" in your gallery. This is described in more
detail in "Alternate Views" below.

53
Gallery Components
The most commonly used gallery components:
Pictureboxes display the large currently-selected image. These can be self-playing to make a
slideshow.
Thumbsheets display small clickable versions of all the images in a particular gallery for
navigation
Next and Previous buttons enable sequential navigation of a gallery
Bigboxes provide a "lightbox"-style centered display of images in the browser window with a
darkened background
Metadata allows you to extract jpeg metadata for use anywhere on your gallery pages with
whatever styling you choose
Panelsheets allow you to create complex layouts with text, metadata, decorative image layers,
and thumbnails. These layouts repeat for each exhibit in your gallery or each entry in an internet
feed (such as RSS).
Variations of each of these components create an almost infinite variety of gallery features. There is, for
example, a Flash picturebox optimized for playing as a slideshow and another picturebox that is meant to
display before/after image pairs. You choose which variation of each component type along with its
particular settings using SiteGrinder's Design Manager.
You can use components in any sensible combination. A single picturebox can represent an entire gallery
because most pictureboxes can be set to go to the next image when the user clicks them. Or you could
create a gallery from just a thumbsheet whose thumbs open a "bigbox" when clicked. On the other
extreme a complex gallery might utilize every single component type.
Gallery Workflow
The Gallery workflow resembles most other workflows in SiteGrinder 3:
1. Create and position gallery component layers (like pictureboxes and thumbsheets) and decoration
layers (like drop shadows or frames) within your Photoshop document. (DO NOT add the actual
gallery images to your Photoshop file as layers. These will remain outside the Photoshop
document and are selected in step 4.)
2. Open SiteGrinder and build the page(s) that have gallery components.
3. In the Design Manager you will select your component types and their options, using
SiteGrinder's included gallery images as a reference
4. Deploy your design to the Content Manager where you can add your own images to new galleries
and manage the images in existing galleries
When you first arrive in the Content Manager and select a page with a new gallery, many of the gallery
components will not display until you add your own images. Add them by selecting the gallery in the
"editable content" panel and clicking "edit." This will open the gallery editor.
Once you have deployed a gallery you can add/delete/rearrange your images on your local machine
whenever you like. You can also spawn whole new galleries based on the ones you've already created
without returning to Photoshop. With the addition of SiteGrinder 3's "Control" CMS add-on you can
even make these changes to uploaded galleries from a browser on any web-connected machine.

54
Gallery Images and Thumbnails
You import images either one at a time or an entire folder at a time.
When you are preparing your images for import into your gallery in the CMS you can either resize them
yourself, or you can have SiteGrinder resize them. We recommend doing it yourself in Photoshop either
individually or with a Photoshop batch because you will have greatest control over what the results look
like and adding the images to your SiteGrinder Gallery will be much faster.
Galleries require as many differently sized versions of an image as are needed for the different
components. As with the images destined for the picturebox component, SiteGrinder can generate the
necessary sizes or you can. This means you can create custom thumbnail versions which are often
visually superior to simply shrinking images to fit in the thumbnail size. When you create custom images
for the different components you will place them in their own folder and name them the same as the
images they represent. If a picturebox image is named "Grand Tetons.jpg" then you would create a
custom thumbnail version in a separate folder and name it identically "Grand Tetons.jpg".
JPEG Metadata and Galleries
SiteGrinder allows you to embed metadata field names in Photoshop type layers that also have the
"-metadata" hint. For example you can add the "description" metadata to a type layer for a gallery named
"wedding" by naming the layer "wedding-metadata" and typing "[[description]]" (without quotes)
anywhere in the type layer's contents.
When you add images to SiteGrinder it will extract the metadata and replace the metadata chunk (such as
"[[description]]" above) with the actual metadata for each image you add.
You can also edit metadata after you deploy in the Content Manager's gallery editor.
Alternate Views
One of SiteGrinder 3's unique gallery features is its ability to create separate navigation supporting
multiple images of the same subject. An example of this would be a real estate site where each thumbnail
in one area of a page would represent a different house, and a separate set of thumbnails would represent
alternate images of the currently selected house. Clicking on a new house in the first set of thumbnails
will automatically update the second set to show the images of the new house. See the gallery reference
documentation regarding "viewsheets" for details.
Galleries and Ecommerce
If you have the SiteGrinder "Commerce" add-on you can combine galleries with ecommerce buttons to
make web stores very quickly. Each gallery item can have an automatically generated unique add to cart
button and even support ecommerce forms for selecting things like sizes and colors.
This feature works especially well with the alternate views feature allowing you to provide multiple
views of any given item for sale. See the ecommerce documentation for details.
Animated Slideshows
Slideshows are just self-playing Flash pictureboxes.
To create a slideshow:
1.
55
1. Create a -picturebox layer in your psd

2. Optionally create a thumbsheet and/or next and previous buttons which can control the slideshow
3. Build your page
4. In the design manager edit the picturebox and choose the "SiteGrinder Basic Flash" type
5. Select your animation settings
6. Deploy and add your images in the Content Manager
Where to Go Next
If you are interested in finding out more about galleries then the Gallery Reference is the place to go. Or
you may wish to continue on to the Email and Other Forms Essentials guide.Email and Other Forms
Email and Other Forms
About This Guide
This high level overview of creating forms from Photoshop layers is part of the SiteGrinder 3
"Essentials" documentation meant to provide crucial information for particular SiteGrinder features.
In most web page design tools creating forms is about as much fun as filling out forms at the Department
of Motor Vehicles. Forms are typically so tricky because they require a careful balance of HTML layout
and server side programming. This guide describes how SiteGrinder makes the creation of all kinds of
web forms fun and easy - right inside Photoshop using simple type layers.
If you want to use SiteGrinder forms you will need to know everything in this brief guide, so pay close
attention.
What is a Form?
A web form allows a site visitor to enter information on a page by typing in text, selecting from menus,
etc. Once they have finished entering the information they will click a "submit" button (which may not
actually say "submit" on it). At that point the web browser will send what they entered to the web server
the page is hosted on. If the web server doesn't like what they entered because they, for example, left a
required field blank, the form will be displayed again for them to fill out properly. If the web server
approves of what they entered it will display another page. This might be a "Thank You" page or it might
be a page with special content created based on the form info, like a Google map from the address the
visitor entered to a retail store.
Some common uses for forms:
Email "contact" forms which send the entered information to the site owner's email address
Generating Google maps
eCommerce (select quantity, size, color, etc.)
Site searches
Adding information to a database
Sadly not all browsers draw forms in exactly the same way, so no matter what web tool you use to create
a form you will never have absolute control over what it looks like.
Important: Forms will display on pages that reside on your local computer, but they won't actually work
when you click the submit button. Because of the server component of forms you have to upload form
pages to a web server to test their function.

56
SiteGrinder Forms
Types of Forms
SiteGrinder supports two kinds of forms: "email" and "generic," and between them you can accomplish
almost anything.
Email forms are the most common. These will send to any email address you specify all of the data your
site visitor enters in the form when they click the submit button. The visitor will then be taken to a
"Thank You" page that you specify by choosing one of your site pages. The two variants of email forms
are "PHP" and "CGI". PHP is easier but some web hosts don't support it. If yours does not you will
choose CGI.
Generic forms are for everything else.
The -form Hint: Creating Forms With Type Layers

SiteGrinder creates forms from the text it finds in type layers which have the "-form" hint added to their
layer names. It uses a simple system similar to what you would do if you were going to print the form for
people to fill out by hand. Entering "Name:_______" on a line is enough to create a name text field, for
example. For any particular form, all of the form elements are entered as text into a single type layer.
Here is a type layer in Photoshop with some email form elements typed into it:
Here is the form SiteGrinder produced from that layer as displayed in the browser after a few visual
tweaks in the Design Manager to give it a blue background etc.:

57
SiteGrinder supports the following types of form fields:
Text entry areas such as "Name", "Email" and "Comments" above. These can be single or
multi-line, can have prompt suggestion text, and can display the entered text as bullets to hide
passwords.
Popup menus, such as "Favorite body part" above
Checkboxes
Selection lists (like a popup menu but with all items displayed without clicking anything)
Labeled grouping outlines around multiple fields
Descriptive text between fields
Submit buttons with any button text you choose, as in "Tell it like it is..." above.
Find the details about how to enter each of these controls in the Supported Form Elements section of the
Forms Reference Guide.
The Form Workflow
Use the following steps to create a form:
1. Create a type layer with the "-form" hint and enter in the text for your form fields
2. Open the SiteGrinder plugin and select the type of form (email or generic) and details like thank
you page, where email form data should be sent, etc. in the SiteGrinder plugin window's "Forms"
panel
3. Build the page with the form
4. Edit the form's appearance live in the browser using SiteGrinder's Design Manager
5. Deploy your pages
6. Upload and test your form
(SiteGrinder eCommerce forms use a slightly different workflow and don't appear in the SiteGrinder
Forms panel. See the SiteGrinder Commerce Reference for details.)

58
Editing the Appearance of Forms
You can control the following visual aspects of forms:
Text font, size, color

Text font, size, color, background, and shadow some or all of which can be set separately for
Labels, Legends, Controls, and Prompts
Alignment
Background color
Using Data Variables in a Form
Form "data" is just the stuff that gets sent to a web server when your site visitor clicks a form's submit
button. There are two parts to form data, the stuff the site visitor typed into the form and, optionally,
additional stuff you want to send to the server every time a form is submitted.
For email forms this extra stuff includes the email address where you want the web server to send the
information, as well as what the sender address should be.
For generic forms this stuff can be anything the server needs for your particular purpose. Imagine you are
using a generic SiteGrinder form to generate a Google map showing directions to your business from an
address entered by your site visitor. Google will need both addresses, but your site visitor will only enter
their starting address. You provide the destination address in the SiteGrinder plugin window's "Forms"
panel. This kind of information, which is sent to the web server but is not seen by your site visitor, is sent
using what are known as "hidden variables". Each hidden variable has two parts: a name, such as
"destination", and a value, such as "1600 A Street, Mytown, MN". The name is determined by the
requirements of whatever web service you are using.
For details about generic forms and hidden variables see the Forms Reference Guide.
Form Limitations and Troubleshooting
The text on your form's "submit" button can be whatever you like but what the submit button background
looks like is up to your browser. SiteGrinder 3 does not support using image buttons as form submit
buttons.
If you don't make the type layer wide enough your form fields will jump down to the next line. If this is
happening you'll need to rebuild after making either your labels shorter, your fields shorter, or widening
the type layer.
Only one name/field pair (as in "Email:______") can appear on each line of a form.
If you want to see exactly how to make an email contact form, go to Making an Email Form step by step
tutorial.
If you want to find complete information about SiteGrinder forms, go to the Forms Reference Guide.
Or you may wish to continue on to the eCommerce Essentials guide.

59
E-Commerce
About This Guide
Some websites are for information, some are for entertainment, and some, let's face it, are for makin' it
rain! (As in rain money for those over forty.)
This guide is about using SiteGrinder to create web stores, especially using the optional SiteGrinder 3
"Commerce" add-on.
eCommerce Basics
The simplest form of ecommerce is embodied by sites like PayPal. Basically you log in to your account
on PayPal's site and create a simple transaction, as in selling a bicycle for $300. Paypal provides you
with a chunk of code you can use on your site to display a "Buy now" button for that transaction. When
your customer clicks the button on your site it takes them to a page on Paypal's site where the actual
purchase details, like echeck or credit card processing, are handled.
Another form of ecommerce is to set up your entire site including any store pages on an ecommerce host.
These hosts are often expensive and restrict you to using their templates for your site's visual design.
The advantage is that these sites can handle both transactions, shipping details, tax, and inventory
tracking, which are crucial for large stores with a lot of products.
There are a lot of approaches that fit between these two extremes and can provide a nice balance between
control over your own site and offloading complex tasks that also demand a high level of security, like
credit card processing.
Ways Of Using SiteGrinder for eCommerce
The most powerful way of building web stores with SiteGrinder 3 is using the optional "Commerce"
add-on. That's what the rest of this guide is about.
But there are ways of adding eCommerce to pages built with SiteGrinder even if you don't use the
Commerce add-on. These include:
Embedding PayPal "Buy Now" code with the -embed or -xmedia hints
Linking to a web store on another site from SiteGrinder pages
SiteGrinder 3's "Commerce" Add-On Workflow
The optional SiteGrinder Commerce add-on allows you to create buttons and forms that represent simple
or complex eCommerce activities like "Checkout", "Add to cart", specifying quantities, selecting colors,
etc. These buttons and forms can look like whatever you want and can appear anywhere on your pages.
Commerce does not provide the ecommerce banking and transaction processing "back end." For this the
Commerce add-on works in conjunction with Foxycart, a full featured javascript-based shopping cart
system that costs $19 per month, though it's free to use for as long as you like before you bring your store
online.
The Commerce workflow goes like this:
1. Set up your Foxycart account at foxycart.com.

2. Create your page(s) in Photoshop with buttons and forms to use for ecommerce, and add the "$"

60
2.
hint, as in "Add to cart-button-$" or "Order-form-$".
3. Open SiteGrinder and Build (If you added an eCommerce form you can style the form in the
Design Manager after building).
4. Create a new site and specify eCommerce options in SiteGrinder's "New Site" window.
5. Deploy to the new site.
6. Configure your eCommerce forms and buttons using SiteGrinder's Content Manager and upload
your pages.
7. PROFIT!!!!
SiteGrinder Commerce also has powerful techniques for rapidly generating entire webstores using
SiteGrinder's Gallery features, described further down in this document.
Commerce Buttons
The simplest estore is just an ecommerce "buy now" button, usually on a page describing something to
buy.
Commerce buttons are just regular text or image buttons with the "$" hint added. Such buttons can have
the usual alternate states, like "-hover", and these states don't need the "$" hint. You can place
ecommerce buttons anywhere you like on any of your page designs.
The Commerce button workflow:
1. Add the "$" hint to one or more "-button" layers

2. Build your designs, or at least the pages with "$" buttons
3. Create or select a new site that uses the ecommerce option
4. Deploy the pages
5. In the Content Manager's list of pages select one containing an ecommerce button
6. The Content Manager's "ecommerce" panel will display a list of ecommerce forms and buttons
7. Click in the list to edit your button
8. In the window that appears you can determine what exact ecommerce action the button will have
(add to cart and checkout, view cart, etc.)
Ecommerce buttons by themselves are great if you are selling just a few simple items. In concert with
gallery components, they make it easy to create web stores with many items. See "Commerce &
Galleries" below.
Commerce Forms
One problem with ecommerce buttons is that they can only represent one specific item. If you have the
same item in 3 colors and 5 sizes you would have to make 15 (3 x 5) ecommerce buttons! That would be
annoying, right?
SiteGrinder Commerce forms save the day! By adding the "$" hint to a form you can easily collect
whatever information you need. You will use such a form's submit button rather than a separate
ecommerce button to perform whatever store action you want, as in "add to cart". Like an ecommerce
button you set this in SiteGrinder's Content Manager.
Within the form Foxycart recognizes many standard ecommerce fields, such as "quantity" and "price", so
if your form has fields with those names then the calculations will be made as needed when the item is
added to the cart. Other fields will simply be added to the item description for each item in an order.
This allows you to add any kind of information you might need to a form.

61
Commerce forms also work with gallery-based estores, described below.
Commerce and Galleries
SiteGrinder's galleries provide powerful tools to organize, view, and navigate images. It turns out that
galleries are also a great way to rapidly develop flexible and fantastic looking web stores.
SiteGrinder galleries can display both standard jpeg metadata fields, as well as additional data you add on
top of the jpeg metadata using the Content Manager's gallery editor. You can use this feature to set
eCommerce information for gallery items, such as price.
Once you have built a gallery with Commerce features then navigating to any image in the gallery will
automatically update any ecommerce buttons or forms. This means a single ecommerce button or form in
a gallery will work for every item in the gallery, even if every item has a different name and a different
price!
The workflow for using a gallery to create a store is as follows:
1. Collect one or more jpeg images for each of the items you have for sale
2. Optionally use Adobe Bridge or a similar tool to add item name, pricing and other information to
each jpeg's metadata. (You can also use SiteGrinder's gallery editor to later add or change
metadata information in SiteGrinder's Content Manager.)
3. Create a page design in Photoshop that includes SiteGrinder 3 gallery components. If you have
multiple images of any particular item you will probably want to use SiteGrinder's gallery
viewsheet feature to help navigate them.
4. Optionally include type layers with the "-metadata" hint in order to include arbitrary metadata text
from the images that will update as you navigate through the gallery. This is most commonly
used for captions like price and description.
5. Build your design
6. Select gallery settings and other style options in SiteGrinder's Design Manager
7. Make or select an ecommerce site and deploy your pages to it
8. In SiteGrinder's Content Manager ecommerce panel add ecommerce actions to your controls
9. In the Content Manager's Gallery Editor add your images and optionally edit or add to their
metadata
10. Upload your pages
11. PROFIT!!!!
Once you've set up a store this way you can manage it using SiteGrinder's Content Manager, which
means you can add new items, delete items, change prices, etc. right in the Content Manager.
At this point you may want to explore eCommerce features in detail in the Commerce Reference or you
may want to continue on to the Web Hosting Essentials guide.
Web Hosts & Web Servers
About This Guide

SiteGrinder 3 is an end-to-end solution taking your designs from scratch all the way to uploading them to
your website. The only thing SiteGrinder doesn't do is set you up with a web host and a domain. This
guide tells you what you need to know about setting up your web hosting.

62
General Stuff You Should Know About Web Sites & Hosting
What's education without a little vocab class?
Here are the most important terms you will encounter when dealing with web hosts.
A domain name is a unique name for people to use to find your website, like "medialab.com" or
"yale.edu". If you don't have a domain name yet you'll need to come up with one nobody else has
reserved (good luck with that - we hear "this-name-is-available.biz" is still available) and register it.
Your web host can usually help you with that.
A domain name server (dns) is the part of internet plumbing that turns your domain name into a long
number (sort of like a phone number) that computers on the internet can use to find your site. Your web
host will have to make sure you have a name server for your domain name. If you already have a domain
reserved but no host you will need to work with the company you registered your domain name with to
point it to the host you sign up with using a name server.
A path is an ugly but necessary convention for using text (as opposed to a nice diagram) to efficiently
describe where files are are located in subdirectories. If you have a file called " important-file.doc" in a
folder called "my-files" and that folder is in a folder called "Disorganized-Stuff" and that folder is on a
hard disk named "My-Giant-Disk" then the path to that file will look like this:
My-Giant-Disk/Disorganized-Stuff/my-files/important-file.doc
SiteGrinder generally protects you from having to deal with paths. This is because paths have a lot of
annoying rules about characters they can't contain, and a single typo makes a path totally useless.
Unfortunately you do have to use a path to tell SiteGrinder where files should go on your web host, but
that path is usually just the name of a directory.
A url is the special kind of path used to specify the location of something on the internet, most
commonly a web page. A url to a web page is also called that page's address. Urls are supposed to
include information about what they are specifying. The "http://" stuff at the beginning of a url indicates
a web page, but you can create urls for other things like ftp servers. In that case the url will begin with
"ftp:".
url extra credit: This is helpful info but you don't absolutely have to know it. Some urls are absolute,
meaning they contain the whole shebang including domain name, as in
"http://www.medialab.com/mypage.html". Others are relative, meaning they contain information about
how to find a page relative to the page displaying the link. An absolute address is like a full mailing
address. It tells anyone from anywhere how to get to a house. But you don't need all that info if the
house is down the street.
A relative address is like giving directions from your house to a store nearby. "Go down the road from
here, turn left, and it's the third driveway on the right." As a result relative urls are usually shorter. If
you have two web pages in the same directory a relative url from one page to the other is nothing more
than the filename for the page, like "help.html". If help.html is in a subdirectory called 'helpfiles" that is
in the same directory as the page linking to it then the relative url is "helpfiles/help.html". Which means
"find a directory inside this one I'm in called "helpfiles" and look in there for a file called "help.html."
Relative urls can get complex. Using two periods (as in "..") means "go up a level", so
"../helpfiles/help.html" means "go up a level from the directory I'm in and look in there for a file called
"help.html."

63
An index page (also known as a home page) is the page that will open in a browser that is given a Url to
a directory on a web site, but not to a specific html file. It's an internet standard that this file is named
"index.html". So the url "http://www.medialab.com/index.url" has exactly the same effect in a browser
as the url "http://www.medialab.com". When you tell SiteGrinder that a page is the index page using the
Content Manager's "pages" panel SiteGrinder handles naming the file "index.html" so you don't have to
worry about it.
A website is just one or more HTML files that make up the text and formatting of web pages as well as a
bunch of other files for any non-text elements like images, videos, scripts, etc. SiteGrinder creates and
organizes all these files so you don't have to think too much about them.
A web host is a company that will rent you space on a publicly accessible computer. You will need to
find a host if you don't have one, and you'll need to make sure your domain name points to it. (Your host
can help you with that.)
A web server is the web host's computer somewhere out there on the internet that (you hope) has a faster,
more reliable and secure connection than you do and is running software that web browsers can talk to.
(If you want to live dangerously you can even use your own computer as a web server if you install the
right software.) The web server has files and folders (directories) organized just like your computer's
hard disk. You will use SiteGrinder or an ftp program to transfer the files that make up your web site to
your web server.
ftp stands for "file transfer protocol" and is the technology most often used to transfer files between your
computer and your web server. It's what SiteGrinder uses, so you dont really need to worry about the
details. If you don't want to use SiteGrinder to upload you'll need to find an ftp program to use, like
Cyberduck on a Mac or CuteFTP under Windows.
Every web host is a little different from every other web host (celebrate diversity!) so you will need to
find out from your particular hosting company where on the server to place the website files that
SiteGrinder creates.
Important: Some web hosts don't provide support for all the technologies required to take advantage of
all of SiteGrinder's features. For more information on finding compatible hosts see Hosting
Requirements.
SiteGrinder 3 for SiteGrinder 2 Users
Introduction to SiteGrinder 3 for SiteGrinder 2 Users
SiteGrinder 2 users, we have heard your cries for new features. We could have tried to tack this one or
that one onto the existing SG2 architecture, but we went the other way.
In order to cover as many of your requests as possible we decided to completely rethink the workflow
and as a result we have created something strikingly different from and more powerful than SiteGrinder
2.
You will find this awesome as you read the feature list.
Then you'll find it annoying as you realize you will have to relearn some things.
Then, finally, as you relax into remotely editing your rapidly developed web store using tools in your
browser, we hope you'll fall in love with SiteGrinder all over again.

64
SiteGrinder 3 is not merely an accretion of new features atop SiteGrinder 2. It has a completely new
architecture, workflow, and user interface.
SiteGrinder 3 is not backward compatible with earlier versions. A Photoshop document that builds
correctly in SiteGrinder 1 and 2 might throw a bevy of warnings and errors under SiteGrinder 3. No
settings from earlier versions of SiteGrinder are recognized by SiteGrinder 3. These things were altered
only because they had to be to make enormous gains in the product. SiteGrinder 3 has revolutionary new
features and radically improves the workflow and user experience. You cannot make a one story house
into a skyscraper simply by adding more floors to it...you have to start by rebuilding the foundation.
You can have SG2 and SG3 installed at the same time so you can continue to work with previous
projects. (This is not true with some SG3 beta versions.) Just don't use both versions on the same PSD.
So what does all this change get you?
In a nutshell, SiteGrinder 3 addresses the major limitations of SiteGrinder 2:
SG3 allows you (or your client) to easily change your site's content, add pages, gallery images, etc
without returning to Photoshop and rebuilding
SG3 is designed to handle the demands of building and maintaining larger sites
eCommerce!
and way more...
Click below for the details:
Differences between SG 2 and SG 3

SiteGrinder 3 Workflow
New and Retired Hints
New Features of SiteGrinder 3
Converting A SG2 File To SG3
Differences between SG 2 and SG 3
The main difference between SiteGrinder 2 and 3 is the change in workflow and the changes in the user
interface that result from that new workflow. SiteGrinder 2 opens a dialog when you choose it from
Photoshop's File->Automation menu and its entire user interface is there. In SiteGrinder 3, the dialog
that appears in Photoshop has only a few panes. (Report, Compression, Forms, Build & Deploy) The
majority of its user interface is in the Styles Manager and Content Manager that appear in the same web
browser window that allows you to see your changes live.
Different Product Variations

There is no SiteGrinder 3 Basic. There are add-ons you can purchase for specific feature areas, currently
one for eCommerce and one for remote CMS.
Server requirements can be more stringent for certain features

Most of the features of SiteGrinder 3 that are the same as SiteGrinder 2 have the same server
requirements. But many of the new features have additional requirements. For details click here.
Hint Change: -rollover / -popup / -popdown have been replaced.

-rollover, -popup, and -popdown have all been replaced. The new equivalent hints are
-hover / -hovershow / -hoverhide

65
and, new to SiteGrinder 3, there is a click state for a button, as well as being able to show or hide other
page elements on click so give a warm welcome to
-click / -clickshow / -clickhide
Hoverhow, hoverhide, clickshow and clickhide all support fading and moving animation effects!
Saved Settings
SiteGrinder 2 saves the settings you change in the Photoshop PSD itself. This system had a number of
problems and limitations, not least of which was that it depended on parts of the Photoshop plug-in
system that were not reliable in all situations.
SiteGrinder 3 now saves most settings external to the PSD in a way that associates them with your
Photoshop file's file name. If you save your Photoshop file under a different name you will lose your
settings. (You can get them back by saving again using the original name.)
Exterior and Interior Colors & Tiles

In SiteGrinder 2 interior and exterior colors could be set through the Pages pane in the SiteGrinder user
interface. In SiteGrinder 3 they are set by using the Color Overlay layer fx on either a
"browser-backgroundcolor" layer or a "-pagesize" layer.
Additionally, whereas in SiteGrinder 2 the tile repeat was set by a control in SiteGrinder, in SiteGrinder 3
it is calculated by the position of the "-background" layer relative to its parent.
Tiling is both easier and more powerful in SG3. See the background tiles and column documentation for
more details.
Page Alignment
In SiteGrinder 2 this was set through the Pages panel. In SiteGrinder 3 the default is Center Horizontal.
Alternately, a -pagesize layer can be used, and its base name will determine its alignment. (left-pagesize,
right-pagesize, center-pagesize, centerhv-pagesize)
Hyperlinks
In both SiteGrinder 2 and 3, a page that has the same base name as a button or a menu item is
automatically linked to that button or menu item.
In SiteGrinder 2 the Link Dialog in the "Buttons" panel was used to specify the link before the build. In
SiteGrinder 3, hyperlinks are not set in the plugin window. Instead, hyperlinks are set on buttons and
menu items in the Content Manager.
SiteGrinder 3 still supports -link and -links layers for setting links in the PSD.
Flash Slideshows
Flash slideshows are still supported in SiteGrinder 3, but the -slideshow hint is not used anymore. Use the
-picturebox hint instead and choose the "SiteGrinder Basic Flash" playback picturebox style in the
Design Manager.
Yes, this means animated slideshows can now optionally have thumbnail navigation as well as a ton of
other new features.

66
Gallery Components
In SiteGrinder 2 Galleries are a bit monolithic. They are tied to layer comps that use the -gallery hint.
In SiteGrinder 3 there is no more -gallery hint. You can put can have as many galleries as you like on
any page you like.
There are more kinds of gallery components:
SiteGrinder 2:
-picturebox, -thumbsheet, -thumb, -metadata, next-button, prev-button
SiteGrinder 3:
-picturebox, thumbsheet, thumb, metadata, next, previous, nextthumbset, previousthumbset, panelsheet,

panel, nextpanelset, previouspanelset, viewsheet, view, nextview, previousview, etc
Not only does SG3 have more basic component types, these components have a large and growing array
of options. As an example, Pictureboxes can be CSS or Flash based. If you choose Flash then you can
have animated transitions, a playlist of songs, etc. By popular demand there's even a Flash "before/after"
picturebox designed to show off images before and after some process you may specialize in.
You can mix and match components. You can have, for example, just a thumbsheet that opens images in
a "lightbox" style. Components are associated with each other by name. Thus weddings-picturebox
matches weddings-thumbsheet. The page name no longer has any association with the gallery name.
SiteGrinder 3 does not support custom layouts based on image aspect ratio.
A thumbsheet and its associated pictureboxe can no longer be on separate pages, but there are better
options for this. The "paged" css thumbsheet type allows paged thumb traversal on one page and the
"bigbox" type of display can be used for the equivalent of a separate image page.
(Complete SG3 Gallery Docs Here.)
Gallery Images
In SiteGrinder 2 you choose a folder of images before the gallery page is built. In SiteGrinder 3, you can
add folders of images or individual images to your gallery after it has been deployed to the site, in the
content stage. During the Design stage the galleries use default dummy images that SiteGrinder 3
provides. Once deployed you can not only add images to your gallery, you can delete and re-order them.
You can also spawn entirely new galleries without going back to Photoshop!
External Media
In SiteGrinder 2 you choose external media source files before building a page. In SiteGrinder 3 -xmedia
layers have a dummy representation while previewing builds in the Design Manager and can have their
sources set only after the page has been deployed to a site, during the content stage.
Text Button Styles, Borders and Decorations

In SiteGrinder 2 these were set in the main SG window in the "Text Buttons" panel and the "Decorations"
panel and could be viewed only once the page was built, but in SiteGrinder 3 they are set in the Styles
Manager and can be viewed live in the browser as the styles are tested.

67
Columns
In SiteGrinder 2 there was a maximum of 1 grow layer per page. But in SiteGrinder 3, -grow is
eliminated in favor of much more powerful layout system. The new -column hint is much easier to use
and there can be multiple columns on a page. Additionally, columns can be used to scroll text and
graphics together.
Menu Rollover Tracks Current Page Setting

This SiteGrinder 2 setting has been dropped and is no longer supported.
Popup Settings (All | None | Other Pages Only )

This rarely used and often confusing SiteGrinder 2 setting has been dropped and is no longer supported.
Popup Menus
In SiteGrinder 2 the -menu hint served to both designate a text layer as a series of menu items as well as
set up a menu hierarchy. It could be used on layer groups. In SiteGrinder 3 the -menu hint is used only to
designate a text layer as a series of menu items. It cannot be used on layer groups. Use the -hovershow or
-clickshow hint in conjunction with -menu on a text layer, or use -hovershow or -clickshow on a layer
group that contains buttons to designate them as a hierarchical menu.
More:
SiteGrinder 3 for SiteGrinder 2 Users (sitegrinderhelp) Labels: sitegrinder2
New Features of SiteGrinder 3 (sitegrinderhelp) Labels: sitegrinder2
SiteGrinder 3 Workflow (sitegrinderhelp) Labels: sitegrinder2
New and Retired Hints (sitegrinderhelp) Labels: sitegrinder2
Differences between SG 2 and SG 3 (sitegrinderhelp) Labels: sitegrinder2
SiteGrinder 3 Requirements (sitegrinderhelp) Labels: sitegrinder2

68
SiteGrinder 3 Workflow
SiteGrinder Workflows Compared
SiteGrinder 1 and 2
SiteGrinder 1 and 2 used a simple iterative workflow:
1. design some elements in Photoshop

2. open SiteGrinder to optionally adjust settings
3. build
4. view the result in the browser
5. return to Photoshop and continue working on your site (go to step 1)
There are two key advantages of this workflow:
1. it is easy to understand
2. it is immediate: you are never more than a build away from a finished page or site.
The disadvantage of the workflow is that it doesn't scale well. As a site gets larger and larger, growing
from a few pages to tens to hundreds, builds get slower and slower. To that end SiteGrinder 2 has many
features to help users keep build times down: Lightning Preview, re-use of graphics, turn on and off
pages from the build, galleries, clone pages. But many users don't understand that they have options, nor
when to use them. There is a fundamental disconnect in that the way you use SiteGrinder 1 and 2 to build
a small site (often when learning) is not the same way to use it when building a large site. Sites often
start small and slowly transition to large, further confusing the issue.

69
SiteGrinder 3
SiteGrinder 3 introduces a new workflow. The new workflow breaks the cycle of developing a website
into two distinct stages: designing the look and then adding the content. These stages are bridged by a
step we refer to as "deploying".
Design versus Content

In first year art school students are bored with lectures on the differences between form and function,
form and message, or perhaps design and content. In traditional media these are merely conceptual
differences. At the end everything is just ink on paper - there is no actual separation in the real world on
the final product.
But web pages are not in the real world and in modern web pages there *is *a very distinct difference
between page content and page design. In modern web design HTML specifies the content of a page and
CSS its design. (For a radical demonstration of this, visit http://www.csszengarden.com/ - each page uses
the exact same HTML file, only the CSS changes.) The design is the "look" of your page. The content is
the text, links, and other media that appears upon the page.
This division between design and content is also the splitting line that divides the two stages of the
SiteGrinder 3 workflow.
Stage 1 - Design
In the first stage of the SiteGrinder 3 workflow the user focuses on the page design. Like the SiteGrinder
1 and 2 workflow, the user goes from Photoshop to SiteGrinder to the browser and back to Photoshop
again. They key difference is that the only SiteGrinder 3 settings you can adjust during this stage are
settings that affect the design or "look" of the page.
The design stage loops like this:
1. Design in Photoshop, hinting as necessary (much like SG2). (what content is creatable in this
phase? Not a good place to ask or answer that question. ) -Cperkins 1/6/09 4:20 PM
2. Open SiteGrinder. Adjust any compression settings. Select the pages you want to build.
3. Build. (mention exact button(s) to press here with link to popup screenshot). -Cperkins 1/6/09
4:21 PM
4. Examine your pages in the browser, in conjuction with the SiteGrinder Style Manager. With the
Style Manager you can adjust text button styles, set the borders and backgrounds on other page
elements, and select which gallery features you want to use to display your gallery.
5. Repeat (Go back to working in Photoshop and Step 1).
Here are some screenshots of the SiteGrinder Style Manager. [[ GALLERY OR SCREENSHOTS
NEEDED ]] -Cperkins 1/6/09 4:21 PM

70
Notes
As in SG2 you use checkboxes to tell SiteGrinder which pages to build. Unlike SG2, the only
pages initially selected for building are those pages that have not been built before or have been
altered in Photoshop since the last build (ie, are outdated) You do not need to build every page
every time you are building. (This is really important and should be expanded on.) -Cperkins
1/6/09 4:21 PM
You can see any page that has been built earlier by clicking the View Built Pages button or
selecting the Photoshop file name from the Preview menu. (when do you do one versus the
other? either is fine) -Cperkins 1/6/09 4:22 PM
You during this stage you don't "Build to Folder" or otherwise control where a file is built to. To
get a design to a particular place where you can use it, you must Deploy it (discussed below).
You do not need to open Photoshop to look at pages that you may have built in the past. Simply
launch the SiteGrinder 3 application (not the plug-in) and choose your Photoshop file from the list
in its Preview menu.
The not-yet-deployed SiteGrinder 3 Preview Builds are not editable in other HTML tools, nor are
they viewable outside of SiteGrinder.
Deploy / New Site

Once a page design is complete and you are rather sure that it will not need to be altered in Photoshop
anymore (link to discussion of knowing when a design is ready for deploying) -Cperkins 1/6/09 4:22
PM , you can to move it to the next stage where you can begin to adjust its content, use it as a template
for building other pages, or make other content changes. To use a design such that you can edit its
content, it must be deployed to a site. (That last sentence is not at all clear.) -Cperkins 1/6/09 4:22 PM
The first time you deploy a design you will need to make a new "site." Choose "New Site" from
SiteGrinder's Sites menu or from the control next to the Deploy button. You can have multiple sites for
your different projects. For each site you will tell SiteGrinder in what directory on your computer you
want it to place all the files it creates. SiteGrinder Sites also remember the settings that tell SiteGrinder
how to deploy a design to your site.
When setting up a new site in SiteGrinder you'll be deciding whether it will be a static HTML site with
local-only CMS, or a fully interactive PHP one with local and remote CMS capabilities. You'll also select
an ecommerce module if you want to make a web store.
Once a site is defined, simply select the build you want to deploy to it, and click the Deploy button.
Deploying is the bridge from the designing stage to the content management stage.
Notes
A design can be deployed to many different sites (without rebuilding). Cool!
Ideally a design should be deployed to a given site exactly once. (Explain why and the
exceptions.) -Cperkins 1/6/09 4:23 PM
Normally you will deploy both Text and Graphics. But, if you need to redeploy a design to a site
where it has been deployed before, you can try deploying only the graphics (or only the text).
Deploying graphics only will let you update the design on the site without affecting the content
(since it may have been modified).
Stage 2 - Content
In the content stage you fill out your site. Use the SiteGrinder Content Manager to do the following:
edit text on your pages (as text or as raw HTML)

set links on words and phrases of your text

71
set links on buttons

adjust your text menus: set links, add new menu items, re-order them, delete or rename them.
set the sources for your -xmedia layers.
configure blog user names and passwords, as well as description and captchas
add images to your gallery, as well as re-order the gallery images and adjust their metadata.
configure any ecommerce buttons or forms
make new pages by copying existing ones and adding new content.
make folders
select the home page for the top level of your site or any folder.
delete pages
customize page titles, descriptions, and keywords, as well as the defaults for any new page.
If your site was defined with the PHP CMS option, then you'll also be able to do all of those things from
any browser by making changes live to your actual website - no need for Photoshop or SiteGrinder.
When the Content Management System is running locally, it also has these additional features:
set user name and password for the remote CMS

access files directly on your local machine.
FTP upload - upload your site with SiteGrinder 3!
configure FTP connection settings
Making New Pages

One of the key elements that makes the Content stage so powerful is the ability to make new pages
directly with the Content Management System. SiteGrinder does this by copying one of the existing
pages to a new file. The new page gets its own copy of all the unique content on that page. This is
important and powerful.
For example, if the original page has a -blog layer, the new copy of that page has its own (empty) blog as
well. After making the duplicate you can set the username, password, description and captchas for that
new blog. If the original page had a gallery, the new copy of that page has its own gallery, which using
the SiteGrinder Content Manager, can have its images changed, added, deleted, metadata changed, etc.
This is a replacement for the clone pages of earlier versions of SiteGrinder. The new direct page creation
is a lot easier to use and understand.
Lorem Ipsum Page
With the ability to make new pages in this fashion consider making 'lorem ipsum' pages as templates.
These are pages where the design is as you want but the content is just dummy content that you'll adjust
later. Similarly, you will make generic gallery designs (with metadata) and pages with -xmedia layers.
SiteGrinder 3 Workflow Review

The advantage of the new SiteGrinder 3 workflow is that the techniques used for building small sites are
essentially the same as building a large one. A user can design each page in Photoshop and deploy them
one by one to their site. Or, more effectively, design and deploy a lorem ipsum page and then make page
after page from that design.
The price of the new SiteGrinder 3 workflow is that a page design should be complete, from the design
standpoint, before attempting to deploy it to a site and work on it.
More:

72
Primary Differences between SiteGrinder 2 and 3
New Hints, Changed Hints, Retired Hints
New Features in SiteGrinder 3
Requirements to Use SiteGrinder 3
The New SiteGrinder Workflow
New and Retired Hints
Hints that change name in SiteGrinder 3

This is a list of the hints whose names have changed but otherwise function pretty much the same:
Layer hints:
rollover (and -r) is now hover

popup (and --p) is now hovershow
popdown is now hoverhide
slideshow is now picturebox (see gallery docs)
exterior-tile is now browser-background (see page background docs)
Layer group hints:
menu (on a group) is now hovershow
Layer comp hints:
gallery is now just page (see gallery docs)
New Hints in SiteGrinder 3

This is not all the hints in SiteGrinder 3, just the hints that are new from SiteGrinder 2. For the full list of
hints, see the Complete Hint List reference.
-hover
-hovershow
-hoverhide
-click
-clickshow
-clickhide
-movefrom
-column
-centercut
-footer
-pagesize
-background
-backgroundcolor
-wrap

73
-content
-embed
-noedit
-shared
-unique
-blog
-$
edit-button
-viewsheet
-panel
-panelsheet
-panelthumb
-next / -previous
-nextthumbset / -previousthumbset
-nextview / -previousview
-nextviewset / -previousviewset
-nextpanel / -previouspanel
-nextpanelset / -previouspanelset
-nextset / -previousset
Retired Hints
These are hints from SiteGrinder 1 or 2 that are no longer recognized in SiteGrinder 3
-rollover (use -hover)

-popup / -popdown (use -hovershow and -hoverhide)
-slideshow (use -picturebox)
-gallery (no longer required, use -page)
-grow (use -column instead)
-img (use -content instead)
-rrect (use -column and SiteGrinder's "Decoration" pane, or a combination of -column and
-centercut)
up-button (no longer supported)
next-button/prev-button (next and previous are now hints. thegallery-next-button and
thegallery-previous-button )
-haslinks (no longer required)
-literal (use -embed)
More:

74
New Features of SiteGrinder 3
This is not a complete list of the SiteGrinder 3 features. This only lists the major features that are new in
SiteGrinder 3 from SiteGrinder 2. Extremely important features are in bold.
Design Features
multiple growing columns supported instead of just one growing area in SG2
new footer support that can adjust to the lowest of multiple growing columns automatically
explicit demarcation of page bounds on a page by page basis if needed
new support for background colors, patterns, gradients and semi-opacity for the browser
background, columns, footers and pages
new text button and text menu states: visited and click state
new text button and text menu styles
new click state for graphic buttons
new click-based controls for popups/popdowns
page elements can show or hide in response to either the mouse rollover or a click
animation of showing/hiding items
wrap text around images or other elements.
pages are defined as layercomps or as individual .psd files. Working with individual .psd files is
now much easier.
Improved font handling
Site Management Features

integrated Content Management System (CMS)
in-browser editing of text, menus, links, external media, galleries and ecommerce
PHP sites support remote editing, meaning you can make changes to your site from any computer
on the internet
e-commerce support
blog support (with RSS feed and comments)
create and name new folders to organize your site
assign home page for top level of site or any subfolder
create and name new pages after you build - copied from existing page designs
any page can be used as a template from which to create new pages.
all text on a page and text menus are automatically editable in the CMS. Graphics labeled with
the -content hint are also editable in the CMS.
integrated FTP upload and synchronization
static HTML sites (non-CMS, like SG2) as well as new interactive PHP ones
WorkFlow Features
pages are built independently of one another - much faster builds, build only what you need.
SiteGrinder automatically labels pages as up to date, or in need of building.
SiteGrinder correctly detects individual graphics as out-of-date or in need of building. Much
faster builds, as "ok" graphics are skipped and re-used.
two stages process: work on the page design first and its content second
SiteGrinder's flexible templating system means you build fewer pages.
SiteGrinder can be accessed as a plug-in from Photoshop and also as a stand-alone application.

75
Gallery Features
gallery component plugins let users choose from a variety of gallery types and effects (Flash,
javascript, many others) For example you can have CSS-based thumbnails controlling a flash
picturebox
lightbox-style support
Subviews can be added for a given gallery entry, as in alternate views of the same item
multiple pictureboxes and/or thumbsheets on a single page
in-browser editing. Add folders of images, upload new images, re-order, edit metadata.
advanced metadata, raw HTML or rich styled text
ecommerce support to use galleries as a platform for product page galleries with shopping cart
buttons.
Right click protection
Random image display
External Media Features

external media plug-ins. Many new external media types supported and more plugins being
written all the time.
integration with Google Documents
individual user editing through Google Docs.
built in integration with many third party slideshow and gallery products. (Lightroom, ShowIt
Web, Slideshow Pro, Zoomify, etc)
ECommerce Features
modular. FoxyCart support now, others coming.
integrate with galleries to build a full web store.
Form Features
More control over styles
More control over alignment
Password fields with hidden text
Suggestions/prompts can appear in empty fields
Miscellaneous Features
64 bit support on Windows
More:

76
Converting A SG2 File To SG3
Introduction
Converting from SiteGrinder 2 to SiteGrinder 3 is usually fairly simple. SG2 and SG3 can't work with
the same PSD file, so the most important thing is to save a copy of your SG2 psd file before you start
working on it with SG3.
Make sure you understand the SiteGrinder 3 workflow before reading this document, as it assumes you
have learned about the new Design Manager and Content Manager. You'll also want to familiarize
yourself with other differences between SiteGrinder 2 and SiteGrinder 3 as described in the section of
that name.
You'll need to convert any hints that have changed from their SG2 version to their SG3 version
("rollover" in SG2 is "hover" in SG3 for example). We provide a script that will handle this, described in
the next section.
You will lose most of the settings that you set in the SiteGrinder 2 window, so you'll need to set those
again.
Form and compression settings are set using the SiteGrinder 3 plugin window, just like in
SiteGrinder 2.
Button link settings appear in the Content Manager, as do gallery and xmedia file selection.
Gallery and form appearance settings (which didn't exist in SG2!) as well as text button and
decoration appearance settings are in the Design Manager
For complete details of where you do what in SiteGrinder see the "Workflow Detailed Breakdown" Page.
1. Run the Conversion Script
Once you have backed up your file and have the version of the file you want to convert open in
Photoshop, select "SiteGrinder 2 to 3 Helper..." from Photoshop's File->Scripts menu.
The helper script will convert layer, layer group, and layer comp hint names from their SG2 versions to
their SG3 versions and also give you a report about what else you'll need to do to your file when the
script is finished based on the contents of your file.
The script is pretty smart and will do things like change a -slideshow to a -picturebox, since flash
slideshows are now integrated with the gallery system. (Yes, this means they are thumbnail navigable
and much, much more!)
2. Handle Things the Script Doesn't
The script will give you advice about things it can't do that your design requires. At this point you may
need to read up on some of the new SiteGrinder 3 approaches to relevant features and make changes to
your layers or add more layers.
One common feature that requires your intervention to convert is background tiling. SiteGrinder 3's
tiling features are both easier and more powerful than SiteGrinder 2, but they are also implemented very
differently.

77
3. Open SiteGrinder and Check Warnings and Errors
Once you handle the necessary changes to your layers and hinting you'll save your file and open
SiteGrinder 3 from Photoshop's File->Automate menu/ Like SiteGrinder 2, SiteGrinder 3 presents a
report with errors and warnings. Check these especially carefully when converting from 2 to 3. Make
any changes indicated.
4. Specify Compression and Form Settings as in SiteGrinder 2
The SiteGrinder 3 plugin window has panels similar to SG2 for setting form data and image compression
settings. SiteGrinder 3 won't use SG2 settings, so if you have forms or custom compression setting
requirements you will need to set them again here.
5. Build Your Pages and Apply Design Manager Settings
You will need to choose design settings for Galleries, forms, backgrounds, and text buttons here. For
example if you had a flash slideshow you will need to set the picturebox layer that used to be your
slideshow to use the flash slideshow picturebox style.
6. Deploy and finish things in the Content Manager
Finally you will complete the restoring of any relevant lost settings in the Content Manager. These most
commonly include adding images to your galleries and connecting external files to your xmedia layers.
Here is also where you will generate new pages based on existing ones to replace pages you may have
created in SG2 using its page cloning feature. Just like Arnold Schwarzenegger in the movie "The Sixth
Day", SiteGrinder 3 no longer supports cloning.
Things you can do in SG2 but not in SG3
Not all SiteGrinder 2 features made the quantum leap to SiteGrinder 3.
Among the no longer supported features are:
Pictureboxes and images on different pages for same gallery. (Use bigbox + thumbsheet)
Arbitrary placement of gallery thumbnails
Custom backgrounds for each image dimension
Automatic association of xmedia layers on cloned pages with files in a directory using name
matching

78
Feature Reference
This guide breaks down into sections covering complete information on the individual SiteGrinder
features. It is not meant to be tutorial or task-oriented.
We recommend you start with the Essentials guide for a feature first and then use the reference guide to
round out your knowledge.
The SiteGrinder User Interface

Pages
Hyperlinks
Buttons and Menus
Mouse Interaction and Animation
Photoshop Techniques
Layout
Forms
External Media
Search Engine Optimization (SEO)
Content Management Concepts
Galleries
Sites (Local and Remote)
Text
Images
The "Control" Add-On
The "Commerce" Add-On
Hint Reference
The SiteGrinder User Interface

The SiteGrinder 3 user interface is spread over a number of different components as needed for the
workflow.
The SiteGrinder Plugin Window
This is the first place you'll interact with SiteGrinder. It appears when you select Sitegrinder 3 from
Photoshop's File->Automate menu.
For details of its controls and menus refer to The Plugin Window section below.
The SiteGrinder Design Manager
The Design Manager is a set of controls that allows you to manipulate the appearance of page elements
right in the browser window. Building pages opens them along with the Design Manager in your browser.
For details of its controls and menus refer to The Design Manager section below.

79
The SiteGrinder Content Manager
The Content Manager is a set of controls that allows you to manipulate the content of page elements right
in the browser window. Deploying pages opens the Content Manager in your browser.
For details of its controls and menus refer to The Content Manager section below.
The "SiteGrinder Engine" Application
This is the window of the SiteGrinder 3 Engine Application that needs to be running on your computer
whenever you are using SiteGrinder. If this application isn't running when the plugin is launched then the
plugin will start it.
For details of its controls and menus refer to The SiteGrinder Engine Application section below.
User Interface Reference Contents
The Plugin Window

The Design Manager
The Content Manager
The SiteGrinder Engine Application

80
The Plugin Window
Contents
Contents
Introduction
Saving Your Settings vs. Closing The Window
Activating SiteGrinder
The Report Panel
Errors and Warnings
Saving The Report
Details
The Build and Deploy Panel
The Build Controls
The Deploy Controls
Deleting Built Designs
The Compression Panel
The Save For Web Preset Menu
The Layer Column
The Save For Web Preset Column
The Forms Panel
Menu Commands
The File Menu
The Edit Menu
The Designs Menu
The Sites Menu
The Help Menu
Introduction
Once you are ready to build your Photoshop document as a web page and view it in a browser you will
open the SiteGrinder plug-in window by selecting "SiteGrinder 3" from Photoshop's File->Automate
menu.
(When the plug-in window first launches it will also launch the "SiteGrinder Engine" application in the
background. This application needs to be running for many of SiteGrinder's functions to operate.)

81
The plug-in window has its own menu bar at the top and the following tabbed panels:
Report
Compression
Build and Deploy
If you have any type layers with the -form hint in their name you'll also see the " Forms" tab.
Important: When the plug-in window is open you will not be able to use any of Photoshop's controls.
Note for SiteGrinder 2 Users: In SiteGrinder 2 the entire user interface was contained in the plug-in
window. In SiteGrinder three most of the controls have been moved to the Design Manager and Content
Manager panels within your browser window. For more information see the documentation and videos
on SiteGrinder 3's workflow.
Saving Your Settings vs. Closing The Window
When you click "Save and Close" SiteGrinder saves inside your Photoshop file any settings that you edit
in the plugin window. This is normally how you will exit SiteGrinder.
If SiteGrinder freezes for some reason or you don't wish to save your settings you can always force the
window to close by clicking in the "close" control in the plug-in window's title bar. When you do this
you may lose settings you changed since the last time you opened SiteGrinder.

82
Activating SiteGrinder
When you purchase SiteGrinder you will be sent an Activation code that you will use to convert the demo
into the full product.
The activation code will determine whether you are activated with SiteGrinder only or SiteGrinder and
one or both of the optional add-ons.
For more information about activating see the Installing and Activating guide.
The Report Panel
The Report Panel presents errors and warnings about your Photoshop document layout and hinting.
Errors and Warnings

Errors are represented by a red icon and usually indicate issues that need to be addressed before you can
successfully build. In this case you can close the SiteGrinder plug-in window, fix the problem in
Photoshop, and re-open SiteGrinder.
Warnings are represented by a yellow icon and usually indicate things about your document you may
want to change but that are optional. Think of these as "style points" you are generally free to ignore.
The system is not perfect. SiteGrinder won't catch every possible problem, and sometimes it will report
things as problems that are not, so don't worry about eliminating every single item in the report.
Saving The Report

If you have a lot of errors and warnings you can save them out as an HTML document. That way you
can view them in a browser or print them for convenient reference as you go about fixing them.
To do this just click the small "Save Report" button on the right side of the Report Panel just above the
list of errors and warnings.
Details
You can examine the "details" section of the report by clicking the "details" button just above the errors
and warnings area.
This sub-panel will give you a lot of information about how SiteGrinder is going to build the document.
The Build and Deploy Panel
The Build and Deploy panel is divided into three parts:
The Page list

The Build controls
The Deploy controls

83
The Build Controls

At the left of the Build and Deploy pane is the "Page" column, containing a list of all the pages found in
this particular PSD file.
Next to that is the *"Last Built"*column which tells you when each page was last built.
After that is the "Status" column indicating if changes have been made to the page design in the PSD
since the last time the page was built.
There are three possible states listed in this column:
never: the page has not been built before.

ok: the page was built before and SiteGrinder has determined that it is in sync with your
Photoshop file, there is no need to build it again now.
outdated: The page was built before, but SiteGrinder has determined that the build is too old,
that it no longer matches what is in the Photoshop file. It should be rebuilt.
The "Build?" column contains checkboxes that determine which pages will be built (or rebuilt if they've
been built before) when you click the Build Button. If you want to make your build faster, only build
those pages you are interested in seeing at the moment. If a page is outdated then Sitegrinder will check
its Build checkbox automatically. SiteGrinder may not notice every change you make to every page, so
if you know you have changed a page but SiteGrinder still thinks it doesn't need to be rebuilt just check
it's Build? checkbox before building. If you don't discover the problem until you are in the Design
Manager just return to the plugin window, manually check the Build? checkbox of pages that need to be
rebuilt, and click the Build button again.
The "View Built Pages" button opens the pages you have built so far from this document directly in the
browser-based Design Manager without building anything.
The "Build" button causes the pages that have been checked in the Build? column to be built and opened
in your default browser as part of SiteGrinder's Design Manager.

84
The Deploy Controls

In the deploy area you'll see the "Deployed" column which reports the following states for each page:
never: The page has never been deployed to a site

site names: A list of sites the page has been deployed to
The "Deploy?" column contains checkboxes that determine which pages will be deployed when you click
the "Deploy Design" button.
The "Deploy What" menu allows you to choose whether you want to preserve changes you've made to
the site in the Content Manager. Most of the time you will leave this menu at its default setting, "Keep
any Content Manager Edits". If you don't you will delete anything you've added in the Content
Manager. See the Content Management Concepts reference for more information.
The "Deploy To" menu presents a list of existing sites you can choose to deploy your pages to as well as
the "New Site" command allowing you to create a new site to deploy your pages to.
The "Deploy Design" button saves your pages to the selected site folder and opens them for editing in
SiteGrinder's browser-based Content Manager.
Deleting Built Designs

Sometimes you may need to delete previously built designs of particular pages, usually because problems
are occurring with the build. You can delete all built designs from all pages using the File Menu of the
plugin window.
You can also select specific pages by clicking on their entries in the page list and selecting "Delete [page
design] builds" from the plugin window's File menu where [page design] is the name of your selected
page.
The Compression Panel
The Compression Panel is where we select compression settings for our image layers before we build.
For an overview of how SiteGrinder handles images see the Image Essentials. For details see the Image
Reference.

85
This panel is described in detail in the sections that follow.
The Save For Web Preset Menu

At the top of the controls in this panel (#1 above) you will see the " Save for Web Preset" menu. This is
where you choose the Photoshop "Save for Web" preset you want to use as a default. Any layers you
don't explicitly set a custom preset for in this list below this menu will use the preset you set here. You
can identify these layers in the list below because they will have "Default" listed in the "Save for Web
Preset" column. Most layers do not need unique compression settings.
The Layer Column

The "Layer" column (#2 above) lists the names of all the layers you can set individual compression
settings for. You'll find image layers, object layers, type layers that are exporting as images, etc.
You may notice that some of your image layers don't appear in this list. This is because SiteGrinder has
decided to auto-merge the layer with others.
Auto-merging might occur because layers are part of some multi-layer element, like a button, in which all
the layers have to have the same compression setting. In that case you'll find one of the other associated
layers in the list and can customize its setting if you need to.
Another reason for auto-merging is that having fewer individual images results in faster downloads.
SiteGrinder often auto-merges decoration image layers (ie non-interactive layers) to take advantage of
this fact. If want to set the compression of one of these layers and you don't see it in the list you can
close SiteGrinder and add the -nomerge hint to the layer's name. When you re-open SiteGrinder you will
see that layer in the Layers column.
The Save For Web Preset Column

The "Save for Web Preset" column (#3 above) lists whether each layer is using the default compression
setting chosen from the Save for Web Preset menu or else a custom setting. You can click the entry in
this column for any of the listed layers in order to change the preset.

86
When you click the entry a small window will open allowing you to select a save for web preset from a
menu:
1. A menu lists all Save for Web presets including custom presets you have saved using Photoshop's
Save For Web and Devices window.
2. Use Defaults causes the selected layer to use whatever default compression you have chosen
instead of a custom setting.
3. Cancel closes this window without changes.
4. OK accepts the selected preset.
The Forms Panel
For an overview of how SiteGrinder creates forms see the Image Quality and CompressionForms
Essentials guide. For details see the Forms Reference.
If your PSD contains at least one type layer with the -form hint you will find the Forms tab in the
SiteGrinder plugin window.
Web forms are created in three steps:
1. Type the form fields and controls into a type layer in Photoshop and give that layer the -form hint
2. Set the data settings that tell the form what to do in the Forms panel of the SiteGrinder plugin
window
3. Add additional styling to the form in the Design Manager
This section is about step 2 of the above process.
The "Layer" column lists all type layers from you document that include the -form hint in their layer
names.
The "Settings" column lists the type of form you have selected each form layer to become.
There are three type of forms:
PHP mail for creating forms that will send their contents to an email address when the site visitor
clicks the "submit" button. Requires PHP support by your web host.
CGI mail for creating forms that will send their contents to an email address when the site visitor
clicks the "submit" button. Does not require PHP support by your web host.
Generic is used for all other form types
For PHP mail forms you can set a thank you page from a menu listing your layer comp pages. You also
specify email settings like what email address should receive the data, what the "from" address should be
set as, etc.

87
For CGI email and generic forms the form settings window allows you to add any additional variables
that need to be passed to a server that are not entered into the form itself. You can also specify whether
the form data is to be passed as an HTML POST or GET operation.
See the forms reference for more information.
Menu Commands
The SiteGrinder plug-in window supports its own menu bar.
The File Menu

Save Report allows you to save the errors and warnings to an HTML file for reference after you close
the SiteGrinder plug-in window
Delete [pagename] Build allows you to delete the builds of any page design you have clicked on to
select in the Build and Deploy panel.
Delete All Designs Of [Photoshop file name]... allows you to delete all previous builds of pages in the
current Photoshop document.
Clear Stored Data deletes any data SiteGrinder has stored within the Photoshop document. Mainly used
for troubleshooting.
Save saves your current plug-in window settings (compression, forms, etc) into the current Photoshop
document
Save and Close saves your current plug-in window settings and closes the window. Identical to the
"Save and Close" button.
The Edit Menu

Settings... opens the settings window. The settings window allows you to specify a number of different
build options. These will be used for all of the pages you build, so if you want to customize them you
will need to change these settings and build for the page(s) with settings different from your previously
built pages.

88
Menu Delay determines how many milliseconds a menu or hovershow layer should remain visible after
the mouse moves away from it. (Entering 1000 = 1 second)
External CSS File Threshold is an experts-only feature that determines when SiteGrinder creates an
external CSS file instead of keeping the CSS internal to the HTML document for a page. If SiteGrinder
creates the number of CSS entries listed here or more then they will be written to an external CSS file.
Entering 0 causes all CSS to be kept in an external file.
The rest of the settings are identical to those in the Content Manager's New Page Settings window.
The meta "author" tag is a free-form tag (usually the name of the author of the page content when
appropriate, and sometimes an email address or URL), the inclusion of which will be appreciated by web
crawlers looking to add to their spam email address lists. This is a very optional tag.
The meta "keywords" tag used to be a great way for site owners to let search engines know what a page
or site was relevant to. It contains words or short phrases separated by commas. Modern search engines
are more concerned about the actual text content of your page rather than what you are trying to get them
to notice through the keywords you include. Many experts still recommend including relevant terms in
your page meta keywords anyway.
The meta "description" tag is a free-form tag that is not as useful for SEO as it once was, but you
should take advantage of it anyway. Sometimes the meta description tag will appear along with your
URL in search engines and can help people figure out whether they should go to your site before they
click. The meta description tag should be fewer than 200 characters long. Imagine you are going to
make a Twitter "Tweet" about the new page you are going to create.
The meta "language" tag tells search engines what language(s) are present on your site. This is mainly
important for non-English or multi-lingual pages. There are codes used for different languages. You can
find them listed here for the most common languages:
http://www.submitcorner.com/Guide/Meta/language.shtml

89
The meta "copyright" tag is a free-form tag you can use enter a date and/or a company or individual
name. This is not a very useful field and confers no additional legal protection, but we've included
support for it for completeness.
HEAD XHTML is an experts-only feature for adding anything additional you need to to the <head>
section of the page's HTML file. Usually this is javascript code, for example Google Analytics code, or
additional CSS. Use the "click to edit" button to open a window you can paste text into. It is up to you to
ensure the text is XHTML compliant.
BODY EPILOGUE XHTML is an experts-only feature for adding anything additional you need to to
the end of the page's HTML file before the final </body> tag. Usually this is javascript, for example
Google Analytics code, or additional CSS. Use the "click to edit" button to open a window you can paste
text into. It is up to you to ensure the text is XHTML compliant.
Activate... opens the activation window. The same as clicking the Activate button.
The Designs Menu

This menu displays a list of all the Photoshop documents you've built any page designs from.
Selecting one of them will open those designs immediately in the Design Manager in your default
browser.
You can also select "Delete All Designs" to delete every page design you've built.
The Sites Menu

This menu displays a list of all the sites you've created. Selecting one will open the pages in the Content
Manager in your default browser.
You can also choose "New Site..." from this menu, which presents the "New Site" window.
For details about creating and managing sites see the Sites Reference.

90
The Help Menu

The Help menu lets you open the About window for details about this version of SiteGrinder. It also has
links to documentation resources.

91
The Design Manager
Contents
Contents
Introduction
The Design Manager Window Area
The Design Manager Menu Bar
The File Menu
The Designs Menu
The Sites Menu
The Help Menu
Design Manager Panels
The Page Panel
Text Button and Menu Styles Panel
Menu Tracks Current Page Option
-text link-
The Text Button and Menu Style Dialog
Button States
Button Styles
The "Menu" Options
Text Menu Styling Example
Text Button Style Option Notes
The Animations Panel
The Border and Background Styles Panel
The Gallery Appearance Panel
The Forms Appearance Panel
The Form Styles Dialog
Troubleshooting
Introduction
The SiteGrinder 3 Design Manager ("DM" for short) is the set of controls that allows you to manipulate
the look of many aspects of your page designs inside a browser window so you can have an immediate
preview of your choices.
The elements you can manipulate here include:
Text menu and Text button appearance using the "Text Button Styles" panel
Button and menu animation settings using the "Animations" panel
Borders and background colors for appropriate elements using the "Decorations" panel
Gallery component types, appearance, and functionality using the "Gallery" panel
Form appearance settings, such as colors and layout using the "Forms" panel
The Design Manager is very much like a normal web page, though it requires that the SiteGrinder 3
Engine application to be running in order to display. You can create bookmarks of pages you are editing
and you can copy and paste the URL into other browser windows or other browsers.

92
The Design Manager Window Area
The Design Manager appears as a menu bar and a set of "accordion" panels along the left side of your
browser window.
You can make the DM area wider or narrower by clicking on the right edge of the DM and dragging left
or right.
Sometimes the DM will widen on its own if it needs to in order to fully display a settings window.
The Design Manager Menu Bar

The design manager menu bar consists of the following menus:
The File Menu

The file menu contains the following commands:
Open in New Window opens the page design you are currently viewing in its own window without the
Design Manager controls.
Open Build Times opens a report with details about the duration of your builds
Delete Design deletes all the files associated with the currently built design. Mainly used for
troubleshooting.
Delete All Built Designs of PSD will delete all the page designs of all pages from the PSD that created
the design you are viewing.
Close Design Manager will close the current browser window displaying the Design Manager controls.
The Designs Menu

Delete All Designs will delete every design you've ever created. This will not delete any deployed pages
in sites.
The Designs menu also lists every PSD you've built designs from. Selecting one will open it in the
Design Manager.
The Sites Menu

The Sites menu presents a list of all the sites you've ever built to. Selecting one will open it in the
Content Manager.
The Help Menu

About provides version information about SiteGrinder.
Design Manager Panels
All of the panels in the Design Manager can be opened or shut using the triangle control to the left of the
panel name.
Additionally panels can be repositioned vertically as needed by dragging the title area of the panel
containing the panel's name.

93
This is what the Design Manager looks like in a browser:
The Page Panel

The Page panel displays all the currently building and already built designs from the current Photoshop
file.
Build indicators will spin next to the names of pages that are not ready to open:
Clicking in this list to select a page whose build has completed is almost always the first thing you do in
the Design Manager.
The page you select (if its build is complete) will be immediately drawn in the main content area of the
browser window to the right of the Design Manager controls.
Text Button and Menu Styles Panel

The Text Button and Menu Styles panel allows you to set the way text buttons change in appearance
based on the mouse. (Button linking is not set here. Links are set in the PSD or in the Content Manager.)

94
On the left are all the text buttons that appear on the page in question. Also listed is the "text link"
indicator, which allows you to control the appearance of all links on words or phrases within larger text
blocks.
On the right is the current style that is assigned to that button. You can click to select any button and
then click Edit to edit the style that is assigned to the button whose name you clicked on. Changing a
style will affect all buttons that use that same style.
There are five built-in text button styles. They are
text_link
text_button
vertical_menu
horizontal_menu
layergroup_button
SiteGrinder automatically assigns them to any text button or menu item as it sees fit. But you can change
them, redefine them, or add your own. See the Mouse Interaction and Animation reference for details.
Menu Tracks Current Page Option

The Menu Tracks Current Page menu allows you to determine for all text menus whether or not menu
items remain in their -click or -hover states on the pages they link to.
-text link-
The -text link- entry is a special entry that doesn't represent any single layer. If there are any links in any
of the text layers on the page they will be styled with whatever style is applied to -text link-.
Important: there may not be any links in any of your text layers now. But in the future you or your
clients may edit them in the Content Manager and insert links. Those links will use the style defined here.
You can also use the menu next to the button entry to assign a different existing style, or define a new
one.

95
The Text Button and Menu Style Dialog

Selecting "New Style" from the Style column menus or selecting a layer from the Layers menu and
clicking "Edit" will open the Style dialog:

96
Button States
In the style dialog there are four tabs, one for each button state. You can adjust the settings for any and
all of the states. If you click "Apply" you will apply the changes immediately to your document and can
see them on the page to the right.
Normal - the "normal" state of the button. Adjusting this state changes the way the button appears on the
page when first viewed.
Hover - These settings govern the way the way the button appears on rollover. The default is to simply
underline when the mouse pointer hovers over the button or item.
Visited - These settings govern the way the button/menu item/text link appears if the link that the button
goes to has been visited by the user before. The default is to color the button a dark purple.
Active - These settings govern the way the text button appears when clicked.
Button Styles
Text buttons and menu items have a number of different styling options settable for the states listed
above:
Text styles like bold, italic, etc, displayed at the top of the window. Activating any of these text
settings will override the text settings from the Photoshop file.
Colors, which allow you to set separate background colors and text (foreground) colors.
Text shadows
Border settings which can apply to all four borders or to individual sides
The "Menu" Options

At the bottom of the window you'll see the "menu" options category. This allows you to specify certain
options that apply to how the menu as a whole works:
List style: allows you to add bullets or numbers to the left of the list items
Style position: determines if those bullets appear inside or outside the text box
Menu spacing: allows you to add extra space between items
Border and background color apply to: supplies a menu for selecting whether relevant style
settings apply to each individual item ("item") or to the full rectangle of the menu ("menu").
Text Menu Styling Example

Below is a text menu with the default normal style:

97
In Photoshop we've set a lot of the basic styling including font, size, color, left margin, alignment, and of
course the text rectangle itself.
Here is the same menu layer with the default rollover styling (underline) as it appears on our built page:
Here is the same menu (on the left) after some border, background, and foreground color settings have
been added in the Style Manager (on the right):

98
Notice above that the border settings apply to each menu item creating the visual separators between
them. This is because the "Border and background color apply to" setting is set to "item."
Below is the same menu but with the "menu" setting for borders and backgrounds set to "Border and
background color apply to" set to "menu":
Text Button Style Option Notes

This "list style" option only applies to -menu layers. It will not affect any -button layers.
The size of the paragraph type layer in Photoshop determines the size of any borders or
background colors that will be applied to the button.
Not all browsers support rounded borders. At the time of this writing, Safari 3+ and Firefox 3+
are the only browsers supporting them.

99
The Animations Panel

If you are using any layers with the -clickshow, -hovershow, -clickhide, or -hoverhide hints then you will
see the Animations panel.
Here you can set animation options controlling how they appear.
For details about animation settings see the Mouse Interaction and Animation Reference.
The Border and Background Styles Panel

Just as text buttons and menus can have borders and background colors applied directly to them, so can
certain other layers (mostly text and/or placeholder layers).
This dialog functions almost identically to the Text Button and Menu Styles panel.
The Gallery Appearance Panel

This is where you determine how gallery components behave and look. The components will display
sample images during this process. (You will assign your own images in the Content Manager.)
The Gallery Appearance panel lists every gallery component on the page being edited:

100
It also lists bigboxes if any of the components have "Open in bigbox" set for "What to do when clicked."
The "Layer" column displays the name of the layer that created each component and the hint used to
identify what kind of component it is. The "Type" column indicates the variation currently chosen for the
component, such as Flash vs. CSS.
To change the options for any component just click on its currently selected type in the Type column. An
options window will open.
For details about the different gallery components and setting gallery appearance options see the
Galleries Reference.
The Forms Appearance Panel

The forms panel allows you to set many options controlling how your forms look. It presents a list of all
forms on the currently selected page.
Click a form to open the form styles dialog.
The Form Styles Dialog

The controls at the top of the window affect the entire form.

101
The fieldset, legend, label, text input, focus, and suggestion buttons display appropriate controls for each
element at the bottom of the window.
For details about creating and styling form controls see the Forms Reference .
Troubleshooting
Every once in a while the Design Manager displays incorrectly in the browser. When this happens, just
click your browser's Reload or Refresh button.

102
The Content Manager
Contents
Contents
Introduction
Shared vs. Unique Content
Local vs. Remote Content Management
Local
Remote
Troubleshooting
The Content Manager Controls Area
The Content Manager Menu Bar
The File Menu
The Designs Menu
The Sites Menu
The Upload Menu
The Content Manager Panels
The Pages Panel
The Editable Content Panel
The External Media Panel
The Button Links Panel
Introduction
After you deploy some or all of your pages to any site with content management enabled in the "New
Site" dialog, the SiteGrinder 3 Content Manager ("CM" for short) is the set of controls that allows you to
manipulate the content of many aspects of your pages inside a browser window.
The Content Manager functions similarly to the Design Manager in the browser. It is very much like a
normal web page, though the SiteGrinder 3 Engine application needs to be running in order to display.
You can create bookmarks of pages you are editing and you can copy and paste the URL into other
browser windows or other browsers.This gives you an immediate preview of your edits.
Almost every site you create will have at least a few elements to be edited here. You will not only edit
elements prior to uploading your pages, you can also make ongoing changes to your pages on your local
machine and re-upload them. If you have the optional SiteGrinder Control add-on you will be able to use
many of the Content Manager's controls from any web-connected computer. (See "Local vs. Remote
Content Management" below.)
The things you can do here include:
Add or edit the text content of any text areas using the "editable content" panel
Set links for your buttons and menu items
Add/Delete/Reorder text menu items using the"editable content" panel
Set external content, such as videos or Adobe Lightroom galleries for your -xmedia hinted layers
using the "external media" panel
Set HTML page titles for your pages
Create new pages based on existing pages

103
Create folders in your site for organizing pages

Set source images for your SiteGrinder gallery components using the gallery editor opened from
the "Editable Content" panel
Add/Delete/Reorder your SiteGrinder gallery images using the gallery editor opened from the
"Editable Content" panel
Edit the metadata associated with your SiteGrinder gallery images using the gallery editor
opened from the "Editable Content" panel
Configure ecommerce settings using the "editable content" panel
Configure blogs - blog name, blog user and password, and captchas.
In addition to editing content in the Content Manager you can also do the following from the Content
Manager's menus:
Upload your site via ftp for the first time

Synchronize your site so the version on the server is updated with any changes you've made on
your local computer (also any remote changes will be retrieved so that both the local and remote
versions are in sync)
Configure Connection Settings - FTP login info, set CMS password
Save your pages out to edit them with non-SiteGrinder tools like Dreamweaver
Shared vs. Unique Content

IMPORTANT: Some page elements are created from layers that appear on two or more of your page
design layer comps. The same menu layer, for example, will often appear on most or all of your site's
pages.
Sometimes you will want changes that you make to such an element while editing one page to be
instantly reflected on all the other pages where that element appears. Imagine you have a CSS text site
menu, for example, and you add a new page to your site in the Content Manager. You will need to add a
new menu item to the site menu on every page so your site visitors can get to the new page you added.
For this reason, text menus that appear on more than one page are always shared. Adding an item while
editing one page will have the effect of adding the item on all of the pages the menu appears on.
Other elements that appear on multiple pages should be different on each page even though they are
represented by the same layer in Photoshop on each layer comp. These elements are considered unique.
External media layers are often unique. Imagine, for example, a video producer who creates seven pages
to show seven different videos. Each page can use the same xmedia layer as the others to save time and
trouble of duplicating one xmedia layer seven times. After the site is deployed, the same xmedia layer
can be assigned a different video file to play on each of the seven pages.
For more information on "unique" versus "shared" content see the Content Management Reference.

The Content Manager manages sites that reside on your local computer and are then uploaded after you
make changes. It also manages remote sites if you have the optional SiteGrinder Control add-on.
For details about managing sites see the Sites Reference.

104
Local
The SiteGrinder Content Management System can be used from SiteGrinder itself on your machine. No
internet connection is required. When run this way you'll notice the URL in the address bar begins with
http://127.0.01:1702/. This is known as operating "locally". After you make local changes you will need
to synchronize them with your site. (see The Upload Menu below.)
Here is an example of what this will look like in the browser address bar:
Note below that certain of the menu items, buttons and tabs have a gold coloring:
The gold coloring denotes that these functions are only available when running the SiteGrinder CMS
locally.
Remote
If you have purchased the optional SiteGrinder "Control" add-on, the SiteGrinder Content Management
System can also be used directly on your own site once your site is uploaded.
To access it, click on any edit-button you have placed on any page of your site. Or, if you prefer not to
add edit buttons to your pages you can navigate to here: "http://www.yoursite.com/sg_admin.html"

105
where "yoursite.com" is your domain. (Assuming your SiteGrinder site is at the top level of your
domain).
Note that there are slightly fewer functions when running the SiteGrinder CMS remotely.
Below is an example of what that looks like in your browser. Notice the url is of an actual live remote
website rather than one located on your machine. Also notice the shorter menu bar.
Troubleshooting
Like any web page, every once in a while the Content Manager controls may display incorrectly in the
browser due in part to elements being not yet available when the browser requests them.
When this happens, just click your browser's Reload or Refresh button.
The Content Manager Controls Area
The Content Manager appears as a menu bar and a set of "accordion" panels along the left side of your
browser window.
You can make the CM area wider or narrower by clicking on the right edge of the CM and dragging left
or right.
Sometimes the CM will widen on its own if it needs to in order to fully display a settings window.
The Content Manager Menu Bar
You'll notice that some of the Content Manager menus have a gold background. These menus are only
available when you are using them locally on your machine. They will not appear in the Remote CMS
provided by the SiteGrinder 3 "Control" add-on.
The File Menu

The File menu contains the following commands:
Open in New Window opens the page you are currently editing in its own browser window or tab
(depending on your browser preference setting) without the Content Manager controls.

106
New Page Settings... opens up a panel of settings that the Content Manager will use the next time you
create a new page in the Content Manager as a copy of an existing page. These include "META"
information like keywords, as well as snippets of XHTML like javascript commands that SiteGrinder
should include in either the HEAD or BODY of the newly created pages.
See the Pages Reference for details about the fields available.
New Page... opens up a dialog box that can create a new page in your site based on existing page. If you
have created subfolders in the Content Manager and you wish to create a new page within one of them,
select the subfolder before choosing this command. The dialog allows you to select which existing page
design to copy and whether or not to append a new menu item linking to the new page onto an existing
text menu. The new page will have its own unique copies of any unique content used by the original
-page. The page's name and location are not editable after you create it. A page can be deleted, but not
moved. See the Pages Reference for more details.
New Folder... opens up a dialog box allowing you to make a new folder in your site. If you have a folder
selected when you choose this command the new folder will be created inside the selected folder. The
name of the folder cannot contain special characters, so the name field will not allow you to type them.
Delete ... allows you to delete the currently selected page or folder. Deleting a folder will delete all of the

107
pages it contains.
Close Content Manager will close the current browser window or tab displaying the Content Manager.
The Designs Menu

This menu contains is a list of all of your designs. If you choose one the Content Manager will close and
the Design Manager will open with the design you selected ready to edit. If you are in the midst of
editing a page element's content and you choose a design before finishing your edit those changes will
not be saved. This menu is not available when you are editing your site remotely.
The Sites Menu

This menu contains is a list of all of your sites. If you choose one the current site will close and the
Content Manager will open with the site you selected ready to edit. If you are in the midst of editing a
page element's content and you choose a different site before finishing your edit those changes will not be
saved. This menu is not available when you are editing your site remotely.
The Upload Menu

This menu contains the commands you will use to upload your site, to synchronize your site with any
changes made online using SiteGrinder's Control Add-On, or to export your pages to use with another
HTML tool such as Dreamweaver. For details about uploading and managing sites see the Sites
Reference Guide.
Upload Changes (synchronize)... uploads your site if it has not yet been uploaded or synchronizes if you
have previously uploaded. Synchronizing means that changes you have made to your site locally will be
uploaded. In addition if changes have been made to the remote site using the SiteGrinder Control
add-on's remote CMS features they will be downloaded. If a change has been made to the same element
both locally and remotely then the most recent change is kept. Synchronizing is almost always what you
will choose when uploading.
Upload Everything (overwrite)... this uploads the local version of your site. If changes have been made
to the remote site using the SiteGrinder 3 Control add-on's remote CMS they will be lost. If you've never
uploaded the current site before then there is no difference between this command and the "Upload
Changes(synchronize)" command.
Open Site opens your site's homepage in a new browser window. This requires that you set the path to
your site properly in the Connection Settings dialog.
Connection Settings... opens a dialog box where you specify the remote information for your site, such
as ftp login and password. This information must be set up correctly in order for the Upload commands
to work.
Save Site As Static HTML... allows you to choose a folder into which SiteGrinder will save a version of
your site suitable for editing in other tools, such as DreamWeaver. That saved version of the site will no
longer function with SiteGrinder either for editing or uploading.
This menu is not available when you are editing your site remotely.
The Content Manager Panels
Like the Design Manager, the Content Manager presents its user interface as a column of "accordion"
style panels for controlling various aspects of your site content.

108
While almost every kind of page content element can be edited, no new elements can be added at this
stage. Every element represents an individual layer or collection of layers working together from the
original Photoshop document.
The Pages Panel

The top of the Content Manager presents the Pages panel, a hierarchical list of all of the pages you've so
far deployed to the site you are editing, and any sub-folders you have added by using the CM's "New
Folder" command. Clicking on a page allows you to edit the content of that page.
Clicking the checkbox in the "index" column next to a page sets that page to be the "homepage" of the
directory the page is located in. This means that is the page that will be displayed if your site visitor
types the path to your site or a subfolder of your site into their browser but doesn't specify a particular
HTML page.
This panel serves three primary functions:
Selecting the page you want to edit

Selecting a location in your site prior to choosing "New Page" or "New Folder" from the File
menu
Determining the "homepage" (index) for each folder level
For details about page management see the Pages Reference .
The Editable Content Panel

This panel displays a list of the page elements you can make changes to in the Content Manager.
These include:

109
Adding, deleting or reordering gallery images

Editing gallery image metadata
Editing the contents of text elements
Editing text menus by adding or deleting menu items and setting their links
Set the page title for the page currently being edited
Replace page content images (but not background decoration images)
To edit one of these elements, select it from the list and click the "Edit" button at the bottom of the
Editable Content panel. Each kind of element has its own unique editor.
To help you identify the item you want to edit, page elements will highlight in the content area of the
browser window as you hover over their entries in the list.
For details about editing particular kinds of content see the Content Editors Reference.
The External Media Panel

The External Media panel lists all of the layers on the currently selected page that employ the -xmedia
hint. These layers serve as placeholders for the many kinds of media and other content external to your
Photoshop file that you can include on a SiteGrinder page.
These include:
Video
Flash animations
Galleries created with tools other than SiteGrinder, such as Adobe Lightroom or Slideshow Pro
Google Docs word processor and presentation documents
and many others...

110
To edit assign an xmedia layer its external media file (or files) you click the associated blue entry in the
Media column of the External Media panel. A window will open allowing you to choose the type of
media and then tell SiteGrinder where to find the media file(s).
Some of these will exist as individual files or groups of files on your local machine. For these you will
manually copy the files and/or directories to your local site folder before editing the xmedia layer.
Others are already uploaded to a server somewhere, either your own or someone else's, such as
YouTube. For those you will simply provide a URL to the media.
For details about external media see the External Media Reference.
The Button Links Panel

Except for CSS text menus, which are edited using the "Editable Content" panel, all of your other buttons
and links will appear in the "Button Links" panel.
Many of your buttons will already be linked to pages with the same name because of SiteGrinder's
auto-linking feature. To add or change links click in the "link" column next to the button whose link you
want to change.
A window will appear allowing you to set the type of link and the link itself:

111
For details about linking SiteGrinder see the Hyperlinks Reference.
Content Editors
Contents
Contents
Introduction
The Page Title Editor
The Text Editor
Editing SiteGrinder Links in the Text Editor
The Menu Editor
The Links Editor
Page Links
File Links
URL Links
Email Links
None Links
Literal Links
Javascript Literal Link Example
The Data Feed Editor
The Gallery Editor
The Xmedia Editor
Introduction
The SiteGrinder Content Manager gives you the ability to edit various kinds of page content for deployed
pages.
The general workflow is:
1. Deploy a page or open the Content Manager and select a previously deployed page
2. Select an element to edit from the Content Manager's panels
3. Use the associated editor control to edit the contents of the element
This section describes the various editors available for use with the Content Manager.

112
The Page Title Editor

A page's "title" is the text that will appear in the browser window's title bar when someone is visiting the
page. It's also used as the name of the bookmark if your visitor bookmarks your page. Most important of
all, search engines like Google give a lot of weight to the text in a page's title so it's important to make
your title representative of your page's content.
To edit the page title you select the "Page Title" item in the Editable Content panel of the Content
Manager:
After you select the page title and click the Edit button the following simple control will appear allowing
you to enter whatever text you choose as the Page Title:
Each page in your site can have a unique title.
The Text Editor

All text areas are editable in the Content Manager. (Text areas are created from Photoshop type layers
employing the -text hint or layers with their anti-alias set to "none".)
The text editor is an opensource control called "TinyMCE" and is commonly used as an in-browser editor
by such systems as Wordpress.
Depending on how much power you want to give yourself or your clients to edit site content you can use
the text editor in "simple" or "advanced" mode. You determine this in the "New Site" dialog when you
create your site.
When you select a text area and click the Edit button, you'll open an editor that will let you edit the item.
Here is a what the advanced editor looks like:

113
The advanced editor has quite a few options. You can include images, paste in Word documents, adjust
formatting, and even edit the HTML version of your text directly.
Complete documentation for using TinyMCE is found online.
Editing SiteGrinder Links in the Text Editor

The text editor provides its own link editor for text links.
To open it, select some text you want to create a link for or click inside text that already has a linkthen
click on the Link button in the toolbar that looks like a chain link:
The link editor that will open looks like this:

114
The "Link list" menu shown above contains a list of all the pages you built with SiteGrinder so you can
select them without having to know their URLs.
If you want to use an arbitrary URL type it into the "Link URL" field.
The Menu Editor

CSS text menus have their own special editor:

115
The menu editor lets you perform the following functions:
Rename menu items by double clicking and editing the name

Reorder them by dragging and dropping them to a new position in the menu
Delete them by clicking on an item and then clicking the "Delete" button
Create new menu items
Add or edit what the items link to by clicking on an item and clicking the "Set Link..." button
The Links Editor

When you choose to edit links for buttons or menu items you will use SiteGrinder's flexible link editor.
To edit a link:
1. Open the link editor from either the Menu Editor or the Button Links panel of the Content
Manager
2. Select the type of link you want to use from the radio buttons on the left
3. Edit the link using the controls that appear on the right
The link editing controls are a little different depending on the type of link you want to edit.
Many feature the "Open in new window" checkbox which will cause a link to open in a new browser tab

116
or window rather than the changing the current browser tab/window to the new location. (The site
visitor's browser preferences determine whether the page appears in a new window or a new tab.)
For details about all the ways to hyperlink things using SiteGrinder see the Hyperlinking Reference.
Page Links
The Page link editor is for linking to pages you have created with SiteGrinder. Simply select one of your
pages from the menu. This saves you from making any mistakes typing in a complex URL.
File Links
The File links type is for linking to individual files, such as PDF files, for display in the browser or
download. (The site visitor's browser usually determines whether it downloads or displays the file in a
browser window.)
When your visitor clicks on a file link the result depends on the type of file and the browser. For
example when linking to a PDF file some browsers will display the file within a browser window. Other
browsers will prompt the site visitor to download the file to view locally in an application like Acrobat
Viewer.
When editing your page using the local CMS there are two ways to indicate the file you want to link to:
Click the "Upload File" button shown above to locate a file somewhere on your local machine.
After you select the file SiteGrinder will copy it to the "sg_userfiles" directory found in the same
directory your page is in. The next time you upload or synchronize the file will be placed in the

117
corresponding directory on your server

Click the "Site File..." button to locate a file that you have already placed in your local site
directory. This option is not available when using the Remote Content Manager.
If you want to link to an individual file that is already on a server somewhere use the URL Link type
described next.
URL Links
The URL link type is for linking to web pages you didn't create with SiteGrinder or other files that
already exist somewhere on the web. Simply type in the URL into the text editing area.
SiteGrinder does some cleaning of URLs you enter here. If you skip the "http://" don't worry about it,
SiteGrinder will add it for you.
Email Links
The email link type will create a link that starts a new email message in your site visitor's email client.
The email address and subject for the new message will be automatically set to the email address and
subject you specify in this window.
None Links
The "none" setting tells SiteGrinder to create an empty link. This link uses the "#" character in the
resulting HTML which essentially links to the page you are already on. This is provided so that you can
set up a link and add the specific URL later in another package like Dreamweaver.

118
Literal Links
The "literal" link is an advanced feature used for anything not explicitly provided for with the other link
types. SiteGrinder will set the exact text that you type into the field as the link's href allowing you to
enter complex links containing Javascript, PHP, etc.
Unlike the URL link type, SiteGrinder does no proofing or cleaning of the text you type into the text
field.
Javascript Literal Link Example

A common task is to use Javascript to open a new window to display a link. SiteGrinder's "Open in new
window" option in the links control works most of the time.
Sometimes you may want your window to open at a particular size and position. For that you'll need to
add some Javascript to the link using the Literal link type.
Essentially SiteGrinder's Literal type makes a link like this:
<a href="YOUR_PASTED_INFO_HERE" title="THE_NAME_OF_YOUR_BUTTON"

>YOUR_BUTTON_TEXT</a>
So in this case we are pasting in a fragment of HTML to go into the YOUR_PASTED_INFO_HERE

part.
You have to "trick" the Literal button link type a bit for this.
1. Make your button or menu item in Photoshop, build, and deploy

2. Open the link editor for the button or menu item in the Content Manager
3. Choose the Literal link type
4. Paste in the code below:
#" onClick="window.open('your_url_here.html',
'windowname','width=350,height=550,toolbar=no,scrollbars=no')
IMPORTANT: Notice the missing start end ending quotation marks in the above code. They can't be
included because SiteGrinder will put those in as it would if this were just a simple URL going into the
href.
The toolbar and scrollbar arguments are optional.

119
The Data Feed Editor

The panelsheets feature of SiteGrinder 3's gallery system allows the display of data and images from
many kinds of internet "feeds". An example is the RSS news feed from CNN or Yahoo News.
If your page includes a panelsheet you will specify the data feed by selecting the panelsheet datafeed
entry from the Editable Content panel:
This will open the following simple editor window into which you type your feed URL:
For details about using data feeds see the panelsheet sections of the gallery documentation.
The Gallery Editor

The Gallery Editor control is an extremely powerful image and metadata management system unto itself.
It looks like this:

120
It presents the following controls:
1. Add exhibits opens a panel that allows you to select image files to import into your gallery.
Clicking again will hide the panel.
2. Actions opens a menu that allows you to perform utility actions including select all, deselect all,
remove selected, and duplicate selected images to the end of the show.
3. Set Music opens an editor that allows you to add music files to be played by the show if the
gallery picturebox you selected supports music.
4. Show Editor opens a panel that allows you to copy or delete an exhibit, edit exhibit metadata,
assign an exhibit a custom hyperlink, or add and remove alternate views. Clicking again will hide
the editor panel.
5. The size slider allows you to adjust the thumbnail display size in the editor to see more exhibits.
6. The Dropstack opens a small panel that you can drag exhibits into. The purpose is to make
moving exhibits in large galleries. You can scroll to the new position and then drag the exhibits
in the dropstack into their new position.
7. The exhibit icon area displays thumbnails representing all of your exhibits. You can select and
drag and drop exhibits to reorder them.
8. The Animations checkbox lets you turn off animation effects to increase performance on slower
machines.
9. The Save and Exit and Cancel buttons close the editor and either saves or ignores the changes
you made since opening it.
For details on editing galleries see the Gallery Editor section of the Gallery Reference Guide.

121
The Xmedia Editor

The xmedia editor is what you use to assign media to page elements created using the -xmedia hint.
This is what the Flash FLV video import looks like:
The particular type of media you want to import is selected from the "Importer" menu at the top and the
rest of the interface changes to accommodate your selection.
There are many media types supported.
For details see the External Media Reference Guide.
The SiteGrinder Engine Application
Introduction
SiteGrinder 3 includes both the Photoshop

plugin and a separate application called the
"SiteGrinder 3 Engine". It provides a number
of support functions for the plugin and for the
Design and Content Managers.

122
Launching The SiteGrinder 3 Engine
The SiteGrinder 3 Engine application launches

automatically when you open the plugin
window from Photoshop's File->Automate
menu. You can also launch it yourself if you
need to by double clicking the SiteGrinder 3
Engine icon in the "SiteGrinder 3" folder that
you'll find in your "Applications" folder on a
Mac or in the "Program Files" directory on a
Windows machine. You will open and close
the SiteGrinder plug-in window fairly
frequently as you make changes in your
Photoshop document and rebuild. The
SiteGrinder 3 Engine, on the other hand, should
remain running until you are completely
finished working on your pages.
You won't directly interact with the engine

application very often. It acts as an assistant to
SiteGrinder to help it display and edit web
pages in a browser before you upload them.
When you launch the SiteGrinder 3 plug-in the
SiteGrinder 3 Engine application also launches
if it is not already running.
The SiteGrinder Engine can run by itself even

when Photoshop and the SiteGrinder plug-in
aren't running. This is to allow you to use
SiteGrinder 3's browser-based Design and
Content Managers without having to launch
Photoshop.
You can manually quit the engine but you

should never do this while the plug-in window
is open or you are using the Design or Content
managers.
The SiteGrinder 3 Engine Menus
The Designs Menu

This menu allows you to select any of your
previously deployed designs. Your selection
will open in the Design Manager in your default
browser.

123
The Sites Menu

The "Import Site" Command
Import Site allows you to use a site created on a different computer or a different user account with the
installed SiteGrinder Engine you are currently using. This allows you to open the imported site it in the
Content Manager.
This is only for SiteGrinder-created sites. You cannot import sites created using other tools with this
command.
For details about managing sites see the Sites Reference.
The Site List

Below the "Import Site" command is a list of sites you have previously deployed pages to. Selecting a
site will open it in the Content Manager in your default browser.
Using the Quick Launch Features
The SiteGrinder Engine presents a single small window which acts as a quick-launch tool for opening
your recent Photoshop files, built designs, and deployed sites.
There are also the "Designs" and "Sites" menus for quick-launching builds and deployed sites in your
browser.
Using The Engine By Itself
While the SiteGrinder 3 plug-in requires the Engine to be running, the Engine does not require the
plug-in to be running. In fact the Engine doesn't even require Photoshop to be running. If you want to
look at or edit your pages using the Design or Content managers just launch the Engine and open your
designs and builds either from the quick launch in the Engine window or from bookmarks you may have
created for them.
Troubleshooting
If the SiteGrinder plugin can't find the Engine it will not be able to properly display and will show you an
error message.
Here are some reasons why this might occur:
You denied permission to the operating system for the Engine to launch the first time you opened
SiteGrinder. If this happened you will need to reinstall SiteGrinder 3.
You quit the Engine manually while the plug-in window was open.
You have some kind of firewall software that blocks applications on your computer from
communicating with each other.

124
Contents
Contents
Introduction
Tasks Organized Into Workflow Phases
What You Create In Photoshop With Layers & Hints
What You Control from the SiteGrinder 3 Plug-in Window Before Building
What You Control In the Design Manager After Building
What You Control From the SiteGrinder 3 Plug-in Window Before Deploying
What You Control In the Local Content Manager After Deploying
The Remote Content Manager
Re-Deploying
Types of Re-Deployments
Replace Content Manager Edits
Keep Any Content Manager Edits
Risks of Re-Deployment
Troubleshooting Re-Deployment
Introduction
This document assumes you have read the Workflow Essentials Guides or viewed the corresponding
videos.
The SiteGrinder workflow consists of a series of tools and techniques you use to generate your website.
Starting from layers in Photoshop, it includes the SiteGrinder plugin window and the browser based
Design and Content Managers.
This guide is a compendium of topics relating to particular aspects of the workflow.
Different parts of your site are created and edited in different parts of the SiteGrinder workflow. This is a
list of every SiteGrinder element type organized by which phase they are created or modified in.
For most of your page contents, layout, and background options you simply create and position type and
image layers in Photoshop and add hints when required.
These elements include:
Images for background and content

Image buttons with optional hover and click versions
CSS styled text content using the -text and optional -h1,-h2 (etc) hints on Photoshop type layers
External media placeholders using the -xmedia hint

125
Gallery placeholder layers

Styled CSS text menus and submenus (but not their interactive effects like rollover styles)
Embedded code to add things like YouTube videos, Twitter Feeds, and Paypal buttons using the
-embed hint on type layers
Form fields and controls using type layers with the -form hint
CMS-editable layers using hints like -content and -noedit
Ecommerce controls using the -$ hint
Page and column size and layout using image layer placement in concert with the -background,
-column and browser-background hints
Text wrapping around images using the -wrap hint on image layers and positioning them over
type layers
Animation start and end locations for button-triggered effects using the -movefrom hint
Favicon for your pages using the -fav hint
Footer content using a footer-background or footer-background layer. All layers above these are
automatically placed into the footer. Optionally, name a layer group with the -footer hint.
Whenever you are ready to see your work make the leap from PSD to browser, whether you have finished
a design or are just doing a quick test of a single feature, you will open SiteGrinder from Photoshop's
In this window you will can set certain options before you build, including:
Check for problems in the Report panel

Image compression settings using the "Compression" Tab
HTML additions (like meta keywords, and any extra HTML to add to, for example, the
document head section) using the SiteGrinder menu's "Edit->Settings" command
Form settings, like what email address to send form-generated emails to, in the "Forms" panel
Popup menu timing using the SiteGrinder "Edit->Settings" menu command
Which pages you want to build using the checkboxes in the "Build & Deploy" panel
When SiteGrinder starts building it will open the "Design Manager" in your web browser. As the pages
finish building you can change design options right in the browser using the controls to the left of the
content. The settings changed here affect what your site looks like and behaves in terms of visual design,
not what the content is.
These include:

126
When you have finished changing the design settings in the design manager it is time to deploy. This is
also accomplished in the SiteGrinder plug-in window's "Build and Deploy" panel.
Before you deploy you will need to select a "site" or create a new one. A site is just a folder on your
hard disk along with a few settings, such as the name of the site and what kind of content management
and ecommerce you want to use with the site.
When you deploy a page and then edit it in the Content Manager you may then decide to make changes to
the original PSD file and deploy again. This is called "redeploying." When you redeploy you can use the
"Deploy What" menu to select whether or not to replace changes you've made in the Content Manager.
See the Pages and Workflow references for details.
The things you control when making a new site include:
Which ecommerce module your ecommerce-enabled buttons and forms will use
What kind of Content Management (if any) you want to use
Which server language (like PHP) the remote Content Management System should use
When SiteGrinder finishes deploying it will open the "Content Manager" in your web browser. Select a
page from the page list in the upper right of the browser window to start adding or modifying its contents.
The things you can do in the Content Manager include:
Add or edit text content to editable text areas using the "editable content" panel
Set external content, such as videos or Adobe Lightroom galleries for your -xmedia hinted layers
using the external media panel
Set source images for your SiteGrinder gallery components using the gallery editor opened from
the "Editable Content" panel
Edit the metadata associated with your SiteGrinder gallery images using the gallery editor
opened from the "Editable Content" panel
Configure blogs - blog name, blog user and password, captchas.
Synchronize your site so the version on the server is updated with any changes you've made on
your local computer (and vice versa - any remote changes will be retrieved so that both the local
and remote versions are in sync)
Configure Connection Settings - FTP login info, set CMS password

127
The Remote Content Manager
Some menu items in the Local CMS are gold colored. These controls are only available in the Local
CMS. In the Remote CMS they will not be present.
These include pretty much everything you can do in the Local CMS, except Upload, Synchronize, and
Configuring Connection Settings.
Re-Deploying
Re-deploying means deploying a page to a site that you have previously deployed the same page to.
You can do this as many times as you like, but you need to understand the amazing opportunities and the
risks presented by this feature.
Be sure to read this entire section before re-deploying to any sites you have edited in the Content
Manager!
Types of Re-Deployments
The "Deploy What" menu in the "Build and Deploy" tab of the SiteGrinder plug-in window:

Most of the time you will do this. This will completely replace what was deployed before with the
current version of the page. This means any content edits you made in the Content Manager will be lost.
The only content that will exist after a full re-deploy will be what comes directly from of the layers in
Photoshop.
For example let's say you have a layer called "Contact-text" containing the text "Call me at
555-555-5555" in your document. If you build and deploy the page that layer is on you can edit it in the
Content Manager. Let's say you correct the number using the Content Manager's text editor so the text
now reads "Call me at 555-777-7777". If you now redeploy the page with the "Replace Content Manager
Edits" option the text will revert to the contents of the type layer from the PSD, "Call me at
555-555-5555".

Deploying graphics only is one of the most powerful features in SiteGrinder. If you've set everything up
correctly you can potentially completely change the look of your pages without disturbing content you've
edited in the Content Manager by using the "Keep Any Content Manager Edits" option.
In the previous example the changed phone number would remain as it was when changed in the Content
Manager, "555-777-7777", even after redeployment.

128
Risks of Re-Deployment
Redeployment is always going to replace something, either design, content, or both. It can also delete
things and disconnect layers from their settings.
If you delete a layer on a page and then re-deploy the page to a site, that page element will be
gone.
SiteGrinder uses Photoshop's internal layer "ids" which remain the same even if you change a
layer's name, so changing a layer's name won't be a problem.
Troubleshooting Re-Deployment
Delete previous build before redeploying if old elements that should be gone are still appearing, if
elements are missing, or if elements are in the wrong places on your pages.
You can delete your previous builds using the delete commands in the SiteGrinder plug-in window's File
menu.

129
Pages
Contents
Contents
Introduction
What is a Web Page?
Creating Pages from Photoshop or Elements Documents
Creating Pages from Photoshop Layer Comps
What are Layer Comps?
The -page Hint
The Layer Comps Workflow
Advantages of Layer Comps
Layer Visibility Controls Page Contents
The -ignore Hint
Page Name vs. Page File Name vs. Page Title
Page Name
Page File Name
Page Title
Multiple Pages vs. Switching Content Within a Page
Building Pages
Troubleshooting Built Pages
Deploying Pages
Re-Deploying Pages To The Same Site
Deploying the Same Pages To Different Sites
Managing Pages In The Content Manager
Creating New Pages in the Content Manager
Determining New Page Settings
Creating the New Page
Creating New Directories in the Content Manager
New Page Shared vs. Unique Content
Re-Deploying Pages That Have Been Used To Create New Pages
Page Management Best Practices
Use Layer Comps as Template Designs
Simplify Links by Using Index Pages
What is an Index Page?
Using Index Pages With SiteGrinder
Introduction
This section is about how to determine what appears on each of your separate web pages, how to manage
pages after they are deployed, and how to control page settings like meta keywords.

130
It is not about page layout techniques, which are covered in the Layout Reference.
What is a Web Page?
A web page is a text file containing HTML code that tells a web browser how to draw a web page. As a
SiteGrinder user you don't need to know about the HTML, but you do need to know a bit about HTML
files.
Every page on a website comes from, at the very least, a single text file containing HTML code. Simple
websites can consist of nothing more than an HTML file for each page. But modern sites have an HTML
file for each page plus many other files that the HTML file tells the web browser to load in addition, such
as image files or files containing Javascript programming or Flash movies.
HTML files contain HTML (obviously) but they don't always end in the ".html" extenstion. Sometimes
HTML files end with ".php", ".htm", ".asp", or even other endings.
Creating Pages from Photoshop or Elements Documents
The most basic way to create a web page using SiteGrinder is to just create and position layers in a
Photoshop or Photoshop Elements document, open SiteGrinder, and build.
If you use this method then every different page you build will have to be contained in its own unique
(and uniquely named) Photoshop or Elements document.
The name of the page will be based on the name of the document.
Use this one-document-per-page method in the following situations:
You just want to build a quick test of some feature you haven't used before from a scratch PSD or
a very early version of your site. We highly recommend this!
You use Photoshop Elements or Photoshop 7. These products don't have the "layer comps"
feature described in the next section, so using documents as pages is the only choice.
There are some disadvantages to using the one-document-per-page approach. Pages created this way will
not work with the shared vs. unique CMS features, nor will they share graphics and menus, with other
pages.
Creating Pages from Photoshop Layer Comps
For non-trivial designs it is always best to use layer comps for your pages.
What are Layer Comps?
Starting with Photoshop CS Adobe introduced a feature with its own palette (like the layers palette)
called "layer comps". Most Photoshop users have never used the feature, but it turns out to be
tremendously useful for designing multiple web pages within a single Photoshop document.
Essentially layer comps allow you to create a bookmark to preserve what a document looks like at
various points in time as you work on it. You can give layer comps custom names, and later you can
return the document to the state preserved in the layer comp.
What we mean by "preserve what a document looks like" is actually pretty simple. By default, layer
comps just remember which layers were hidden and which were visible at the moment you created the

131
layer comp. Returning the document to that state is called "applying" the layer comp, and is done using
the layer comps palette. When you apply a layer comp Photoshop just hides the layers that were hidden
when the layer comp was originally created and shows the layers that were visible when the layer comp
was originally created.
Layer comps save with your Photoshop document, so they'll be there after you close your document and
open it again later.
Layer comps can be set to track not only the visibility of layers but also their position and/or layer styles.
It's most common and simplest to track only the visibility. If you do track other combinations you will
need to set all of your layer comps to track the same combination. In other words, if you want one layer
comp to track position and visibility then you have to set them all to track position and visibility. This is
to avoid a Photoshop bug that affects restoring layer comps that track different combinations.
For full details about how to use the Photoshop layer comps feature see our layer comps and layer groups
video on the Media Lab SiteGrinder video training page or consult the Photoshop user guide before
continuing with this chapter.
The -page Hint
You can name layer comps whatever you like to help keep track of them. To tell SiteGrinder that a layer
comp is meant to be a page on your site you add the "-page" hint to the end of its name. The -page hint is
only used on layer comps, never on layers or layer groups.
No layer comp page can have the same name as another layer comp page. SiteGrinder will warn you if
you have two layer comps named "Weddings-page" for example.
The Layer Comps Workflow
The page design workflow using layer comps looks like this:
1. Create and position the layers that you want to have on any particular page of your site.
2. Make a new layer comp when you are ready to start on another page, or want to do a quick build
to see how things look so far in a browser.
3. Name the layer comp what you want (usually matching to a button or menu name) and add the
-page hint to the comp.
4. Hide the layers unique to the page you were just working on and leave visible the layers used on
both the previous page and the new page you are starting.
5. Go to step 2.
Layer comps aren't fixed and unchangeable. At any time you can update a layer comp you made earlier
to reflect the current state of the document by using the layer palette's "Update layer comp" command if
you want to add or delete layers from an existing layer comp.
Advantages of Layer Comps
The main reason making multiple page designs in a single document using layer comps is such a great
technique is that most or all the pages of a particular website share a lot of elements. The same site
menus, banner graphics, background tiles, logos and other elements often appear on every single page of
a site. With layer comps you can have any layer appear on as many of your pages as you want without
duplicating the layer. That way if you make a change to the layer, the change is reflected in all of the
layer comps instantly.

132
Layer Visibility Controls Page Contents
Whether you are using layer comps or whole documents to design your pages, a layer's visibility in the
layer comp (or in a document with no comps) generally determines whether or not it appears on the built
page.
There are a few exceptions that all reflect "the right thing to do" to make your life easier.
Some layers only store information other layers will use. Layers that use the -link and -links
hints, for example, tell text or a button what url to link to. These layers never appear on the final
page even if they are visible in the Photoshop document or layer comp.
Some interactive layers have visibility that is controlled by clicks or hovers on matching -button
layers. These include layers with hints like -hover, -hovershow, -click, and -clickshow.
SiteGrinder only cares about the visibility of the -button layer that is associated with these layers.
If the -button is visible in the layer comp (or document) the others will function properly on the
built page regardless of whether they are visible or not in the Photoshop document
The -ignore Hint
The -ignore hint allows you to keep "work" layers in the document that have no effect on the build
regardless of visibility.
If a layer has the -ignore hint or is contained in a layer group that has the -ignore hint SiteGrinder will
treat it as if it doesn't exist in the document.
Page Name vs. Page File Name vs. Page Title
Page Name
For layer comp pages, The "page name" is the name you give a page's layer comp. When you make a
new page in the Content Manager you will give the new page its own name. This name is used to refer
to that page in SiteGrinder's various windows, menus, and other controls for manipulating pages.
Page File Name

SiteGrinder generates an HTML file for every one of your pages. The names of those files will be based
on the page name, but will often not be exactly the same as the page name. The reason for this is that
there are a lot of rules about what characters can be used in file names on the web. Luckily SiteGrinder
knows those rules so you don't have to. Normally you don't need to worry about what the file names for
your pages are.
Files for "homepages" should be named "index.html" and SiteGrinder knows this, so you don't need to
name the layer comp for a homepage "Index-page". When you select a homepage in the Content
Manager SiteGrinder will name the file it uses for that page "index.html" automatically.
Page Title
The title of a page is text that describes in brief what a page is about.
Titles have several roles that you need to know about:
They are very important for Search Engine Optimization.

133
The page's title is displayed in the title bar of the browser window when you are viewing the page.
The page's title is the default text used by browsers when a site visitor create a browser bookmark
to a page.
As you can see from these roles you need to strike a balance with page titles so they are descriptive
without being too long.
Page titles exist inside special code in your HTML files.
When SiteGrinder creates a page it uses the layer comp name as the page title initially, but you are free to
add to this or change it using the Page Title Editor in the Content Manager after you deploy your pages.
(You just enter the text for the title using this. SiteGrinder handles the HTML.)
Multiple Pages vs. Switching Content Within a Page
SiteGrinder gives you easy ways to create multiple pages with different content on each, but it also gives
you easy ways to swap the visible content on a single page using hints like -clickshow.
Imagine, for example, that you want to allow your site visitors to navigate biographical info by clicking
in image buttons featuring photos of a company's team.
There are at least three good ways to accomplish this in SiteGrinder:
Use a gallery with metadata, and everything will be on one page

Add the -clickshow hint to the layers or layer groups containing the bio info to match to the
appropriate image buttons. This also keeps everything on one page.
Create a separate page for each person on the team and use the image buttons to navigate among
the pages
The choice you make will be based on a number of factors:
Which SiteGrinder features you are most comfortable with

How many team members there are and will they be changing a lot over time? If there are a lot
and they will be changing, use a Gallery so you can manage them easily in the Content Manager.
How much bio information is there for each team member? If there is a lot, and the length or
format varies a lot between them, then separate pages would be the best approach.she's
Building Pages
Once you have designed one or more pages and are ready to view them in the web browser using
SiteGrinder's Design Manager it is time to build them.
You don't have to wait until any of them are completed, rather you can and should build frequently
during all stages of the process to make sure what you've created so far is functioning the way you expect
it to in the browser.
You will see each of your layer comp pages listed in the Build and Deploy panel.
You don't need to build pages that haven't changed since the last time you built them.
For details on the Build & Deploy panel see the workflow documentation and the user interface
documentation.

134
Troubleshooting Built Pages
There are a few reasons pages might look incorrect after you build or rebuild them:
Your browser may mistakenly be using elements from a previous build. Usually clicking refresh
will fix this but if it doesn't you may need to clear your browser's cache and refresh.
SiteGrinder uses various techniques to make builds faster by reusing parts from previous builds.
Sometimes this system can get confused, just like when browsers use outdated images from their
caches. To force SiteGrinder to do a complete rebuild of your page there are a couple of
commands in the SiteGrinder plug-in window's File menu. If you want to reset a single page,
select it in the build and deploy panel and choose "Delete [pagename] Build" where [pagename] is
the name of the page you selected. If you want to clear out all the previous builds for all the
pages in the current Photoshop file then choose "Delete all designs of [filename]" where
[filename] is the name of the Photoshop file your pages are in.
Deploying Pages
Looking at pages in the Design Manager is a bit like trying on tuxedos in the store for an upcoming
wedding. Deploying pages to the Content Manager is more like buying the tuxedo, putting it on, and
going to the wedding.
This section is about organizing pages when deploying as well as after they are deployed. (For basic
information about deploying pages see the workflow documentation and the user interface
documentation.)
Re-Deploying Pages To The Same Site
Although deploying pages is one of the later steps in the SiteGrinder workflow the deployed pages aren't
set in stone. Not only can you edit the content of deployed pages in the Content Manager but you can
also go back a few steps to Photoshop or the Design Manager to make changes and then deploy the pages
to the same site.
SiteGrinder uses the name you give a page (its layer comp name) to identify it both in Photoshop and in
the site it builds to. If you deploy a page, then go back to the PSD and change its original layer comp
name, and then deploy it again to the same site it will be created as a new additional page rather than
replacing the original page.
Redeploying is when you deploy a page then return to Photoshop or the Design Manager to make
changes to its layer comp or design options and then deploy it again to the same site.
When you redeploy SiteGrinder gives you two options: "Keep Any Content Manager Edits," and
"Replace Content Manager Edits":
The uses of these are described in the next three sections.
Tip: Sometimes after redeploying your browser Design Manager view doesn't reflect the changes you
made. This is usually because the browser is pulling old graphics from its cache. Usually clicking the

135
browser refresh button is enough to fix the view. If refreshing fails to update the view you may need to
clear the browser cache and refresh again.

Redeploying both design and content totally replaces the already deployed page and any content you have
previously added to it in the Content Manager. It as if you were building the page for the first time.

Redeploying only your design is one of the most powerful features of SiteGrinder 3. It allows you, if you
are careful, to completely alter the way your site appears without affecting the content you have added
using the Content Manager.
Redeployment is meant to allow you to make changes, even dramatic changes, to the decoration layers of
your site, such as background tiles and other background graphics. You can also change the positions of
previously deployed layers, even the positions of content layers.
While the purpose of redeploying with the "Keep Any Content Manager Edits" is to change your site's
look without altering your existing content, there is the potential to delete content.
Incredibly, redeployment not only updates the look of the pages you redeploy, it also updates the look of
any pages you have made in the Content Manager based on any of the pages you are redeploying!
The following situations will result in removing existing content from your site when you deploy with the
"Keep Any Content Manager Edits" option:
You have deleted layers in Photoshop that were included in the previous deployment
You have changed the name of the layer comps of pages you have previously deployed
You have changed the fundamental layout by adding or deleting column and other layout layers
You should make a back up of your site folder if you have made significant changes or additions to it
after you last deployed your pages.
Deploying the Same Pages To Different Sites
You can deploy a page to as many sites as you like. If you only ever work on your own site then you will
mainly use this feature as a way of testing pages in scratch sites you create.
But if you are working on multiple sites this feature can be huge productivity advantage.
You can create a generic Photoshop file, deploy it to a site and add custom content in the Content
Manager. Then, when you get a new client for whom the same template is appropriate you can create a
new site, redeploy the template pages to it, and add totally different content in the Content Manager.
Managing Pages In The Content Manager
Often if you have a number of pages that have the same decorative appearance and structure but different
content it will be easier to create a single design layer comp to use as a template. You can then create
new copies of that layer comp in the Content Manager and add the unique content for each page.

136
Determining New Page Settings

Before you create a new page in the Content Manager you should select New Page Settings... from the
Content Manager's File Menu. This command opens up a panel of settings that the Content Manager will
use the next time you create a new page in the Content Manager as a copy of an existing page. These
include "META" information like keywords, as well as snippets of XHTML like Javascript commands
that SiteGrinder should include in either the HEAD or BODY of the newly created pages.
Find a description of what you can enter in the fields below. Many of the tags allow "free form" content,
meaning they allow arbitrary text entry - there's no specific format you have to use.
The meta "author" tag is a free form tag, usually the name of the author of the page content when
appropriate and sometimes an email address or URL, the inclusion of which will be appreciated by web
crawlers looking to add to their spam email address lists. This is a very optional tag.
The meta "keywords" tag used to be a great way for site owners to let search engines know what a page
or site was relevant to. It contains words or short phrases separated by commas. Modern search engines
are more concerned about the actual text content of your page rather than what you are trying to get them
to think through the keywords you include. Many experts still recommend including relevant terms in
your page meta keywords anyway.
The meta "description" tag is a free form tag that is not as useful for SEO as it once was, but you
should use take advantage of them anyway. Sometimes the meta description tag will appear along with
your URL in search engines and can help people figure out whether they should go to your site before
they click. The meta description tag should be fewer than 200 characters long. Imagine you are going to
make a Twitter "Tweet" about the new page you are going to create.
The meta "language" tag tells search engines what language(s) are present on your site. This is mainly
important for non-English or multi-lingual pages. There are codes used for different languages. You can
find them listed here for the most common languages:
http://www.submitcorner.com/Guide/Meta/language.shtml

137
The meta "copyright" tag is a free form tag you can use enter a date and/or a company or individual
name. This is not a very useful field and confers no additional legal protection, but we've included
support for it for completeness.
HEAD XHTML is an experts-only feature for adding anything additional you need to to the <head>
section of the page's HTML file. Usually this is Javascript code, for example for Google Analytics, or
additional CSS. Use the "click to edit" button to open a window you can paste text into. It is up to you to
ensure the text is XHTML compliant.
BODY EPILOGUE XHTML is an experts-only feature for adding anything additional you need to to
the end of the page's HTML file before the final </body> tag. Usually this is Javascript, for example
Google Analytics code, or additional CSS. Use the "click to edit" button to open a window you can paste
text into. It is up to you to ensure the text is XHTML compliant.
Creating the New Page

Selecting New Page... from the Content Manager File Menu to create a new page based on any of the
current site's previously deployed designs.
IMPORTANT: If you have created site subfolders in the content manager and you wish to create a new
page within one of them, select the subfolder before choosing this command.
The command opens up a dialog box to control your new page's settings:
The Name field is where you set the name SiteGrinder will use to list this page in its windows and
menus. It is not the page title, which you set in the "Editable Content" control. SiteGrinder will use a
variation of the name that has had nonstandard characters removed to generate the file name for HTML
file for this page.
The Design menu presents a list of your original deployed layer comp pages from the Photoshop
document. Choose one to duplicate to create this new page.
Checking the Append Onto Menu checkbox allows you to select a CSS Text menu from the menu to the
right of the checkbox. When you create the new page a new menu item linking to it will be appended to
the menu you select. If you want to change the order of the menu later use the Content Manager's menu
editor.
The dialog allows you to select which existing page design to copy and whether or not to append a new
menu item linking to the new page onto an existing text menu. The new page will have its own unique
copies of any unique content used by the original -page. The page's name and location are not editable
after you create it. A page can be deleted, but not moved.

138
Creating New Directories in the Content Manager
The New Folder... command in the Content Manager File Menu opens up a dialog box allowing you to
make a new folder in your site. If you have a folder selected when you choose this command the new
folder will be created inside the selected folder. The name of the folder cannot contain many
non-alphabetic characters, so the name field will not allow you to type them.
New Page Shared vs. Unique Content
When you create a new page from an existing design in the Content Manager the shared vs. unique layers
work as you would expect. Shared layers on the new pages will change if they are changed on any other
pages. Likewise unique layers will be independent of other pages, even independent of the page the new
page is a duplicate of.
Re-Deploying Pages That Have Been Used To Create New Pages
Let's say you've got three layer comp page designs in Photoshop that you deployed to your site. Later
you used the Content Manager's New Page command to create many new pages from the original three
layouts.
Then your client tells you they want to change their logo graphic and background color. Having read this
documentation closely you know that you can redeploy your pages with the "Keep Any Content Manager
Edits" option to preserve your page content while changing the look of the page. But what about all those
pages you created by copying the originals?
When you deploy content only you will change not only the original pages you are redeploying but also
all the new pages you made from them! You just got your weekend back.
Page Management Best Practices
Use Layer Comps as Template Designs
Take advantage of the fact that many web pages differ only in content, not design. If you set up flexible
pages using columns you can get away with very few layer comps to manage and instead create new
pages and customize content in the Content Manager.
Simplify Links by Using Index Pages
What is an Index Page?

An "index" page (or "home" page) is the page that will open in a browser that is given a url to a directory
on a web site, but not to a specific html file.
This url asks a browser for the file "index.html" in the directory "sitegrinder" at the site
"www.medialab.com":
http://www.medialab.com/sitegrinder/index.html
This url indicates only the directory "sitegrinder" at the site "www.medialab.com":
http://www.medialab.com/sitegrinder
Functionally the two urls result in exactly the same thing. This is because if a url doesn't include a file at

139
the end then web servers provide a file called "index.html".
These are called "home pages" because the page file named "index.html" at the top level of your site is
displayed automatically when someone types only your domain name in a browser.
Using Index Pages With SiteGrinder

If you use SiteGrinder's index page features you can make simpler urls for pages in your own site.
For every directory in your site, including the top level directory, you can specify an index page by
clicking the checkbox in the index column next to the page name.
This means if you have a "help" directory inside the main directory, and you set a page to be the index
page, you can give out the "mycompany.com/help" url instead of the "mycompany.com/help/index.html"
url, or, even worse, the "mycompany.com/help/help-with-problems-you-may-encounter.html".

140
Hyperlinks
Contents
Contents
Introduction
Linking From Things (buttons, text phrases, etc)
Linking Buttons & Menu Items
Linking Buttons & Menus Within Photoshop
Automatic Linking with Layer Comp Names
Button Name Matching
Text Menu Item Name Matching
Limitations of Name Matching
Manual Linking with the -link Hint
Linking Buttons and Menus In the Content Manager
Linking Buttons in the Content Manager
Linking Menu Items in the Content Manager
Linking Phrases Within Text
Automatic Linking of Urls & EMail Addresses
Linking Words and Phrases with the -links Hint
Identify Phrases in Photoshop, add Links in Content Manager
Identify Phrases and Links Together in Photoshop
Setting Styles for Text Links
Tips For Using The -links Hint
Linking Words and Phrases with in the Content Manager
Linking To Things (web pages, files, etc)
Linking to a Layer Comp Page
Auto-Linking by Layer Comp Name Matching
The Pages Menu in the SiteGrinder Link Editor
The Link List Menu in the Text Editor of the Content Manager
Linking to a Url
Linking to PDFs or Other Files
Linking To Anything Else
Other Elements With Unusual Links
Gallery Components
Form Submit Buttons
Introduction
This reference guide contains complete information about all the ways of setting and editing hyperlinks
using SiteGrinder.
This guide assumes you have already read the Hyperlinking Buttons and Text Essentials Guide or viewed
the associated video. If you have not done so you should start there and come back to this guide to look
up specific techniques not covered in detail there.

141
The first sections describe what you link from: how to set links for buttons, menu items, and all the other
linkable elements you can create with SiteGrinder.
The subsequent section describes what you link to: the different kinds of links for linking to different
kinds of things.
Linking From Things (buttons, text phrases, etc)
This section explains how to assign links to various elements like buttons and text phrases. For complete
information about what these elements can link to and how SiteGrinder helps you specify the links
themselves, see the next section.
Linking Buttons & Menu Items
Buttons and menus and menus primarily exist to link to things on the internet. (The main exception is
when they exist to show or hide elements on the current page. See the Mouse Interaction and Animation
guide for details.)
There are a few different places in the SiteGrinder workflow where you can specify links for Buttons and
Menus:
Within Photoshop using layer comp page name matching and/or the -link hint
In SiteGrinder's Content Manager after you deploy your pages
Linking Buttons & Menus Within Photoshop

Linking buttons and menu items within your Photoshop document using layers is slightly more awkward
than using the Content Manager's linking controls but has the advantage of storing the links within the
document itself. This means you can deploy pages to multiple sites with their link intact. Using the
Content Manager to set links does not affect the original Photoshop file, so if you deploy to different sites
then links created in the Content Manager will have to be re-entered for each site.
Automatic Linking with Layer Comp Names

If you name a button or a menu item after one of your layer comp page designs then SiteGrinder will link
them automatically. This makes things very quick, easy and avoids typos since you never have to
actually type in a url.
This efficient technique is entirely optional. If you don't want to match your layer comp names to button
and menu item names you are free to use the Content Manager controls to link your buttons and menu
items to your pages. These automatically created links are not set in stone either. You can always
change them later using the Content Manager's link editing tools.
Button Name Matching

Matching a button name to a layer comp name just means that the part of the button layer's (or layer
group's) name not including the hint(s) is the same as the part of a layer comp's name not including the
-page hint. A button named "Weddings-text-button" will link automatically to a layer comp named
"Weddings-page".
Text Menu Item Name Matching

Text menu items don't have hints. They exist inside type layers that use the -menu hint. If a menu item is
the same as the part of a layer comp's name not including the -page hint then it will link automatically.

142
Imagine a -menu layer with the following text contents: "Home | Contact | About Us". This will generate
a horizontal menu with items "Home", "Contact", and "About Us". These will automatically link to layer
comps named "Home-page", "Contact-page", and "About Us-page".
Limitations of Name Matching

There are two limitations to layer comp name matching:
You can only use page name matching with pages that have their own layer comps. There is no
way to auto-link by matching a button name to the name of a page created in the Content
Manager.
Because the layer comp name for a page will also become the default page title you may want to
use a longer layer comp name than is practical for a button
Manual Linking with the -link Hint

The"-link" hint on a type layer tells SiteGrinder to use
the contents of the type layer as the url or email
address hyperlink for the button with the matching
name.
IMPORTANT: A layer with the -link hint never

appears on the built page even if it's visible in the
layer comp.
Here is how it's done starting with a new empty

document in Photoshop
1. Create a new type layer for our button and

type something like "Cool tools" into its contents
2. Name that type layer "sample-button"
3. Create a another new type layer for the link and type "http://www.medialab.com" into the new
layer contents
4. Change that layer's name to "sample-link"
5. Open SiteGrinder from Photoshop's File->Automate menu
6. Click the "Build" button at the bottom of the SiteGrinder window.
The link hint also works with menu items. Imagine a -menu layer with the following text contents:
"Home | Contact | About Us". This will generate a horizontal menu with items "Home", "Contact", and
"About Us". You could create three -link layers named "Home-link", "Contact-link", and "About
Us-link" to provide links for these menu items.
The contents of a type layer with the -link hint can be a url or an ordinary email address. No "http://" or
"mailto:" are required. If you use an email address then clicking the menu button will create a new email
message in your site visitor's email client software with the address you supply as the "to" address.
The primary reason for using the -link hint rather than the Content Manager linking tools it to keep the
links intenral to your document. That way if you need to rebuild and redeploy your pages to different
sites you won't need to reset the links.

143
Linking Buttons and Menus In the Content Manager

Most often buttons and menu items that you don't link automatically by name matching you will link
manually using the tools provided in the Content Manager.
Linking Buttons in the Content Manager

The Content Manager's "Button Links" panel allows you to open the SiteGrinder link editor to edit the
link for any text or image button on your page. For details about the link editor, see the Content Editors
guide.
Linking Menu Items in the Content Manager

The Content Manager provides a menu editor that you can use to add, delete, reorder, and edit the links of
CSS text menu items. When you open that editor for a menu you can choose a menu item to edit, which
will open the SiteGrinder link editor.
You can learn more about the menu and link editors in the Content Editors guide.
Linking Phrases Within Text
SiteGrinder text buttons are Photoshop type layers whose entire contents have a single hyperlink. But
often you need to place one or more links within text that is otherwise unlinked.
SiteGrinder gives you three ways to do this.
1. Urls and email addresses contained anywhere in any type layer that is generating CSS text are
automatically made into clickable links
2. Using a type layer that will generate CSS text in conjunction with a matching type layer using the
"-links" hint and containing the links and information to allow SiteGrinder to match the links to
the text.
3. Using the Content Manager's Text Editor
As with the -link hint, the primary reason for using the -links hint rather than the Content Manager text
editor is to keep the links internal to your document. That way if you need to rebuild and redeploy your
pages to different sites you won't need to reset the links.
Each of these techniques is discussed in order in detail in the following sections.
Automatic Linking of Urls & EMail Addresses

You can add urls directly into a type layer and if it is recognized by SiteGrinder as "true text". To do that,
simply set the layers anti-alias text setting to "None". Or, alternately, add the "-text" hint to the layer.
Then SiteGrinder will make those urls clickable on the page, but won't apply the link to other text.
If a type layer contains the text "Check out great products here: www.medialab.com" then SiteGrinder
will make the included link "live" and clickable, as seen below:
Check out great products here: www.medialab.com
This technique does support SiteGrinder's smart link shorthand, so you can add web links without the
"http://" prefix and email links without the "mailto:" prefix.

144
Linking Words and Phrases with the -links Hint

Often you will want to apply links to words and phrases within text instead of showing the url in the text
the way we did in the previous example.
This sentence, containing this link to the SiteGrinder documentation wiki, is a perfect example.
You create this kind of link within the Photoshop document using two type layers. The first layer should
contains the text that will appear on the web page and be recognizable by SiteGrinder as "true text". (Its
anti aliasing should be "none" or it should have the "-text" hint.)
The second layer is a type layer with the -links hint; this tells SiteGrinder which words and phrases will
be clickable and, optionally, also tells SiteGrinder what the links should be. The difference is explained in
the next two sections.
IMPORTANT: A layer with the -links hint never appears on the built page even if it's visible in the layer
comp.
Identify Phrases in Photoshop, add Links in Content Manager

The simplest way to use the -links hint is to just tell SiteGrinder which words and phrases will have links
and set the links themselves in the Content Manager's text editor.
To do this you place each word or phrase that will get a link in the -links layer followed by an empty line
and then the next word or phrase that needs a link.
For example, If the -text layer contains "We have delicious cakes and wholesome muffins", and you'd
like to put links on "delicious cakes" and "wholesome muffins" once you get to the Content Manager then
the -links layer would contain the following (without the quotes):
delicious cakes
wholesome muffins
Notice the empty line between the two phrases.
Identify Phrases and Links Together in Photoshop

A more useful way to use the -links hint is to tell SiteGrinder both which words and phrases will have
links and also what the links are. That way you don't need to use the text editor in the Content Manager.
(Though the text editor is always available if you need to fix a problem after deploying!)
To do this you place each word or phrase that will get a link in the -links layer followed by the link,
followed by an empty line for each linked word or phrase.
For example, If the -text layer contains "We have delicious cakes and wholesome muffins", and you'd
like to put links on "delicious cakes" and "wholesome muffins" once you get to the Content Manager then
the -links layer would contain the following (without the quotes):
delicious cakes
www.caketownbuffet.com/cakes

145
wholesome muffins
www.caketownbuffet.com/muffins
Notice there is an empty line between the pair, but no empty line between the linked phrase and its link.
The links hint only supports web page urls. If you make other kinds of links, like email links, use the
Content Manager's text editor. This technique does support SiteGrinder's smart link shorthand, so you
can add web links without the "http://" prefix.
Setting Styles for Text Links

All text links use a single set of styles for normal, hover, click, and visited.
You can customize these in the Design Manager.
SiteGrinder displays a special element in the "Layer" column of the Design Manager's "text buttons and
menu styles" panel called "text link":
By editing the default "text_link" style that SiteGrinder creates and assigns to the " text link" element, or
by creating a style from scratch and assigning it to that element, you can customize your text link
appearance. See the Text Buttons section of the Mouse Interaction and Animation reference.
Tips For Using The -links Hint

Linked phrases cannot cross a line break created by pressing the return/enter key
If a linked word or phrase appears multiple times in the field, each occurrence will be linked, not
just the first one
Linking Words and Phrases with in the Content Manager

Whether or not you specify links in text using a -links layer, you can always edit links or add more links
using the Content Manager's Text Editor.
See the Content Editors reference for details.

146
Linking To Things (web pages, files, etc)
This section details the web resources you can link to and how SiteGrinder can assist you in setting up
links to them. (If you want to know how to add a link to various SiteGrinder elements, see "Linking
From Things" below.)
SiteGrinder allows you to link to any kind of linkable thing on the web by supplying the full url. (See "
See "Literal Links" in the "Content Editors" documentation for details." below.)
But full url are often unwieldy to work with. They can be long, difficult for humans to read, and if there
is even a single typo or illegal character in them they won't function.
SiteGrinder tries to alleviate this problem by using whatever information you can give it about what kind
of link you are making so it can take educated guesses about what you need.
Linking to a Layer Comp Page
It is simple and pretty much foolproof to link to a page SiteGrinder creates from a layer comp with the
-page hint. (Buy us a beer at Photoshop World sometime if you want to know why we say "pretty much
foolproof"...)
There are three opportunities to link to a layer comp page or any page created based on a layer comp
page.
Auto-Linking by Layer Comp Name Matching

If you have any buttons or menu items in your document that match the name of a layer comp page also
in your document then SiteGrinder will link them automatically. A layer named "Home-button" will link
to a layer comp named "Home-page". Done and done.
This does not work for new pages you create in the Design Manager based on layer comp pages, only the
pages that are created directly from layer comps.
The Pages Menu in the SiteGrinder Link Editor

When you use the button and menu editor of the Content Manager, one of the link type choices is
"Page". This refers to SiteGrinder layer comp pages or other pages created based on them. When you
select the "Page" link type you will see a menu of pages for you to choose from.

147
The nice thing about this method is there is essentially no room for error. You are never dealing with a
url directly and you know the page exists because it is in the menu.
The Link List Menu in the Text Editor of the Content Manager
When setting links in the Content Manager's text editor you will see this window:
The "Link List" menu in the General tab lists SiteGrinder layer comp pages and other pages created in the
CM based on them.
Linking to a Url
For pages (and other things) that you didn't create with SiteGrinder you will link to them using their url,
as in "http://www.medialab.com/sitegrinder/help.html"
Most frequently you'll use urls to link to:
pages or files on your own site that you didn't use SiteGrinder to create
pages and files (like PDFs) on other websites
There are a number of ways to use urls as links in SiteGrinder.
Use a url in a layer with the -link hint to set a url for a button or menu item
Use a url in a layer with the -links hint to set links on text phrases
In the Content Manager's links editor for buttons and menu items select the "url" link type
In the Content Manager's text editor select text and add a url link using the "chain link" button in
the text editor's toolbar
In the first three cases listed above SiteGrinder will do some handy cleaning of your URL. For example
in order for a URL to be fully correct it needs to start with "http://". If you forget this don't worry. If you
enter "www.medialab.com" SiteGrinder will change it to "http://www.medialab.com" for you. But it you
do include the "http://" SiteGrinder is smart enough not to add another one and will leave it alone.

148
Linking to PDFs or Other Files
If you are linking to a file that is already uploaded to your own server or is on some other server, then
you simply provide its url using any of the url linking techniques described in the previous section.
If you will be using SiteGrinder to upload the file to your site then you will use the Content Manager's
links editor for buttons and menu items. See "File Links" in the "Content Editors" documentation for
details.
Linking To Anything Else
The Content Manager's links editor for buttons and menu items has a link type called "literal". You can
enter anything you like that is a valid link. See See "Literal Links" in the "Content Editors"
documentation for details.
Other Elements With Unusual Links
Some page elements handle linking in their own unique ways.
Gallery Components
Gallery components can have links set based on RSS feeds or image metadata. See the gallery
documentation for the various components for more details.
Form Submit Buttons
When your site visitor clicks the "submit" button for a normal SiteGrinder-created form they are taken to
a "thank you" page if they have filled in all the required fields. You create this page just like any other
layer comp page, and you select it for a particular form using the "Forms" panel of the SiteGrinder
plug-in Window before you build.
Ecommerce forms created using SiteGrinder's optional "Control" have their own link systems, usually
opening a shopping cart or check out window.
Buttons and Menus
Introduction
This section is to help you quickly find the information you are looking for about buttons or menus.
We've divided the documentation for buttons and menus into two categories:
How buttons & menus change in appearance based on the mouse (interactivity)
Setting buttons and menu hyperlinks to other web pages, files, etc
Button and Menu Appearance
SiteGrinder buttons and menus have many options for changing in appearance when the site visitor
hovers their mouse pointer over them, stops hovering over them, or clicks on them.
For a great introduction to how buttons, menus, and other elements can respond visually to the mouse,

149
see the Buttons, Animation and Interactivity Essentials Guide.
For complete reference information about this topic see Mouse Interaction and Animation
Button and Menu Linking
Buttons, menu items, and select words and phrases in text can link to other pages in your site or across
the web, link to pdf files, generate new email messages in your site visitor's email client, etc.
There are several methods for setting hyperlinks and which method you choose will depend on what
elements you are adding links to and factors.
For an introduction to basic SiteGrinder hyperlinking methods see the Hyperlinking Buttons and Text
essentials guide.
Once you have viewed the Essentials Guide and want to explore further details of linking, see the
Hyperlinking Reference.

150
Contents
Contents
Introduction
Mouse Interaction and Animation Hints
Buttons
Image Buttons (-button, -hover and -click hints)
Positioning Hover & Click Layers
Image Button Layer Visibility
Image Button States Are Visually Unique
Image Button States And Preloading
CSS Text Buttons
Default Styles For Text Buttons, Menus, and Links
Layer Group Buttons
Avoiding Pre-Merging Using Layer Group Buttons
Creating Multiple States Within One Layer Group
Combining CSS Text and Images Using a Layer Group Button
Layer Group Button Example
The Smart Group Duplicator
Guidelines and Limitations of Layer Group Buttons
Reserved Button Names
Button Best Practices
Button Troubleshooting
When Buttons Don't Respond To The Mouse
Menus (-menu hint)
Text Menus
Vertical Text Menus
Horizontal Text Menus
Advantages of Text Menus
Making Menus From Individual Button Layers
Hiding/Showing Page Elements (with Animation!)
Showing Layers (-hovershow and -clickshow)
Hiding Layers
Hiding Based on Specific Buttons (-hoverhide and -clickhide)
Hiding Based on Multiple Buttons (-hide)
Example of -hide
Buttons With Identical Names
Layer Comp Visibility For Hide/Show Layers
Animating Hiding and Showing
Motion Animation (-movefrom)
Creating "Popup" or "Drop down" Menus
CSS Text Popup Menus

151
"Popup"/"Dropdown" Menus From Individual Image or Text Buttons

Using Layer Groups
Using Panels
Animating Panels is Different From Animating Groups
Introduction
This guide is a reference for SiteGrinder 3's Mouse Interaction and Animation features, in particular how
interactive elements can change in appearance based on the mouse pointer.
Those features include
text buttons (along with hover and click states)

image buttons (along with hover and click states)
text menus, including "dropdown" or "fly out" menus
using buttons to hide and show things in areas of the page away from the button itself
This guide is not meant as a basic introduction. For an overview and introduction to these features see
Buttons, Animation, and Interactivity Essential.
This guide does not include information about linking buttons and menus to web pages or other web
resources. For information about linking see the Hyperlinks Reference.
Mouse Interaction and Animation Hints
The following hints are used to create mouse interactions:
button
hover
hovershow
hoverhide
click
clickshow
clickhide
hide
movefrom
menu
Buttons
Buttons have two aspects:
Their function, usually set by their hyperlink, which determines what happens when you click,
such as taking the site visitor to another page or downloading a pdf.
Their appearance, as in how things on the page appear, disappear, or change in text styling (color,
underline etc) when the mouse hovers over them or when they are clicked.
This section is concerned with button appearance. (For more information about controlling button
function, see the Hyperlinks reference.)

152
The first decision that you need to make as a designer about any given button is whether you want to
make an image button or a CSS Text button.
CSS Text buttons are superior in terms of download speed and search engine optimization, especially
when they are part of SiteGrinder's CSS Text menu features. But CSS Text limits the appearance of
buttons to web standard fonts and the kinds of appearance changes that CSS provides, such as changing
backgrounds and borders when interacting with the mouse.
Many designers create a main menu from individual image buttons in some visually prominent location
on a page, and then a CSS Text version of that menu somewhere else on the page, often in the footer.
Image Buttons (-button, -hover and -click hints)
The -button hint when used on an image layer designates it is as a button, something that can be clicked,
linked, and interact with the mouse. Since SiteGrinder turns anti-aliased type layers into images, type
layers can be used interchangeably with image layers to make image buttons.
The -hover hint is used on a separate layer with the same name to create a version that should replace the
-button layer while the site visitor hovers over the button with the mouse pointer. Thus a typical image
button would consist of a -button layer and a -hover layer, named, for example, "Gallery-button" and
"Gallery-hover" respectively.
The -click hint can be used on yet another separate layer. That layer replaces the -button layer when the
mouse is clicked. Most web pages do not use buttons with click states. This is because when a user clicks
a button they are usually dispatched immediately to a new location or a different page so the click state
will appear only briefly.
An image button doesn't require the -hover or -click states, but -hover and -click layers do require a
triggering button. Buttons can have both hover and click states, or just one of them.
You can use layer groups as image buttons as well as hover and click states. This allows you to build
states from multiple layers without having to merge them before building. See "Layer Group Buttons"
below.
Positioning Hover & Click Layers

Hover and click layers do not need to be identical in size or position to the button layer. Because they are
image layers they can look like pretty much anything. A nice hover effect can be created, for example,
by duplicating the button layer and stretching it just a little or moving it just a little so the button appears
to grow a bit or shift a bit when hovered over.
The only requirement of hover and click layers is that they intersect the rectangular area of the button
layer at least a little. If you want something to appear or disappear in a totally different area of a page
when a button is hovered over or clicked use the hide and show hints like -hoverhide, -clickshow, etc.
(See below.)
Note: For any particular button the area of the page that responds to the mouse is a rectangle. The size
and position of this rectangle has to fit all of your button states inside it, so if your -hover layer is much
larger than your -button layer, or if its left edge (for example) is positioned near the right edge of your
-button layer, the area of the page that triggers the -hover may be a lot larger than you expect. This can
cause problems if you are using image buttons next to each other. If the buttons have large subtle glows,
for example, they can end up covering their neighbors making the menu difficult or impossible to use.

153
Image Button Layer Visibility

-hover and -click layers do not have to be visible on a page. Only the visibility of the matching -button
layer on a -page layer comp determines the presence of a button and all of its states on any page, which is
very handy. This is a case of SiteGrinder just "doing the right thing." If you have a button named
"home-button" visible on a page you can leave all of its associated -hover, -click and other associated
layers in whatever visibility state is convenient.
Image Button States Are Visually Unique

Image -button, -click, and -hover states are not additive. When you hover over a button on the built page
the -button layer completely disappears before the -hover layer appears. Sometimes you may want all or
part of the button layer to also be a part of the hover or click states. To accomplish this you'll need to
either manually render the shared parts into each button layer or use buttons made from layer groups.
(See below.)
Image Button States And Preloading

SiteGrinder creates image buttons using a technique that doesn't require "preloading" to avoid delays
when fetching alternate button states from the server. If you don't know what preloading is don't worry.
Using SiteGrinder means you don't have to know about preloading, just focus on your design confident
that SiteGrinder will "do the right thing."
CSS Text Buttons
SiteGrinder has an unparalleled ability to easily create buttons and menus consisting of either graphics or
text, all straight from layers in your Photoshop document. Text buttons are trivial to make and can be
created in seconds.
Text buttons are constructed from type layers that have their anti-aliasing set to "none" (which has the
advantage of allowing you to easily discern visually which text layers on your pages will be live styled
text and what will be graphics), or that have the "-text" hint added to the end of their layer name. No
graphics will be generated for such buttons since SiteGrinder will add them to the web page within the
HTML.
Unlike image buttons, text buttons don't employ separate -hover and -click layers. Instead you use the
SiteGrinder Design Manager live in a browser to specify how text buttons should change visually when
the user places the mouse pointer over them. There are many available options including borders,
backgrounds, and drop shadows, but CSS text buttons will never be as versatile as image buttons.
CSS text buttons also support a custom "visited" state, which image buttons do not.
Default Styles For Text Buttons, Menus, and Links
SiteGrinder creates several different kinds of clickable CSS text:
text buttons (described in the previous section)

text links, which are links on particular words and phrases within larger bodies of text created
using the -links hint or the Content Manager's text editor
horizontal text menus, which generate multiple CSS menu items from a single-line type layer
(see "Menus" below)
vertical text menus, which generate multiple CSS menu items from a multi-line layer (see

154
"Menus" below)
layer group buttons, which can optionally mix CSS text button and images
For each of these SiteGrinder provides a default style in the "text button and menu styles" panel of the
Design Manager.
The below screenshot comes from a page that includes each of the different types from the list above:
Figure 1.
In the "Layer" column you can see listed five page elements created from our Photoshop layers and a
special entry named "-test link-". In the style column across from each is displyed the named style
SiteGrinder automatically applied to each item.
SiteGrinder applies these default styles to the appropriate text item for conveniece. Notice there are two
text buttons and both have the "text_button" style already applied. If there were five text buttons they
would all, by default, be assigned the "text_button" style.
This system allows you to quickly customize the looks of these different types of text links by editing the
appropriate style setting.
If you, for example, clicked on the "Contact -text-button" entry in the "Layer" column above and then
clicked the "Edit" button you would be able to edit the "text_button" style using this style editor:

155
Figure 2.
With this window you can customize text style settings for all of the possible text button states: normal,
hover, visited, and click. When you change the style here, it will change for all of the text items with
"text_button" chosen as their style. You are not limited to editing the styles SiteGrinder creates by
default, but you are also free to apply your own custom styles to any of text items listed in the "text
button and menu styles" panel.
IMPORTANT: The "text link" entry seen in Figure 1 above is special. It doesn't represent any one layer
in our document. Instead it represents the style settings for any linked words or phrases that are part of a
larger area of text. All links on words or phrases within larger bodies of text will use the style you apply
to the"text link" item.
Layer Group Buttons
The simplest, quickest to create buttons are created from individual layers with the -button hint. "Layer
groups" are the folders you can create in Photoshop's layers palette to help organize your layers.
Placing the -button hint on a layer group opens up many additional possibilities for buttons.
Avoiding Pre-Merging Using Layer Group Buttons

Creating image buttons using a single layer with the -button hint is simple and powerful, but there is one
disadvantage: if you create a particularly fancy looking image button, chances are you had to merge
multiple layers together to do it, at the very least a type layer for the button name and an image layer for
the background. If you decide to change the background later you can't easily do it to the now merged
layer.

156
The most basic advantage of layer groups with button hints is just to keep your layers separate in your
Photoshop document so they are easy to modify later. If you place all the layers that make up a button
state in a single layer group and add the -button hint to the group instead of to the individual layers then
SiteGrinder will handle temporarily merging the group during the build. When the build is complete the
layer group will be just the way it was before the build with the layers still separate.
You can use the other button hints, like -hover, on additional layer groups which SiteGrinder will
similarly merge when building.
Creating Multiple States Within One Layer Group

Using layer groups to hold the constituent parts of your buttons (instead of manually merging them into
one layer) is convenient, but it's not always the most ideal way to make a complex button. The main
drawback to this approach is that if your button states share elements such as background images that
don't change on hover, or text that doesn't change on hover, you end up putting copies of those elements
in each layer group.
To avoid this situation you can create a multi-state image button from a single layer group.
NOTE: This note is probably inappropriate for a reference guide, but I can't stress enough how cool this
feature is.
To construct this kind of button:
1. Create a layer group and add the -button hint to its name
2. Create the layers representing what the button will look like in the "normal" state in the group
3. Create the layers that will replace any individual layers from step 2 for hover or click
4. Name the layers from step 3 after the layers they will replace and add the hover or click hints
Combining CSS Text and Images Using a Layer Group Button

Earlier we discussed the benefits and drawbacks of image buttons vs. CSS text buttons. It turns out you
can have the best of both worlds using layer group buttons. We call buttons we create from a mix of CSS
Text and images "hybrid buttons."
The process for creating such a button is identical to the process described in the previous section with
one difference: for the button text use a single type layer with the -text hint (or with its anti-aliasing set to
"none").
When you create such a button the image layers will behave based on the -click or -hover hints you used
on the individual layers, while the type layer will create a CSS text button whose styles you control using
the Design Manager.
Layer Group Button Example

The following layer group demonstrates both multiple states in one group and CSS button text:

157
In this case the entire layer group ("Home -button) takes the -button hint. The "Home-text" layer will
become CSS text on the final page.
This button will display the "blue back" layer when the site visitor first arrives on the page.
When the visitor hovers over the button the "blue back" layer will disappear and the "blue back-hover"
layer will appear in its place. Notice "blue back" doesn't use a hint, and that the hover layer matches the
"blue back" name rather than the button name.
Layer group buttons can employ multiple image layers with -hover versions.
In all other respects layer group buttons work like other kinds of buttons. They can trigger show and hide
hint, they will auto link to layer comps, etc.
The Smart Group Duplicator

Let's say you've made a nice layer group button like the one above, and now you need to add three more,
let's say "Contact", "Gallery", and "Store", based on the same visual design.
Doing this manually will involve the following steps:
1. Duplicate the set.

2. Rename the group with the new button name, ie "Contact-button".
3. Change the name of the "Home-text" type layer to "Contact-text".
4. Change its text contents from "Home" to "Contact".
5. Move the modified group down some number of pixels so it's below the Home button.
6. Repeat all of these steps for the rest of the buttons.
If you're quick with Photoshop that won't be too horrible, but something about doing all those repetitive
steps doesn't seem, well, very "SiteGrinder-ish".
That's why SiteGrinder installs a script to do all that stuff for you in one step. Not one step for each
additional button, by the way, one step FOR ALL THE ADDITIONAL BUTTONS!

158
When you select a group in the layers palette and choose "SiteGrinder Smart Group Duplicator" from
Photoshop's File->Scripts menu you'll see this window:
In the "Find" field place the name of the button you've already created. SiteGrinder will find that name in
any of your group layer names and replace it with the new button names.
Turn on "Replace in text layer contents" if you also want the contents of your type layers to find and
replace the button name. For example if this is checked the script can duplicate a type layer within the
group named "Home-button" containing the text "Click here to go to our home page" and turn it into a
type layer named "Contact-button" containing the text "Click here to go to our contact page".
Turn on "Case sensitive" if you want the find and replace to care if the text it's searching matches the
"Find" text exactly.
The "Replace with" field is where you type in one or more replacement text entries each on their own

159
line. These entries can be one word or multiple words. Because of a weirdness in Photoshop's scripting
system you will have to type control-return (control-enter on Windows) to add new lines in this field.
SiteGrinder will make one duplicated and renamed group for every line you place in this field.
The Vertical and Horizontal offsets determine if SiteGrinder moves the duplicated layers some amount
after creating them. When creating multiple duplicated groups each group is moved relative to the
previous one. If you are making a vertical row of buttons, and the button you are duplicating is 95 pixels
tall, and you want 5 pixels between each button and the next, then setting the vertical offset to 100 will do
the trick. Instant button bar!
And the script does all of these things at the same time.
NOTE: This feature is awesome. Additionally, because the script makes changes to your document, you
should save the PSD before running the smart group duplicator.
Guidelines and Limitations of Layer Group Buttons

SiteGrinder uses the type layer's rectangle to position the CSS Text. SiteGrinder will center the
type layer vertically within the rectangle so make the type rectangle the same height as the button
and don't try to manually center it vertically.
Multi-line text is not recommended as the CSS portion of the button.
A layer group button can have at most one type layer in it that will be output as styled CSS text.
Reserved Button Names
There are a few button names which have special meaning within SiteGrinder. You only use these names
in the context of their associated SiteGrinder features. (Most of these reserved names involve
SiteGrinder's image gallery features.) You can read more about what these buttons do in other sections of
the documentation.
edit-button
next-button
prev-button
previous-button
nextset-button
prevset-button
Button Best Practices
Don't place CSS Text layers on top of image button layers, use hybrid buttons as described above
instead if you want to use CSS Text with an image button
Keep your button layers close to the top of your layers palette to avoid higher layers stealing their
clicks
Use clickshow to create mini galleries
Button Troubleshooting
Use this section to diagnose and cure problems you may be encountering with buttons.

160
When Buttons Don't Respond To The Mouse

When a button isn't responding to the mouse it is almost always because some other layer is blocking it.
When this situation occurs SiteGrinder will warn you about it in the report.
It's important to remember that even empty space in a layer can block mouse clicks and hovers from
reaching layers below. This happens when the empty space is between non-empty parts of the layer. As
an extreme example, imagine an image layer that contains nothing but a single pixel in the upper left
corner of the document and a single pixel in the lower right. If that layer is the highest one in the layers
palette it will block every layer beneath even though the layer is almost entirely empty!
The quick fix is to move the button up to the top of the layers palette and rebuild.
If you would like to read a detailed explanation of how one layer can block another from responding to
the mouse even when the unresponsive layer doesn't appear to have anything on top of it click here.
If your problem is that neighboring buttons are getting in the way of each other then moving them to the
top of the layers palette won't help. You may have to shrink some of the button state layers.
Menus (-menu hint)
In general a "menu" is just a group of similar looking buttons clustered together.
You can make a menu like that with SiteGrinder, of course, simply by creating a bunch of similar image
or type layer -buttons and positioning them near each other in your design.
Because this is so often done with text buttons, SiteGrinder also supports a special "-menu" hint for type
layers. It creates multiple buttons (menu items) from a single type layer and has other special properties.
Either kind of menu can be made into a "popup" menu. You may also hear of such menus referred to as
"drop down" or "fly-out". See the "Hiding and Showing" section below for more information on popup
menus.
Text Menus
To create a number of text buttons all at once you can just type their names into a type layer and add the
-menu hint to its name. Each individual button in a -menu layer is also called a menu item.
These menu items act just like buttons functionally:
They can auto-link to layer comps with matching names

They can trigger showing and hiding layers using hovershow, clickshow etc.
There are two types of text menus, vertical and horizontal, and they are differentiated by how you enter
the menu items in the menu type layer.
Text menus and their individual menu items initially look on the built web page very much the same way
the -menu type layer is styled in Photoshop, including font, color, size, alignment, and margins.
Hover, click, and visited styles for text menu items are set with the Design Manager's Text Button and
Menu Styles controls. Additional borders and background for the entire text menu (as opposed to each
item) can also be set using the Design Manager's Borders and Backgrounds controls.

161
NOTE: Horizontal text menus are not pixel perfect in SG3. The menu items will be very close to the
same position as they were in the Photoshop document, but not always exactly. The reason stems from
their edit-ability. If they were not editable in the Content Manager then SiteGrinder could place them
exactly. If you want exactly placed text menu items, use a series of individual text -button layers instead
of the -menu hint.
NOTE: Text menus can visually track the currently viewed page by retaining either their hover or click
state when on the page a menu item links to. This option is available in the Design Manager's Text
Button and Menu Styles panel.
Vertical Text Menus

Vertical text menus consist of menu items that are stacked vertically. If a multi-line text layer has the
"-menu" hint then SiteGrinder will assume each line of text corresponds to a hyperlink to a page
SiteGrinder will be creating. If you enter five lines of text in a type layer with the menu hint then
SiteGrinder will create a five item menu.
SiteGrinder ignores empty lines in vertical text menus, so if you want to add empty space between items
use the "space after" setting in Photoshop's paragraph styles palette.
Vertical text menus are often better than horizontal text menus if you plan to add more menu items later
in SiteGrinder's Content Manager.
Horizontal Text Menus

Horizontal text menus are menus that contain all of their menu items on a single line. Because
SiteGrinder can't use line breaks to tell one menu item from the next, horizontal menus use a different
technique for separating menu items from one another.
There are two ways to separate items:
Place the vertical bar character between each item, as in "Home | Contact Us | Gallery"
Place two or more spaces between each item as in "Home Contact Us Gallery"
In the second example above there are several spaces between Home and Contact, as well as between
Contact and Gallery. Because there is only one space between Contact and Us both words will be part of
the same item.
Advantages of Text Menus

Text menus have a lot of benefits.
Text menus are ideal for search engine optimization. SiteGrinder creates text menus using techniques
that help search engines understand both the content and structure of your site.
Text menus can be edited after your site is deployed using SiteGrinder's Content Manager. If you add
more pages to your site in the Content Manager you can append additional menu items to link to them
without having to return to Photoshop.
Making Menus From Individual Button Layers
While text menus are ideal in many ways, they have a couple of drawbacks:
They are limited to CSS styles for appearance and hover/click styles

162
Buttons must be aligned vertically or horizontally, so arbitrary button positioning is not possible
To overcome these you can simply create individual button layers and position them however you need to
within your document for total control of button appearance. This is purely a technique of design and
positioning of layers and doesn't involve the -menu hint. The -menu hint is only used on type layers.
It is possible to make popup menus from button layers placed in a layer group, but that doesn't use the
menu hint either. (See below.)
Note to SiteGrinder 2 Users: This is a change in SiteGrinder 3. The -menu hint is no longer used on
layer groups to create popup menus.
Hiding/Showing Page Elements (with Animation!)
The previous sections described how buttons can change their appearance based on the mouse hovering
or clicking them. But buttons can have much larger visual effects on pages by changing the visibility of
layers elsewhere on the page.
There are five hints used for this purpose:
hovershow
clickshow
hoverhide
clickhide
hide
These hints can be added to individual layers, layer groups, and even more complex elements like
columns and thumbsheets.
NOTE: You can create simple galleries using the hovershow and clickshow hints, but it's not a good idea
if you have more than three or four images. See the Gallery Reference to learn about SiteGrinder's
gallery features.
Important: These hints should not be confused with the "-hover" and "-click" hints. Hover and click are
used to designate button states that replace each other on the same part of the page. The hints we are
discussing in this section are for controlling elements that appear in addition to the button and are
positioned in different parts of the page than the button that controls their visibility.
Showing Layers (-hovershow and -clickshow)
A button can make something on a different area of the page appear when the button is hovered over or
clicked using the -hovershow or -clickshow hint on the layer(s) representing the element(s) you want the
button to control. Make the element name match the triggering button or menu item as well. A button
named "Abracadabra-button" will reveal an element named "Abracadabra-hovershow" when the
button is hovered over.
The hovershow and clickshow hinted elements will be invisible when your site visitor first arrives on a
page. They will become visible when the button is hovered over (hovershow) or clicked on (clickshow).
Layers with the hovershow and clickshow hints should not intersect the button that triggers them. Use
-hover or -click for changing the appearance of the button itself.
Amazingly, when these hints are used with SiteGrinder columns, elements that become visible based on
these hints can actually cause other layers to properly move around to accommodate them within the flow

163
of the page. See the Column Reference for details.
Hiding Layers
There are two ways to hide layers. The hoverhide and clickhide hints allow you to control the visibility
of specific elements with specific buttons. The hide hint works more generally.
Hiding Based on Specific Buttons (-hoverhide and -clickhide)

The hoverhide and clickhide hints are pretty much the opposite of hovershow and clickshow.
A button can make something on a different area of the page disappear when the button is hovered over
or clicked if you add the -hoverhide or -clickhide hint to the layer(s) representing the element(s) you want
the button to control. Make the element name match the triggering button or menu item as well. A button
named "Abracadabra-button" will, on hover, make an element named "Abracadabra-hoverhide"
disappear.
The hoverhide and clickhide hinted elements will be visible when your site visitor first arrives on a page.
They will become invisible when the button is hovered over (hoverhide) or clicked on (clickhide).
Layers with the hoverhide and clickhide hints should not intersect the button that triggers them. Use
-hover or -click for changing the appearance of the button itself.
Amazingly, when these hints are used with SiteGrinder columns, elements that become invisible based on
these hints can actually cause other layers to properly move around to fill the new empty space within the
flow of the page. See the column documentation for details.
Hiding Based on Multiple Buttons (-hide)

The previous showing and hiding hints are triggered by specific buttons. Elements to be shown or hidden
match to a particular button by layer name.
SiteGrinder users have developed designs where certain elements should be hidden when any button that
has an associated show layer is triggered, and so we added the -hide hint. It's generic and doesn't match
to any button name.
Example of -hide
As an example, imagine you have a page listing the top executives in a company. When the user clicks
on an executive you want an area in the center of the page to show their resume. But you probably don't
want that area to be empty before the user clicks on any of the executives. But once an executive is
clicked on you want what was there initially to disappear and be replaced by that exec's resume. If you
create a layer or a group with the initial content for the center area and give it any name you like along
with the -hide hint it will solve this problem. The -hide content will be initially visible, but when any of
the -clickshow layers is made visible it will disappear.
You can only have one of these set-ups on a given page because elements with the -hide hint disappear
when any layer with an associated -clickshow or -clickhide is triggered.

164
Buttons With Identical Names
Sometimes you will have multiple buttons on a single page that have the same name. You might have an
image button at the top of your page named "Galleries-button" and a menu item at the bottom named
"Galleries", for example. Only one of them can control a particular element that uses hovershow,
hoverhide, clickshow, or clickhide. But which button will be the controller if they have the same name?
SiteGrinder resolves this question by looking in the layers palette to see which button is closer. If the
wrong button is controlling your element visibility, just move the elements closer to the button or menu
in the layers palette.
Layer Comp Visibility For Hide/Show Layers
On the built page the visibility of a layer that uses any of the show or hide hints is determined by the site
visitor's interaction with its trigger button. A -hovershow or -clickshow layer does not need to be visible
on a page layer comp to be included on a page. As long as the triggering button is visible on a page
SiteGrinder will "do the right thing."
The only exception to this rule is the case of a -column with the -hovershow or -clickshow hint. Since
the visibility and extent of a column is very important for determining the organization of other layers on
any page, any -column with the -clickshow or -hovershow hint must be visible on any page where it is
active.
NOTE: Because there are a few situations where visible hide and show layers can be problematic it is
safest to hide them on the layer comp even though it isn't usually necessary. That's why SiteGrinder will
warn you in the report if hide/show layers are visible in any of your page layer comps.
See the Columns Reference for more details about hiding and showing columns.
Animating Hiding and Showing
Any showing or hiding layer can be animated.
If you have any layers using show or hide hints then you will find an "animation" panel in the Design
Manager listing them:
Clicking in the Type column in this panel next to an animated element opens up the animation dialog:

165
From this dialog the user can choose the type of animation (slide, fade, wipe) for elements without a
"-movefrom" layer. Movefrom layers always use the "Move From" animation type.
You can also control other applicable settings, such as what type of ease to use.
Click "Apply" and hover or click the trigger in the page preview area on the right to see the effect of your
new settings.
Motion Animation (-movefrom)

A -movefrom layer matches the name of a -hovershow or -clickshow layer and is placed elsewhere on the
page. When the trigger button is rolled over or clicked, the element will appear at the -movefrom location
and then animate to its own location.
You can use any non empty layer as the -movefrom layer. SiteGrinder uses the location of the top left
corner of the -movefrom layer, so just a single pixel will work.
In practice the easiest way to set this up in your document is to create the -hovershow or -clickshow layer
where it should stop. The duplicate the layer, name it after the original but with -movefrom instead of the
hovershow or clickshow hint and move it to the location (even outside the document) where you want the
layer to start its movement.
Here's a simple set-up in Photoshop:

166
Below is the result, which is live, so move your mouse over the trigger:
If you are reading this from a printed book you can find this live demo at
http://www.medialab.com/sitegrinder3/support/samplefiles/built/movefrom/
Creating "Popup" or "Drop down" Menus
Popup menus, also referred to as drop down or fly out menus, are groups of buttons that appear for
selection when some other button is hovered over or clicked. These are very easy to create in SiteGrinder
3 using the hovershow and clickshow hints described earlier in this document.
CSS Text Popup Menus

The quickest way to create a popup menu is to create a CSS text menu for your popup and add both the
-menu and the -hovershow hints. Such a menu will be triggered by a button or menu item that matches
its name.
For example a text menu item containing the item "Galleries" will trigger a text menu named
"Galleries-menu-hovershow."
To use image buttons instead of CSS text in your menus see the next section.
"Popup"/"Dropdown" Menus From Individual Image or Text Buttons

Only type layers can become full menu hint citizens, with all the benefits and responsibilities thereto,
such as being able to add new menu items in the Content Manager.
But sometimes CSS Text menus are too limiting from a design standpoint because you want to use
irregular item spacing or image buttons.
You can still make groups of buttons (and other elements) that popup (or drop-down or fly-out) by
putting the hovershow or clickshow hints on layer groups or panels.

167
Using Layer Groups

In this case you can collect individual button layers for a popup menu in a layer group and give that
group the -hovershow hint. The group will not use the menu hint because that hint is only for single type
layer text menus.
Thus a layer group named "Galleries-hovershow" that contains button layers will act as a popup menu for
a button named "Galleries-button" or a menu item named "Galleries".
Using Panels
You can also place the show/hide hints on a -panel. Panels don't use layer groups. Instead they are built
from layers whose boundaries fit inside a rectangular -panel layer and are above that layer in the layers
palette. (See the Panels Reference for more information on panels.)
Adding a show/hide hint to a panel makes the layers it contains appear and disappear much like using
those hints on a layer group.
Animating Panels is Different From Animating Groups

There is an important difference in how SiteGrinder builds panels and how it builds groups when the
show/hide hints are used: the animation settings.
Just as you can animate individual layers using show/hide hints, you can animate the showing and hiding
of collections of layers using those hints on groups or panels.
When you use a group, every item of the group appears separately in the Design Manager's Animation
controls. This means you can give each layer within the group a different setting.
More often you'll just want all of the layers to appear together using the same animation setting. Panels
make this easier because they are treated as a single entry in the Design Manager.
Photoshop Techniques
Contents
Contents
Rendering Layer Styles
Defining Patterns
Layer Boundaries
Layer Groups (aka Layer Sets)
Rendering Layer Styles
When you apply a layer style (bevel, drop shadow, etc) to a layer, Photoshop doesn't actually alter the
underlying pixels in your document. This is mostly a good thing because it means you can change or turn
off layer styles whenever you need to and still be working with the original image content of the layer.
Sometimes, for example when using SiteGrinder's -centercut hint, you will need to actually render the
visual changes made to a layer by its layer style so that the styled version becomes the content of the
layer. The result will be a layer that looks exactly like the styled layer but actually has no live layer
styles applied.

168
These are the steps required to render a styled image layer:
(Before you follow them you may want to duplicate the layer you are going to render and add the -ignore
hint to it to keep it around as a work layer.)
1. Create a new empty image layer in the layers palette immediately below the original layer you
want to render.
2. Double click the original layer's layer name and copy the name to the clipboard.
3. Now, with the original layer selected, choose "merge down" from the layer palette menu.
4. Double click the name of the now merged layer and paste in the name you copied from step 2.
These steps combined the original layer with the empty layer and rendered the layer styles. Notice the
previously empty layer has no layer styles applied but looks the same as the old layer.
Defining Patterns
SiteGrinder can create web page background tiles from layers that have either the gradient overlay or
pattern overlay layer style applied.
To create a gradient you just use the built-in gradient editor that is part of the gradient overlay controls in
the layer styles window.
It's important to realize that many common styles of web tiles can be created just from gradients.
This tile comes from a gradient, for example:
The gradient is at 180 degrees so it's perfectly vertical. From a gradient like this SiteGrinder can create a
super-efficient one pixel tall tile and repeat it as much as necessary to fit in the background of a page
area.
The gradient dialog to create it looks like this:

169
Background patterns, used by the "pattern overlay" effect are a little more complicated. This is because if
you want to employ a pattern not included in Photoshop's sadly useless built-in patterns, you will need to
first define a pattern.
The workflow for creating tiles from patterns is as follows:
1. Create a repeatable area of your pattern design using one or more layers in Photoshop.
2. Select the repeatable area with the marquee tool
3. Choose "Define Pattern" command from Photoshop's "Edit" menu and name your pattern
4. Create or select the layer you want to apply the pattern overlay style to
5. Double click the layer in the layers palette and add the "Pattern overlay" style in the layer styles
window
6. Select your pattern from the pattern list in the pattern overlay style controls

170
Layer Boundaries
Use the marquee tool's "Fixed Size" mode to create layers with preset dimensions for things like
xmedia layers.
Duplicate layers to easily match boundaries exactly, such as a duplicating a column to use as the
column's -background layer.
Use move tool with info window by clicking on (but not dragging) a handle of the current layer to
display exact dimensions.
To compare one layer's boundaries to another's you can select the transparency of one by
control-clicking the thumbnail, then activate the move tool and select the other layer.
Layer Groups (aka Layer Sets)
Organize layers into groups for convenience (global stuff, page specific stuff, etc.)
Use groups to make buttons
Use groups to create popup menus using the -hovershow hint.
Use groups with the -ignore hint to keep work layers around.
Layout
Basic Page Layout: SiteGrinder WYSIWYG
The term "page layout" can mean a lot of things. In the context of SiteGrinder, "page layout" simply
refers to controlling where elements appear within the browser window after SiteGrinder builds your
pages.
Layers in the document appear in the same location on your built web page. This means that without
learning a single SiteGrinder layout hint or feature you can already create WYSIWYG web sites just by
creating and positioning text and image layers in your Photoshop document.
One of the big advantages of SiteGrinder is that it imposes very few restrictions on your imagination.
You start with an empty Photoshop document and can design your page elements without having to
worry about fitting things into any sort of pre-defined grid.
Intermediate Layout Features
As you become more experienced you will soon have more ambitious desires for your designs:
1. Setting a color other than white to fill the browser window

2. Setting a background tile that can grow as needed to fill the changing width or height of the
browser window
3. Creating footers with their own stretchable background colors and tiles and automatic positioning
at the bottom of the browse window
4. Wrapping text around images
You'll find these kinds of features on many web pages. With SiteGrinder's fantastic set of layout hints
you'll be creating all of them in minutes flat.

171
Advanced Layout Features
Most of SiteGrinder's advanced layout features involve the use of the exceptionally powerful and
versatile -column hint. You will use layers with the -column hint to structure your pages in ways that are
flexible without hampering your creativity.
Column layers are loose rectangular groups of other layers that can grow and move based on the space
requirements of their neighbors. They can also have background tiles that grow along with them
Keep in mind that SiteGrinder columns are much more flexible and powerful than you may assume from
other web layout systems. Columns be anywhere on a page, can contain other columns, can be used as
ajax-style tabbed controls, etc.
While these concepts require a little more work to learn than the basic features of SiteGrinder, the power
they will give you will more than make up for it.
Finding What You Need To Know About Layout
The layout documentation is divided into the following areas:
Background Colors and Tiles

Page Size and Alignment
Page Footers
Columns
Panels
Scrolling
Wrapping Text Around Page Elements

172
Contents
Contents
Introduction
Colors, Tiles, and Layer Styles
Background Colors and the Color Overlay Style
Background Tiles and the Gradient Overlay Style
Background Tiles and the Pattern Overlay Style
Unsupported Background Layer Styles
Setting Background Tile Repeat Options
Background Element Layer Order
Setting Background Tiles and Colors for Different Elements
Coloring and Tiling the Browser Window
Browser Background Color
Browser Background Tile
Browser Background Tile Repeat Options
To Repeat Horizontally Only:
To Repeat Vertically Only:
To Repeat Both Horizontally and Vertically:
Affixed Tiles
Affixed (non-scrolling) Background Image
Affixed Tile from Gradient Overlay
Affixed Tile from Pattern Overlay
Coloring and Tiling the Page Content Area
Page Content Background Color
Page Content Background Tile
Pagesize Background Tile Repeat Options
Coloring and Tiling Columns
Column Background Color
Using Layer Styles
Using the Design Manager
Column Background Tile
Column Backgrounds With a Background Layer
Column Backgrounds With a Centercut Layer
Column Background Tile Repeat Options
Coloring and Tiling the Footer Area
Footer Background Color

173
Footer Background Tile

Footer Tile Repeat Options
Introduction
Background colors and repeating background tiles are two of the best techniques not only to create
attractive design elements that can adapt to changing browser window dimensions but also to ensure
speedy page loading.
SiteGrinder supports creating multiple areas each with their own solid color and image tile backgrounds
that can expand seamlessly in different ways.
Many elements can use background colors or tiles that you specify through layers with hints, including:
The browser window background

The page content area
Columns
Footers
The following additional elements can have background colors and colored borders (but not tiles), which
you specify using SiteGrinder's Design Manager controls:
CSS text areas

Text menus
Individual text buttons
Colors, Tiles, and Layer Styles
SiteGrinder looks for hinted Photoshop layers with either the color overlay, pattern overlay, or gradient
overlay layer styles to determine your intentions for background colors and tiles.
Background Colors and the Color Overlay Style

Most SiteGrinder methods for setting background colors are used in conjunction with the Color Overlay
layer style. SiteGrinder takes the color chosen for the layer style as the color choice, not the original
color of any of the content pixels of the layer.
This means the color of the pixel content of these layers doesn't affect the outcome on the built web
page. The layer content does affect your ability to preview what your page will look like in a browser
before you build, however, so we recommend using that to your advantage. If a layer employs a hint
along with the Color Overlay layer style to specify the browser background color, for example, you
should fill the entire layer and position it at the bottom of the layers palette for an accurate preview.
Using the opacity setting within the Color Overlay style settings is not supported and the opacity should
always be set to 100%.
Background Tiles and the Gradient Overlay Style

A surprising number of background tiles on web pages are really just one pixel wide or one pixel tall
slices of a perfectly vertical or perfectly horizontal gradient. These can be repeated as needed
horizontally or vertically, depending on their orientation.
IMPORTANT: Gradients that will repeat horizontally across the page must be set to either 90 or 270

174
degrees in Photoshop's gradient overlay settings panel.
IMPORTANT: Gradients that will repeat vertically down the page must be set to either 0 or 180
degrees.
SiteGrinder 3 takes advantage of this by allowing you to create a background tile from a layer with the
gradient overlay effect, saving you the trouble of taking a one pixel slice of the gradient to use as a
Photoshop pattern. This is by far the quickest and simplest way to create a tile.
If your tile is more complex than a gradient, you can use the Pattern Overlay layer style to create any sort
of tile you want, as described in the next section.
Background Tiles and the Pattern Overlay Style

Photoshop's Pattern Overlay layer style is the closest thing Photoshop supports to browser tiling, so it
makes a lot of sense to use it with SiteGrinder to specify background tiles.
The basic workflow to create a pattern is this:
1. Create the design layers that make up one repeating section or paste a tile design into a layer from
some other source.
2. Use Photoshop's marquee tool to select the area that will become the repeating tile.
3. Select "Define Pattern" from Photoshop's Edit menu. Give the pattern a memorable name in the
dialog that appears.
4. Delete your work layers, or, if you want to keep them around, put them in a layer group using the
-ignore hint.
At this point you have created a pattern and added it to Photoshop's pattern list. The next step is to set the
layer style for the hinted layer.
1. Create or select the hinted layer that will be getting the pattern overlay style, most commonly a
"browser-background" layer.
2. Double click the layer in the layers palette to open the layer style dialog.
3. Add the Pattern Overlay layer style and select the pattern you created in step 3 from the end of the
pattern menu.
4. Close the layer styles dialog.
Unsupported Background Layer Styles

Gradient Overlay or Pattern Overlay (but never both) are the only layer fx that can be applied to a hinted
-background layer.
For other effects, like drop shadows, you might investigate a - centercut layer instead.
Alternately, if you want an affixed image background layer, then it must be positioned such that it does
not touch the outer bounds of its parent.
Setting Background Tile Repeat Options

Photoshop patterns used with the Pattern Overlay layer style always repeat both horizontally and
vertically as needed to fill the entire contents of the layer.
Tiles on web pages have a lot more options for how they repeat than does Photoshop. They can repeat

175
horizontally only, vertically only, both, or not at all. (Why would you want a tile that didn't repeat?
Because a non repeating tile can sit behind your content layers and remain in place without scrolling
while your site visitor scrolls the content.)
In some cases SiteGrinder will require a certain kind of repetition. The -centercut hint, for example, only
uses tiles that repeat vertically, so there's no need for you to do anything else to indicate how the tile
repeats.
For other tiles, such as those that can fill the browser window, the page content area, or columns, you can
choose from a number of different repeat options.
Tile repeat options are not set using SiteGrinder's windows and controls. Instead you control how a tile
repeats by which sides of the element receiving the tile are touched by the layer that has the tile layer
style. For example a layer that fills the document touches all four sides.
The following sections will cover the specifics of this technique for each element type.
Background Element Layer Order

Layer order in the layers palette can be important with elements that have background colors or tiles.
You'll tend to use the correct order anyway as you design because, for example, it doesn't make sense to
have the background layer on top of anything else.
Below is the ideal layer order for these kinds of elements from highest to lowest if you were to use them
all on one page (as you would see them in the layers palette):
Page bottom stuff -footer

footer -background
footer -backgroundcolor
Some area -background
Some area -column
Some other area -centercut
Some other area -column
Main rect -background
Main rect -pagesize
browser -background
browser -backgroundcolor
In a real design there would be many other layers interspersed between the pagesize layer and the footer layers.
Notice there are two columns, one using a background layer and the other a centercut layer.
"Page bottom stuff-footer" is a layer group since the -footer hint only works on groups.
Setting Background Tiles and Colors for Different Elements
The various elements that can use background colors and tiles use similar but not identical methods for
determining their background appearance.

176
Coloring and Tiling the Browser Window

The browser window, more specifically the background of the part of the browser window that displays
the web page, is the most common area to apply a background color and/or tile to.
The two hints you will use to do this are:
browser-backgroundcolor
browser-background
If you don't use one or both of these hints then the browser background defaults to white. To put it
another way, if you just want a white background don't use either of these hints.
Browser Background Color

To set the the browser window's background color to something other than the default of white, you need
to do two things:
1. Create a layer named "browser-backgroundcolor". This must be the entire name of the layer.
2. Assign the layer the Color Overlay layer style and set the color to what you want to use as your
background color.
As the browser window background, this color will fill the window even if the site visitor resizes it.
Color Overlay is the only layer style that can be applied to a -backgroundcolor layer. All are other layer
fx are ignored. To use a gradient or pattern as a background, use a matching -background layer.
Browser Background Tile

To set the browser window's background tile you need to do two three things:
1. Create a layer named "browser-background". This must be the entire name of the layer.
2. Assign the layer either the Pattern Overlay or Gradient Overlay layer style and set the pattern or
gradient to the one you want to use as your background tile
3. Fill an area of the layer to set the appropriate tile repeat options as described in the next section
Browser Background Tile Repeat Options

For the contents of browser-background layers, certain rules apply to set the repeat options for the tile.
These generally mirror the way you would naturally position the layer contents to preview the tile.
Remember these describe the dimensions of the pixel contents of the layer, i.e. what you would see in the
layer if it had no layer style applied, not the dimensions of the tile or gradient.

This is a very common effect at the top of modern web designs. To achieve it, make the layer contents
touch the top, left and right sides of the document, but not the bottom.

This is very common for creating vertical drop shadow borders along the left and right sides of your
content. To achieve it, make the layer contents touch the top, left and bottom of the document, but not
the right side.

177

Make the layer contents touch all sides of the document. The quickest way to do this is to entirely fill the
contents of the layer.
Affixed Tiles
An affixed tile will not scroll with the rest of the page. Instead it will remain in place below the scrolling
elements.
SiteGrinder can create the following types of affixed tiles:
An image that doesn't repeat but is fixed to the background and won't scroll with the rest of the
page
Affixed tiles made from gradient overlay layers
Affixed tiles made from pattern overlay layers
All of these are created from an image layer that doesn't touch any side of the document.
Affixed (non-scrolling) Background Image

To create an affixed image that neither repeats nor scrolls with the rest of the document, name an image
layer with no pattern overlay or gradient overlay style "browser-background". Make sure this image does
not touch any of the document sides.
Affixed Tile from Gradient Overlay

If an image layer named "browser-background" has the gradient overlay layer style and touches no sides,
it will be affixed and will repeats horizontally or vertically depending upon the gradient angle.
Affixed Tile from Pattern Overlay

If an image layer named "browser-background" has the pattern overlay layer style and touches no sides, it
will be affixed and will repeats both horizontally and vertically.
Coloring and Tiling the Page Content Area

Unless you indicate otherwise, SiteGrinder assumes that your Photoshop document dimensions represent
the dimensions of your web page content, which is often the case.
But other times you might want to designate a section that is smaller than the full Photoshop document
area as your page contents. A useful application of this is using different color, tile and tile repeat
settings for your browser background and your page background. You might want a horizontally
repeating tile in the browser background stretching from one side of the window to the other, but a
vertically repeating tile with drop shadows to frame the content itself.
The -pagesize hint placed on a rectangular layer allows you to specify an arbitrary area of your document
as the content. Using layer styles and name matching you can set a unique color and tile just for this
area.
See the Page Size and Alignment Reference for more details on -pagesize layers.
Page Content Background Color

To set a background color for the page content area, just apply a Color Overlay layer style to the layer
you added the -pagesize hint to.

178
NOTE: Unlike the browser background, pagesize layers don't use associated -backgroundcolor layers.
If you colorize the pagesize using this technique you can also set the layer opacity of the pagesize layer
using the layers palette opacity control. Not all browsers support this kind of opacity.
Page Content Background Tile

Remember that a layer with the -pagesize hint can be named anything you like as long as it is visible in
the layer comp for the page it is meant to influence. This is important for setting the background tile
because you will need to create a layer with a name that matches your -pagesize layer's name but uses the
-background hint.
To set a background tile for the pagesize area assuming your pagesize layer is named "main
site-pagesize" do the following:
1. Create a layer named "main site-background"

2. Apply the Pattern Overlay or Gradient Overlay layer style to it
3. Position the contents of the "main site-background" layer to indicate repeat options
Pagesize Background Tile Repeat Options

For the contents of -background layers used with pagesize layers, certain rules apply to set the repeat
options for the tile. These are similar to the rules for the browser-background layer, but instead of the
boundaries of the document window you will use the boundaries of the -pagesize layer.

Make the layer contents touch the top, left and right sides of the -pagesize layer, but not the bottom.

Make the layer contents touch the top, left and bottom of the -pagesize layer, but not the right side.

Make the layer contents touch all sides of the -pagesize layer. The quickest way to do this is to duplicate
the pagesize layer and use the new copy as the -background layer.

Columns allow you to specify arbitrary rectangular boundaries to manage groups of smaller items that
have the potential to change size and position. Columns can have their own unique colors and
background tiles.
For details about columns including an expanded version of this section with examples see the Column
Reference Guide.

Column background colors can be set using layer styles or using the Design Manager's Background and
Border controls.
Using Layer Styles

To set a background color for a column, just apply a Color Overlay layer style to the layer you added the
-column hint to. Unlike the browser background, column layers don't use associated -backgroundcolor
layers.

179
If you use the Color Overlay style on a column you can also set the -column layer's layer opacity to
something other than 100 to make the column's background semi transparent on the built page. Not all
browsers support this.

Once you build a design with a column, you will find the column listed in the Design Manager's Borders
and Backgrounds panel. There you can set border and background settings, including with rounded
corners and drop shadows.
Note: If you have image layers within the column that have semi transparent pixels, SiteGrinder will
composite them to the column background from within the document. Changing the column background
color using the Design Manager may cause such graphics to no longer appear correctly.
Column Background Tile

There are two distinct methods for setting column background tiles:
Use a name-matching -background layer

Use a name-matching -centercut layer
Column Backgrounds With a Background Layer

Using a -background layer that matches the name of the column and has either a Gradient Overlay or
Pattern Overlay layer style will fill an area of the column rectangle based on the repeat options indicated
by the position of the contents of the background layer. (see below)
Column Backgrounds With a Centercut Layer

Using a centercut layer allows you to specify a vertical slice of the column layer that represents a tile that
can repeat vertically. This allows you to have a non repeatable image background at the top of your
column, such as complex rounded corners, and another one at the bottom with an arbitrarily expandable
area in between the two.

Tiles created with centercut layers always repeat vertically only.
For the contents of -background layers used with column layers, certain rules apply to set the repeat
options for the tile. These are similar to the rules for the browser-background layer, but instead of the
boundaries of the document window you will use the boundaries of the -column layer.

Make the layer contents touch the top, left and right sides of the -column layer, but not the bottom.

Make the layer contents touch the top, left and bottom of the -column layer, but not the right side.

Make the layer contents touch all sides of the -column layer. The quickest way to do this is to duplicate
the column layer and use the new copy as the -background layer.
Coloring and Tiling the Footer Area

There are three methods for creating footers: (see the footer documentation for details)

180
Create a footer-backgroundcolor layer and position footer content layers within its borders
Create a footer-background layer (with or without a footer-backgroundcolor layer) and position
footer content layers within its borders
Create a layer group with the -footer hint and place footer layers inside the group in the layers
palette
In all cases the color and/or tile is set using a footer-backgroundcolor and a footer-background layer.
Footer Background Color

Like other backgroundcolor layers, a footer-backgroundcolor layer must have the Color Overlay layer
style applied. It is the color chosen in that layer style that SiteGrinder will use as the footer background
color.
The height of the footer-backgroundcolor layer determines the height of the colored area, and the width
of the colored area is always the width of the entire browser window.
Color Overlay is the only layer style that can be applied to a -backgroundcolor layer. All are other layer
fx are ignored. To use a gradient or pattern as a background, use a matching -background layer.
Footer Background Tile

Like other background layers, a footer-background layer must have the Pattern Overlay or Gradient
Overlay layer style applied.
The height of the footer-backgroundcolor layer determines the height of the tiled area, and the width of
the tiled area is always the width of the entire browser window.
Footer Tile Repeat Options

Footer tiles always repeat horizontally to the edges of the browser window.

181
Page Size and Alignment
Contents
Contents
Introduction
Understanding the Content Area
Content Size from Document Dimensions
Content Size from a Pagesize Layer
Best Practices
Photoshop New Document Settings
Page Name
Dimensions
Other Settings
The -pagesize Hint
Page Size vs. Browser Window Size
Inside and Outside the Pagesize Layer
Pagesize and Tiles and Colors
Expanding Pages
Page Alignment
Pagesize Restrictions
Introduction
This chapter describes how to control the size and alignment of SiteGrinder pages.
By default the SiteGrinder pages are centered horizontally, are the size of the Photoshop document they
were built from and have a white background.
All of these things are customizable for every Photoshop document and even every layer comp page
within a Photoshop document.
If you are looking for information about creating pages with layer comps, determining which layers
appear on which pages, or managing pages in the Content Manager, see the Pages Reference.
For information about setting page background colors and tiles see the Background Colors and Tiles
Reference.
Understanding the Content Area
Before you learn the details of SiteGrinder's page size and alignment features it's important to understand
the meaning of the "content area" and the things that are inside and outside the content area.
The "content area" of a page is the main event: it is the highest priority for the browser to display because
it's the stuff your site visitors are coming to see. If the site visitor shrinks the browser window the
browsers will crop decorative areas of your design (like background tiles) before it crops content.
This section describes how to indicate to browsers what the protected content area of your page is.

182
Content Size from Document Dimensions

Examine the following page design in Photoshop:
Figure 1.
We have some decorative background globe images jutting out beyond the content area on the left and
right.
If we don't use a -pagesize layer then everything in the document is considered content. The main
practical result of this is what happens as we shrink the browser window.
IMPORTANT: With no pagesize layer the entire document width is considered content.
As a result this is how the built page will look in a browser if the window is made narrower than the
Photoshop document:

183
Figure 2.
Notice once the left edge of the original Photoshop document reaches the left edge of the browser
window the document begins to crop on the right as the window is made even smaller.
For this design this isn't what we want because the parts of the globes that stick out to the left and right
aren't really content. That's where the -pagesize layer comes in.
Content Size from a Pagesize Layer

We'd rather have the browser window cropping not start until the left edge of our true content (the area
enclosed by the central dark blue column) hits the left side of the browser window.
We can fix this with a -pagesize layer rectangle as shown in red below in Photoshop:

184
Figure 3.
The next image shows what happens when the design in Figure 3 above is built and the resulting page
displayed in a narrow browser window:

185
Figure 4.
Compare Figure 4 with Figure 2. In Figure 4 the smaller browser window crops the decorative images
from the left and right while keeping the content area visible.
Note: This page design uses SiteGrinder footer techniques to create the bottom footer tile. The bottom
edge of a pagesize window always has to be above the top edge of the footer, which is why the red
-pagesize layer in Figure 3 doesn't extend to the bottom of the document. If you are interested in learning
more about footers see the Page Footer Reference.
Best Practices
If your design doesn't include images that need to be outside the content area and you are using centered
page alignment you don't need a pagesize layer - you can just make your document the size of your
content. Browser background tiles that will fill the space between your content area and the browser
window edges will work just fine even if you can't see them in the document because they are covered in
the content area by other layers.
On the other hand, even if you don't strictly require a pagesize layer they can be handy. They enhance
the preview in the Photoshop document by allowing you to see your content within a larger tiled area
such as what you will usually see in the browser window.
Photoshop New Document Settings
When you create a new empty Photoshop document to use with SiteGrinder most of the settings are the
same every time.

186
Figure 5.
Page Name
The name of your file is actually pretty important. It is how SiteGrinder will connect your file to your
builds. If you change the file name and rebuild you will lose any settings you've chosen in the Design
Manager. If you change the name back to the original you'll get the settings back next time you build.
Dimensions
There are a few guidelines for setting your dimensions:
If you are just building a temporary document to test out a feature or an idea the dimensions really
don't matter as long as they are large enough for you to fit your test content in.
Horizontally: Most users have monitors that display 800 pixels across horizontally, so 750 pixels
is a very safe width accounting for scroll bar etc. Many modern sites are as wide as 950 or 1000
pixels.
Vertically: Make the document as tall as you expect the tallest page on your site to be. The
browser will know where the lowest element on any particular page ends and will take care of
scrolling automatically.
Individual pages that need different dimensions can be easily created using the -pagesize hint.
Other Settings
The following additional document settings should be used:
Color Mode: RGB, 8 bits per channel

Color profile: sRGB
Pixel Aspect Ratio: Square

187
Resolution: 72 pixels/inch
Background Contents: If you will be using a white background for your page choose " White".
Otherwise choose "Transparent" and later create an image layer the size of the document to use
as your browser-backgroundcolor layer.
It's useful to create your own preset with these settings.
The -pagesize Hint
The -pagesize hint allows you to control the following aspects of your pages:
Page content alignment other than the default of center aligned

Page content dimensions for each of your pages
Page content background colors and tiles separate from the browser window background colors
and tiles
The -pagesize hint is used on a large image layer near the bottom of the layers palette. If that layer is
visible on the page's layer comp, then that will set the size for the page. This means you can use multiple
pagesize layers in a single document. They are linked to their layer comps not by name, but by whether
or not they are visible in the layer comp. This means only one pagesize layer can be visible in a given
layer comp.
Note: The -pagesize layer is a boundary used for reference only. It will not appear on the final web page.
It can, however, be used to specify a background color for the page content area and/or a repeating tile.
(see below)
Page Size vs. Browser Window Size
If you don't use a pagesize layer then the dimensions of the Photoshop document defines the page content
area. The width is what's most important because SiteGrinder pages can easily expand or contract
vertically after building.
If you use a -pagesize layer then your document can be larger than the content area for more natural
previewing of things like background tiles. The content area tells the browser what the dimensions are of
the "important" parts of the page.
Inside and Outside the Pagesize Layer

Except for columns, layers can be placed outside the -pagesize layer. They'll still appear on the page, but
if the browser window is shrunk horizontally, it won't stop until it hits the edge of the -pagesize. Thus,
you can place elements "outside" the page that are only seen when the browser window is expanded
open.
Footers created from the footer-backgroundcolor or footer-background hints should be placed outside the
pagesize area. These kinds of footers attach to the bottom of the browser window unless the browser
window is not tall enough to show the entire page. In that case the browser window will have to display
a scroll bar and the footer elements will be positioned the same distance from the bottom of the pagesize
layer as they were in the original Photoshop document.
Elements in a -footer layer group can be outside the -pagesize rectangle. In that case they'll be cropped
out as the browser window is made more narrow, and they'll also maintain the distance from the bottom
of the browser window that they had from the bottom of the Photoshop document.

188
Pagesize and Tiles and Colors
The pagesize layer itself is a placeholder and will be invisible on the final web page. However, if the
Color Overlay layer FX is applied to the layer, it will set the page content background color to the one
chosen for the Color Overlay. And, once Color Overlay is being used, layer opacity is supported as well.
A repeating tile pattern can also be placed into the pagesize area using a -background layer.
The area covered by a -pagesize layer's color or tile is not the whole browser window, but only the size of
the contents of the -pagesize layer.
See Background Colors and Tilesfor details.
Expanding Pages
The pagesize is used to set the initial size/margin of the page. Unless you use it in conjunction with
-scroll, it in no way limits the page from expanding.
If a pagesize layer has a background color or tile specified for it, then that color or tile will extend all the
way to the footer if there is at least one column on the page. If there are no columns on the page, the page
will not expand.
Page Alignment
The base name of the -pagesize layer can be used to select the alignment for that page.
left-pagesize => Left alignment

right-pagesize => Right alignment
center-pagesize => Center Horizontal
centerhv-pagesize => Center Horizontal and Vertical (cannot be used with footers)
All other names result in Center Horizontal.
If no -pagesize layer is used, the resulting pages will use the default Center Horizontal alignment.
The "Center Horizontal and Vertical" option is generally not recommended and should only be used with
content short enough to be guaranteed fit entirely on browser window.
Pagesize Restrictions
Only one -pagesize layer can be visible on any given layer comp -page. There can be multiple
-pagesize layers in a single document, but only one can be visible on a given page.
All columns on a page must be contained within the bounds of the -pagesize layer. Columns that
extend over the edges of the pagesize will not layout correctly.
Page alignment set to Center both Horizontally and Vertically cannot be used with footers.

189
Page Footers
Introduction
The Simplest Footer
Defining a Footer With Boundary Layers
Defining A Footer With a Layer Group
When to Use a Layer Group Footer
Important Tips for Creating Footers
Restrictions on Footers
Introduction
A footer is that part of the page that is displayed at the end of the "content".
There are different varieties of footers exhibiting some or all of the following features:
The same footer can appear on many or all of a site's pages

A footer can appear just after all the unique content for a page and move up and down if the
content changes in length
If the web browser window is taller than the combined height of the footer and the non-footer
contents, some footer varieties will appear at the bottom of the browser window instead of at the
bottom of the content.
Footers can have background colors and/or tiles that are the height of the footer and stretch from
one side of the browser window to the other.
SiteGrinder supports all of these footer features.
The Simplest Footer
Many site footer needs can be met without even employing any of the variations on SiteGrinder's -footer
hint.
Without the -footer hint you can still create an area of the page that appears after your content and
maintains a constant distance from the bottom of the content. All you have to do is put a layer with the
-column hint behind and around the "content" layers. The rectangular boundaries of this column layer
should not intersect the contents of any of the layers you'd like to make part of the footer.
If you set up your document like this, the layers with top edges that are below the bottom edge of the
column layer will naturally move up and down to maintain a constant distance from the bottom of the
column if the column grows taller or shorter.
What you can't do with this method:
This method doesn't support footer background colors or tiles that stretch to the edges of the
browser window.
This method doesn't support footers attached to the bottom of the browser window.
Defining a Footer With Boundary Layers
Footer contents are usually set using boundary image layers with the hints footer-backgroundcolor and/or
footer-background.

190
Layers with these hints serve a number of purposes:
The rectangular boundaries of their layer contents determine which smaller layers are included in
the footer.
Their layer styles control the color or tile of the background of the footer.
Their layer height determines the height of the background color or tile.
Footer defined this way will align with the bottom of the browser window when the window is
taller than the page contents.
Like other backgroundcolor hints you set a footer-backgroundcolor layer's color by applying the Color
Overlay layer style and selecting the color in the layer style settings dialog. And like other background
hints you set a footer-background layer's tile by applying either the Gradient Overlay or Pattern Overlay
layer style.
You can use both a footer-backgroundcolor and a footer-background on the same page to combine a tile
that is shorter than the height of the footer with a footer background color.
The bottom edges of footer-background and footer-backgroundcolor layers must touch the bottom of the
canvas (i.e. the bottom edge of the Photoshop document).
You can have different footers for each page because footer layer visibility in page layer comps
determines which pages a given footer layer is used with.
Defining A Footer With a Layer Group
If your document has a footer-background or footer-backgroundcolor layer, then any layers that appear
over them are automatically placed into the footer.
If you are not using the -background or -backgroundcolor layers, or if you have other layers that you want
to include in the footer, then you can still get those layers into the footer by placing them into a layer
group and adding the -footer hint to the layer group's name.
You can still include footer-background and/or footer-backgroundcolor layers to set the background
appearance. The difference is that footer-background and footer-backgroundcolor layers no longer
determine which other layers are included in the footer when using the -footer layer group technique.
When to Use a Layer Group Footer

The primary purpose of this feature is to allow arbitrary layers to be anchored to the bottom of the
browser window even if they aren't not positioned within the bounds of the footer-background or
footer-backgroundcolor layers.
If you don't need that effect then you should stick with the boundary layer approach described in the
previous section.

191
Important Tips for Creating Footers
All elements in the footer and any footer-background layers, should be placed as near the top of
the Layers Palette in Photoshop as possible. In particular they should be positioned higher in the
layers palette than any columns or elements in a column. Doing so will keep your Photoshop
document looking like what you can expect to see in the browser.
The footer-background or footer-backgroundcolor layer should be the full width of your
document for accurate preview.
Place all footer layers near top of layers palette, above all columns and layers in columns.
Restrictions on Footers
-column layers cannot be placed into a -footer layer set.

The footer only follows the content if you at least one -column layer. Otherwise the footer will
simply be affixed to the bottom of the browser window.
Footers cannot be used with Center Horizontal and Vertical page alignment. They work fine with
Center, Horizontal only, Left, or Right alignments, but not with vertical centering.

192
Columns
Contents
Contents
Introduction
The Problem
The Solution
Scrolling Columns
Dynamic Column Layout
Layout With A Single Column
Demonstration of the Problem
Demonstration of the Solution
Footers Without the Footer Hints
Setting the Minimum Height for a Column
Multiple Content Columns With a Single -column Layer
Limitations of Using a Single Column
Multiple Content Columns With Independent -column Layers
Layout With Nested Columns
Content vs. Background Images in Columns
Automatic Column Background Images
Panels: Combining Background Images With Content
Show and Hiding Columns
Limitations and Tips for Hiding and Showing Columns
Column Troubleshooting
Using Layer Styles
Column Background Tiles
Column Backgrounds Tiles With the Centercut Hint
Column Backgrounds Tiles With the Background Hint
Column Tile Example
Centercut Solution
Background Solution
Deciding Between Centercut and Background
Limitations of Columns
Best Practices

193
Introduction
This document assumes you have read the Page Layout Essentials Guide so please do so now if you
haven't.
Columns are the heart of SiteGrinder 3's next-generation layout features.
SiteGrinder 2 Users Note: The -column hint is the replacement for the SiteGrinder 3 "-grow" hint which
is no longer supported. Columns are like -the grow hint on steroids; the kind of steroids that make your
head swell to the size of a contest-winning pumpkin..
Using columns we can group many page elements so they rearrange themselves intelligently when other
page elements change size or position. Columns can also ensure backgrounds and borders behind these
changing areas stay beautiful and organized.
The Problem
Sometimes elements on your web pages will change in height making them no longer the same size they
were in the original Photoshop design.
There are many possible reasons for this. Some of the most common are:
The site visitor forces the browser to increase text size, causing text areas to get larger.
You edit the contents of a text layer in the Content Manager causing it to take up more or less
room than it did previously.
The element size is initially unknown because the element contents are coming from a remote
source that isn't always the same, such as a Google document.
The element is designed to change height based on the number of sub-elements. Some
thumbsheets grow as much as is required to display all of their thumbs, for example, so the height
depends on how many images are in your gallery.
When these and other situations arise and elements change in height from their original size this can
cause layout problems. In particular if an element is positioned too close to another element vertically
then the element that is closer to the top of the page will overflow its original dimensions and interfere
visually with the lower element as it grows. Depending on which element is higher in the layers palette
the element closer to the bottom edge of the page will either cover the now taller content or will itself be
covered by it.
Another problem with elements that grow is that they can outgrow their own background graphics. An
element like text that is visually bounded by a gradient-filled rectangle with a drop shadow may simply
overrun the visual boundary if the text gets longer due to editing in the Content Manager.
The Solution
Columns exist to solve the problems described in the previous section. A column is a rectangular
boundary surrounding a collection of layers. The column organizes these elements so that they are
vertically organized for the purposes of facilitating scrolling or growing.
The layer that has the -column hint is just a large placeholder layer near the bottom of the layers palette.
A column layer represents a rectangular boundary. Every layer that is positioned within the bounds of
the -column layer will be potentially controlled by the column.
To be positioned within a column layer, other layers have to meet all of the following conditions:

194
They must be higher than the column layer in the layers palette.
Their content rectangles must be the same size as the column rectangle or smaller.
Their layer contents must be positioned inside the column layer's rectangle (or exactly on top of
the column layer if the contained layer has the same dimensions.)
The -column layer is usually used for reference only as a way of bringing SiteGrinder's attention to
certain layers.
The column layer itself will not have a visual representation on the final web page except in the
following cases:
columns with a name matched -centercut layer (ie "News-column" matching to "News-centercut")
columns with a name matched -background layer when the -background layer has the Gradient
Overlay or Pattern Overlay layer style (ie "News-column" matching to "News-background")
columns with the Color Overlay layer style applied
columns with backgrounds and borders applied in SiteGrinder's Design Manager
Columns will automatically expand vertically unless a column uses the -scroll hint, as discussed below.
Columns can contain items that overlap one another. They can contain items that sit next to one another
side by side. The column layout will attempt to preserve all these relationships, even as the text size
changes and as the content grows or shrinks in length as it is modified.
Scrolling Columns
If you add the -scroll hint to a column it will not grow to accommodate expanding content. Instead, if its
content expands to an area larger then the -column's original rectangle it will display a scrollbar the site
visitor can use to view the rest of the content. This is a very handy technique to allow for content of
unknown size without having to worry that your layout will change in height at all.
See the Scrolling Reference Guide for details.
Dynamic Column Layout
If you want you pages to be able to adapt to changing element sizes then you'll use one or more columns
to keep everything under control.
NOTE: Columns allow elements to maintain their positions relative to each other horizontally and to
shift areas vertically, but they do not adapt to elements which grow horizontally.
Keep in mind that for clarity the examples in this Dynamic Layout section use no background colors or
tiles. But all of the techniques described in this section will work the same whether columns use
backgrounds or not.
We'll start with a simple example and then move on to more sophisticated uses of columns.
Layout With A Single Column

A single column layer can handle the layout needs of many basic page designs.
Demonstration of the Problem

Take a look at the following page design as it appears in Photoshop:

195
(You can also download the Photoshop example file to see the layers and build the design.)
Figure 1.
There are 5 labeled areas:
1. The header has a menu and logo with a decorative tile behind.
2. The top text is a type layer exporting as CSS text.
3. There is a decorative image layer.
4. The lower text is another type layer exporting as CSS text.
5. Finally there is a separator image below which is a menu and some text.
There's no column here, just the layers described above.
Let's build it and see what happens in the browser:

196
Figure 2.
Something unexpected and annoying has occurred. The text is taking up more vertical space in the
browser than it did in Photoshop. Notice in Figure 2 that the upper text has overrun the image (#1) and
the lower text has overrun the bottom elements (#2).
This happened because browsers don't always render text the same way Photoshop does. Factors like
hyphenation (which Photoshop can do but browsers won't), kerning differences and other typography will
make large sections of text different sizes in the browser than in Photoshop. They'll even differ from
browser to browser.
We need somehow for the top paragraph to push down both the center image and lower paragraph.
Meanwhile the lower paragraph needs to push down the bottom page elements as it is moved down by the
upper elements and is itself expanding down.
Amazingly enough, a single column layer will handle all of this for us.
Demonstration of the Solution

Column layers keep the distances between elements inside them consistent even if they change in vertical
size.
Take a look at the same document in Photoshop with an added orange -column layer:

197
Figure 3.
The new layer has the "-column" hint and its contents are a rectangle that "contains" the problem layers.
It contains them because it is lower than they are in the layers palette, making it behind them in the
document, and its rectangle completely surrounds all of them.
Here is the layer order as displayed in the layers palette:

198
Figure 3A.
As you can see in Figure 3A above, the two text layers and the gold divider shape (#1-#3) sit above the
column layer (#4). The layer order of the top three doesn't matter as long as they are above
"main-column".
Columns not only organize the layers they contain, they also push down layers below and outside of
themselves, as in the layers in Figure 3 that are at the bottom of the page outside of the column rectangle.
It tells SiteGrinder that the elements it contains are organized in a vertical stack and that if any of them
get taller they need to push others down to maintain the original separation.
As a result of the column, building the file again gives this perfect result in the browser:
Figure 4.
Notice that the orange -column layer doesn't actually appear on the page, it just makes the layers it
contains behave. And they will continue to behave. If you use the Content Manager's text editor to
lengthen or shorten either of the text layers then the other column elements will reposition themselves

199
perfectly.
NOTE: Column layers can make background colors and repeating tiles appear behind the contained
elements depending on hints and layer styles. See the Background Colors and Tiles reference for details.
In Figure 3 above notice that we left the top-most and bottom-most elements of the page out of the
column. This was a somewhat arbitrary choice. Since the whole page from top to bottom is a vertical
stack the column could have contained everything, or everything below the header. But in practice it's a
good idea to keep only the elements that really need the column inside of it. In this case the header
graphic (the "Company" logo) and menu are never going to grow vertically so they don't need to be in the
column. And the bottom elements won't conflict with anything if they grow vertically because they're
already at the bottom of the design. The main point here is that columns are pretty flexible, and as long
as we included the three layers contained in Figure 3 we could optionally include any of the others and it
would all just work.
Footers Without the Footer Hints

Page elements whose top edges are below the bottom edge of the columns are automatically put into the
"riding footer" of the page. This means that all layers below the bottom edge of the lowest column move
automatically when the column expands. That's what happened in the above example.
This kind of footer, which doesn't use any of the footer hints, will stick to the bottom edge of the
column.
A more "web 2.0" footer, which sticks to the bottom of the browser window, as well as providing a
separate infinitely wide footer background color or tile, is what you can gain from using the various
footer hints.
See the Page Footer reference for details.
Setting the Minimum Height for a Column

Columns never become shorter than their original height in the Photoshop document. In Figure 3 the
orange column area will always be at least the height shown even if the text contents become smaller.
This will keep the elements below the bottom edge of the column always at least that far from the top of
the design.
If we wanted the column to be able to get shorter than what you see in Figure 3 we would also need to
shorten the type layers so that they would still fit within the column.
Multiple Content Columns With a Single -column Layer

Columns are surprisingly smart. A single -column layer can handle more than a single vertical stack of
content.
To demonstrate this we'll modify the Photoshop file from the previous example to add another vertical
stack of content on the left. We'll narrow the original layers to make room.
Below is the modified Photoshop document with the same single large orange -column layer:

200
Figure 5.
From the previous example you might think we'd need two -column layers, one on the left surrounding
the left hand narrow layer and one surrounding the right hand wider layers.
But in fact as long as the layers from one side don't extend into the layers on the other side then we can
use a single column layer, much like the previous example:
Here are two images of the same result in the browser, edited in the Content Manager so one side is taller
and then the other:

201
Figure 6.
Notice the page bottom elements always stay below the taller of the two sides. Everything works because
the SiteGrinder column system noticed that its content was organized into independent vertical stacks.
Using two separate -column layers would also have worked but is unnecessary.
Limitations of Using a Single Column

As we saw from the previous example a single -column layer can do a lot, but it does have some
limitations.
The main challenge is that because SiteGrinder can't actually read your mind it has to make some guesses
about the relationships between individual elements they contain.
To demonstrate how a single column might misinterpret your intentions we'll take the previous example
and make it a little more complicated. We'll split the left side into multiple pieces similar to the right
hand area.
Below is the modified Photoshop document, again with the same single large orange -column layer:

202
Figure 7.
And here is the built page in the browser:

203
Figure 8.
Compare Figure 7 to Figure 8. You might have assumed SiteGrinder would position the top of the lowest
paragraph on the left just at #1 in Figure 8 close under the small yellow image. That's where it was in the
Photoshop document.
But notice that the -column's influence has instead maintained the vertical distance from the bottom of the
upper right type layer, indicated by the line labeled #2 in Figure 8.
The reason SiteGrinder did this is because the top edge of the lower type layer on the left was below the
bottom edge of the upper type layer on the right in the original Photoshop document. In many cases this
is what you will prefer, for example when preserving the horizontal row arrangement is more important
than the vertical stacking. But in this case we'd prefer the vertical areas to be independent.
Since we want to make the elements on the left independent of the elements on the right we'll need to let
SiteGrinder know by using two separate -column layers, which we'll do in the next section.

204
Multiple Content Columns With Independent -column Layers

To tell SiteGrinder that the left side content should reposition its elements without worrying about the
right side content we'll shrink the first -column layer horizontally so it only contains the right hand
content layers and add a new orange -column layer to contain the left hand content layer.
You can use as many -column layers as you need for your layout but is crucial that they not partially
intersect each other.
Here is what the new independent layout with two -column layers looks like in Photoshop:
(You can download the Photoshop file for this version).
Figure 9.
And here is the result of building it to the browser:

205
Figure 10.
Now the relative positioning of the SiteGrinder columns matches what we want.
Layout With Nested Columns

The real organizational power of columns is that you can place a column entirely within another column.
That pair of columns, one containing the other, can be in yet a third column, and so on. This is possibly
the most powerful and flexible system of automatic web layout that has ever been created.
Let's add an additional challenge to the previous example. We'll split the upper right text into two type
layers and move the image under the left one.
This is what the new version looks like in Photoshop:

206
Figure 11.
Unless we do something we can anticipate that this is going to behave similarly to what happened in the
layout shown in Figure 8.
Looking at Figure 11, the image layer (#3) is going to move down if either the paragraph above it (#1) or
the one above and to the right (#2) grow taller. This is for the same reason as in the previous example,
the top edge of the image layer is below the bottom edge of both paragraph layers, so either will push it
down. In many cases this is the behavior we will want.
But in this design we'd like the image to only move down when the paragraph directly above it expands.
Meanwhile the paragraph on the right (#2) should expand with no effect on anything until it hits the
bottom paragraph (#4) at which point it should start shoving #4 down.
The trick to make this happen is very similar to what we did in the last example: add another -column
layer surrounding #1 and #3.
This is what it looks like in Photoshop (the new column rectangle is a darker color than the others) :

207
Figure 12.
Notice that the new brown -column layer's rectangle is fully contained within the larger right side column
rectangle. (Inner columns can be flush at the edges with the columns that contain them.)
Columns can be "nested" this way with one inside another as deeply as you need to, though in practice
you'll rarely need more than one level of nesting.
IMPORTANT: The main restriction here is that columns cannot partially intersect other columns. They
have to be entirely separate from the each other, as in Figure 9, or entirely contained, as in the right side
of Figure 12.
Content vs. Background Images in Columns

In all the previous examples you will notice that the gold-colored image layers (as in #3 in Figure 12
above) moved to make room for the text content elements. For the purposes of our design that was what
was appropriate.
But you can imagine other situations where you have images within a column that should be locked to the
background of the page and should not move up or down to accommodate the changing sizes of other
elements.
Columns can handle images in both situations automatically.

208
To do this SiteGrinder makes some assumptions about images inside columns that are generally correct:
If an image is unobstructed, in other words if there is no type layer higher than the image in the
layers palette that intersects it, then it is considered to be a content element that should move as
necessary if elements change in size.
If any part of an image is obstructed by a type layer, then it is considered to be a background
element and will not move when elements change in size.
Automatic Column Background Images

Let's look at an example where this system is exactly appropriate. (In the section following this one we'll
look at what happens when it is not.)
We'll modify the file we've been using so that the image element sits in the background of the column.
The new version looks like this in Photoshop:
Figure 13.
In Figure 13 you can see we've enlarged and centered the image (#3) in the large column and as a result
the two upper type layers (#1 and #2) are on top of parts of it. This intersection means SiteGrinder will
consider the image to be background decoration and so the image position will remain unchanged if #1 or
#2 grow or shrink.

209
Panels: Combining Background Images With Content

The -panel hint is used on rectangular placeholder layers just like the -column hint.
The purpose of panels is to designate a set of layers, both web content and decorative background, that
always stay in the same position relative to each other and act as a unit of content.
We'll add some new areas to our design that contain text content sitting on top of images.
This is what the new version looks like in Photoshop:
Figure 14.
Notice in Figure 14 that we have added small rectangular graphical frames to highlight some new content
text. As we saw in the previous section the fact that the type layers are on top of the images behind will
cause SiteGrinder to make the new image layers into non-moving backgrounds.
If the paragraph above the new elements grows down in the browser the text will shift but the image
backgrounds will not, resulting in the following in the browser window:

210
Figure 15.
As you can see on the page and close up in the magnification the top-most paragraph has pushed down
the new text layers we added but not the new image layers.
The solution is to put a -panel layer behind each of the new elements. This causes each panel unit to be
considered content that will move together as a unit.
Here is the layer structure in Photoshop:

211
Figure 16.
Notice the -panel layers themselves are plain white rectangles. The decorative and content layers fit
within the -panel layer bounds.
The build in the browser is now correct:

212
Figure 17.
Show and Hiding Columns

I know this is reference documentation, so this comment is probably not appropriate, but if this feature
doesn't totally amaze you you may want to consult a therapist.
Column layers can use the -clickshow, -clickhide, -hovershow, and -hoverhide hints. (For details on
those hints see the Mouse Interaction Reference.)
Why is that so amazing? Because of this: remember how columns organize their contents as elements
change in size? Well the system still works even if an element completely disappears or appears from
nowhere. If a -column with one of the show or hide hints is inside another -column then when it shows
or hides the other elements in the larger column will move as appropriate.
We'll demonstrate this with a small modification to the example file we've been working on.

213
We'll take the file shown in Figure 13 and make the following changes:
We'll add a -column layer containing the top two paragraphs on the right
We'll name the -column layer "Surprise-column-clickshow"
We'll add a button on the top right under the "Company" logo named "Surprise-button"
The result looks like this in Photoshop:
(You can download the Photoshop file .)
Figure 18.
The new "Surprise-button" layer is labeled #1 above.
The darker area (#2) is the "surprise-column-clickshow" layer and contains the two paragraph type
layers. It is itself contained by the larger orange column.
When the new column appears (after clicking the Surprise-button) the page will look exactly as it would
if there were no -clickshow hint. When it is hidden the page will look as if that column and its contents
did not exist.
Because the column is using the -clickshow hint it will be hidden when we first arrive on the page. If we
had used -clickhide then it would initially be shown.

214
Here is the built page in the browser when we first load it:
Figure 19.
Notice that the -clickshow column contents are not visible.
What's even more important to notice is that the paragraph below the clickshow column has moved up
from its position in Photoshop. It has moved up a distance equal to the height of the now hidden column
above it. When the column is shown then the lower paragraph will move back down the same distance to
make room.
When we click the "surprise-button" the browser view changes to display this:

215
Figure 20.
And, most fun of all, SiteGrinder can animate the appearance and disappearance of showing/hiding
columns just like other show/hide elements.
Limitations and Tips for Hiding and Showing Columns

Columns can work when the sub-elements intersect each other, but results are not guaranteed. It's
best to keep the bounding boxes of content elements inside a column from intersecting each other.
Unlike other kinds of layers used with hide/show, columns must be visible in the layer comp
when you build the page.
You can make multiple hide/show -columns inside a single containing -column and they can be
triggered by different buttons. If you do this then they must all be visible in the layer comp and
they cannot cover or intersect each other. They must be in a vertical stack.
If you want to have a collection of layers appear or disappear without affecting the positions of
any other layers then use the show/hide hints on a -panel instead of a column.

216
Column Troubleshooting
Sometimes the elements in a column may shift around and not appear exactly as you anticipated.
Here are some guidelines:
1. Avoid overlapping elements in a column. Try to keep the inner layers separate so that they do not
overlap.
2. If elements must overlap, they must do so completely. Any element that completely overlaps one
or more other elements in the column is not a problem - it will be safely moved to the background
or foreground of the column.
3. If elements must overlap, try to keep the overlap between two elements at a time, never three or
four. Two overlapping elements isn't a problem - the column can easily sort them out. But three
or four different elements overlapping at some location create indeterminacies that will probably
not layout well.
4. Be wary of long words in text, long runs of characters with no spaces in them (such as urls or
pathnames). Photoshop may be able to auto-hyphenate, forcibly wrap, or truncate a long runs of
unspaced characters. But many browsers will not. A long run of characters with no spaces that is
"wider" than the column itself may not only adversely affect the layout of the elements within a
column, it may also affect the layout of the other columns.
5. If you are using a -pagesize layer then all of your -column layers must fit entirely inside its
boundaries.
Columns allow you to specify arbitrary rectangular boundaries to manage groups of smaller items that
have the potential to change size and position. Columns can have their own unique colors and
background tiles.

Column background colors can be set using layer styles or using the Design Manager's Background and
Border controls.
Using Layer Styles

To set a background color for a column, just apply the Color Overlay layer style to the layer you added
the -column hint to. Unlike the browser background, column layers don't use associated
-backgroundcolor layers.
NOTE: No other layer style aside from Color Overlay will have any visual effect on the column. If you
want your column to have a drop shadow you will need to place an image layer within the column area.
Such a layer can use layer effects but the layer and its effects must fit within the bounds of the column.
If you use the Color Overlay style on a column you can also set the -column layer's layer opacity to
something other than 100 to make the column's background semi transparent on the built page. Not all
browsers support this.

Once you build a design with a column, you will find the column listed in the Design Manager's Borders
and Backgrounds panel. There you can set border and background settings, including with rounded
corners and drop shadows.

217
Note: If you have image layers within the column that have semi transparent pixels, SiteGrinder will
composite them to the column background from within the document. Changing the column background
color using the Design Manager may cause such graphics to no longer appear correctly.
Column Background Tiles

There are two distinct methods for setting column background tiles:
Use a name-matching -background layer

Use a name-matching -centercut layer
Column Backgrounds Tiles With the Centercut Hint

Using a centercut layer allows you to specify a vertical cross-section of the column layer that represents a
tile that can repeat vertically. This allows you to have a non-repeatable image background at the top of
your column, such as complex rounded corners, and another one at the bottom with an arbitrarily
expandable area in between the two.
Centercut requires that the -column layer contain the background image and the -column layer can have
no layer style. If you have a layer style on the column you'll need to render it into the layer contents.
(For details about rendering layer styles into a layer see the Photoshop Techniques Reference.)
Centercut layers cannot extend beyond the Photoshop canvas (ie beyond the edges of the Photoshop
document) an cannot overlap the top or bottom of the column.
Column Backgrounds Tiles With the Background Hint

Using a -background layer that matches the name of the column and has either a Gradient Overlay or
Pattern Overlay layer style will fill an area of the column rectangle based on the repeat options indicated
by the position of the contents of the background layer. (see below)
This method is simplest if your column doesn't need top or bottom "cap" images. If you do need such a
top or bottom to your column you'll have to create separate layers and position them flush at the top and
bottom of the column layer.

Tiles created with centercut layers always repeat vertically only.
For the contents of -background layers used with column layers more options are available.
Similar to browser-background layers a column's -background layer determines the repeat option by size
and position. Unlike the browser-background layer, you will position the column's -background layer
relative to the boundaries of the -column layer instead of relative to the whole document.

Make the layer contents touch the top, left and right sides of the -column layer, but not the bottom.

Make the layer contents touch the top, left and bottom of the -column layer, but not the right side.

Make the layer contents touch all sides of the -column layer. The quickest way to do this is to duplicate
the column layer and use the new copy as the -background layer.

218
In practice if your pattern is the same width as the column layer then this option is the same as repeating
only vertically because there's only enough horizontal space for the tile to repeat once. You may want to
create a -background layer that is the full width of the layer even if you are only tiling vertically because
it will more closely match what you'll see on the built page.
Column Tile Example

Take a look at the following layout:
Figure 21.
Figure 21 demonstrates a fairly common "rounded-rectangle" background design. (Don't worry about the
specific layers yet, just focus on the overall design.)
If you've read the first part of the Column Reference you can imagine the column we might use to
organize the content layers, but what about the background?
If we hide the content layers we can clearly see the visually unique background areas:

219
Figure 22.
Area #1 above is the top of the rounded rect background.
Area #2 above is the part of the rounded rect that is entirely filled with a vertically repeating tile and
which is behind the content. (The tile includes the left and right borders, the wide white background, and
the narrower light blue-grey background on the right.)
Area #3 is the bottom of the rounded rect.
In this scenario areas 1 and 3 are not tiled, but area 2 is. Every one-pixel-high horizontal slice of area 2 is
identical to every other horizontal slice of area 2. The backgrounds of areas 1 and 2 can't grow and
shrink, but the background of area 2 can.
Area 2 presents us with the perfect opportunity to use a column in conjunction with the repeating
background. We just need a way to associate the column with area 2.
We can use either a -background layer or a -centercut layer to achieve this effect.
Centercut Solution
To set this up with a -centercut layer we need to have a -column layer that not only surrounds our content
layers, but also has the column background graphic as its contents.
We'll then create a -centercut layer to tell SiteGrinder what portion of the column rectangle is vertically
tiled.
Here is what our single -column layer, named "main-column", looks like:

220
Figure 23.
Notice it isn't simply a rectangle as we saw in the layout examples in the first part of this document. It
contains the entire background including the top and bottom non tiled areas. While layer styles may have
been used in the course of creating this look, they have been rendered into the contents of the column for
this solution because centercut doesn't work with column layers that have layer styles.
Now we need to create an image layer with the centercut hint named after our column layer,
"main-centercut". The contents of this layer will be a single rectangle to tell SiteGrinder what cross
section of this column layer is a vertically repeating tile.
Both layers together look like this:

221
Figure 24.
The yellow rectangle is the -centercut layer. We have reduced its layer fill in the layers palette so you
can see through to the column beneath.
This -centercut layer gives SiteGrinder the information it needs to allow this column's background to
grow or shrink vertically to match the height of the content.
The height of the -column layer is important. The closer the layer height is to including the entire
repeating area the more efficient SiteGrinder can be when it creates the web page, but total pixel-perfect
precision is not necessary.
The width is less important. Notice that the yellow -centercut layer extends to the left and right beyond
the edges of the -column background. SiteGrinder only looks at the non-empty horizontal cross section
of the -column layer, so the -centercut layer can extend as far as you like to the left and right.
Background Solution
To use a -background layer we will need to split the layer shown in Figure 23 into three layers, one for
the top, the content, and the bottom.
The layer containing the top looks like this:
Figure 25.
The layer containing the bottom looks like this:

222
Figure 26.
At this point we will create the -column layer to fit exactly between them. Only -centercut uses the
-column layer contents to determine the appearance of the background. Since the -background layer will
supply the column background we'll just use a solid color rectangle for the column.
The three separate layers are positioned like this in the document (with the -column layer selected):
Figure 27.
None of the three layers intersect each other. Instead they create a continuous vertical stack, the bottom
edge of one flush with the top edge of the next. Their order in the layers palette isn't important, though
it's convenient to keep them together:

223
Figure 28.
As discussed earlier in this document, the -column layer will automatically move the bottom layer down
when it needs to grow. (In fact it would also work this way if the in the orange rectangle -column layer
extended down to contain the bottom, but we don't want the bottom to have the tile we are going to apply
in the next step behind it.)
If we didn't need a background tile for the column and just wanted a flexible top and bottom we would be
finished at this point. Content layers inside the orange -column layer would be able to grow and move
the bottom layer down.
The next step is create the Pattern we'll be using on the -background layer.
Looking at Figure 23 we can see that the repeating part of this design lends itself much more to a pattern
than a gradient. We'll use Photoshop's "Define Pattern" command in the "Edit" menu to create a one
pixel high pattern.
The pattern, repeated a few times so it's easier to see, looks like this:
Figure 29.
Notice it contains the thin border on the left and the wider light grey area on the right.
The final step is to create a new image layer, assign it the pattern we just created using the pattern overlay
layer style, and name it "main-background" to match the -column.
The quickest way to do this is to duplicate the -column layer so we have a layer of the same size and
position, name it, and apply the layer style to it.
Because the new "main-background" layer is the same size and position as the column layer we are
indicating to SiteGrinder that we want the tile to repeat horizontally and vertically even though this is a
vertical tile. This is fine because when the tile is the same width as the column there's only enough
horizontal room for the tile to repeat once.
IMPORTANT: The width of the pattern is not the same as the width of the layer the pattern overlay
effect is applied to. You can apply a 500-pixel-wide pattern to a 200-pixel-wide layer...but you'll only
see the first 200 pixels of the pattern. This is important because often you'll use placeholder layers in
SiteGrinder with the Pattern Overlay effect. SiteGrinder will use the full width of the pattern when it can,
not the width of the layer the pattern is applied to. In this example if the pattern width doesn't match the
width of the column layer it may not repeat the way you expect.
The final set-up looks like this:

224
Figure 30.
The "main-background" layer covers the "main-column" layer, which is nicely WYSIWYG.
Here are the layers in the layers palette:
Figure 31.

225
Deciding Between Centercut and Background

As you can see from the previous example, the centercut approach requires many fewer steps and is
usually simpler and quicker.
There are the reasons you might prefer to use the -background layer approach:
Centercut can only create vertically repeating tiles. Background supports horizontal repeating as
well as horizontally and vertically repeating tiles.
The column section below the centercut (the bottom cap of the rounded rect in the above centercut
example) cannot contain content.
Because the centercut approach requires you to render your layer styles into the contents of the column
layer you will probably want to keep a pre-rendered version around with the -ignore hint to make it easy
to make changes.
Limitations of Columns
Columns can be entirely contained by larger columns (ie. nesting columns). But otherwise,
columns cannot overlap. Column edges should not overlap.
Columns should not extend outside the pagesize layer, or out of the document canvas. Doing so
will cause them to not layout correctly.
Columns should not be placed into a layer group that has the -footer hint.
All layers contained by a column layer will be placed at the same "depth" as the column layer on
the built page.
Best Practices
Because columns force the layers they surround to be at the depth of the column layer on the final
page, place layers contained by columns near their column layer in the layers palette to simulate
this in the Photoshop document and avoid surprises.
Sometimes columns can be visually distracting in the document, so when you don't need to see
them to judge layer placement just set any column layer's "fill" in the layers palette to zero. The
columns will still perform their function but they won't be visible in the document.
Panels
Introduction
Panels are most often used in conjunction with the -panelsheet hint for creating decorated areas including
an optional thumbnail image and optional metadata to allow the navigation of galleries or internet feeds
like RSS. For information on panelsheets see the Gallery Reference.
This document describes the use of panels without panelsheets as part of SiteGrinder 3's page layout
system.
The -column hint is used to designate sections of a page that are flowing and expanding. The -panel hint
performs essentially the opposite function.
The elements in a panel are always locked in their fixed location within the bounds of the panel. If an
element in a panel changes size it may expand, but the other elements of the panel will not move because
of it.

226
Panels obey similar rules to columns:
Panels can be contained entirely within columns and within other panels.
Columns can be contained entirely inside panels.
Panels cannot partially overlap columns or other panels.
Like columns, panels are boundary placeholders: they are normally not visible on the page unless
you apply the Color Overlay Layer FX to them or they have a name-matching -background layer
Panels with the Color Overlay Layer FX also support semi-transparency through Photoshop's
Opacity setting, though this opacity is not supported by all browsers.
Panels can have matching -background layers. But, since panels do not expand (unlike columns),
they do not support matching -centercut layers.
Why Use Panels?
The point of panels is to keep page elements within them from moving relative to each other. Since
elements that aren't in columns never move, you only need panels within columns, where they can solve
certain design problems.
Columns alter the way elements are positioned based on their potential to change size and move.
Sometimes a column will cause elements to move relative to each other in ways you don't want. If you
need a background or other elements to have pixel-perfect alignment with foreground elements even as
things move around you'll need to surround the problematic elements with a -panel.
The whole panel group will still move and flow as one unit within the column, but the elements within
the panel will not move relative to each other.
How to Use Panels
Like other hinted boundary layers, a -panel layer is created as a rectangle within an image layer (or as a
rectangular object layer) that sits behind the layers you want it to contain in the layers palette.
The contained layers must also be the same size as or smaller then the -panel layer, and their rectangles
have to be the same as or fit inside the panel layer.
Panel Examples
See the panels example in the Columns Reference for an example of panels as well as how panels work
in columns.

227
Scrolling
Contents
Contents
Introduction
Scrolling the page in the browser.
Scrolling Text
Fixed PageSize or Column and Scrolling
Scrolling An Area of Text and Images
Scrolling Text and Images With -Xmedia
Creating External Layouts To Re-Import with SiteGrinder
Scrolling Text and Images by Shrinking Type Layers.
Scrolling Text and Images with a -PanelSheet
Introduction
Scrolling is a way to allow a rectangle to display content larger than its own starting dimensions without
having to change size. Instead a scroll bar allows you to slide the contents up and down within the
boundaries of the original area.
Web browsers always provide a scroll bar on the right edge of the browser window if your page contents
are larger than the window itself. SiteGrinder has no control over that scroll bar.
SiteGrinder supports a number of ways to provide smaller scrolling areas that are embedded within the
page:
A text area can scroll if it needs to if you add the -scroll hint to it in Photoshop
Pagesize and column layers with the -scroll hint will also provide a scroll bar if necessary
Some gallery thumbsheets and panelsheets can also provide scrolling areas
Scrolling the page in the browser.
If the design created in Photoshop is taller than the browser window displaying the built page the browser
will naturally put up scroll bars on the page. No hint is needed to achieve this.
Scrolling Text
A paragraph type layer in Photoshop can be made smaller than the text it contains. When this happens
the text is visually cropped to the dimensions of the type layer.
Photoshop notes any text layer that "contains more" by putting a small plus sign on its lower right text
rectangle when the type tool is active and you click to to edit the text contents, as shown below:

228
A text layer that "hides" this overflowing text will simply show it all when it appears on the final web
page, causing the type layer to become taller and potentially overrun elements positioned below the
bottom edge of the type layer rectangle in Photoshop.
NOTE: Text areas on the final page only expand vertically, never horizontally.
If the -scroll hint is placed on the type layer the text element on the final page will take up exactly the
same rectangle that the type layer did in the original document.
If (and only if) there is more text than can be fully displayed in the text rectangle, a scrollbar will appear
at the left side of the text element allowing your site visitor to navigate the rest of the contents. The scroll
bar appears inside the text rectangle, not outside of it, so it will shrink the area in which the text is
displayed.
NOTE: It is common practice to apply the "right margin" paragraph style in Photoshop to put a little
space between the text and the scroll bar.
Fixed PageSize or Column and Scrolling
The -scroll hint can be combined with the -pagesize hint to make a fixed size page block that is
scrollable. When the content of the page exceeds the -pagesize rect, it will scroll. Similarly, the -scroll
hint can be combined withe -column hint to make a column that does not expand, but rather, shows scroll
bars when its content exceeds its rectangle.
Scrolling An Area of Text and Images
Photoshop's ability to "hide" the text in a text layer makes it easy to set up scrolling text.
But what about scrolling a more complex layout consisting of multiple layers of text and image layers?
Unfortunately Photoshop has no appropriate feature that easily allows a smaller rectangular area to

229
contain a larger layout.
SiteGrinder does provide a couple of techniques for overcoming this limitation and creating complex
scrollable layouts:
Use a combination of the -scroll, -column and -xmedia hints to import a complex HTML layout
(or other imported source like a Google Doc) into a rectangle
Use a combination of the -scroll and -column hints along with type layers that will expand on the
final page
Scrolling Text and Images With -Xmedia

This technique for scrolling a complex area assumes you have created the content external to your
Photoshop file. It could be anything you can import with an xmedia layer, such as an HTML document
or a Google document.
The main problem with this technique is that you'll need to create the layout externally with a different
tool. You can use SiteGrinder to create the layout in a separate Photoshop file if you like. (see below)
Creating External Layouts To Re-Import with SiteGrinder

You can use SiteGrinder to create a large layout to be displayed in a small scrolling area of a page.
The workflow goes like this:
1. Create a new Photoshop document that is the size of the entire layout.
2. Create and position your text and image layers.
3. Open SiteGrinder and build.
4. Deploy the page in your site and upload it.
5. Return to Photoshop and open your site's Photoshop document.
6. Add the xmedia layer to display the layout you created above and give it the scroll hint.
7. Build and deploy the page with the xmedia layer.
8. Use the iframe xmedia importer to import the html page you uploaded in step 4.
Scrolling Text and Images by Shrinking Type Layers.

This non-WYSIWYG technique is not ideal and is a bit of a "work-around". It uses the fact that type
layers will grow vertically to show their entire contents on the final page.
The strategy is to shrink your type layers vertically in the Photoshop document so they and the other
elements can fit in a small stack inside the area you want to scroll them in.
The limitation is that since you can't also shrink images vertically your scrolling area can't be smaller
than the full height of all the images combined with the total height of the shrunken type layers and the
spacing between them.
The advantage to this approach is that everything stays in one Photoshop document.
1. Make a new Photoshop Document (300x400)

2. Make a -column layer, with -scroll hint (250x350)
3. Put a large paragraph of text on the scroll layer, (225 x 340 or so)
4. Double click the text layer's thumbnail in the layers palette. This will select the text for editing,
activate its rectangle, and select the text tool. This is very important, because we can only "hide"

4.
230
text by moving the bounds when the text tool is active. Otherwise we'll scale the text.
5. Shrink the text box vertically to just 30 pixels tall.
6. Make a new layer, put a small circle graphic just vertically below the shrunken text layer.
7. Make another big text layer, vertically below the circle graphic. Shrink that layer too.
8. Repeat several times. Each layer must remain directly over the -column layer.
9. Open SiteGrinder.
10. Build the page.
11. Cool. Text and graphics scrolling together.
12. Go back to Photoshop.
13. Remove the -scroll hint from the column and build again.
Scrolling Text and Images with a -PanelSheet

Panels in panelsheets allow you to include gallery images along with text. If your series of images and
text is designed so that there are a number of entries that all have identical layout but different images in
text then a scrolling (or sliding) panelsheet is an ideal solution.
See the Gallery Reference for more information on panelsheets.
Wrapping Text Around Page Elements
Contents
Contents
Introduction
The -wrap Hint
Placement and Margins
Limitations and Restrictions of -Wrap
Faking an Internal Wrap
Introduction
One thing that Photoshop type layers don't do, but which is commonly done with HTML, is wrapping
text around images.
As with many things not possible in Photoshop but possible in a browser, SiteGrinder provides a special
hint as an easy way to represent in Photoshop that you'd like to wrap the text in a certain type layer
around a certain image.
The -wrap Hint
The -wrap hint is used on a layer (usually - but not always - an image layer) that is positioned directly
underneath or above the text layer that needs to wrap around it.
In the screenshot below we see the Photoshop document in front. Behind it we see the web page as it
finally appears in the browser.

231
Figure 1.
Notice in Figure 1 that the -wrap layer doesn't have to match the type layers name. SiteGrinder figures
out what type layer should wrap around the image based entirely on the fact that the -wrap hinted image
layer's rectangle fits inside the type layer's rectangle.
Placement and Margins

Place the -wrap layer either directly above or below the text layer.
The -wrap layer can be placed near either the upper left or upper right corner of the text layer. Depending
on position the text will wrap to the left or the right of the image.
The distance between the wrap layer and the top of the text layer and the closest side (left or right) of the
text layer will determine the overall margin that is put around the -wrap layer.
Compare the positioning of the -wrap layer in Figure 1 to its margin in browser window shown behind in
Figure 1.

232
Limitations and Restrictions of -Wrap

Any individual type layer can have a maximum of two -wrap layers, one in each upper corner
The type layer must be exporting as real CSS text , not an image of text
The type layer cannot have one of these hints: -g, -literal, -menu, -xmedia or any other
placeholder layer hints (The text can have these hints: -text, -form, -metadata)
The -wrap hint can be used on almost any type of layer. This includes -xmedia, -slideshow,
-picturebox, -thumb, -column and many more.
The -wrap hint cannot be used on a layer that has one of these hints: -background, -pagesize
The -wrap layer should be above or below just one type layer on a given page. Do not place it
across multiple text layers.
Faking an Internal Wrap

The wrap image always goes to one of the upper corners.
If you want to wrap later paragraphs you'll need to break your text up into two layers and rejoin it with a
-column layer.
1. Break your text into two layers: paragraph 1-3, and paragraphs 4-end, for example.
2. Put a -column layer behind and surrounding these two paragraphs.
3. Set your -wrap layer above the paragraph 4-end layer.

233
Forms
Contents
Contents
Introduction
"Submit" Buttons
Types of SiteGrinder Forms
Email Contact Forms
PHP EMail
PHP Email Special Field Names
Dealing With Your Web Host For a PHP EMail Form
CGI EMail
CGI EMail Special Field Names
CGI Form Thank You Pages
What to Ask Your Web Host About CGI EMail Forms
Troubleshooting Email Forms
Generic Forms
The Generic Form Workflow
Generic Form Workflow Example: Google Maps
Ecommerce Forms
Rules of Form Structure
General Rules
Required Fields
Labeling and Grouping Multiple Controls
Adding Descriptive Text Between Form Controls
Creating Form Controls
Text Fields (single and multi-line)
Adding Suggestions to Fields
Protected Passwords Fields
Popup Menus
Checkboxes
Selection Lists
Submit Buttons
Form Visual Design
Anatomy of a Form
Form Explorer
Fieldset
Legend
Label
Text Input
Focus
Suggestion
Designing in Photoshop

234
Design Manager Form Controls

Control Position and Alignment Layout
Control Styles
Troubleshooting Form Layout
Advanced Form Techniques
Separating Names and Values
Right-to-Left Alphabets
Two Controls Per Line, One Control On a Line
Form Troubleshooting
Introduction
One of the most surprising SiteGrinder features is its ability to transform the contents of a single type
layer into a form with a variety of controls. These forms can interact with web databases or send emails.
Important: This guide assumes you have already read the Email and Other Forms Essentials Guide as
well as read through the Making an Email Form Tutorial.
In this document we'll fill in the rest of the details of SiteGrinder forms.
"Submit" Buttons
Every form, email or otherwise, must have a "submit" button. Clicking this button causes the web
browser displaying the form to transmit the information from the form to some remote computer. When
the remote system gets the information it will do something with it. What that "something" is depends on
scripting on the remote system.
Here are just a few of the things that these scripts can do:
Check to make sure all the required fields have data and if they don't show the form again
Create and send an email containing the information entered into the form and cause the browser
to display a "Thank You" page
Display a page with a Google map created based on the information in the form
Open a shopping cart with newly added items selected from the form
You can specify that certain fields of your form are required. This means that if the site visitor doesn't
enter anything into those fields the submit button will display the form again instead of sending the
information to the server.
The submit button is usually the last item in a form and can contain any text you like, though "submit" is
what most people are accustomed to.
Types of SiteGrinder Forms
Email Contact Forms
The purpose of email forms is to gather information (name, email address, etc.) from your site visitors
directly on your site. When the user clicks the form's "submit" button the form sends the information in
the body of an email to whatever email address you specify in the SiteGrinder plug-in window's "forms"
tab.

235
SiteGrinder supports two types of email forms, PHP and CGI. PHP is far simpler and is therefore
preferable to CGI if your host supports it. (Virtually all Linux based hosts support PHP.)
PHP EMail
Before reading this section you'll want to check out the Making an Email Form Tutorial.
If your server supports PHP configured to use the PHP "sendmail" command (virtually all Linux-based
hosts do) then you'll be able to benefit from SiteGrinder's PHP EMail form type.
After you create your form as a type layer in Photoshop you configure the form using the form settings
panel in the SiteGrinder plugin window's forms tab, shown below.
The following descriptions are as numbered above:
1. The "Form Type" menu is the most important control here. The choices are "PHP Mail", "CGI
Mail", and "Generic". All the other controls will change based on your selection.
2. The "Recipient" tells SiteGrinder where to send the information the site visitor entered into your
form.
3. The "Thank You Page" is a menu of your page layer comps. When your site visitor fills out the
form (including all required fields) and clicks submit they will be taken to whatever page you
specify in this menu. If they missed some required fields they will be taken back to the form.
You can make a special Thank You Page layer comp for this or just send them to one of your
other pages.
4. The "Subject" determines the subject line of the email containing the information the site visitor
entered into your form.
5. The "Sender Name" determines the name used in the email the form will send you.
6. The "Sender Email" determines the From address used in the email the form will send you.
Fields 4, 5 and 6 above can be collected directly from the site visitor if you like using the special field
names "Email:", "Name:", and "Subject:". It's a good idea to fill them out anyway in case you forgot or
misspelled one of those fields.
There are two required pieces of information you provide the PHP forms in the PHP form settings

236
window, the recipient and the location of the "thank you page". The recipient is the email address that all
the form data will be sent to, perhaps the webmaster for the site. The "thank you page" is the page the
user will see after successfully completing the form.
PHP Email Special Field Names

When you type in a form field such as "Email:_______" the field name is the text before the colon, in this
case the word "Email". You can set anything you like as the field name, as in "Do you want fries with
that:____".
The field names "Email", "Name", and "Subject" are special to PHP Email forms. They will not only be
used to collect information to include in the body of the email the form will generate, they will also be
used to contruct the email itself.
They can be handled in two different ways:
If the form has a control with a name that matches one of these keywords, then whatever value the
user types into that field will be used for the email that is sent out.
Or you can set the Email, Name, and Subject in the Form Settings window shown in the previous
section.
Each of the three ( "Email", "Name", and "Subject") can be handled uniquely. A common practice is to
have a field in the form named "Email" to collect an email address and also set the form email's "from"
address, but set the subject using the settings dialog so that every email sent from the form will have the
same subject, such as "Contact Form Data".
IMPORTANT: If you collect these special fields in your form you should make them required fields.
IMPORTANT: If you have these field names in your form the form data will be used even if you have
added this information in the form settings window. For example if you have a field in your form named
"Email" and you also type "sales@medialab.com" into the Form Settings window's "Sender Email" field,
the address the site visitor types in will be used. The "sender email" field will be ignored.
Some configurations of PHP will only allow certain email recipients or certain "from" email addresses (or
certain subject lines). Check with your host for the allowed configurations and use the Form Settings
window to set them if necessary.
If your host requires a certain "from" address you should not include an "Email:" field in your form
because it will be used instead if it is there. To collect an email address without having it become the
form email's "from" address use a different field name than "EMail:". Using the filed name "Your
email:", for example, will work fine.
Dealing With Your Web Host For a PHP EMail Form

We recommend first just uploading your form page and trying it out. If it functions properly you're
done.
If it doesn't, double check that you entered the email address and thank-you page correctly.
If everything seems to be correct you can send an email with the following text to your web host's tech
support address:
Hello,
I am trying to use a PHP email form on my site and it isn't functioning properly. The form I'm using requires
PHP and sendmail. I have a couple of questions.

237
1. Do you support PHP and sendmail?
2. If you do support PHP/sendmail, what are the special requirements to make it work?
Thanks!
If they answer "no" to the first question you'll need to use a cgi email form (see below) or find a host that
does support PHP. Some hosts offer accounts with PHP and accounts without and you may be able to
switch.
If they say "yes" to the first then they'll tell you if you need to have the email from address or to address
set to addresses at their domain or any other requirements.
CGI EMail
Most servers support CGI mail. CGI EMail is not standardized, but there are several CGI form mail
scripts used by almost all hosts. Their requirements are all fairly similar.
Before you can use the CGI mail option, you must know the name and location of your server's
"formmail" CGI script file. A full URL would be easiest, but in some cases you may have to use a
relative URL. You can find out this information from your web hosting company.
Most CGI mail scripts support both post and get methods, with post generally being preferred
CGI EMail Special Field Names

Like the PHP EMail form above, every CGI script has special names that it uses to help process the mail.
But unlike the PHP form above, these names are not standardized. Therefore, there is no guarantee that
the words name, email, and subject will behave as expected (though they usually do). Like the PHP
forms above, the special names can appear in the form itself and thus be user supplied, or be preset in the
CGI user interface.
Here are the common keywords you might use for a CGI mail script
recipient
email
name
subject
redirect
realname
title
missing_fields_redirect
IMPORTANT: unlike PHP EMail, the recipient is set via a keyword (or possibly even in the form itself).
And the thank you page is usually called redirect and it should be an absolute URL (ie
"http://www.medialab.com/thankyou.htm") not just a page name.

238
2. The "Path or URL to form .cgi" tells SiteGrinder where find the "cgi" email script. You'll need
to find this out from your web hosting company.
3. The "Method" menu allows you to choose "post" or "get". "Post" and "get" are the two
confusingly named choices all web pages have for sending information to a web server. All you
need to know it which one your particular web host uses.
4. The "New Row" and "Delete Row" buttons allow you to add or remove Name/Vaule pairs from
the values list below them.
5. The values area contains pairs of names and values the form will send to the email cgi system in
addition to the information entered into the form itself. You'll need to find out what data is
required and what it needs to be named. For example your hosts system will need to know where
to send the email containing the information entered into the form. Its name will be something
like "recipient" as shown above. Its value will be the email address that should receive the date.
CGI Form Thank You Pages

WIth CGI forms you will pass in the URL for your "thank you" page as a name and value. Because CGI
forms aren't standardized you will need to find out from your host what the name should be. In many
systems the name is "redirect", as shown in the example above.
The value will be the URL to your thank you page.
To simplify figuring out the path you should give your CGI thank you page layer comp a one word name,
like "thankyou-page". SiteGrinder will create an html file named "thankyou.html" from that (or
"thankyou.php" if you are using SiteGrinder remote CMS). You can use that as the url.
What to Ask Your Web Host About CGI EMail Forms

Here is a sample email you can send to your web host's tech support to find out what you need to know to
use a cgi email form:

239
Hello,
I am trying to use a cgi email form on my site and it isn't functioning properly.
1. What are your requirements (if any) for source or destination email address?
2. What variable names do I need to use in the form?
3. What is the path I should use to the cgi email script?
4. Anything else I need to know?
Thanks!
Troubleshooting Email Forms

If you have problems with your email forms sending:
Form submit buttons only function after you upload the pages the forms are on to your web
server. When they are local to your computer can preview what forms look like and even enter
data into their fields, but not submit them.
Double check that a recipient is set in the email form settings window. This is the most common
problem users run into.
Contact your host and make sure they have PHP configured with sendmail, if they limit your
sending or recipient addresses in any way, or require some other sort of set up.
Generic Forms
EMail forms have one purpose in life: collect information into the body of an email and send that email
somewhere. But forms can do so many other things.
SiteGrinder "generic" forms are for all of the many other uses of forms.
The Generic Form Workflow

While generic forms can almost anything, there is a common workflow to creating them:
1. Find out the url of the service you want the form to submit its data to and whether you'll use the
"get" or "post" method of sending data to a server.
2. Find out what data needs to be sent to the service your form will use, and what the variable names
need to be for that data.
3. Determine which data you'll collect from your site visitor in the form and which data you'll send
every time.
4. For data you'll collect from the user create fields in the -form layer's text contents. These fields
will need both a field name that the user will see and a data variable name for the form script to
use. The convention for this is to place the visible name first followe by a slash followed by the
variable name, as in "Starting address/saddr:__________".
5. Open the SiteGrinder plugin window and switch to the form tab. Click on the form name to open
the editor and select "Generic" from the "Form Type" menu.
6. Enter the url and post or get from the "Action" field and menu.
7. Add rows for the data that will be the same every time and type in the variable names and values

240
Generic Form Workflow Example: Google Maps

Here's the workflow from the previous section as it would be used to create a form for your site visitors to
get instructions to a retail store's location.
Use the screenshots below for reference.
The -form layer contents in Photoshop:
The filled-out form settings panel from the SiteGrinder plug-in window's Forms tab:
The step numbers below correspond to the same numbered steps from the previous section.
1. A quick "Googling" of "adding a Google map to my web site" reveals that the Google map
service's url is "http://maps.google.com/maps" and that it uses the "get" method of sending data to
a server.
2. We also learned from Googling in step 1 that Google needs a starting address with the variable
name "saddr", a destination address with the variable name "daddr", and a language with the
variable name "hl", which we'll use English for with the value "en".
3. We'll ask the user for the starting address but we'll supply the same destination and language each
time.
4. To collect the starting address we create a -form layer in Photoshop with "Starting
address/saddr:_______________" as the first line and "(Get directions!)" as the submit button on
the second line.
5.
241
5. We open the SiteGrinder plugin window and switch to the form tab. We click on our form name
to open the editor and select "Generic" from the "Form Type" menu.
6. We enter http://maps.google.com/maps into the "Action" field and select "get" from the
neighboring menu
7. We click "New row" and enter "daddr" as the name and our destination address as the value. We
click "New row" again and add "hl" as the name and "en" as the value.
That's it!
NOTE: While this is a quick and easy way to add Google directions to a site, there are even easier ways
than using a generic form. You could, for example, use an -embed or -xmedia layer to add a Google map
gadget to your page without having to worry about variables, forms, etc.
Ecommerce Forms
Using forms to collect ecommerce information like size, color and quanitity, is easy if you have the
optional SiteGrinder 3 "Commerce" add-on.
The process is similar to generic forms.
The main differences are:
You add the "$" hint to your form layer in addition to the form hint, as in "Guitars -form-\$"
You don't use the Forms tab of the SiteGrinder plug-in window to edit ecommerce form data, you
use the form editor in the Content Manager after you deploy your ecommerce pages. Ecommerce
forms do not appear in the plug-in's Forms tab.
Laying out ecommerce forms follows the same rule described here for non-ecommerce forms.
To find out more about the form features added by the "$" hint and the Commerce add-on see the
documentation for the "Commerce" add-on.
Rules of Form Structure
General Rules
In almost every case individual form elements use a colon on their first line. That's what identifies a form
element to SiteGrinder.
Except in special cases SiteGrinder forms are always one control per line.
This, for example will NOT work:
First Name:____________ Last Name:____________
Required Fields
Required fields are fields which must be filled out by the site visitor in order for the form to be
submitted. Selecting which fields are required (if any) is totally up to you.
You indicate required fields to SiteGrinder by starting them with an asterisk, as in

"*Email:__________________".

242
Labeling and Grouping Multiple Controls
A "fieldset" is a way of grouping form elements together visually. It consists of a label sitting on a
rectangular border surrounding the form elements. When there is any text on the line just before a form
element, it will be used as the fieldset "legend". The form elements that appear on the lines after the
fieldset label are grouped together in the fieldset.
Adding Descriptive Text Between Form Controls
You can have place styled text interspersed with form elements in the same type layer.
Text that doesn't contain any colons and is separated by at least one empty line from form controls (which
do have colons) will just appear as styled text.
You can put descriptive text before and after all your form elements and/or you can place normal text
between form elements. This will break the elements into multiple fieldsets.
Creating Form Controls
As mentioned in the General Rules of Form Structure mentioned above, all of these elements start with a
field name followed by a colon followed by text following the particular convention of the kind of form
element you want to create.
Text Fields (single and multi-line)
Single line text fields simply use a number of underscores on a single line to indicate a text entry area, as
in "Email Address:_________________". The width of the field is determined, in part, by the number of
underscores. A bit of trial and error is usually necessary unless you choose to have all the controls stretch
to fill the form rectangle, which you can select in the Design Manager form appearance editor.
Multi-line text fields are the same, except you add more line of underscores after the first. Each line of
underscores creates another visible line of text in your form. If your site visitor adds more text than can
fit in the visible lines a scrollbar will appear in the field.
Adding Suggestions to Fields

Suggestion text is text that appears in form fields before the site visitor types anything. It can encourage
the visitor to fill out particular fields or provide information about the content or format of the
information you want them to enter. Suggestion text disappears in a field once the site visitor clicks in
the field to edit.
To add suggestion text just enter the text you want to use for the suggestion in the midst of the
underscores. You'll need at least one underscore before and after the text, as in "Favorite song:rock songs
only".
The suggestion text isn't real form data. If the user enters nothing into a field with suggestion text the
data will be empty for that field.

243
Protected Passwords Fields

Protected password fields print bullets in the text field instead of the text that is typed. To create a
protected field using SiteGrinder just substitute asterisks for underscores, as in "Password:************
".
Popup Menus
Popup menus are created by entering the field name, followed by a colon, followed by your menu items
separated from one another by the vertical bar ("|") character. (Type shift-backslash for the vertical bar.)
Items can have as many words as you like.
Example:
Favorite show: Daily Show | Colbert Report | Glenn Beck
Checkboxes
Checkboxes are created from label text followed by a colon followed by brackets with an optional "X"
inside to represent the default check.
Example :
Apple:[ x ]
Orange:[ ]
Banana:[ x ]
Selection Lists
A selection list is a list of options displayed all at once without having to click anything. It is mainly
useful for allowing your site visitor to select more than one item from a single list, which menus don't
allow.
Selection lists are created by placing a the name followed by a colon followed by the first item in the list
in brackets, as in "[First item]", followed by as many other items as you need each on their own line and
each with their own brackets,
Example:
Which other zombie limb providers have you used in the past: [ Zomtek ]
[Manuzomb]
[Zoha.com]
[Manos Hands of Fate]
Submit Buttons
The submit button is indicated by putting the text label you want the button to have in parentheses and
placing the button on a line by itself, as in:
(Click to send)

244
Form Visual Design
There are two places where you can affect style settings for form elements.
A Photoshop type layer with the -form hint allows you to use Photoshop's character styling tools to
control font, size, and color settings for various text parts of the form.
In SiteGrinder's Design Manager you can use the "form appearance" panel to set many, many other style
options for various parts of your forms.
Anatomy of a Form
Forms have a lot of different types of elements, including legends, fieldsets, labels, text input areas, etc.
IMPORTANT: Each type of element can have its own unique style settings. Every element of a
particular type will share that style. So while text entry areas can have styles settings that are not the
same as the styles for labels, all text entry areas use the same style as all other text entry areas.
Form Explorer
Below is a not-very-attractive but illustrative form.
Hovering over the buttons on the right will reveal the different parts of the form and where their styles
come from:
Compare the descriptions of the different form controls and their style options to the example above.
Fieldset
A fieldset is a contiguous group of form controls. Contiguous just means none of the controls are
separated from each other by description text.
Most forms consist of a single fieldset, but if you separate any controls from one another with descriptive
text you are also creating multiple fieldsets.
The rectangle containing each fieldsets (which often means the rectangle containing the entire form) can
have its own background, box shadow, and border settings.
Legend
A legend is the text that appears as part of the optional border that can surround fieldsets. In a complex
form you might organize your controls into categories with labels, such as "Employment history" and
"Personal Information".
Label
The labels are the part of individual form controls that display the name. For the form text
"Email:_______", "Email" is the label part.
Labels styles can include text shadow settings and text foreground color.

245
Text Input
The text input is the rectangular area your site visitor types into for text entry areas.
Text input area style options include foreground and background colors, box shadow, text shadow, and
borders.
Focus
The "focus" is the text input area that is currently being used by the site visitor. It can optionally have its
own styles to make it stand out from the other text input areas while it's being edited.
The set of options you can edit for text input areas with focus is the same as for other text input areas:
foreground and background colors, box shadow, text shadow, and borders
Suggestion
Suggestion text is the optional text that can be displayed in empty text input area to prompt the site visitor
with information about what they need to enter into the field. It disappears once they have begin editing
the field.
Suggestion text can have a unique foreground color, background color, and opacity.
Designing in Photoshop
Forms start in Photoshop as type layers, and how you style your form text inside the type layer is the first
step to controlling detailed aspects of the way your form will look on the final page.
Form labels (the field names) will take their font, size, and color from the way you style their text inside
the -type layer. Because all labels will use a single style SiteGrinder uses the style
Labels, Legends, and Controls can each have separate text styles in the text layer. But note, that this is
not the same as individually styled lines. The styles are aggregations by type.
Design Manager Form Controls
You will edit most of your form appearance settings using controls in the "form styles" window in
SiteGrinder's Design Manager:

246
The window is divided into two parts. The controls at the top allow you to alter the layout and position
of your form elements.
The fieldset, legend, label, text input, focus, and suggestion buttons below allow you to style the
various parts of your form. Clicking them will select the form element to style and change the controls
available below to those appropriate for the element you've selected.
The "Apply" button lets you instantly see your style changes in the browser.
Control Position and Alignment Layout

At the top you can control the alignment and position of two different kinds of controls: those with labels
and those without.
The slider bar for "Unlabeled Control Layout" determines where unlabeled controls should be drawn
more precisely than just left/right/center.
Control Styles
The tab bar in the vertical middle of the form styles window allow you to choose a form part, such as
fieldset, legend, label, etc. When you choose the part whose style you want to edit the controls below
will change to reflect the styles available for that part.
Troubleshooting Form Layout
Sometimes form labels end up on top of their associated entry areas or otherwise off kilter. Here are some
tips to avoid this:
1. Make sure you have the latest version of SiteGrinder 3.

2. Shorten your labels and control names.
3. Make your text layer wider, possibly a lot wider depending on your label lengths. (Be sure to use

247 3.
Photoshop's type tool to do this not the move tool.)

4. Fields with long names short entry areas don't mix well with fields that have short names and long
entry areas, as seen below:
Example of form text that will require an almost impossibly wide type layer:
Name: _______________________________________________________
Check this box if you wish to subscribe to our newsletter: [ ]
The first line has a short label and a long entry area and the second line has a long lable and a short entry
area. Not good.
Advanced Form Techniques
Separating Names and Values
If you are making a contact form in Spanish then you might want the following form:
nombre:_______________________
*correo electronico: ____________________________
But, while that form may look right, it may not work 100% correctly, because the software that processes
the form for sending mail wants fields named "name" and "email", not "nombre" and "correo
electronico".
If you need to separate the way a label is displayed from the value it is given, put a slash in the name with
the display part on the left and the value on the right:
nombre/name : ________________________
*correo electronico/email : ____________________
This form will only display the Spanish names to the user, but apply the important form values to the
controls. This feature is useful in other situations besides localization of forms.
If you are using our generic form generator then you may very well be hooking the form up to a third
party action (like a google search) where the values are not user friendly names.
NOTE: This feature is also available for list boxes and choices, as in:
platform: Mac/m | Win/w | Unix/u

x-mas wishes: [ dos dientes/ two front teeth ]
[ whirled peas / b ]
The above example uses a poup menu on the first line and the rest will create a multi-selection list.
Right-to-Left Alphabets
Not all languages read left to right like English. Some (like Hebrew and Arabic) read right to left. The
SiteGrinder form parser will understand entries in either order.
For example, the following is perfectly acceptable:
________________________ : name
However, SiteGrinder won't apply the right-to-left attribute ( dir="rtl") to the form or fieldsets. You'll
have to do that yourself in the final HTML.

248
Two Controls Per Line, One Control On a Line
As far as the SiteGrinder CGI and PHP mail forms are concerned, every line except the send button needs
a label. But, you can, if you wish, forego labels and put just one control on a line, or replace the labels
and put two controls on a line, like so:
______________________ : Mac | Win | Unix

[x]
But, note that form parsing doesn't start until the parser hits a colon and finds a valid control on one side
of it. Also, there is no way to set the names and values for these control items. They'll be given random
names.
Form Troubleshooting
make form text layers wide.

host that requires particular to/from
forms are not editable in the CMS.
Form Docs really need to point out how to set the Legend on a form field. And how to have
multiple fieldsets per -form layer.
External Media
Contents
Contents
Introduction
The -xmedia Hint
Xmedia Layers In Photoshop
Xmedia in the Design Manager
Xmedia in the Content Manager
Xmedia and Making New Pages
Types of External Media Supported
Web
Slideshows and Non-SiteGrinder Galleries
Media
Expert
Preparing Media for Import
Importing Multi-File Media (especially Flash)
Common External Media Interface Items
Urls and Files
Dynamic Content and Dynamic Styles
XMedia Plugins
The -embed Hint
Deciding Between -embed or -xmedia
Expert Notes For the -embed Hint

249
Introduction
This guide assumes you have read the Video, Flash, and Other External Media Essentials Guide, so if you
have not please do so now.
It's easy and routine to create images and text as layers within Photoshop, but images and text represent
only a tiny fraction of the media used on modern web pages. Most sites will have areas to display Videos
(think YouTube), Flash animations, Twitter feeds, music, and even other web pages.
The most common way to add one or more of these media elements to a page is to use a rectangular
image layer with the -xmedia hint that you will connect to media and other external elements (including
raw HTML) using the Content Manager's xmedia importers.
Another way to add external content such as YouTube videos is to use the -embed hint on a type layer
and paste the code directly into the type layer's content. ( Instructions for the -embed hint appear at the
end of this document.)
The -xmedia Hint
The xmedia workflow includes creating and positioning the xmedia layer in Photoshop, previewing it
with generic media in the Design Manager, and finally importing your own media in the Content
Manager.
This document is concerned with the general use of xmedia. If you are already familar with using the
xmdia hint and are seeking instructions on the importer for a particular type of media, you will find each
media type's referecne guide in the sections following this one. An indexed list linked to the various
types appears in the section "Types of External Media Supported" below.
Xmedia Layers In Photoshop
Whether using Flash, Video, animated GIF, or remote image files, the steps are the same.
1. Identify the dimensions of the media you will be importing

2. Create an image layer in your Photoshop document
3. Select an area that matches your media dimensions with a color. (This is most easily done using
the marquee tool's Fixed Size style, or by watching the Info panel as you drag out the selection.
4. Fill the selection with a color
5. Pick a name for the layer and add "-xmedia" to the end of the name, ie "Home Movie-xmedia".
The name doesn't have to match the file name, but if it does, and the file is in the folder that you
optionally choose to be your Media Folder, SiteGrinder will match the layer to the file
automatically.
6. Save the document and open SiteGrinder
An xmedia layer is a placeholder layer. Typically the xmedia layer is just a rectangle layer that tells
SiteGrinder where on the page you want some other media inserted. The layer itself will not appear on
the final page, so it can be anything you want while it is in Photoshop: a colored box, a photo, it doesn't
matter. Similarly, do not expect the final page to be affected if you apply any Layer FX to an xmedia
layer, or adjust its opacity or transfer mode. Those things are all ignored.
In this screenshot you can see the lavender -xmedia layer. It is just a large box layer named
"main-xmedia".

250
On the final page it some alternative media, like a video, or some text will substitute for the lavender
rectangle.
Some types of media, such as video, will always fill the entire rectangle dimensions at 100% opacity on
the final page. Of these types, some won't even allow anything to be visible on top of them. If you try to
mask certain types of video with image layers the video will cut right through them.
IMPORTANT: Some media types have an option to show a controller. For some media, like flv video,
the controller floats on top of the video when the mouse is hovering so its presence will not increase the
dimensions your xmedia layer will need to be to include both the video and the controller. Other types,
such as .mov Quicktime movies, will show their controller beneath the bottom edge of the movie. For
those types you will need to increase the height of your xmedia layer to accommodate the controller. The
Quicktime controller, for example, requires 16 extra pixels for the height of your xmedia layer. So a
.mov with dimensions 320x240 will need an xmedia layer 320x240 without the controller and 320x256
with the controller.
Other types, like text, will allow you to see the background layers through empty areas.
Xmedia in the Design Manager
The next step after building any page design is to inspect its layout in the Design Manager. Because you
will not choose your actual media until you deploy your pages to the Content Manager, the Design
Manager view of an -xmedia layer is a temporary interactive placeholder:

251
Have no fear, this is not how the xmedia layer will appear on the final site.
The "test content" menu allows you to try out a few different content types. This is for the purpose of
checking what happens to your layout with different media types, not for previewing your actual media.
When you choose text from the menu, for example, if the resulting text overflows your page you may
want to look into using columns in your layout, or plan on keeping that as a scrolling element.
For media types like video, which will never go beyond the bounds of the original xmedia layer, you
don't have to worry about this kind of preview.
Xmedia in the Content Manager
Once in the CMS system you will be able to import external media for each of the -xmedia layers on each
of your pages.
In the "Pages" panel of the CMS select any page that has an -xmedia layer. The External Media panel
will appear and list all the -xmedia layers on that page:
Click the blue entry in the Media column to open the External Media window.
From here you can choose the type of media you want to import from the "Importer" menu.

252
Xmedia and Making New Pages

Whenever you create a new page in the Content Manager you choose an existing page design which the
new page will be a copy of. If the existing design has any -xmedia layers, then any new page created
from that design can have its own unique sources set for its -xmedia layer. Additional sources can even
be a completely different type of media.
This means you can create a single template design and then create new pages based on it in the Content
Manager using new media on each new page you create. That's the power of separating design and
content.
Types of External Media Supported
Here is the breakdown of the xmedia media types that SiteGrinder 3 imports.
Information about the specific importers can be found in their own sections.
Web
Google Word Processor Document
Google Presentation
General HTML
HTML Snippet
<object> or <iframe>
Slideshows and Non-SiteGrinder Galleries

Lightroom Gallery
Photoshop Web Gallery
Show It Web
Zoomify

253
Media
Images (gif, animated gif, jpeg, png)
Flash swf
Flash flv video
Microsoft Video
Quicktime and Other Video
MP3 Audio
Single Color Rectangle
Expert
PHP Include() or PHP Require()
Unformatted Text (file or typed/pasted)
Preparing Media for Import
Depending on the type of media you want to use, SiteGrinder 3 will get the media locally from your site
folder or remotely from a URL. Some media types support both local media files and urls.
If you are using local files, you will place them in your site directory before importing any media into
your page.
The workflow for local media is as follows:
1. Create a media directory in your site folder, usually at the top level, for your media. Do not place
this folder inside any directories whose names begin with "sg_".
2. Name your media directory whatever you like.
3. Copy the file or files that make up the media to the new folder. For a video this will probably be
just one file. For a gallery created with a tool like Adobe Lightroom you will copy all of the files
and subdirectories that make up the gallery into the media folder. (See the next section for more
details.)
4. When possible open the media in a browser by itself before importing with SiteGrinder to make
sure it works. If it doesn't display properly you have probably negelected some necessary files in
the previous step.
5. Use SiteGrinder's Content Manager xmedia panel to assign the local media to the xmedia layer.
Importing Multi-File Media (especially Flash)
Some file types are self contained, meaning that the file depends upon no other files to function properly.
Examples of self contained files are most digital video formats (.mpeg, .mov, .wmv), PDF files (.pdf),
digital audio (.mp3, etc.), and images (.jpg, .gif, png).
Other media types are require multiple files and sometimes even sub directories with still more files.
Examples of multi-file media include most web pages (.html + images) and some Flash .swf files which
require accompanying gallery image files and an xml file to tie it all together (.swf).
As mentioned previously, to prepare a file for import means moving it into the site directory. With
multi-file media be careful to move all of the files to the site directory (the main file and
the dependent ones) and to preserve their directory relationships. It is often easier to move the folder that
contains the files into the site directory, rather than moving the files individually.

254
Further complicating things, multi-file Flash galleries are often initialized within the HTML of the page
they are on using either a series of "FlashVar" variables or an swfobject script to determine options.
These .swf files won't function even with the other dependent files properly placed without the proper
initialization code. In these cases, it is usually preferable to import the .html file that accompanies the
gallery using one of the HTML importers (iframe, object, or general html) than try to import the .swf
itself. This will import both the media files and the required settings.
There are many third party tools for creating Flash slideshows, Flash galleries, Flash whatever. Very
often, these are multi-file Flash files requiring initialization. SiteGrinder has many custom importers for
different Flash slideshows, galleries, etc. If possible, use the correct importer (like the ShowItWeb
importer, or the Lightroom Gallery importer). If your third party slideshow, gallery, or other media is not
in the list of importers, send an email to help@medialab.com requesting one. If you provide the name of
the third party gallery, the URL of the manufacturer, and links to any documentation about embedding it,
we may be able to produce a new importer.
When working with multi-file external media be sure to test that they still working in the browser after
you move them into the site directory and before you attempt to import them. If media no longer works
after merely being moved, SiteGrinder's media importers won't be able to fix them.
Common External Media Interface Items
Many importers use the following controls.
Urls and Files

Almost every xmedia importer has a file or url control, seen below:
To use it you type in the URL where the source media can be found. If you are running the SiteGrinder
Content Manager locally, then the "Site File" button (as seen above) will be available and you can browse
your site directory looking for the file to include. When you use the "Site File" button SiteGrinder
creates the url. The Site File button is gold colored as a reminder that this button is only available when
running locally.
If the Content Manager system is running remotely using the optional SiteGrinder 3 Control add-on,
you'll need to enter in a URL manually. That can be either a full URL (such a
http://www.example.com/starwars.mpeg) or a relative one (media/starwars.mpeg).
Urls may be queries, which can provide extra information to the web server. The url
http://www.example.com/videoserver.jsp?video=surprisedkitty, for example, includes a "video" argument
to specify which video to play.
Urls may also use protocols other than http, such as Real Time Streaming Protocol for videos. That kind
of url will look something like this, for example: rtsp://www.example.com/starwars.mov
NOTE: Importers that support file uploading will upload your file to a directory called "sg_userfiles" at
the top level of your site.

255
Dynamic Content and Dynamic Styles
A few of the HTML importers can import both "statically" or "dynamically", and can do so for either the
content or the text styles.
If these checkboxes are off, then you are choosing a static import. This means that the HTML in question
is grabbed now, as it is today, stored in the xmedia layer, and then used. If the document at the source
URL changes, statically imported content does not change with it. It remains as it was at the time the
xmedia layer was first imported the source.
Dynamic content, on the other hand, is grabbed whenever the page is viewed. So when anyone visits your
page they see the source URL embedded on your page as it currently is on the server it lives on.
Static and dynamic both have their advantages and disadvantages. Dynamic content is always current
and up to date, great for calendars and frequently changing content. However, dynamic content makes
your overall page slower. Also the content depends upon another web server, so if that other webpage is
not reachable for whatever reason, your page will not display properly.
As the styles, layout, and formatting of remote content tends not to change too much, using static styles
(ie, turning off the dynamic style checkbox) can give your page a slight speed advantage.
XMedia Plugins
The xmedia importers used by SiteGrinder 3 are all defined by external plug-ins. Media Lab will be
adding more plugins as time goes by. You can check for the latest at the SiteGrinder 3 learning center. If
you have a particular media type that needs special handling and don't see an importer for it already,
contact us at help@medialab.com to request support for it. We may be able to make a new xmedia
plug-in to handle that media type to be made publicly available.
The -embed Hint
The -embed hint provides a different, somewhat more direct approach to adding media to your pages in
type layers.
The -embed process works like this:
1. Create and position a new empty type layer using the dimensions you want your embedded
content to have
2. Paste a snippet of raw HTML code into the contents of the type layer. Usually this comes from
copying the contents an "embed" field from YouTube, Paypal, Twitter, or other popular sites
3. Change the layer's name to whatever you want followed by the -embed hint, as in "Simpsons
Hilarious-embed".
4. Save and build
Even though the layer full of code looks ugly in your Photoshop file you won't see the code at all on the
built page. Instead you'll see whatever the code is telling the browser to show. It might be a video, a
Twitter feed, or even a PayPal "Buy Now" button.

256
There is a step-by-step tutorial in the Tutorials section demonstrating embedding a Twitter feed.
IMPORTANT: You have to be very careful when you create or select the code to use in the embed
layer. The code has to be correct. This means if you miss on letter from the start or end of the code when
you select it to copy it to the clipboard it will probably not work and may cause the entire page to draw
incorrectly.
IMPORTANT: An embed layer is used only with "snippets" of code, not entire web pages of code. If
your code includes <head> and <body> tags this will cause the whole page's html to be incorrect.
Deciding Between -embed or -xmedia
This section will help you decide when to use an embed layer or an xmedi layer to add custom code to
your pages.
The unique advantages of the embed hint over the xmedia hint are:
You will see the results of the embedded code in the Design Manager preview. For xmedia you
won't see your actual media until after you deploy to the Content Manager.
Fewer steps: just make the layer, paste in your code, and you're pretty much done.
If you want to deploy a page with custom code to many sites you only have to enter the code in
the embed layer once. With an xmedia layer you will have to import the code for each site.
For experts only: embed layers can include "server side" instructions such as PHP's include()
command.
The unique advantages of the xmedia hint over the embed hint are:
Most of the xmedia importers avoid HTML code completely. You just select your media and
SiteGrinder does the rest. This avoids the possibility of including incomplete or otherwise
incorrect code.
XMedia layers work incredibly well with the SiteGrinder Content Manager's "New Page"
function. A new page made from one with an xmedia layer can easily show a different media file.
You can't edit -embed layers in the Content Manager.
XMedia layers have nicer WYSIWYG. Embed layers can be ugly in your Photoshop document.
Expert Notes For the -embed Hint
The HTML will be inserted into a DIV with the exact dimensions of the type layer allowing easy creation
of things like site visit counters. The <div> will be named after the embed layer.
You can use the embed hint to insert javascript that should go in the <body> of the document, although
the Page Settings window is often a better place to add such code.
If you want to include any non-PHP code (such as ASP) you'll have to use embed instead of xmedia.
Because embed happens early in the build process you can use it for sites you are building with "none"
set for CMS or that you are planning to "Save as Static" from the Content Manager.

257
Audio
Playing MP3 Audio With the Google Audio Player
The "mp3 google audio player" xmedia importer looks like this:
It's only option in addition to the standard ones is "autoplay" which determines if the audio starts playing
when the page loads.
The Google player looks like this:
The player is always 27 pixels tall, and expands horizontally to fill the full width of the xmedia layer. So
if you plan to use this component you should make the xmedia layer 27 pixels tall and as wide as you
want the player to be.
Like all web-page audio, the audio will stop playing as soon as the site visitor navigates to a new page.
Playing MP3 Audio Using Quicktime
Browser video players can play audio files, so you can use the "generic video player" xmedia importer to
play MP3s.
It looks like this:

258
It has three options in addition to the standard ones:
autoplaydetermines if the audio starts playing when the page loads

show controller determines if the play/pause/volume controls are displayed on the page. Turning
this off allows you to play music on the page without any associated visible element.
loop determines if the music starts over when it reaches the end
Most browsers use Quicktime as the default video player. Its controller looks like this:
The Quicktime player is 16 pixels tall, and expands horizontally to fill the full width of the xmedia layer.
So if you plan to use this component you should make the xmedia layer 16 pixels tall and as wide as you
want the player to be.
Like all web-page audio, the audio will stop playing as soon as the site visitor navigates to a new page.
Playing MP3 Audio Using SiteGrinder's Flash Picturebox
The "SiteGrinder Flash" picturebox variation can play a sequence of MP3 files. See the Flash PIcturebox
documentation in the Gallery Components Reference Guide for details.
Color Rectangle
Single Color Opaque Rectangle
This "importer" doesn't actually link to any external media file. It just fills the rectangle of the xmedia
layer with a solid color you specify using standard HTML color notation, which is a "#" followed by 3
hex digits, as in "#ff00A1".
This is the least powerful xmedia plugin, but it can come in handy in certain situations.

259
The importer looks like this:
The same color area xmedia layer on different pages can each have a unique color.
Flash FLV Video
What is a Flash FLV File?
The "flv" format is very popular for internet video. (YouTube and Hulu use it among many, many other
internet video sites.)
The biggest problem with flv video files is that they won't play in a browser window without the very
common Adobe Flash Player browser plug-in and a Flash "swf" controller component.
The basic purpose of the swf controller is to simply display the flv file in the browser window since the
browser can't do it by itself. Additionally these players almost always come with buttons, sliders, and
other controls that allow the viewer to pause, adjust the volume, etc.
Normally playing flv files is a bit of a pain because of the chore of finding and configuring the swf player
in addition to the flv file itself.
SiteGrinder makes it easy. With the SiteGrinder 3 flv importer you just select the flv file itself and
SiteGrinder creates and configures the swf player. You don't even need to know it's there.
Importing FLVs
To use a Flash .flv video file with a SiteGrinder xmedia layer just select "flv" as the importer and find
your file in your site folder or type in the web address as a url.

260
The importer has the following options in addition to the standard ones:
autoplay will start the Flash movie when you arrive on the page. This should always be on
unless your Flash movie has an internal "start" button.
loop will cause the Flash movie to start over at the beginning when it finishes playing.
show controller determines if the player controls (pause, play, volume, etc) appear when the
mouse hovers over the xmedia layer.
Other Ways to Play FLV Files
There are a few other ways you may want to consider playing flv files:
Use a layer with the -embed hint instead of the -xmedia hint to embed YouTube or other video
site videos by pasting in the embed code
Use the HTML snippet xmedia importer to do the same
Use a third party swf player through the xmedia swf importer.
Flash SWF
What is a Flash SWF File?
The Flash Player is a very common browser plugin that displays advanced animations and other
applications that are created using Adobe Flash. It plays files that end in the ".swf", as in "Simpsons
Promo.swf".
This is not the importer to use with "flash video" or "flv" files. See the documentation for the Flash
Video importer for those.

261
Importing SWFs
To use a Flash .swf file with a SiteGrinder media layer just select "flash" as the importer and find your
file in your site folder or type in the web address as a url.
The importer has the following options:
autoplay will start the Flash movie when you arrive on the page. This should always be on
unless your Flash movie has an internal "start" button.
loop will cause the Flash movie to start over at the beginning when it finishes playing.
The flashvars field allows you to enter custom Flash variables to customize any aspects of the
playback supported by Flash, like transparency and quality, or supported by the sef file itself
Using Custom Flash Variables
This feature is for advanced users.
If you need custom Flash vairables enter them into the flashvars field as you would in the html, as in "
arg1=20&arg2=1000" (without the quotes).
Using Flash Movies That Require Extra Files
Many swf animations are self-contained, meaning that the swf file depends upon no others to function
properly.
More complex swf files can require multiple files and sometimes even sub directories with still more
files. An example of a multi-file swf is a SlideShow Pro gallery which needs separate gallery image files
and an xml file to tie it all together.
As mentioned in the general documentation for the xmedia hint, to prepare a file for import means
moving it into the site directory. With multi-file media be careful to move allof the files to the site

262
directory (the main file and the dependent ones) and to preserve their directory relationships. It is often
easier to move the folder that contains the files into the site directory, rather than moving the files
individually.
Further complicating things, multi-file flash galleries are often initialized from a web page with either a
series of "FlashVar" variables or an swfobject script to determine options. These .swf files won't function
even with the other dependent files properly placed without the proper initialization code. In these cases,
it is usually preferable to import the .html file that accompanies the gallery using one of the HTML
importers (iframe, object, or general html) than try to import the .swf itself. This will import both the
media files and the required settings.
There are many third party tools for creating Flash slideshows, Flash galleries, Flash whatever. Very
often, these are multi-file Flash files requiring initialization. SiteGrinder has many custom importers for
different Flash slideshows, galleries, etc. If possible, use the correct importer (like the ShowItWeb
importer, or the Lightroom Gallery importer). If your third party slideshow, gallery, or other media is not
in the list of importers, send an email to help@medialab.com requesting one. If you provide the name of
the third party gallery, the URL of the manufacturer, and links to any documentation about embedding it,
we may be able to produce a new importer.
When working with multi-file external media be sure to test that they still working in the browser after
you move them into the site directory and before you attempt to import them. If media no longer works
after merely being moved, SiteGrinder's media importers won't be able to fix them.
Trivia
You don't need to know the information in this section to use SiteGrinder, but it does explain a few
things...
A few years ago all "Flash" files that played online ended in ".swf". Then Macromedia/Adobe introduced
their own video format, and video files saved in that format end in ".flv", as in "Surprised Kitty.flv".
To make things as confusing as possible, .flv files cannot be embedded in a browser without help.
Instead a "player" created using Adobe Flash is embedded on the page and it loads and plays the .flv file.
On YouTube, for example, the player is a Flash .flv file that both displays the .flv video file itself and
also the controls for play/pause etc.
gif, jpeg, and png Images
Replaceable Images
The image importer allows you to import any gif, animated gif, jpeg, or png image to use in the rectangle
of the xmedia layer.
It includes the image on a page in a way that tells the browser as well as search engines that this is a
"content" image. You can type in "alt" text for the image to provide a description that will help with
search engine optimization and screen readers for the vision-impaired.
Finally you can opt for the image to be clickable and supply a custom link to assign it.
The image importer looks like this:

263
alt is where you type in your text description of the image.

link on causes the image to be clickable.
link is where you set the link for the image by clicking "set link" and using the standard
SiteGrinder 3 link editor.
The image does not stretch to fit the xmedia layer dimensions. It will fit within the xmedia layer at the
top left of the boundary. If the image is large than the original xmedia layer it could extend over or under
neighboring elements.
If you need to allow your design to accept images of unknown sizes to be imported to the same xmedia
layer you can place the xmedia layer in a column to avoid problems.
Expert Tips
This import uses the <img> tag to include the image.
Image layers with the -content hint in the original Photoshop document are automatically turned into
xmedia layers with the image importer.

264
Google Presentation
Importing a Google Presentation
The google presentation importer lets you import PowerPoint-like presentations made with Google
Documents. The presentations are imported dynamically using an iframe.
Features and Requirements

1. No SEO Value. The Google presentation remains on googlies site and while it can appear on
your SiteGrinder page with this importer, the actual content is not imported to your page.
2. Not Expandable. You can publish a Google presentation at different sizes. Be sure to make your
-xmedia layer the right size.
3. Must Remain Publicly Published. The Google presentation must remain publicly published for
your SiteGrinder page to show it.
Publishing a Google Presentation

These are the steps to publish a presentation so you can include it on a page:
1. Log into Google Docs.

2. Click on the Publish tab.
3. Choose a presentation size and click the "Start Publishing" button.
4. Copy the publicly viewable url provided the clipboard to paste into the xmedia source url.

265
Google Word Processor
Importing a Google Word Processor Document

SiteGrinder's ability to add formatted text from Google docs is an incredibly powerful and useful feature
for allowing parts of a page to be dynamically edited and updated.
The Google word processor document importer looks like this:

266
The url option is the url Google docs provides when you publish. (see below)
Your Google document can be imported dynamically or statically, as you see fit. See the discussion of
this in the XMedia Reference Guide.
Using Text from Google Docs

"Google Docs" provide a powerful, free, on-line word processor which can include images, tables, etc.
SiteGrinder makes it very easy to include Google docs documents in a SiteGrinder-created page.
The workflow goes like this:
1. Create your Google Word Processor Document using Google Docs

2. Publish your Google doc as a web page using the Google's document "Share" menu and make
note of the URL Google creates
3. Create a rectangular layer (type or image) the size and position where you'd like to display the
Google doc.
4. Give your Photoshop layer the "-xmedia" hint, which is short for "external media"
5. Build and deploy
6. In the Content Manager edit the xmedia layer and select the Google Docs option
7. Fill out the panel with the URL from step 2 and set any other options you want to
Including Google docs in this way provides a terrific system for editing your content online. This means,
for example, you could create a site for a client who wants to be able to edit some of the site on their
own. You can set them up with an editable Google document and include it in the site as described
above. When your client wants to change the site they can edit the Google doc and the content of the site
will change to reflect it.
Google Document
Google Documents is Google's free online suite of office productivity applications. At the time of this
writing Google Documents supports formatted text, spreadsheets, and presentations. Google Documents
can be worked on collaboratively, published on the web, and support import from many different sources,
including Microsoft Word and Excel. Many of the Google document formats offer RSS feeds,
integration with Google gadgets and other Google services.
SiteGrinder 3 can import any published Google Document through an -xmedia layer. Many can be
imported either statically or dynamically.

267
Features and Requirements

SEO Value: Yes. Whether imported dynamically or statically, the content from the google doc is
brought directly into your page and it will count to your pages content.
Expandable: Yes. Google text documents will cause the xmedia layer to expand (unless you
apply the -scroll hint to the -xmedia layer).
Must Remain Publicly Published for Dynamic Import. If you use the dynamic import options,
then your source Google doc must remain publicly published to keep the content on the page. If
you turn off the dynamic options and import statically, then the google document only has to be
publicly published at the time you initialize the xmedia layers content.
Graphics Remain on Google's Server. Regardless of whether you import dynamically or not, any
graphics on your Google doc remain on Google's server and are not copied to your own server. If
you delete those graphics, they will become broken links on your site.
Insta-Publish! If you import the content dynamically and choose Google "Automatically
re-publish when changes are made" option, then whenever the Google doc is saved your
SiteGrinder page will be automatically updated with the changes.
Great for User Controlled Content. Set up different Google docs for different users and invite
them as collaborators. Any user who is able to use Google docs can update their SiteGrinder page
with no tool other than Google Documents!
Validity Problems. Most of the HTML produce by Google docs does not comply with modern
web standards. If you use the Google Document importer your page should behave correctly in all
the browsers, but if you run a validation test, it will most likely fail. SiteGrinder tries to clean up
a lot of the more egregious problems of the Google Document source, but at the time of this
writing, SiteGrinder pages that import Google Documents will most likely fail validation.
Publishing a Google Word Processor Document

To import a google document you must first Publish it. For text documents do this by clicking the Share
button in Google docs and choosing the "Publish as web page..." option.
Then click the Publish document button.

268
Then copy the publicly viewable URL google provides you to the clipboard, this is the URL you will use
as the source url for the xmedia entry.
HTML File
Importing HTML from an External File
This is considered an "expert" feature because raw HTML can easily wreck the formatting of your page.
The general html importer can import basic html files into your SiteGrinder -xmedia layer. This is a fairly

269
basic simple importer. The domain of possible web content is vastly larger than the range of sites this
importer can successfully import.
Be sure to test before committing. If this importer cannot perform as expected, then try the iframe
importer, or consider switching to a Google Document format.
Your html file can be imported dynamically or statically, as you see fit. See the discussion of this in the
XMedia Reference Guide.
Preparing a File For Import

The general html importer can import basic pages from any url, including remote ones. No preparation is
needed for importing remote web pages. But very often this importer will be used to import html files
that you have on hand. For those, first place the html source file somewhere in your site directory.
Test it to make sure it looks right at its present location (html files are composite files and you may need
to also move their supporting files).
Features and Restrictions

SEO Value: Yes. Files imported with the general html importer are brought in as actual content
to your page, regardless of whether they are imported dynamically or not.
Expandable: Yes. Html files imported with the general html importer will cause the xmedia layer
to expand (unless you apply the -scroll hint to the -xmedia layer).
Media Remains on Remote Server. If you use a direct URL to a page on some other site, then any
media (graphics, video, etc.) used by the page remains on that server. Obviously, this does not
apply if you've placed the page and its media directly into your site directory yourself.
Easy Updating. If you use the dynamic import options, then your SiteGrinder page will be
changed whenever the imported html changes. Note, that if using a file in your site directory, you
will have to upload that file after changing it to see your remote SiteGrinder page change.
Much easier to use than php require(), server side includes, etc. Because of the automatic parsing
of head versus body elements, the general html importer is much easier to use than traditional
server side include options.
User Carries Validation Burden. The general html importer correctly imports the different parts
of an external html file into the different places it should be included in the final SiteGrinder page
(head versus body). But it does not correct that source HTML or validate it in any way. Users
using the general html importer must be responsible for making sure the imported HTML is well
formed, valid, and malleable enough that it will work as intended once imported. Importing low
quality or malformed HTML may break your SiteGrinder page, causing other elements to
move or disappear from the page or for the page to become otherwise unusable .
External files remain on server. This does not apply if importing an html file you've placed
somewhere in the site directory. But, if you are using the importer to import a remote http URL,
then any external files referenced by the html (graphics, css files, javascript files, etc. ) remain on
their own server, they are not copied to your own site. This is true even of the static importer. If
that server were to become unavailable, the imported content on your SiteGrinder page might not
work correctly.
Expert Notes
This importer inserts the body code from the external document into the div, inserts the head code from
the document into the page head, drops any "html" CSS references, changes any "body" CSS references
to #myxmediadiv and adjust all links.

270
HTML Snippet
What is an HTML Snippet?
The term "HTML snippets" refers to any HTML that is not a complete page. It's most commonly a small
chunk of code you use to embed something from another site (like a Twitter feed) on your page, but it has
infitnite uses.
There are two different importers for including incomplete embeddable snippets of HTML such as might
be provided by YouTube, Twitter, or Paypal.
When you are viewing a video at YouTube.com, YouTube displays the embed code on the right side of
the page next to the video:
The Snippet Importers
SiteGrinder has two snippet importers depending on where your snippet is coming from.
The Snippet Clipboard Importer

The first is for snippets that you copy from somewhere else and paste into the importer.

271
You will almost always paste the snippet code into the "body snippet" field shown above. Some snippets
require additional code, like javascrip or CSS, to be added to the <head> section of the HTML
document. If you are using this kind of snippet then paste such additional code into the "head snippet"
field.
The Snippet File Importer

The other, which is less frequently needed, is for importing a snippet that is saved in a file on your
computer or on a web server somewhere.
Lightroom Gallery
Importing an Adobe Lightroom Gallery
Adobe Lightroom can save out slideshows and galleries. If you'd like to use one on your SiteGrinder
page, use the lightroom importer.
The Lightroom importer looks like this:

272
Preparing the Lightroom Gallery or Slideshow for Import

When it outputs the gallery, Lightroom will save out a directory with an html file (named "index.html"),
as well as a subdirectory of images, and .xml, .js, and .swf files. Place this "index.html" file and the entire
subdirectory somewhere in your site directory.
The index.html file created by the Lightroom gallery is the one you'll import as the source url.
Microsoft Video
Importing Microsoft Video
Microsoft video files (which generally end in .avi) have their own importer, which looks like this:
autoplay will start the movie when you arrive on the page. This should always be on unless your
Flash movie has an internal "start" button.
loop will cause the movie to start over at the beginning when it finishes playing.
Object and iframe
Embedding Other Web Pages
There are two ways to embed other web pages in your own page, iframe and object. Neither is perfect.

273
The object importer is a web standard.
The object importer look like this:
iframes are better supported by browsers and better looking. One of the recent updates to Windows
Internet Explorer 7 partially broke IEs support for <object> HTML. Similarly, many browsers always put
scroll bars on <object> HTML, whether needed or not.
The iframe importer looks like this:
The <object> and <iframe> importers are very similar to one another. Both are dynamic importers that
can pretty much can import almost any web URL you enter.
They are very handy anytime you want to embed already formatted web content.
Requirements and Restrictions.

Any source url provided should be to some sort of HTML web page. These importers should not
be linked directly to any other media type (like video, Flash, etc.). But, if linked to another web
page, that web page can contain video, Flash, etc.
object and iframe are not expandable. These importers are bound to the size of the -xmedia layer.
They do not grow or expand if the content they are importing is larger. Instead, that would result
in a scrollable container.
No SEO Value. Data imported via either importer has no Search Engine Optimization value for
your own website. Any content from the imported page is not counted as content on your own
page.

274
For Experts
If your web page needs to use MathML or SVG, then you will need to switch to the XHTML 1.1
DOCTYPE, which would mean you should use the <object> importer instead of <iframe>.
Photoshop Web Gallery
Importing a Photoshop Web Gallery
Preparing your Photoshop Web Gallery for Import

When it outputs a gallery, the Photoshop Web Gallery feature will save out a directory with an html file
(called "index.html"), as well as a subdirectory of images and other files.
Place this entire folder somewhere in your site directory. (Or upload it and note the URL of the
index.html file).
The index.html file created by Photoshop Web Gallery is the one you'll import as the source url.
PHP Include or PHP Require
Server Side Include With PHP
This is an expert feature.
Servers which support PHP have two commands, "include" and "require", that allow external files to be
imported into your page(s) at the time they are being sent out to a browser. This is called "server side
include".
If you are enough of an expert to want to use these you'll know which one you prefer.
The importers are pretty much identical:

275
Quicktime and Other Video
Importing Generic Video
This importer allows you to link to any media supported by the web browser your client is using as its
default player. In practice this is almost always Apple's Quicktime player, which supports the .mov
Quicktime standard videos as well as many other media types including MP3 music files.
This importer is not for Microsoft Video or FLV Video.

276
The importer has the following options:
autoplay will start the movie when you arrive on the page. This should always be on unless your
Flash movie has an internal "start" button.
loop will cause the movie to start over at the beginning when it finishes playing.
ShowIt Web Gallery
Displaying a ShowItWeb Gallery
ShowIt Web is a popular slideshow and gallery program creation application (www.showitfast.com).
You can import these slideshows and galleries into your SiteGrinder page.

277
Preparing your ShowItWeb slideshows and galleries for import

When it outputs the gallery, ShowItWeb will save out a directory with an html file (named "index.html"),
as well as a subdirectory of images, and other files. Place this entire direcotry somewhere in your site
directory
The *index.html *file created by ShowItWeb is the one you'll import as the source url.
The embed, ask to play, and disable net options are documented on the show it fast website and within
the ShowItWeb application.
Unformatted Text
Adding Plain Text
The plain text importers allow you to insert a block of unformatted plain text for display within the
xmedia layer boundaries.
There are two versions, one for text you type or paste in an the other for importing text from a file.

278
Typing or Pasting You Plain Text
Type or paste text into the field.
Importing a File of Plain Text
Select a file or type in a url.
Zoomify
Adding a Zoomify Image
Zoomify is a third party plug-in that comes bundled with some versions of Photoshop.
It outputs a small web page that uses flash to let the user zoom into and out of an image. It is under
Photoshop's File->Export menu.
Move the entire directory of zoomify contents to your site directory. Import the " index.html" file from
that directory.

279
Search Engine Optimization (SEO)
Page Titles and SEO
Well chosen page titles are very important for SEO. SiteGrinder initially uses the name you give your
page layer comps for the page title but you can change your page titles in the SiteGrinder Content
Manager.
If you name your page "SiteGrinder Technical Support -page" then SiteGrinder will name the file
"SiteGrinder-Technical-Support.html", properly converting spaces to hyphens.
Page File Names and SEO
Page file names may be important for SEO. SiteGrinder bases your page file names on the name you
give you page layer comps, though it modifies them to remove illegal characters like spaces.
Getting a Good Search Engine Ranking
Your page is "understood" and "categorized" by the real searchable HTML text that appears on it. If you
are a veterinarian, but google thinks you sell shoes, you will have big problems. So use lots of well
written, natural text.
Use lots of "real" text. By "real" text, we mean text that is going to be output as CSS-styled HTML text,
not output as a graphic.See the Text Reference for details about controlling the output of your type layers.
Update your text content as frequently as you can. It helps attract a readership (which results in higher
rankings) and you'll get indexed more often by the search engines. This is generally a good thing.
A blog is good for frequent updates and readership. SiteGrinder supports blog creation with its -blog hint.
Or, install a third party one.
Your page is "ranked" by the number of people that link to you, and the ranking/quality of their site. You
can spend all the time in the world making your site perfectly SEO-ready, but if no one links to you,
you'll never come up on the first page of any search. Get other sites to link to you. Include your site in
your signature on the forums you participate on. Make news.
Navigation: unordered list nav bars are the best, Google-wise. In SiteGrinder this means use -menu hint

280
on a text layer. A SiteGrinder menu made from a type layer with the -text and -menu hints and
positioned near the top of your page may get picked up by Google to get the cool-kid search result with
included subnavgation.
This looks like the screenshot below:
Meta "keywords" were useful in 1995, nearly useless now, but you can create them with SiteGrinder.
Meta "description" _is_ valuable. It may be shown under your Google listing (if Google doesn't find the
nav near the top of the page).
This looks like the screenshot below:

281
Content Management Concepts
Contents
Contents
Introduction
Design vs. Content
What is Content Management?
Editable Content Elements
Type Layers as Content
Image Layers as Content
Setting Limits on Editing
The -noedit Hint
Limiting the Content Manager's Text Editor
Editable xmedia Elements
Pages and Content Management
Unique vs. Shared
Automatically Unique vs. Automatically Shared Layers
Editable Text and Page Layout
Limitations of the Content Manager
Introduction
This guide assumes you have read the Content Management Essentials Guide. If you haven't please do so
before continuing.
This reference section covers the concepts underlying SiteGrinder's content management system.
See the Content Manager's User Interface Reference for details about the Content Manager controls and
how to edit particular kinds of content.
Design vs. Content
Web pages can be looked at as a combination of design elements and content elements. The content is
made up of the textual information and images that are the primary purpose of the web page. Content is
the reason you make a web page in the first place. If you removed the content, everything else is the
design, the stuff that makes the content look appealing. Both are important to web design, but it is
equally important to keep them separate from one another. One of the many advantages of separating
design and content is that a properly organized web page, such as the kind SiteGrinder 3 produces, can be
given a completely new visual design without disturbing the content.
The SiteGrinder workflow is divided into a design phase and a content phase because of the amazing
advantages provided by keeping design and content separate.
One of the unique advantages of SiteGrinder is that, while the design phase is the last part of the
workflow, it is not a one way street. You will often return to your Photoshop document to make changes,

282
and then re-deploy one or more pages to move those changes forward into the content management
phase.
What is Content Management?
"Content management" generally refers to manipulating the content of your web site by editing, deleting,
or adding new content.
Some content management systems, like SiteGrinder 3, allow you to perform these functions on the
original versions of your pages that reside on your local computer. SiteGrinder's Content Manager is what
you use to edit pages locally before you upload them. Once you are happy with the changes you can
upload the new versions of your pages to your web host. We call this "local" content management
because the files you are editing are right on your machine and must be uploaded after editing.
Some content management systems allow you to edit the content of your remote pages from any
web-connected computer without having to download and re-upload them. Remote editing is the
capability that SiteGrinder's optional Control add-on provides. Editing your site locally or remotely are
essentially identical processes.
Whether you are editing a local site or a remote one, all of SiteGrinder's content management tools reside
in your browser window along with the page you are editing. This means you can see the results of your
changes immediately.
Editable Content Elements
The following page elements are editable using the SiteGrinder Content Manager's controls:
Any type layers exporting as styled CSS text

Any page images that you have chosen to treat as content (see below)
Gallery images and metadata
Page titles and selection of home pages
CSS Text Menus
Button links
Blog settings
Selection of external media files added to your pages with the -xmedia hint
Type Layers as Content
Type layers that are exporting as CSS text are always considered content.
Type layers exporting as images are treated just as if they were image layers.
To learn how to tell SiteGrinder whether to export a type layer as CSS text or an image see the Text
Reference Guide.
Image Layers as Content
Images layers in Photoshop are treated as decorative design elements unless they are given the "-content"
hint. (Gallery images are never included as layers and are always treated as content by SiteGrinder.)
The -content hint tells SiteGrinder to export the image as an external file that is never merged with any
other layers during the export. It's really a short cut that has exactly the same effect as if you had created

283
an xmedia layer of the same dimensions and then imported the image in the content manager.
This means you can change the image for another in the external media editor of the content manager.
The name of image -content layers is used in the underlying code in a way that is beneficial for both
search engine optimization as well as screen readers for the blind.
IMPORTANT: You should only use the -content hint on image layers that really are important content
to the page rather than part of the decoration.
Expert Tip: Content images are included in the HTML in the proper way using the <img> tag. The
name of the image layer is the initial value of the alt attribute, and the alt text can be changed in the
Content Manager. Other image layers are treated in most cases as CSS backgrounds.
Setting Limits on Editing
Content layers are all, by default, editable in the Content Manager. Sometimes, however, you may want
to limit what can be edited, especially if you are designing a site for a client to edit parts of.
SiteGrinder does not support different user levels in its Content Manager but there are ways to limit
editing.
The -noedit Hint
Text and menu content layers can be given the -noedit hint, which will cause the layer not to be editable
in the Content Manager. Editing of such layers will be prevented both locally and remotely.
While noedit hinted menu layer links won't be editable in the Content Manager's menu editor, you will
still be able to append new items to noedit menus when you use the Content Manager to create new
pages.
Limiting the Content Manager's Text Editor
The Content Manager's text editor has two modes, "advanced" and "simple". The advanced mode allows
essentially total freedom, including freedom to edit the HTML of the text element directly which can
potentially have dire consequences. The "simple" mode has many fewer options and is therefore much
safer.
You can determine which of these editors is available for any site you make using the "advanced" options
in the "New Site" window. See the Sites Reference Guide for details.
Editable xmedia Elements
An even stronger limit on editing can be created by not allowing remote Content Manager access at all.
Instead you can use an xmedia layer to embed content that is editable in another system. The xmedia
Google Documents importer is ideal for this because your client can use Google's simple word processor
to edit text in a single area of a page. They will have no editing access to any other elements.
Pages and Content Management
It is common for the same page elements to appear on many of a site's pages. This can present a
problem. If the same menu appears on ten pages and, after uploading your site you realize one of the
links is incorrect you face the task of editing that item ten times.

284
Traditionally, if you were handy with complex technologies with names like "server-side include", you
could create an external file containing the menu and share it among the various pages. The advantage of
this is that you can change the menu in the single external file and the change will immediately be
reflected on all of the pages that use it.
SiteGrinder takes advantage of this approach automatically, and best of all you don't have to worry about
any of the gory technical details.
Unique vs. Shared
All SiteGrinder content is either "unique" or "shared".
Unique content layers can appear on multiple pages, but when they are changed on one page they change
has no effect on the other pages' version of the unique content.
Shared content layers can appear on multiple pages, and when they are changed on one page the change
is instantly reflected on the other pages' version of the shared content.
You can use the "-unique" and "-shared" hint on content layers, but you usually don't have to.
If a content layer has neither the unique or shared hints then SiteGrinder decides based on the element
type how the layer should be treated. SiteGrinder is usually correct.
Automatically Unique vs. Automatically Shared Layers

CSS text -menu layers are always shared. This is because of the important role text menus play in the
Content Manager. If you need a CSS menu layer to act as unique then you will need to create a special
copy of the menu layer for each page's layer comp.
Text layers are shared if the same text layer appears on multiple page layer comps. Otherwise they are
treated as unique when creating new pages in the Content Manager. (see below)
Image -content layers are also considered unique if they appear on one page or shared if they appear on
multiple page layer comps.

The Content Manager not only allows you to edit content within pages, it also gives you the ability to
create completely new pages based on those that already exist.
When you create a new page in the Content Manager the elements keep their unique or shared settings.
Editable Text and Page Layout
When you edit a type layer in the Content Manager it will almost always change in size to become
shorter or taller than the original layer in Photoshop. This means the text has the potential to overrun
other elements on the page.
To handle how elements may need to shift to accomodate the changing size of other elements SiteGrinder
provides the -column hint. See the Column Reference Guide for details.

285
All of the content editors are available in the Content Manager whether you are editing locally or
remotely. The main difference is that after you make changes using the local version of the Content
Manager you will need to Synchronize before those changes are reflected on the web.
Limitations of the Content Manager
The Content Manager can edit page elements but it cannot create entirely new elements. New elements
must be added as layers in Photoshop.
Galleries
SiteGrinder 3 Galleries
This document provides complete reference information on SiteGrinder 3 Galleries.
For a quick summary of the most important things you should know before creating a SiteGrinder gallery
you may wish to refer to the Gallery Essentials guide.
For a reference guide to the different plugin gallery components that ship with SiteGrinder click here.

286
Gallery Topics
SiteGrinder 3 Galleries
Gallery Topics
Introduction
Gallery Workflow
The Gallery Components
The Picturebox Component
Picturebox Basics
The Next & Previous Buttons Component
The Thumbsheet & Thumbs Component
Creating the Thumbsheet Layout in Photoshop
Choosing Thumbsheet Options
Overflowing Thumbsheets
Importing Thumbnails: Make Custom Thumbs Yourself or Have
SiteGrinder Do It
The Viewsheet Component
Creating the Viewsheet Layout in Photoshop
Importing Viewsheet Images
Bulk Importing Exhibits and Views
Importing Viewsheet Thumbnails
Overflowing Viewsheets
The Big Box Component (lightbox-style image display)
Setting Bigbox Options
Triggering Bigbox Display
Bigbox Versions of Images
The Metadata Component
What is Metadata?
JPEG Metadata
Supported Jpeg Metadata Fields
Editing JPEG Metadata
Non-JPEG Metadata
Using Metadata On Your Pages
Using Metadata Only In Gallery Components
Altering Metadata in the Content Manager
HTML in Metadata
Metadata and Ecommerce
The Panelsheet Component
Creating the Panelsheet Layout
Overflowing Panelsheets
Panelsheets and Gallery Navigation
Gallery vs Feed Data for Panelsheets
Troubleshooting Feeds
Creating Multiple Galleries With Identical Layouts
Complete Gallery Hint List

287
Introduction
The SiteGrinder 3 gallery system may be the most versatile ever created, and, because it is based on a
component system, it's even user-expandable.
Some of the most popular features include:
Add, Delete, and Reorder images in galleries after deploying your site
Advanced metadata support
"Lightbox"-style image presentation supported by most gallery components
ecommerce support in galleries with the SG3 Commerce add-in
Create galleries with two levels for navigating alternate views of the same item
Replicate entire gallery layouts after you deploy to create new galleries with different image sets
Create multiple independent galleries on any page
Animated slideshows are part of the gallery system and can also be controlled by the navigation
components
Gallery Workflow
The gallery workflow goes like this:
1. Decide which gallery components you want to use. These include pictureboxes, thumbsheets, etc.
You can always change the components and rebuild later.
2. Create and position the Photoshop layers representing the components you want to use in your
gallery and name them after each other along with the appropriate hints. "Weddings-thumbsheet"
will control "Weddings-picturebox".
3. Build your design and change the settings for the various components live in the browser using
the generic images in SiteGrinder's Design Manager.
4. Optionally return to Photoshop to alter component layer sizes and positions, add or delete
components, and rebuild.
5. Once you are happy with your design choices, deploy your design. In SiteGrinder's Content
Manager you will add your own images to the gallery.
6. Ongoing maintenance features of SiteGrinder's Content Manager allow you to add new galleries
and edit the images and image order of galleries you have previously created.
The Gallery Components
SiteGrinder 3 Galleries consist of almost any combination of the basic gallery components:
pictureboxes
thumbsheets
viewsheets
panelsheets
bigboxes
metadata
next and previous navigation buttons
Each of these components has a number of variations that you can choose from in SiteGrinder's Design
Manager. For example there is a CSS picturebox, and several Flash variations.

288
Like so many SiteGrinder features, you tell SiteGrinder which components go together by naming the
component layers the same and using different hints. Thus a thumbsheet named "Weddings-thumbsheet"
will control a picturebox named "Weddings-picturebox". In this case the gallery as a whole will be
referred to as "Weddings" in the SiteGrinder controls.
You can even have multiple galleries on a single page showing different sets of images. A common use
of this might be a self playing Flash picturebox in one part of the page represented by a single layer with
the picturebox hint named "This weeks specials-picturebox" and a thumbnail-navigated gallery in another
area of the page consisting of to layers named "All merchandise-picturebox" and "All
merchandise-thumbsheet".
Note to SiteGrinder 2 Users:Gallery layers can now be included on any page. There is no longer a
-gallery hint in SiteGrinder 3.
Important: The Picturebox, Thumbsheet, and Viewsheet components in your Photoshop file are
placeholders. SiteGrinder uses them only for the rectangular areas they indicate. This means the image
contents and layer styles of these layers will never be shown on a built page. If you want to create a
frame or dropshadow around one of these placeholder areas you must create a separate layer (or layers)
behind them in your document. Such a layer will not use a hint since it is just decoration and not a
functional part of the gallery.
The Picturebox Component

Picturebox Basics
While not required for any gallery, a picturebox is often the main event for a gallery It's the rectangular
area of the page where the actual image you are navigating to should appear, and it's often the most
visually prominent part of a gallery. While pictureboxes are not strictly necessary, most galleries feature
one.
To make a picturebox just create a rectangular filled area in an image layer or a rectangular object layer
and add the "-picturebox" hint to the end of its name.
Congratulations, with only one Photoshop layer you've just made a simple, yet complete, gallery! Why is
it complete? A single picturebox is the simplest possible complete gallery because many picturebox
types support navigation from image to image. The simplest picturebox can move to the next image in
the gallery when you click it, for example. Flash pictureboxes can even auto-advance and can have their
own embedded animated navigation controls for next/previous/etc.
You determine how you want users to interact with pictureboxes, such as what happens when the box is
clicked and whether to protect the images from right-click saving, using the gallery controls in the Design
Manager.
You can also, of course, provide much more interesting ways of navigating your images. Gallery
navigation is the primary purpose of most of the other gallery component types.
Note to SiteGrinder 2 Users: Flash pictureboxes can present animated slideshows in addition to being
controlled by other components and are the replacement for the SiteGrinder 2 "slideshow" hint.
The Next & Previous Buttons Component

To create a button to go to the next or previous image you simply add the "-next" or "-previous" hints to a
standard SiteGrinder button named after the gallery you want to navigate.
If you create a picturebox named "nature shots-picturebox" you can create a button layer named "nature

289
shots-next-button" or even "nature shots-button-next" since the order of hints doesn't matter.
This opens up all of SiteGrinder's buttons behaviors to next/previous controls. For example if you are
creating an image button you can add a layer named "nature shots-hover-next" to be the hover state of the
button created above.
This all applies to the "-previous" hint as well.
There are other hints that provide variations of next and previous functionality to control the display of
thumbsheets, viewsheets, and panels, which are discussed in the relevant sections below.
The Thumbsheet & Thumbs Component

Thumbsheets, as you have probably guessed, provide navigation of galleries via small versions of your
images. These thumbsheets can be as simple as empty css colored rectangles representing your images or
as fancy as an animated sliding Flash movie with special hover effects.
You can even create multiple thumbsheets to control the same picturebox.
Creating the Thumbsheet Layout in Photoshop

In Photoshop a thumbsheet consists of a rectangular layer with the "-thumbsheet" hint that tells
SiteGrinder where it should draw the thumbs, and an optional, though usually desirable, layer with the
-thumb hint to indicate the dimensions each thumb should have. (If you don't provide the -thumb then
SiteGrinder will just use a standard size.)
A layer named "Smith Wedding-thumbsheet" will navigate a layer named "Smith Wedding-picturebox"
using thumbnails matching the dimensions of "Smith Wedding-thumb".
Choosing Thumbsheet Options

The behavior of the thumbsheet and thumbs, how they hilite when hovered over, how they are navigated,
etc, is up to the particular type of thumbsheet and its options.
You choose these in the SG3Design Manager after building a page with a gallery on it.
Overflowing Thumbsheets
Usually a gallery will require more thumbs than can fit all at once in the area the thumbsheet provides.
Different thumbsheets provide different ways of handling this situation.
Growing thumbsheets will expand in size as necessary to accommodate all thumbnails. If a

growing thumbsheet is part of a column then the other column content will reposition
automatically to make room.
Paged thumbsheets will show only as many thumbs at a time as can entirely fit in the thumbsheet
area. This is called a thumbset. These can be navigated using buttons with the "nextthumbset"
and "previousthumbset" hints added to them. The particular visual behavior of transitioning from
one set to another depends on the kind of thumbsheet you choose in the design manager and the
settings you give it.
Sliding thumbsheets will animate the thumbs across the area of the thumbsheet usually based on
the position of the mouse over the sheet.
Because the gallery system is expandable there may be other ways to navigate overflowing thumbsheets
added in the future.

290
Importing Thumbnails: Make Custom Thumbs Yourself or Have SiteGrinder Do It

After you deploy your site, or at least a page in your site containing gallery layers, it's time to import your
images using the Content Manager's Gallery Editor. You do this by selecting the gallery component
listed for the gallery you want to edit in the Content Manager's "Editable Content" control. Usually this
is the picturebox, but since not all galleries use a picturebox it could be a thumbsheet or a panelsheet.
Once you have selected the gallery click the "edit" button to open SiteGrinder's gallery editor. Here you
will see all the images you have imported so far, if any.
Import an image at a time or a whole folder at once. When you import you will also be able to select a
folder of thumbnails if your gallery has an associated thumbsheet. SiteGrinder expects the custom
thumbnails in this folder to have the same file names as the large images. Or you can elect to have
SiteGrinder generate the thumbnails automatically from your images.
For details see the Gallery Editor reference.
The Viewsheet Component

Most galleries have a simple structure with a single set of images to navigate. But what if you are
making a site for real a real estate company and you'd like to have a gallery of homes including multiple
images for each house? You might have a few interior and exterior shots for each property but you'd like
the site visitor to be able to navigate those alternate views only for houses they are interested in.
Or maybe you are making a web store that sells Chia Pets(c) and you'd like each pet to have two or three
different angles without having all those angles clogging up the main thumbnail navigation. A simple
gallery doesn't provide a good way to navigate in this type of situation.
Luckily SiteGrinder 3 optionally supports galleries with two levels. Each "item" in the gallery is called
an "exhibit", and each exhibit can have multiple "views", commonly used to provide alternate images of
the same item. This lends itself very well to making web stores with one or more images of each thing
you are selling all organized into one gallery.
"Viewsheets" are designed for navigating additional images you may want to associate with the photos in
your thumbsheet. An example of this is a web store where each thumb in the thumbsheet shows a
different item and, when one of these items is selected, the thumbs in the viewsheet show alternate
images of that item.
Creating the Viewsheet Layout in Photoshop

You create a viewsheet exactly like a thumbsheet but substituting the "-viewsheet" hint for the
"-thumbsheet" hint. Thus you might have a gallery with a picturebox, a thumbsheet, and a viewsheet
consisting of the following layers:
"Blini Babies-picturebox"
"Blini Babies-thumbsheet"
"Blini Babies-thumb"
"Blini Babies-viewsheet"
"Blini Babies-thumb"
Viewsheets are automatically hidden when viewing an exhibit that has no alternate views.
Like thumbsheets, viewsheet appearance style and behavior are set in the Design Manager by selecting a
viewsheet type and customizing its settings.

291
Notice that thumbsheets and viewsheets each use their own -thumb layer. This means your viewsheet
thumbs don't have to be the same size as the thumbsheet thumbs. SiteGrinder knows which thumb goes
with which sheet by their positions in the document. Place the thumbsheet thumb layer over the
thumbsheet and the viewsheet thumb layer over the viewsheet.
[[screenshot]]
Importing Viewsheet Images

Viewsheet images are imported in the Gallery Editor of the Content Manager, the same way you import
images into galleries that do not have alternate views.
You have two choices when importing alternate views:
Bulk import exhibits and alternate views at the same time using a special naming scheme.
Import the exhibit images all at once and then add alternate views to each exhibit in turn using the
Gallery Editor.
Bulk Importing Exhibits and Views

SiteGrinder follows a simple naming convention to let you organize images into exhibits and views.
Double dashes (--) are used in the file name to separate exhibit name from view name.
truck--front.jpg
truck--side.jpg
truck--inside.jpg
motorcycle--side.jpg
motorcycle--front.jpg
motorcycle--top.jpg
This defines two exhibits, "truck" and "motorcycle", as well as three images that go along with each
exhibit.
For details about importing view images see the Gallery Editor reference.
Importing Viewsheet Thumbnails

Viewsheet thumbnails are treated in the same way as thumbsheet thumbnails.
Either SiteGrinder can generate the thumbnails when you import the images by shrinking them or you
can provide a separate folder of custom thumbnails with names identical to the images they are
thumbnails of.
Overflowing Viewsheets
Viewsheet overflow is handled almost exactly like Thumbsheet overflow as described in the previous
section. The only difference is that paged viewsheets are divided into "viewsets" (like "thumbsets") and
are navigated using buttons with the "-nextviewset" and "-previousviewset" hints.
The Big Box Component (lightbox-style image display)

A very popular variety of image display on the web is the "lightbox" style, where the background of a
page is darkened and an image is presented centered in the browser window.
SiteGrinder 3 supports this through "bigbox" gallery components.

292
Unlike other components these bigboxes use no placeholder layer in your document and therefore no
hint.
Bigboxes are added by selecting "bigbox" as an option for what to do when clicked set in any relevant
component's option panel, including pictureboxes, thumbsheets, and viewsheets.
Setting Bigbox Options

Once you select "bigbox", click "Apply" and close the option panel, you will see "bigbox" listed in the
Gallery Appearance panel of the Design Manager:
You can click in the "Type" column next to the bigbox to open the bigbox settings.
Each bigbox offers different options such as background color and metadata display. Some bigboxes
even allow continued navigation of the gallery without closing the bigbox.
Triggering Bigbox Display

The bigbox option is always based on some event, like a mouse click, but exactly what events are
supported is up to the particular component.
As with all gallery components the best way to familiarize yourself with the options is to select them and
click "Apply". Once the option is applied you can immediately open a bigbox by clicking on the
component in the gallery that triggers it and see how you like it.
Bigbox Versions of Images

When you import gallery images in the Content Manager you can optionally import a special set of
images to be used in the bigbox viewers. This means you can have a size for thumbnails, a size for
pictureboxes, and yet another for bigbox display. If you don't include a bigbox version of a given image
then the bigbox will display the picturebox version.
The Metadata Component

You can customize your gallery pages by including image metadata using Photoshop type layers and the
-metadata hint. Some gallery components, like bigboxes, can also display this data.

293
What is Metadata?
Metadata is textual information associated with an image file. SiteGrinder supports standard jpeg
metadata fields (like "Description"). "Standard" means one of the two common jpeg metadata formats,
IPTC and EXIF.
SiteGrinder also allows you to associate additional information with your images using any single-word
fieldname you like.
JPEG Metadata
In addition to an image, a JPEG file can contain textual information called "metadata." Most digital
cameras, for example, automatically record the date and time the photo was taken along with the make
and model of the camera, whether or not a flash was used, the exposure, f-stop, etc as part of this data.
You can also add your own custom metadata to JPEG photos after you load them onto your computer.
Comments, authorship credits, copyright statements, web links, even entire news stories can be added.
The big advantage to metadata is that it travels along with the image file. You don't need to keep a
separate database, so you don't have to worry about the data getting out of sync with your image files.
Each metadata "field" needs a label to identify it. The label for the exposure at which a photo is taken, for
example, is "Exposure", and its value will be something like "1/60 at f/2 ".
"Description" and "Author" are two of the most commonly customized metadata fields.
Supported Jpeg Metadata Fields

You can edit the fields listed below in tools like Adobe Bridge or Photoshop's File->File Info command.
Supported IPTC metadata fields:
title, urgency, category, supplemental categories, keywords, instructions, date, time, author,
author title, city, province-state, country code, country, transmission reference, headline, credit,
source, copyright, description, description writer
Supported EXIF metadata fields:
image width, image height, bits per component, compression scheme, pixel composition,
orientation, number of components, subsampling ratio of Y to C, YCbCr positioning, x resolution,
y resolution, resolution unit, strip offsets, rows per strip, strip byte count, offset to JPEG SOI,
bytes of JPEG data, transfer function, white point chromaticity, primaries chromaticity, YCbCr
coefficients, reference black/white, datetime, description, make, model, software, artist, copyright
Editing JPEG Metadata

The easiest way to change or add metadata in a single jpeg file is using Photoshop's File->File Info
command on a jpeg file that is open in Photoshop. To quickly edit the metadata of multiple jpeg image
files Adobe Bridge works well.
If your galleries include images that aren't jpegs you can still provide metadata for them using the gallery
editor in SiteGrinder's Content Manager. (see "Altering Metadata in the Content Manager" below)
Non-JPEG Metadata
In addition to using the JPEG metadata fieldnames you can also make up any one-word metadata name
you like and use it in your document -metadata layers as described below.

294
Because such metadata fields don't exist in the JPEG files they will start out empty and you will fill them
out in the Content Manager's Gallery Editor for each image in your gallery.
Using Metadata On Your Pages

You can add metadata from gallery images to any type layer in your design in two steps.
1. Add one or more metadata field names surrounded by double square brackets (as in
[[description]] ) to one or more type layers in Photoshop.
2. Name the type layer(s) after the associated gallery and add the "-metadata" hint, as in "Smith
Wedding-metadata".
[[screenshot]]
Notice in the above image that you can mix in these metadata field names with non metadata text.
The above type layer will look like this on the final page, with the metadata text filled in from the
currently selected image:
[[screenshot]]
Notice that the metadata takes on the character and paragraph style applied to the label in Photoshop.
NOTE: You can use any word you like as the metadata fieldname, such as [[wholesaleprice]], but the
name you use must have no spaces or other special characters in it. Metadata names that don't exist in the
source JPEG file will start out empty but you will be able to edit them in the Content Manager's Gallery
Editor.
Using Metadata Only In Gallery Components

Some gallery components can use metadata as well. For example bigboxes can title your images with
metadata that you specify in the bigbox options panels.
This means you might want a component to include metadata that doesn't appear on the page as text in a
-metadata layer.
This poses a small problem: after you deploy, SiteGrinder only knows about metadata you've included on
the page in -metadata layers. This saves space because there are so many unused metadata fields in every
image.
If you want to use metadata in a component but you don't want the metadata to otherwise appear on the
page, just follow these steps:
1. Create a -metadata type layer as described above, being sure to match its name to the other
components it is working with.
2. Add the metadata fields you want to use in brackets in any order to the contents of the type layer.
3. Hide the type layer in Photoshop's layers palette
SiteGrinder will include the metadata from the hidden layer in its gallery database so you can use it
metadata-supporting components like bigboxes.
Altering Metadata in the Content Manager

The Content Manager's Gallery Editor window allows you to add/delete/reorder images, and it also
allows you to examine or change the metadata for images.

295
If the images had blank metadata or are saved in formats like gif that don't support internal metadata then
the metadata fields will start out blank but are still editable. This means you can assign metadata to any
image!
See the Gallery Editor Reference for details.
NOTE: The metadata additions or edits you make in the Content Manager are stored in a SiteGrinder
database but they have no effect on your original images. Your changes won't be reflected in the original
image metadata.
HTML in Metadata
Metadata isn't limited to plain text. If you type or paste HTML into your metadata it will be rendered by
the browser. This means you could, for example, use embed code for PayPal "Buy Now" buttons or use a
panelsheet to present YouTube videos!
Metadata and Ecommerce

SiteGrinder's "Commerce" add-on allows you to incorporate gallery metadata as ecommerce data like
price. See the Commerce reference for details.
The Panelsheet Component

Cannot resolve external resource into attachment.
Panelsheets are a unique feature of SiteGrinder. Think of them as thumbsheets on steroids. As you've
seen so far in this guide, the exact look and behavior of metadata, thumbsheets, pictureboxes, viewsheets,
and bigboxes are all determined by the gallery plugins you choose for them and the associated settings
you customize.
Panelsheets take a different approach that allows you to customize the look using multiple layers. The
idea is that you create a "panel" design that can include image layers, type layers (with or without
metadata), and an optional thumb image.
In the Design Manager you select the panelsheet plugin, just like with the other components. But your
choice mainly affects how panels overflow, not how panels look.
Finally panels can have two different sources for their image and metadata: gallery images or live internet
feeds like RSS.
Creating the Panelsheet Layout

The core of a panelsheet is a rectangular placeholder layer that uses the "-panelsheet" hint. If this layer is
associated with a gallery it must be named after the other gallery components, so "Smith
Wedding-picturebox" will match to "Smith Wedding-panelsheet". Similar thumbsheets and thumbs, a
panelsheet layer indicates a boundary to SiteGrinder within which to fit panels.
The next requirement for a panelsheet is a rectangular layer with a matching name and using the "-panel"
hint, as in "Smith Wedding-panel". This layer is also a placeholder layer and must be positioned within
the boundaries of the panelsheet. This means, obviously, that the panel must be smaller than the
panelsheet.
[[screenshot]]
The -panel layer is a placeholder that forms a boundary. Any layer you place above this boundary that
fits within it will be duplicated for every panel as needed.

296
These include:
A rectangular layer named after the gallery with the "-panelthumb" hint tells SiteGrinder that you
want a thumbnail drawn into that rectangle representing an image in a gallery very much like a
thunbsheet thumb.
One or more type layers named after the gallery with the metadata hint and double-bracketed
metdata labels inside. The metadata will be custom for each entry in the gallery or data feed.
Type or image layers to be repeated with each panel
[[screenshots in Photoshop showing just panelsheet, panel, panelthumb, and metadata]]
[[screenshots showing same but with decoration layers added]]
[[screenshot results in browser]]
[[spacing controlled by offset from upper left?]]
Overflowing Panelsheets
More often than not a panelsheet will have more panels than can fit all at once in the area the panelsheet
provides. Just like with thumbsheets and viewsheets, different panelsheets provide different ways of
handling this situation.
Growing panelsheets will expand in size as necessary to accommodate all panels. If a growing
panelsheet is part of a column then the other column content will reposition automatically to make
room.
Paged panelsheets will show only as many thumbs at a time as can entirely fit in the panelsheet
area. This is called a panelset. These can be navigated using buttons with the "nextpanelset" and
"previouspanelset" hints added to them. The particular visual behavior of transitioning from one
set to another depends on the kind of panelsheet you choose in the Design Manager and the
settings you give it.
Panelsheets and Gallery Navigation

By choosing different panelsheet options in the Design Manager you can determine how Panelsheets
navigate your gallery if at all. You can make each panel a big button or just the panelthumbs.
Gallery vs Feed Data for Panelsheets

There are two kinds of content in panelsheets: things that change from panel to panel and things that stay
the same.
Changing content is supported by metadata and panelthumbs. The rest of the layers used in a panel are
essentially decoration and are repeated without change in every panel.
The changing content can come from a gallery, just the way -thumb and -metadata layers use gallery data.
But panels offer another option, called "feed". You can select "feed" as the data source for a panelsheet
within the options window of the Content Manager for the panel type you've chosen.
[[screenshot]]
If you do this will also need to supply a URL to a compatible feed. SiteGrinder supports RSS, ATOM,
and other kinds of feed data, though some trial and error may be necessary.

297
After you have chosen feed and entered the URL for the feed in the appropriate field you can click apply
to see if everything is working.
[[screenshot]]
When you use panelsheets with feed data they will update every time the feed changes and the browser
window is refreshed.
Panelsheets using feed data don't have to be named after a gallery because the aren't using a gallery for
anything.
Troubleshooting Feeds
Testing the feed URL.
[[more]]
[[link to custom feed metadata technique in advanced section]]
Creating Multiple Galleries With Identical Layouts
Many photographers or illustrators want to organize their many images into smaller categorized galleries,
such as Weddings, Portraits, Still Life, Black and White, etc. SiteGrinder makes this easy, especially if
each gallery will have the same basic layout.
A page with a gallery components on it can be replicated in the SiteGrinder 3 Content Manager in order
to create a separate gallery page using a different set of images. You can do this as many times as you
like. Using this feature in combination with SiteGrinder 3's metadata support for customizing
information about each image is very powerful.
[[more detail here plus link to tutorial/screencast]]
Complete Gallery Hint List
-picturebox
-thumbsheet
-thumb
-viewsheet
-metadata
-next / -previous
-nextthumbset / -previousthumbset
-nextview / -previousview
-nextviewset / -previousviewset
-panel
-panelsheet
-panelthumb
-nextpanelset / -previouspanelset
-nextpanel / -previouspanel

298
Gallery Components
Introduction
Common Component Options
Fit Non-Proportional Images
Mouse Clicking/Hovering
Borders, Backgrounds, and Spacing
Growing and Non Growing Components
Metadata
Protection Against "Right Click To Save"
Pictureboxes
SiteGrinder CSS
SiteGrinder Basic Flash
AmenK Flash
Before/After Image Comparison
What you'll do in Photoshop
What you'll do in the Design Manager
What you'll do in the Content Manager
Prepare your files for import
Import your before and after images
Thumbsheets and Viewsheets
SiteGrinder Image CSS
Paged Image CSS
Generic CSS
SiteGrinder Flash
Hidden
Panelsheets
Growing
Sliding
Bigboxes
Shadowbox
Fancybox
Building Your Own Components
Introduction
SiteGrinder galleries are based on a plug-in system of components. Components and their options are
bound to expand as SiteGrinder 3 matures. The documentation here may not always be completely up to
date.
Ultimately the best way to figure out what an option does is to to select it in the component's settings
window in the Design Manager, click "Apply", and try it out immediately in the browser window.
Remember, all of the components (except for bigboxes) can exist by themselves on a page. You can
place a CSS Picturebox somewhere where you'd like to display a random image when a page loads. You
can use a small Flash picturebox as a stand-alone slideshow in the banner of your site.

299
Common Component Options
There are certain options shared by most components. This section describes them to avoid redundancy
below.
Fit Non-Proportional Images

Ideally your pictureboxes, thumbnails, etc. will be the same dimensions as your images, but this is often
not the case.
If images are smaller than their placeholder (ie picturebox or other component) then SiteGrinder will
center the images within the original rectangle of the component.
If images are larger than their placeholder then SiteGrinder is forced to shrink them. If the images have
the same width/height proportions as the gallery placeholder layer then there's not a problem.
But if images need to be re-sized and must fit into a rectangle with different proportions than they
originally had, SiteGrinder needs you to tell it what to do. That's what the "fit non-proportional images"
option is all about.
The menu for this option gives you two choices, inset or fill.
Inset will "letterbox" the image so you will see the whole thing but there will be blank areas above and
below or to either side of the image depending on its proportions. What you see in those blank areas
depends on the type of component and the settings you choose for it. Usually it will be either whatever is
behind the picturebox on the page or a background color of some kind set by the component.
Mouse Clicking/Hovering
Many components have the ability to respond to the mouse.
Thumbsheets can change picturebox images when thumbs are hovered over or clicked on.
Pictureboxes can advance to the next image, jump to a certain URL when clicked on, open a bigbox with
a larger version of the current image.
With thumbsheets you'll often see options for choosing what mouse event (ie hover or click) to respond
to and what to do in response.
Borders, Backgrounds, and Spacing

Many components, especially thumbsheets, provide options for determining border colors, border widths,
background colors, and spacing between elements.
Usually these options will allow different choices for the item being hovered over, the currently selected
item, and items tht are neither currently selected nor being hovered over.
Growing and Non Growing Components

Some components, notably certain thumbsheets and panelsheets, grow as large as they need to to display
all of their contents. Other varieties allow navigation of contained elements within an unchanging area
determined by the original layer bounds in Photoshop.

300
With components that don't grow, especially thumbsheets, you will probably need to do a little trial and
error as you decide on your ideal thumb size and spacing and then return to the Photoshop document to
size the thumbsheet layer to fit them perfectly.
Metadata
Many components can use jpeg metadata as part of their display. With some components, such as
panelsheets, you create type layers within the panel and add the -metadata hint to them. Inside the type
layer you include your chosen metadata field names enclosed in double brackets, as in "[[description]]".
Other component types, like bigboxes, have one or more predefined areas and styles for metadata
display. In these cases you specify a metadata field name (ie "description") in the settings panel for the
component in the Design Manager. Whatever field you specify needs to also be included in a type layer
with the same name as the gallery component that triggers the box and the metadata hint so that
SiteGrinder includes its data in the build. (There is a lot of metadata you can potentially include so
SiteGrinder saves space by only including metadata that's actually used.) If you only want to use the
metadata in the component and not elsewhere on the page you can set the visibility of the metadata layer
to hidden.
Protection Against "Right Click To Save"

Often designers and photographers want to deny their site visitors the ability to easily right-click on an
image to save it. There is no foolproof way to achive this as site visitors can always use screen capture
softwarte to save any image they can display on their screens.
You can make it more difficult to save images from your site. SiteGrinder gallery components support
the following features for this:
Flash components never allow right-clicking to save an image in the browser. With Flash
components there also is no link in the underlying HTML with which to find the image file.
The CSS picturebox component provides an option to disallow right click saving through
javascript.
Pictureboxes
SiteGrinder CSS
The SiteGrinder CSS Picturebox is lightweight and requires no Flash plug-in.
Its only option in addition to the standards described above is the ability to start at a random image. This
makes it ideal for placing anywhere you need a random image loaded whenever a page is displayed.
SiteGrinder Basic Flash

Requires: Flash Player version 10 or later.
The SG Basic Flash picturebox is, in spite of the name, extremely powerful. It is (optionally) a complete
mini slideshow system complete with the ability to perform advanced animated transitions, play music,
and present an internal controller.
Or you can simply use it as a picturebox with animated transitions controlled entirely by a thumbsheet
and next/previous buttons you create from other layers.

301
There are a few notable features:
Transparent background determines what will appear behind the picturebox if images are
smaller than the rectangle or if there are gaps between images during transitions. The picturebox
will play more smoothly if this option is off, but you will only see the background color of the
picturebox through the gaps. If this option is on you will see whatever is behind the show on your
page.
Background color is only used if the show is set to not be transparent.
Show controller determines if the built in slideshow controller should become visible when the
site visitor moves the mouse over the show. The controller can alter volume level as well as
pause the show or navigate forwards and backwards through the show.
Auto Play determines if the picturebox advances from one image to the next automatically.
Many of the remaining options apply only to pictureboxes that have auto play turned on.
Hold time determines how long each image stays visible once the transition is over. You can
enter times as decimals, as in 0.5.
Crossfade time determines how long transitions between slides should last. You can enter times
as decimals, as in 0.5.
Transition Style determines what transition is used between slides. There are a number of
different transitions you can test out in the browser by selecting each in turn and clicking Apply.
Sub-transition Style determines if slides should be sliced into a grid of pieces and how those
pieces should animate.
Sub-Transition Rows and Sub-Transition Columns determine how many pieces to slice the
images into.
At end of show determines if an auto playing show should loop, stop on the final slide, or take
the site visitor to a different page.
Play music with show determines whether one or more songs will be played. The specific music
is set in the Gallery Editor of the Content Manager. If you want to the slideshow to play music
you'll add the songs using the Content Manager's Gallery Editor.
AmenK Flash
This picturebox, based on code by Amen Kamaleldine, has very few features but a powerful visual
impact through both its dramatic display of images with reflection on a black background and the
3D-style transition from one image to another.
Before/After Image Comparison

This picturebox is a bit different from the others and so requires more explanation.
Have you ever wanted to allow people to compare two versions of the same image superimposed on each
other?
Maybe you are a Photographer who enhances images after they are originally taken, or perhaps you
process old Photos to remove fading and scratches.
SiteGrinder provides a picturebox type just for the purpose of animated direct comparison between the
old image and the new one.
What you'll do in Photoshop

To create this you'll need make at least the following layers:
1. A -picturebox to show the full before/after images

302
2. A -thumbsheet layer which will be used to display the thumbnail navigation

3. A -viewsheet layer that is a "dummy". It doesn't matter where you put this, it's just there to allow
the gallery system to find the "after" images. You'll give select the "hidden" type later so it won't
appear on the page.
These layers are all part of the same gallery so they'll all be named after each other, as in
"retouching-picturebox", "retouching-thumbsheet", and "retouching-viewsheet".
When you're ready to try it open the SiteGrinder plugin, build, and proceed to the next section.
What you'll do in the Design Manager

Once you select your page for editing in the Design Manager you'll get to see a preview of how the
before/after picturebox works with SiteGrinder's sample images.
You'll add your own images later, in the Content Manager.
1. Open the Gallery tab in the Design Manager controls on the left
2. Click to select the settings for the thumbsheet
3. Select "Before/After" as the type
4. Click "Apply" and move your mouse over the picturebox to see it in action.
5. Close the picturebox settings window
6. Click to select the settings for the viewsheet
7. Select "hidden" as the type, click "Apply" and then close the viewsheet settings window
At this point the picturebox is set up and the viewsheet is hidden. Now change the thumbsheet options to
your liking.
When you are ready it is time to deploy this page to a site and add your own before and after images.
What you'll do in the Content Manager

Prepare your files for import
Because the before/after system uses a viewsheet you will need to name your images correctly to
associate them with the viewsheet.
Normally you can have as many alternate images as you like for each exhibit, but with before/after it only
makes sense to have two.
If you name them like this: "family portrait--before" and "family portrait--after" they will be imported in
reverse of what you probably want because initially they come in alphabetically. You could change the
order in the Gallery Editor, but it's quicker to just name them properly alphabetically, for example
"family portrait--before" and "family portrait--retouched".
Place all of the images in one folder. For the before/after picturebox it's important that your paired
images are exactly the same width/height ratio.
Import your before and after images

After deploying, select the page for editing in the Content Manager browser window.
1. Open the Editable Content tab in the Content Manager

2. Find your Before/After gallery in the list of editable items and click it
3. Click the "Edit" button where it appears at the bottom of the editable items panel
4.
303
4. In the Gallery Editor click the "Add Exhibits" button

5. Use the browse buttons to find your full-sized images and, if you have them, your custom
thumbnails
6. Click the "Upload" button to import the images
7. Close the gallery editor
Thumbsheets and Viewsheets
Any thumbsheet type can also be used as a viewsheet for showing alternate views.
SiteGrinder Image CSS

This is a lightweight thumbsheet requiring no Flash plugin.
This thumbsheet's options are almost entirely to do with borders and spacing.
This thumbsheet will grow to display all available thumbs. This means you may need to use it in
conjunction with the column hint so that other elements aren't covered by the thumbs if there are more
than you originally anticipated.
One special feature of this thumbsheet is that it supports an optional "floating preview" hover effect.
Paged Image CSS

This is another lightweight thumbsheet that doesn't require flash. The main difference between this
thumbsheet and the previous is that this thumbsheet doesn't grow to accomodate more thumbs than can fit
in the original thumbsheet rectangle. Instead it allows you to navigate from one visible group of thumbs
(a "set") to the next using an animated effect. Moving between sets is triggered by layers with the
appropriate hints.
Generic CSS
This style of thumbsheet doesn't use images. Instead it use color filled rectangles which can optionally
display numbers.
SiteGrinder Flash
Requires: Flash Player 10 or later.
Like the Image CSS style, the SiteGrinder Flash thumbsheet style has many broder and spacing options.
What differentiates it is that this thumbsheet always remains the same size as the original thumbsheet
layer. The user can navigate to new thumbnails by moving the mouse over the thumbsheet causing the
thumbs to slide left and right or up and down.
The orientation (horizontal or vertical) of this thumbsheet is determined by the dimensions of the
thumbsheet layer and the dimensions of the thumb layer.
If the thumbsheet is wider than it is tall (landscape) the orientation will be horizontal and the thumbs will
slide left and right when the user hovers over the edges. If the thumbsheet is taller than it is wide
(portrait) the orientation will be vertical. If the thumbsheet is large enough to contain more than one row
and more than one column of thumbs, the thumbs will be arranged in a multi row grid and slide
horizontally.

304
Hidden
Some pictureboxes (at this writing the before/after picturebox in particular) can use multiple views
without requiring a viewsheet for navigation. But the viewsheet is required to tell SiteGrinder you are
using alternate views.
If you want to use such a picturebox but don't want to actually show the viewsheet on your page, choose
the hidden type.
Panelsheets
There are two nearly identical pictureboxes, growing and sliding. They differ only in how they handle
themselves when they contain more panels than they can display within the original panelsheet rectangle.
Neither panelsheet uses Flash. Both support displaying metadata by adding type layers with the metadata
hint.
Growing
Like the "SiteGrinder CSS" thumbsheet type, The growing panelsheet type will expand vertically until it
can display a number of panels corresponding either to the number of gallery images or the number of
feed items, depending on the mode of the panelsheet.
The expansion will occur in a grid which will show as many panels across as could originally fit in the
panelsheet layer rectangle. For eample if the original panelsheet could fit 3 panels across and the
growing panelsheet is being used with a nine image gallery then the panel will expand to fit three rows of
three panels each.
You may need to use growing panels in conjunction with other SiteGrinder layout features like columns
to ensure that the rest of your page design properly adapts if your panelsheet grows beyond its original
size.
Sliding
Like the SiteGrinder Flash thumbsheet, the sliding panelsheet never expands beyond its original
panelsheet layer rectangle. Instead you can provide "nextpanel" and "nextpanelset" buttons to allow your
site visitor to manually slide the panels to see more of them. You can also have the sliding panelsheet
slide the panels automatically based on a time interval.
Bigboxes
Both bigboxes can display a single metadata field as a title.
Shadowbox
This type can display has optional controls to allow the site visitor to continue to navigate your gallery
bigbox images without closing the bigbox.
Fancybox
This type, based on code by Janis Skarnelis, has a number of display options controlling the speed at
which the box zooms out from the page and the appearance of the background overlay.

305
Building Your Own Components
The SiteGrinder gallery system is based on a plug-in architecture all supported by a common
image-organizing database.
We will be publishing an SDK to help you create your own components in the near future.
The Gallery Editor
Contents
Contents
Introduction
Overview
The Gallery Content Workflow
The Gallery Editor Window
Exhibits & Views
Adding Images to a Gallery
Preparing to Import
Manual Image Creation vs. Automatic Image Creation
Preparing Alternate Views
Preparing Alternate Views for Bulk Import With File Naming
Importing Views Individually in the Gallery Editor
Importing Exhibits
Selecting Exhibits
Removing and Re-ordering Exhibits
Removing Exhibits
Re-ordering Exhibits
Re-ordering with Simple Drag and Drop
Using the Dropstack to Move the Selected Exhibits
Copying the Selected Exhibits
Editing Exhibits
Managing Alternate Views of Exhibits
Editing Exhibit Metadata
Editing Exhibit Hyperlinks
Adding Background Music
Remote vs. Local Gallery Editing
Redployment and Galleries
Introduction
This is the reference guide to using the SiteGrinder 3 Content Manager's Image Gallery Editor. This
document assumes you have read the Gallery Essentials guide, so please read it before continuing.
Overview
The Gallery Editor allows you to perform the following functions:

306
Import images to your gallery, including alternate sizes of the same image for thumbnails etc
Generate alternate sized versions of images for thumbnails and other uses if you haven't created
them manually
Change the order of images in your gallery
Delete gallery images
Edit gallery metadata for each image
Set up music for pictureboxes that support music
The Gallery Content Workflow
Once you have opened a site including pages with gallery content in the Content Manager the basic
workflow is this:
1. Select the page with gallery elements from the pages list in the Content Manager.
2. Click on the gallery element listed in the Editable Content panel.
3. Click the edit button to open the gallery editor in the main browser window area
4. Add or organize images, edit metadata, etc
5. Click cancel or Save and Close in the Gallery Editor window to finish
The Gallery Editor Window
This Gallery Editor opens when you select a gallery component from the Content Manager's Editable
Content panel:

307
Figure 1.
It presents the following controls as numbered in Figure 1:
1. Add exhibits opens a panel that allows you to select image files to import into your gallery.
Clicking again will hide the panel.
2. Actions opens a menu that allows you to perform utility actions including select all, deselect all,
remove selected, and duplicate selected images to the end of the show.
3. Set Music opens an editor that allows you to add music files to be played by the show if the
gallery picturebox you selected supports music.
4. Show Editor opens a panel that allows you to copy or delete an exhibit, edit exhibit metadata,
assign an exhbit a custom hyperlink, or add and remove alternate views. Clicking again will hide
the editor panel.
5. The size slider allows you to adjust the thumbnail display size in the editor to see more exhibits.
6. The Dropstack opens a small panel that you can drag exhibits into. The purpose is to make
moving exhibits in large galleries. You can scroll to the new position and then drag the exhibits
in the dropstack into their new position.
7. The exhibit icon area displays thumbnals representing all of your exhibits. You can select and
drag and drop exhibits to reorder them.
8. The Animations checkbox let's you turn off animation effects to increase performance on slower
machines.
9. The Save and Exit and Cancel buttons close the editor and either saves or ignore the changes you
made since opening it.
Exhibits & Views
Imagine a simple gallery with a picturebox and a thumbsheet created to display and navigate ten different
paintings. For each painting SiteGrinder will use a picturebox sized version and thumbnail sized version
for the thumbsheet. This is the basic structure of most of the galleries you will create with SiteGrinder.
But sometimes you might want additional photos of each painting that aren't part of the linear gallery
organization. Let's say for each painting you have some close-up photos that reveal the details of various
parts of the canvas. One way to handle that would be to create a simple gallery of all the images, so
traveling through the gallery one by one you'll end up seeing every image.
Bit SiteGrinder provides another way to navigate this kind of gallery. You can organize your galleries
into groups of images taken of the same painting. We call these alternate images "views" and a group of
views of the same subject is called an "exhibit". You can create a special kind of thumbsheet called a
viewsheet to allow navigation of the alternate versions.
If we use a thumbsheet and a viewsheet to organzie the gallery we've described we can allow the site
visitor to go from painting to painting using the thumbsheet and then, if they arrive at a painting that
inspires them to look at the details of, they can use the viewsheet to see the alternate views.
Another example of this is a real estate site. A thumbsheet could be used to show ten different houses,
with one thumb for each house. If the site visitor selects the thumb of a house that interests them they
can then use the viewsheet to see other photos of the same house. That way interior shots of houses they
aren't interested in won't clutter up the main thumbnail navigation.
SiteGrinder handles all the navigation for the thumbsheet and viewsheet and it handles refilling the
viewsheet with the correct thumbs as your navigate from exhibit to exhibit.

308
Adding Images to a Gallery
Preparing to Import
Before you add images to your gallery you have to do a few things:
Decide which versions of your images (ie picturebox size, thumb size, etc) you want to make
yourself and which you want to have SiteGrinder generate
Organize your images into folders
How you want to import alternate views if you are using a viewsheet
Manual Image Creation vs. Automatic Image Creation

The simplest gallery is just a picturebox with next and previous buttons. If it's a gallery of five photos
you'll have one image file matching the dimensions of the picturebox for each photo.
A slightly more complex gallery would be a picturebox with a thumbsheet. In this case you'll need the
same picturebox sized image for each photo, but each photo will also need a thumb-sized version for the
thumbsheet. If you add a bigbox then that's another sized version for each photo, and a viewsheet can
require yet another version at a different size.
Sometimes you might want to manually generate each size version yourself to carefully control the
compression settings for maximum visual quality. More often you'll have SiteGrinder generate images at
the proper sizes. For each component of your gallery (picturebox, thumbsheet, etc) you can choose to
import previously created image files or to have SiteGrinder generate images from the other components.
For example you can import image files sized for your picturebox and have SiteGrinder generate the
thumbnail sized images.
Folder Organization Before You import
Preparing Alternate Views

NOTE: If you aren't using a viewsheet you can skip this section.
If you are using a viewsheet you'll need to import multiple views of each exhibit at each of the necessary
sizes. You'll also need to do this in such a way that SiteGrinder can determine which views go together.
There are two different techniques for importing additional views of the same exhibit: in bulk using
special file naming, or individually using thexhibit editor of the Gallery Editor.
Preparing Alternate Views for Bulk Import With File Naming

SiteGrinder recognizes a special naming convention for images that allows you to do a bulk import
organized into exhibits with alternate views. Any exhibit can have any number of alternate views.
Imagine we are creating a real estate site and we have several images each of two houses.
We would use the following file names to import them in bulk at a given size (picturebox size, thumb
size etc):
25 Maple Lane--Exterior.jpg
25 Maple Lane--Master bedroom.jpg
45 Wheelock Dr--Front of house.jpg
45 Wheelock Dr--Great Room.jpg
45 Wheelock Dr--Pool.jpg

309
Notice that the individual file names have two parts separated from each other by double dashes. The first
part is the exhibit name and the second part is the view name.
SiteGrinder will organize this group of files into two exhibits. The first will be for 25 Maple Lane and
will have two views, Exterior and Master bedroom. The second exhibit will be for 45 Wheelock Dr and
will have three views Front of house, Great room, and Pool.
You'll create a directory of identically named files for each manually created size you want to import. So
in this real estate example you can imagine a directory of picturebox sized images with the names shown
above and another directory with thumb sized images of the same names.
Importing Views Individually in the Gallery Editor

The fastest way to import multiple views for each exhibit is to use the file naming system described in the
previous section. But after you have imported images into a gallery you can use the exhibit editor to
import more views of any exhibit one at a time. You can use this feature to import all of your alternate
views or you can just use it to individaully delete or import new alternate views over time in an existing
gallery.
Importing Exhibits
Once you have prepared your images as described in the preivous section you are ready to import them.
The first step is to open the gallery editor from the Content Manager's Editable Content panel.
The next step is to click the "Add Exhibits" button at the top of the gallery editor, which will display the
image import panel:
Figure 2.
Items #1, #2 and #3 in Figure 2 reveal that the current gallery being edited has three components: a
picturebox, a thumbsheet, and a viewsheet.
Notice that only the picturebox column (#4) displays a "Browse" button. The "Browse" button allows
you to select one or more images from your local disk to import into the gallery.
The "auto" checkboxes on the other columns (#6 & #7) determine whether you or SiteGrinder will supply
the other image sizes needed. If "auto" is checked then SiteGrinder will generate the images to use for
the thumbsheet and viewsheet by scaling down the picturebox images. If you turn off "auto" for either
you will be able to browse your local disk for your own versions of the thumbsheet and/or viewsheet

310
images. SiteGrinder expects thumbsheet or viewsheet versions that you supply to have identical names to
the picturebox versions.You can browse more than once if you need to. Your selected images will
continue to be added to the list.
Because images scale down better than they scale up SiteGrinder always requires that you at least provide
the largest images. Bigboxes (not shown above) are larger than pictureboxes which are larger than
thumbsheets or viewsheets. That's why the picturebox column doesn't have "auto" as an option.
Once you have selected the images you wish to import click the "Upload" button (#8 above).
Finally click "Done" to finish adding new exhibits.
NOTE: Exhibits are added in alphabetical order but can be re-ordered after import. (see below)
You can use this panel to add images to an empty gallery or any time you want to add more images to a
gallery that already has images.
Selecting Exhibits
Once you have imported some images you will see small versions of them displayed in the main area of
the gallery editor. Each small version represents an "exhibit".
You can select them via the usual methods:
Clicking on one image selects it and deselects any other images that were previously selected
Shift clicking on an image selects it and all images between it and the previously selected images
Command clicking on a Mac or Alt-clicking on a PC will add the clicked image to the current
selection
You can also Select all or Select None from the menu that appears when you click the Actions button.
Removing and Re-ordering Exhibits
Once you have selected on or more exhibits you can delete or drag and drop your selection.
Removing Exhibits
Exhibits can be deleted using the following steps:
1. Select one or more exhibits to delete

2. Cilck the "Actions" button
3. Double click the "Double click to remove selected" item of the menu that appears. This action
requires a double click because it is not undo-able, although if you click cancel to end your
gallery editing session the images will not be removed.
Re-ordering Exhibits
You can re-order exhibits via simple drag-and-drop or using the Dropstack feature depending on which is
more convenient given the size of your gallery.
Re-ordering with Simple Drag and Drop

To re-order exhibits via simple drag-and-drop follow these steps:
1.
311
1. Select one or more images you wish to move

2. Click and hold the mouse button over one of the selected exhibits
3. Drag to the new destination
4. As you drag the new destination is indicated by a red vertical line.
5. When the red vertical line appears at the position you want to move your selection to let go of the
mouse button
Using the Dropstack to Move the Selected Exhibits

If you have many exhibits and you want to move one or more farther away from their original location
than is convenient within the display of the gallery editor you can use the "Dropstack" feature.
To re-order exhibits via the Dropstack follow these steps:
1. Click the Dropstack button to open the rectangular dropstack area

2. Select and drag on or more exhibits into the Dropstack rectangle
3. Scroll the gallery editor until you can see the destination for the images on the Dropstack
4. Drag the Dropstack contents to the destination
5. As you drag the new destination is indicated by a red vertical line.
6. When the red vertical line appears at the position you want to move the Dropstack images to let
go of the mouse button
Copying the Selected Exhibits

Exhibits can be duplicated and appended after the last exhibit using the following steps:
1. Select one or more exhibits to delete

2. Cilck the "Actions" button
3. Click the "copy selected to end" item of the menu that appears
Editing Exhibits
Once you have imported an exhibit there is quite a bit you can do to edit it:
Add, delete, or re-order alternate view images

Edit metadata imported from the original jpeg
Add metadata that wasn't in the original jpeg
NOTE: When you make changes to exhibits you will need to Synchronize from the Content Manager's
Upload menu to have the changes reflected on your remote site.
To accomplish these tasks you click on a single exhbit to select it and then click the "Edit Exhibit" button
revealing the exhibit editor:

312
Figure 3.
In the above image the "bamboo-bowl" exhibit is selected, as indicated by the yellow background of the
thumbnail and the name displayed in the editor.
The areas of the exhibit editor shown in Figure 3 are as follows:
1. The preview area shows the name of the exhibit and the name and thumbnail of the currently
selected alternate view.
2. The alternate view area shows thumbs of the alternate views. You can click a thumb to select an
alternate view.
3. The Copy and Remove buttons can duplicate the currently selected exbit or delete it.
4. The Remove View and Add View buttons allow you to delete the currently selected view or add a
new view by importing a new image.
5. The Hyperlink button allows you to set a hyperlink for the exhibit to use if any of the gallery
components are set to go to a URL when clicked.
6. The row of buttons at the top allow you to select the different metadata fields of the exhibit to
edit.
7. Clicking in the metadata area allows you to edit the currently selected metadata for the exhibit.
(Alternate views don't have unique metadata.)
NOTE: After editing an exhibit you can instantly inspect or edit another exhibit by clicking on its
thumbnail. You don't have to close and re-open the exhibit editor.
Managing Alternate Views of Exhibits

Whether or not you imported alternate views when you initially imported your exhibits you can always
add them individually using the exhibit editor.
Select a view by clicking on its small thumb in area #2 shown above. The selected view will colorize as
shown.
Remove a view by selecting it and clicking "Rem View" in area #4 shown above.
Add a new view by clicking "Add View" in area #4 shown above.
Change the order of views by clicking and dragging the small view thumbs in area #2 above. The first
view is always the version used as the thumbnail in a thumbsheet.

313
Editing Exhibit Metadata

When the exhibit editor is open and an exhibit is selected you will see the names of the metadata fields
used in the gallery you are editing in area #6 labeled in the screenshot in the previous section.
Click the name of the field you want to edit and then click in the area labeled #7 above to edit the data.
Changing the metadata here changes it on your local site, on your remote site the next time you
Synchronize, but never affects your original jpeg file.
You can place urls and even raw HTML in the metadata, but it must be XHTML compliant and if it is
complex may cause structural problems with the page.
The exhibit editor doesn't show every jpeg metadata field. It only shows the metadata fields you actually
used with the gallery in -metadata layers.
There are some important things to know about which metadata fields appear here:
Only bracketed metadata fields (as in "[[description]]") that are in the content of -metadata hinted
layers named after the gallery are included. You cannot add new metadata fields in the gallery
editor.
You can not only utilize standard jpeg metadata field names, like "description", but you can also
include arbitrary one-word field names you make up, like "price" by including them in -metadata
layers in brackets, as in "[[price]]". Fields that aren't found in the jpeg file will be included as
empty fields that you can fill out using the gallery editor. This is very powerful!
You can include metadata that you only want to use in components (ie in bigbox headings or
panels) but not on the page anywhere else by adding them to a -metadata layer named after the
gallery as normal and then hiding the metadata layer on the layer comp.
If you have multiple views there is no per-view metadata. Exhibits display the same metadata no
matter what view is selected.
Editing Exhibit Hyperlinks

Some gallery components, such as pictureboxes, support a custom URL to send the site visitor to if they
click on the component. You can use a different url for each exhibit.
To set your custom url:
1. Select the exhibit thumb from the main thumb display (area #7 of Figure 1)
2. Open the editor by clicking "Show Editor" (#4 in Figure 1)
3. Click "Hyperlink" (#5 of Figure 3 above)
4. Type in the hyperlink you want to use
There is one hyperlink per exhibit. Alternate views all share the same hyperlink.
Adding Background Music
Some picturebox variations support background music. (As of this writing only the Basic Flash
Picturebox supports music playback.)
You use the exhibit editor to create a playlist of one or more mp3 files.
Start by clicking the "Set Music" button in the Gallery Editor. (Item #3 in Figure 1 above)

314
This will reveal the music playlist editor:
Figure 4.
Each time you click #1 above,"Upload Song", you can choose a new MP3 file. The songs will be played
in the order displayed in area #2 above.
To delete a song select it by clicking on it in area #2 above and click "Remove Song" (#3 above.)
When you are finished adding music click the "Set Music" button again to close the playlist editor.
Remote vs. Local Gallery Editing
The optional SiteGrinder Control add-on allows you to use the same Gallery Editor described in this
document from remotely from any web connected computer with a modern web browser.
When you make changes using the remote Content Manager you'll need to Synchronize using the local
Content Manager on your SiteGrinder-installed computer to download changes that have been made
online.
Redployment and Galleries
If you deploy a page with a gallery the gallery is essentially reset. You will have to re-import your
gallery exhibits, redo any metadata changes, etc.

315
Sites (Local and Remote)
Contents
Contents
Introduction
Making a Local Site
Basic Options
1. The Site Name
2. Site Directory
CMS Options
3. Remote
4. Username and Password
5. Local Only
5. None
ECommerce Options
6. Module
Foxycart Options
Foxycart Store Name
Domain
Advanced Options
7. Default Extension
8. Tiny MCE Configuration
Language
Editor
Managing Builds
Builds and your Photoshop File's Name
Finding And Moving Your Design Manager Builds
Managing Deployed Local Sites
Moving a Deployed Local Site To a Different Computer
Deleting a Local Site
Duplicating a Site
Using "Scratch" Sites
Remote Sites
What is FTP?
Connection Settings
Server
Port
Username and Password
Passive Mode
Remote Path & HTTP Address
Browsing for the Remote Path
CMS Login Settings
Using a Test Site Directory

316
Host Compatibility
Introduction
There are two kinds of "sites" you'll use with SiteGrinder: local and remote.
Your local sites are directories on your computer that SiteGrinder initially deploys your pages to.
Most often you will then use SiteGrinder's Content Manager to make final edits and upload your pages to
your remote site, which is on a computer managed by your hosting company.
Making a Local Site
The local site is just a folder along with a number of options you specify when you create the site.
You make a local site from within the SiteGrinder Plug-In window. Open SiteGrinder (or switch back to
Photoshop where SiteGrinder is already open if you happen to be in the Design Manager.) Choose "New
Site..." either from SiteGrinder's "Sites..." menu or from the "Deploy To" popup menu.
The New Site command will present the New Site window, described in detail by the numbers in the
sections below:

317
Basic Options
1. The Site Name

The site name is an arbitrary name you provide that tells SiteGrinder what you want to call this site in the
various SiteGrinder menus and windows you'll use to select sites. It has no practical effect on your site, it
doesn't have to match anything else like your domain.
You won't be able to change this name, so if you make a spelling error it's best to make a new site with
the corrected name.
2. Site Directory
This is the directory on your computer where SiteGrinder will create its site files. Set this by clicking the
"Browse..." button which will open a window allowing you to pick a directory on your disk.
It is usually best to pick a new empty directory. You should not pick a directory that already has
SiteGrinder site files in it.

318
SiteGrinder will make many files and subdirectories in the location you pick so don't choose your
Desktop, the top level of your hard disk (ie "Macintosh HD") or your home directory . Creating a new
directory inside one of those locations is fine.
NOTE: The directory picker window also allows you to create new directories.
IMPORTANT: SiteGrinder remembers your site directory by name and location on your disk. If you
move or rename your site directory or any of the directories that contain it then SiteGrinder will lose
track of it and you will have to re-import it.
CMS Options
CMS stands for "content management system".
Normally a CMS is software that allows you to directly edit the contents of your site after you upload it
from a browser. SiteGrinder takes a slightly different approach. SiteGrinder's CMS works remotely in a
browser like traditional CMS software if you have the optional "Control" add-on, but SiteGrinder also
works locally in a browser by opening the web pages that reside on your computer even if you don't have
the add-on. In fact the SiteGrinder workflow encourages you to use the CMS locally as a routine and
singificant part of your site development process.
You tell SiteGrinder what kind of CMS you want to use in the New Site window. The options, described
below, are "Remote", "Local Only", or "none",
3. Remote
The Remote option is only available if you own the optional "Control" add-on for SiteGrinder. It creates
your site in a way that allows you to log into your pages from any browser on any web connected
computer and edit text, images, galleries, etc. without having Photoshop or SiteGrinder installed.
There is a menu next to the "Remote" checkbox that will let you choose from different CMS options
when they become available. At the time of this writing PHP is the only option.
The Remote CMS option includes the Local CMS option. For details about the remote CMS see the
viewpage.action?pageId=1475234The "Control" Add-On Reference Guide.
4. Username and Password

These fields allow you to set the username and password you will use to log into your site's remote CMS
from a browser. The CMS is the only place this username and password are used. They have nothing to
do with your ftp login or any other.
5. Local Only
Users without the "Control" add-on will almost always choose the Local Only option. It allows you to
deploy your pages to the browser based Content Manager where you can edit content, manage galleries,
and upload and synchronize your site.
5. None
Selecting none is an expert option and is almost never used. If you want to move the site out of the
SiteGrinder system you will virtually always want to deploy it with Local CMS and then "Save as Static
Site" from the Content Manager.

319
ECommerce Options
SitGrinder uses a generic "$" hint to designate ecommerce buttons and forms. The New Site window is
where you select a specific ecommerce system to work with.
6. Module
SiteGrinder is designed to support multiple possible ecommerce systems. The module menu will allow
you to choose which commerce system you want to use. As of this writing FoxyCart was the only
module supplied, but look for expanded support in the future.
Foxycart Options
When you sign up with FoxyCart you will be supplied the information for the two fields here.
Foxycart Store Name

This is the name you chose for your FoxyCart store.
Domain
This is the domain for your FoxyCart store. In most cases this will be in the form
"yourstorename.foxycart.com" but if you are using a redirect it might be a special url at your own
domain, as in "store.medialab.com".
Advanced Options
Miscellaneous advanced options can be shown at the bottom of the New Site window by clicking the
disclosure arrow.
7. Default Extension
If you aren't using a remote CMS then files that contain the HTML for SiteGrinder pages normally have
an extension of ".html", as in "index.html". Iff you are using the Remote CMS then the files will have
the extension ".php". If you need to you can alter the extension here.
8. Tiny MCE Configuration

The text editor that the SiteGrinder Content Manager uses is a common one - WordPress.com uses it for
example - called "TinyMCE".
Language
This sets the language the user interface for TinyMCE should use. It defaults to English (en). You can
find the two letter language codes in the Accessibility and Internationalization appendix.
Editor
There are two choices offered here: advanced and simple.
The advanced editor includes many toolbar buttons and the ability to edit raw HTML. The simple editor
does not allow HTML editing and provides only basic text editing controls. The simple option is useful
for allowing clients to edit text without allowing them to edit HTML or make other potentially dramatic
changes.

320
EXPERT NOTE: There are even more TinyMCE editor cvariations inside the SiteGrinder 3 application
directory. Just copy the editor you want from the "tinymce_editors" directory to your site/sg_cms
directory and rename that file 'init_tinymce.js'. If you consult the TinyMCE documentation you can easily
configure your own editor.
Managing Builds
When you build pages they are not yet in a site directory. Instead they are located in a work folder inside
a directory called "SiteGrinderData". Normally you won't directly examine or edit this work directory.
Builds and your Photoshop File's Name
SiteGrinder connects your build folder to your Photoshop file by the Photoshop file name. Every time
you change your file's name and build the newly named version it is as if you are building the file for the
first time. If you change the Photoshop file's name back to the original SiteGrinder will reconnect the file
to its original build directory.
Finding And Moving Your Design Manager Builds
SiteGrinder keeps the files that make up the pages you work on with the Design Manager in a directory
named after the Photoshop file. You can find this directory in the "sg_builds" directory of your
"SiteGrinderData" directory. The SiteGrinderData directory itself is located in your user account's
"home" folder.
SiteGrinder 2 Users Note: SiteGrinder 3 builds are in the SiteGrinderData directory along with any
SiteGrinder 2 builds you may have. The SG3 build directory is named "SG_BUILDS" with no number
added to the name.
When you open SiteGrinder it checks to see if a directory named after the current Photoshop file is in the
same directory as the Photoshop file. If so it copies that directory to its builds folder as if you had built
the file on the new machine.
This technique allows you to transfer a built site to another computer, another SiteGrinder user, or Media
Lab tech support along with the Photoshop file it goes with. Sending a file along with its build directory
allows the file to take along the settings you edited in the Design Manager.
Managing Deployed Local Sites
When you deploy pages they and any files they depend on will be created in a local "Site Directory" (also
known as the "local site") that you choose on your local machine when you fill out the fields in the "New
Site" window.
There are various tasks you may need to accomplish in the course of managing local sites, such as:
duplicating or moving deployed sites and deleting sites.
Moving a Deployed Local Site To a Different Computer
Although the need to do so is rare, it is easy to move a local site from the computer you were using when
you deployed it to a different computer with SiteGrinder installed.
The process works like this:
1. Copy your site folder to the new computer that has Photoshop and SiteGrinder installed.
2.
321
2. Launch the SiteGrinder Engine application on the destination computer if it is not running.
(Launching the SiteGrinder plug-in automatically launches the Engine Application.)
3. Bring the SiteGrinder Engine application to the front.
4. Select "Import Site" from the SiteGrinder Engine's "Sites" menu.
5. Choose your site folder.
6. If there is already a site with the same name as your site folder on the destination computer
SiteGrinder will prompt you for a new name for the site you are importing.
Deleting a Local Site
To delete a local site just delete the site folder. The next time you launch SiteGrinder the deleted site will
no longer appear in the various Sites menus.
Moving a site folder from the location it had when you created the site will also remove it from the list
requiring you to use the SiteGrinder Engine's "Import Site" command to have the site re-appear in
SiteGrinder's menus.
IMPORTANT: If you delete, move, or rename a site folder you will no longer be able to deploy to it!
Duplicating a Site
You can duplicate a local site, including its Content Manager edits, by following these steps:
1. Duplicate the site folder on your computer

2. Rename the folder and, optionally move the new copy somewhere else on your computer
3. Launch the SiteGrinder Engine application on the destination computer if it is not running.
(Launching the SiteGrinder plug-in automatically launches the Engine Application.)
4. Bring the SiteGrinder Engine application to the front.
5. Select "Import Site" from the SiteGrinder Engine's "Sites" menu.
6. Choose your site folder.
7. If there is already a site with the same name as your site folder on the destination computer
SiteGrinder will prompt you for a new name for the site you are importing.
This is particularly useful for template sites. You can work on a single site that you may be creating
several online versions of. You can develop it as one site until you are about to add content unique one
of the different copies. At that point you can duplicate the current version to finish and keep the previous
as a "template", copying it as many times as you need to.
Using "Scratch" Sites
It is common practice to deploy one or more pages to a throwaway "scratch" site to experiment in the
Content Manager and then redeploy to a final site folder at a later time.
Don't make any Content Manager edits you want to keep in the scratch site, however, because deploying
to a brand new site folder will lose everything you added using the Content Manager controls.
Remote Sites
Remote sites are where your files go so that the general public can view them.
This section uses (gently) some common web jargon like "hosts" and "servers" and "paths". For a
layperson's glossary of these terms see the Web Hosts and Web Servers Essentials Guide.

322
What is FTP?
Ftp stands for "file transfer protocol" and is the technology most often used to copy files between your
computer and your web host's server. It's what SiteGrinder uses to upload and synchronize your sites,
and you don't really need to worry about the technical details.
If you don't want to use SiteGrinder to upload you'll need to pick an ftp "client" program to use, like
Cyberduck on a Mac or CuteFTP for Windows. Adobe DreamWeaver also uses ftp to move files up and
down from your web host. If you use a tool other than SiteGrinder you will lose the ability to
synchronize changes back and forth from your server, so you should have a very good reason for using a
different tool.
Connection Settings
The following subsections describe each control in this window.
Server
For the server enter the ftp address given to you by your web host. It is usually in the form
"ftp.yourdomain.com" or "ftp.yourhost.com".
Port
This is an expert feature. Most users should just leave the port at 21 unless you have a custom set-up
requiring a different port for ftp.
Username and Password

Your webhost will tell you what your username and password are. (The are not the same as the username
and password you can set if you are using SiteGrinder's "Remote CMS" feature.)

323
Passive Mode
This checkbox is another expert feature. Most users should leave this checked unless their web host tells
them not to use "passive mode". Passive mode is preferred because it resolves a lot of potential firewall
problems. The main reason not to use it is if your web host doesn't support it, but most do.
Remote Path & HTTP Address

It's important to understand the difference between the ftp server/path information you use to move files
to and from your site and the http server/path information you and your site visitors will use to look at
your site pages in a browser.
Web hosts set things up in different ways, but the ftp address for your site will always be different from
your web (also known as "http") address.
Example: Let's say your host sets up your account so your ftp address is "ftp.yourdomain.com", which is
a very common practice. If your site is "www.zombiehand.com", for example, then a host set up this way
will have you use "ftp.zombiehand.com" as your ftp server. Notice the only difference is "www" vs.
"ftp".
So far it all seems pretty easy and straightforward, right? But very often your web host will require that
you put your website files in a particular directory on your server called the "site directory". The site
directory might be named "httpdocs", "www", or something else. What's important is that this directory
is only for uploading and managing your site via ftp. It has no part in the "web" address you and your
site visitors will use to look at your site in a browser.
So in the example just given, the Server is "ftp.zombiehand.com" , and if the folder for putting your site
files is "httpdocs" then that is the remote path you would type into SiteGrinder's Connection Settings.
You don't include the server in the Remote Path field, just the directory name.
Meanwhile the web address is still "www.zombiehand.com". The contents of the "httpdocs" directory is
used automatically by your web server because that's how your host set it up. It will never appear in a url
to your web pages.
Browsing for the Remote Path

The easiest way to identify your remote path is to use the "Browse..." button in the Connection Settings
window. If you have entered the ftp information correctly (mainly the servername, username, and
password) then clicking Browse... will open this window which at first will show the top level of your ftp
server:

324
The controls are as follows:
1. The left column shows whether the directory item at that row is a directory or file. If it's a
directory you can click in this column to open it.
2. The right column displays the name of directory items. Click in either column to select a row.
3. The New Folder button allows you to create a subdirectory of the currently selected directory on
your server.
4. At the bottom you can see the path you have chosen so far. This is what SiteGrinder will use
when you click the Select button.
CMS Login Settings

If your site is set up with a remote CMS you'll also see this at the top of the Connection Settings window:
These fields will contain the username and password you supplied in the "New Site" window when you
made this site.
If you change these fields then the next time Upload or Synchronize this site they will be changed for
your remote CMS.

325
Using a Test Site Directory
Often you'll want to put your site up in such a way that your client can see it but the rest of the world
can't. The easiest way to do this is to create a directory inside your remote site directory. Name it
whatever you like, for example "site-comp-version-3".
You can add that directory to your remote path. In the previous example we used "httpdocs" as our
remote path, so adding our test directory would make the remote path "httpdocs/site-comp-version-3".
This is particularly simple if you use the path browser to create the new directory because it'll set up the
remote path information for you.
Once the client is happy you can change the connection settings and upload the site to the top level
directory.
In another scenario you would upload the test to a subdirectory you created on your own server and then,
when ready, upload the final version to the site directory on your client's host.
Host Compatibility
To determine if a web host you are using or thinking about using is compatible with all of SiteGrinder's
features see the Hosting Requirements appendix.

326
Text
Contents
Contents
Introduction
CSS Text vs. an Image of Text
Advantages of Outputting Live CSS Text
Forcing a Type Layer to Output as CSS
Advantages of Outputting Text as an Image
Forcing a Type Layer to Become an Image
Styling Text In Photoshop
Paragraph vs. Point Type Layers
Creating HTML Headers in Photoshop
Limitations and Capabilities of CSS vs. Photoshop
Things You Can Do With Type In Photoshop But Not With CSS Text
Don't Use Some Character styles
Don't Use Some Paragraph Styles
Don't Use Text Shapes or Transformations
Don't Use Blank Lines for Vertical Spacing
Don't Use Whitespace for Horizontal Spacing
Be Careful with Paragraph Spacing on First and Last Paragraphs
Things You Can Do With CSS But Not In Photoshop
Backgrounds and Borders
Text Scrolling and Wrapping
Bullet and Number Lists
Text and the SiteGrinder Design Manager
Text and the SiteGrinder Content Manager
Editing Text in the Content Manager
The "-noedit" Hint: Preventing Text Edits
When CSS Text Areas Change Size
Text and Image Gallery Metadata
Troubleshooting Text
Other Ways of Adding Text to Pages
Introduction
This guide assumes you have read the Web Text Essentials Guide, so if you have not please do so now.
SiteGrinder converts Photoshop type layers into styled CSS text areas. You decide using type layer
anti-alias settings and hints like -text and -g which type layers should become text and which should be
rasterized images of text.

327
CSS Text vs. an Image of Text
SiteGrinder can convert any Photoshop type layer into real, styled, searchable, selectable text on a web
page. SiteGrinder can reproduce most character and paragraph styles using a web technology known as
"CSS."
SiteGrinder can place a type layer on the final web page either as text or as an image, so you must
indicate to SiteGrinder which you prefer.
Advantages of Outputting Live CSS Text
Live CSS text is searchable and selectable by the user

You can edit text directly in the SiteGrinder Content Manager or any text editor
You can place links on words or phrases within text
Text can be displayed in large sizes or read by voice software for sight-impaired web users
Search engines such as Google rely on live text to find out about your site
CSS text downloads much more quickly than an image
You can edit text in the Content Manager without returning to Photoshop
CSS Text is should always used for the main body content of your pages.
Forcing a Type Layer to Output as CSS
To specify that a type layer should appear as text you can do one of two things:
1. In Photoshop select the text layer and set the anti-aliasing to "None" using the Photoshop character
attributes window or toolbar.
or
This is convenient because you can recognize which type layers will be made into CSS text at a glance by
seeing which layers are anti-aliased and which aren't in the document.
2. You can also add the "-text" hint to the end of the type layer's name to force it to be text on the web
page no matter what the anti-aliasing is set to.

328
For example a layer named "main" would be renamed "main-text" to force it to output as CSS styled text.
Advantages of Outputting Text as an Image
Images of text always look exactly as you designed them - any font, any typography and any layer
styles are preserved.
Graphic rollovers can be more visually dramatic - they can look like anything you can imagine
Image text is usually used in logos, banners, and on image buttons.
Forcing a Type Layer to Become an Image
Type layers that have any anti-alias setting other then "none" will automatically be exported as an image
unless they have the -text hint.
In the unusual case where you want to force a type layer with anti-aliasing set to "none" to become an
image anyway, you can give it the "-g" hint, as in "Jaggy letters-g".
If you put the -g hint on a layer with the -text hint the universe my implode, so be careful.
Styling Text In Photoshop
Creating web text in Photoshop is quite simple as long as you avoid the advanced typography techniques
(like kerning) that you can do in Photoshop but which web browsers don't support in CSS.
Just create type layers, use Photoshop's standard tools to edit the type, give the type layers the -text hint if
needed and build.
Paragraph vs. Point Type Layers
Point text is created with the type tool by clicking once in the document and typing. This kind of text has
no right hand or bottom margins and so will create an infinitely long line unless you hit return as you
type. This text is generally not what you want to use with SiteGrinder when you are outputting text as
text instead of as a graphic or using text as a button or menu.
Paragraph text is created in one of two ways:
You can option-click once with the type tool (alt-click on Windows machines) and fill in the
dialog that appears with the size of box you desire
Or you can click with the text tool without letting up on the button and drag out the rectangle to
contain the text.
Paragraph text is much better for use with SiteGrinder because it allows for much more careful placement

329
on the final web page, and is required for scroll bar text. In addition there are many CSS properties you
can apply to the paragraph text rectangle in the SiteGrinder Design Manager, such as background colors,
borders, and shadow.
Don't worry if you start out with the wrong rectangle. You can change it later by dragging its control
points while you are editing the text. If you drag the control points while the layer is selected but the text
is not being edited then you will scale the text as you resize the box, and this scaling cannot be reflected
on the web pages SiteGrinder creates unless you output the text as a graphic.
If you need to convert text from point mode to paragraph mode or the other way around you can do this
from Photoshop's Layer->Type menu.
Creating HTML Headers in Photoshop
"Semantic" HTML is a popular buzzword. It means that text on web pages should be organized in ways
that allow search engines to better understand structure and meaning.
The most basic underpinning of semantic HTML is the concept of "headers." A header is a way of
indicating document structure, kind of like an outline.
Here is an example of type layer text contents that could benefit some semantic structure:
1981 Graduates
Ashley Williams
Cheryl Williams
In this case "1981 Graduates" is the category and the people listed are conceptually contained within the category.
Stylistically you might just make "1981 Graduates" bold or larger or a different color than the listed
names. But for good semantics you would also want not only the text appearance, but also the underlying
code to reflect the structure.
To achieve this with SiteGrinder you would give the type layer containing the text the "- h1" hint. This
hint causes the first paragraph (in this case "1981 Graduates") to be given the correct HTML to indicate
that it's at the top level of the structure. You can instead add an -h2 (and h3,h5,h5,and h6) hint to a type
layer to do the same thing but use the deeper levels than h1.
So in the case above you might have a type layer with large text reading "Our Alumni" at the top of the
page with the -h1 hint, which would mean you should use the -h2 hint on the "1981 Graduates" layer.
Limitations and Capabilities of CSS vs. Photoshop
Photoshop can do things with text that can't be done in a browser with CSS. On the other hand CSS has
capabilities that Photoshop type layers don't.
Things You Can Do With Type In Photoshop But Not With CSS Text
You should avoid the following with type layers that are going to appear as CSS on the final page.

330
Don't Use Some Character styles

Kerning
Tracking
Vertical and Horizontal scaling
Baseline shift
Superscript/subscript
Small caps
Don't Use Some Paragraph Styles

Auto-hyphenation
Justify alignment modes
Indent first line
Don't Use Text Shapes or Transformations

Scaling, skewing, and rotating type layers with the move tool
Text on a curve or shape
Vertical text
Layer styles on text (bevel, emboss, etc)
Don't Use Blank Lines for Vertical Spacing

As much as possible, SiteGrinder tries to keep the HTML text true to Photoshop text. One area where
HTML and Photoshop differ is the way blank lines are handled.
If you are using empty lines to create empty vertical space between paragraphs you'll find that in HTML
your text is probably spread much more than you wanted. The solution is to not use empty return
carriages, but instead use Photoshop's 'space after' setting. This setting is found in Photoshop's "paragraph
styles" palette or toolbar.
This will allow you to achieve exact fidelity between Photoshop text and your final HTML.
Don't Use Whitespace for Horizontal Spacing

Web text ignores or treats differently extra empty space. If you use tabs, multiple spaces or carriage
returns to space out your text, most of this extra space will either disappear on the resulting web page or
use more space that you expect. The proper way to space out words and paragraphs with SiteGrinder is to
use Photoshop's text controls. For example, don't use returns to add space between paragraphs, use
Photoshop's paragraph control panel to set the "space after" to the amount you want. This has the
advantage of being more precise than using carriage returns. You can also use indentation controls,
margins, etc.
Be Careful with Paragraph Spacing on First and Last Paragraphs

In Photoshop using a "space before" setting other than 0 on the first paragraph of a type layer has no
visible effect. The same is true with "space after" and the final paragraph of a type layer.
But these settings can create spacing at the top and bottom of your text on the built page.
It's easy to inadvertently apply these settings when you select all the text in a type layer and apply a space
before or space after.
If you notice spacing problems on the built page you can check these settings by clicking in the first and

331
last paragraphs in turn and examining the settings in Photoshop's paragraph styles palette.
Things You Can Do With CSS But Not In Photoshop

There are a lot of CSS text options that Photoshop doesn't support. Luckily SiteGrinder makes them
available to you through the Design Manager.
Backgrounds and Borders

Background color
Border style and width, even custom for different sides
Drop shadow on background
See the below section on Text and the SiteGrinder Design Managerfor details.
Text Scrolling and Wrapping

CSS allows text to wrap around images. SiteGrinder supports this throug the -wrap hint, covered in the
Wrapping Layout Guide.
CSS also allows text areas that extend beyond their original boundaries to scroll. SiteGrinder lets you
indicate this with th -scroll hint, documented in the Scrolling Layout Guide.
Bullet and Number Lists

There are so many reason to love bullets:
They organize text into impromptu outlines

They sound cool
They're so much easier than creating a well-constructed paragraph
You can use punctuation or not.
Incomplete thoughts
If you use Powerpoint a lot everything in the world already looks like bullet lists
etc
Photoshop doesn't know about bullet lists, though you can make something that looks like a bullet list
using paragraph indenting and typing in the bullet characters manually. This is not a great approach.
To create real, structured bullet lists with SiteGrinder use the Content Manager's text editor. The
advanced version has toolbar buttons for bullleted and numbered lists.
Text and the SiteGrinder Design Manager
CSS text layer rectangles can have decorations added to them in the SiteGrinder Design Manager that are
not supported from within Photoshop.
These include:
Border size, color, and style

Background color
Drop shadow behind the text rectangle
Drop shadow behind the individual text characters
The rectangle that is used for the decorations is the rectangle you dragged out to create your paragraph

332
box. You can use the paragraph margin settings in Photoshop to create space between the text and the
decorated edges.
For details on using the Design Manager for decorating text and other elements see the Design Manager
User Interface Guide.
Text and the SiteGrinder Content Manager
By default all text layers that become CSS text on the final page are further editable in the SiteGrinder
Content Manager.
Editing Text in the Content Manager
To edit a type layer's contents in the Content Manager:
1. Select the page the text layer is on in the "pages" panel

2. Open the "Editable Content" panel
3. Click on the type layer in the Editable Content list to select it.
4. Click the "Edit" button to open the text editor
When you create your site you can specify in the "advanced" options of the "New Site" window whether
the Content Manager text editor will be in "advanced" or "simple" mode. This mode determines how
many editing options are available.
See the Content Manager UI Reference for more details.
The "-noedit" Hint: Preventing Text Edits
If you wish to turn off SiteGrinder Content Manager editing for a particular type layer, just add the
-noedit hint to its layer name in Photoshop, as in "Can't touch this -text-noedit".
You can still edit this text in a third party text editor if you open the HTML file that contains it. But the
noedit hint stops you or your clients from editing the text using the SiteGrinder Content Manager's text
editor in both local and remote sites.
When CSS Text Areas Change Size
CSS text has an annoying tendency to change in size.
Just a few of the reasons CSS text may take up more or less space than you originally allotted for it in the
Photoshop layer:
The amount of text can change when you edit it in the Content Manager or another tool. This is
especially true if you are just using placeholder text in Photoshop you are planning to change
later.
If the text wraps an image you might end up replacing the image with a larger or smaller one later.
The site visitor might force the text size to increase using browser settings.
There are two ways to deal with text that may change in size:
With the -scroll hint the user can scroll to see text that has overflowed. (see the Scrolling Layout
Guide)
If you put the type layer in a -column layer then other layers can change position to adjust to the

333
new size. (see the Column Reference)
Perhaps the most important reason to use live CSS Text is the advantage for "Search Engine
Optimization" (SEO). For details about using text and other SEO techniques see the SEO Guide.
Text and Image Gallery Metadata
If you are using SiteGrinder's gallery features you can use the -metadata hint on a type layer to insert jpeg
metadata into your text. This is extremely powerful because you can mix non metadata text with
metadata and have all of the text maintain character and paragraph styles from Photoshop.
See the metadata information in the Gallery Reference Guidefor details.
Troubleshooting Text
Text is a different size or shape on the final page
Transformations with the move tool are not supported in CSS, so if you stretch, shrink, skew, or rotate
text you won't be able to match the look if you are outputting as CSS. To adjust the text rectangle
dimensions use the type tool, not the move tool.
Space between words and paragraphs is different on the web page
Web text ignores or treats differently extra empty space. If you use tabs, multiple spaces or carriage
returns to space out your text, most of this extra space will either disappear on the resulting web page or
use more space that you expect. The proper way to space out words and paragraphs with SiteGrinder is to
use Photoshop's text controls. For example, don't use returns to add space between paragraphs, use
Photoshop's paragraph control panel to set the "space after" to the amount you want. This has the
advantage of being more precise than using carriage returns. You can also use indentation controls,
margins, etc.
Text is appearing lower on the web page than in the Photoshop document
One of the unfortunate differences between Photoshop and Web text is that Photoshop doesn't obey the
"space before" paragraph setting for the first paragraph, but web text does. If the text on the page is too
low it's often because your first paragraph has a value greater than zero in the "space before" setting. Set
this to zero. Use "space after" instead to avoid this problem.
Another thing to be careful of is having "space after" set to something other than zero on the last
paragraph of a type layer. In some situations, such as in stacks of type layers inside -column layers, this
will create extra space at the bottom of a text element.
Text line-height on the page is different from the way it appears in Photoshop
If you leave your text leading set to "auto" in Photoshop you may see a discrepancy with the results on
the web pages SiteGrinder produces. If you are concerned about this then use a specific leading in
Photoshop instead of "auto".

334
Other Ways of Adding Text to Pages
The primary alternative to using a type layer to add text to web pages is to use a layer with the -xmedia
hint along with one of the importers that support text.
With the -xmedia you can import the following text elements:
HTML files and snippets

Plain text
Google Docs word processor document
See the External Media Reference for details.
Images
Contents
Contents
Introduction
Minimizing the Use of Images
Use CSS Styled Text
Use Rectangular Area of Solid Color
Use Repeating Background Tiles
Hints To Control Image Layer Merging
-merge
-nomerge
Hints for Outputting Type Layers As Images
-g
-text
Background Images vs. Content Images
The -content Hint and Images
Gallery Images
Favicons and the -Fav Hint
Introduction
This guide is about using images on your pages. It includes merging, background images vs. content
images, and image workflow.
For details about working with SiteGrinder's image compression panel see the User Interface Reference.
This guides assumes you have read the Image Quality and Compression Essentials Guide or viewed the
associated video, so if you haven't please do so before continuing.
Minimizing the Use of Images
To make your site as responsive as possible it is good practice to minimize your use of images.

335
There are a number of techniques to help with this goal.
Use CSS Styled Text
Using real CSS text is superior in almost every way to using images. It downloads faster and it's better
for search engines. The downside of text is the limited number of web standard fonts and limited browser
support for special effects like drop-shadows.
As a result images are generally used for logos and decoration, but CSS text via the -text hint is preferred
for the majority of the textual information on your site.
Use Rectangular Area of Solid Color
When SiteGrinder finds an image or object layer that consists entirely of a rectangle of solid color it
doesn't need to create an image at all. It just does the right thing, which is to create a rectangle of solid
color using nothing but a little snippet of web code.
Note: because of the demo mode watermarking this does not apply when running SiteGrinder in demo
mode.
Use Repeating Background Tiles
Background tiles provide a major visual impact with a single, small repeating graphic. See the
Background Colors and Tiles section of the Layout reference guide for details.
Hints To Control Image Layer Merging
-merge
The -merge hint used on a layer group causes the image layers (and type layers that are exporting as
images) to be merged into one graphic.
IMPORTANT: The use of this hint is generally NOT recommended. SiteGrinder has its own system for
determining which layers should merge with others for an efficient download. Use of the -merge hint can
interfere with this system resulting in less optimized sites.
The merge hint is not necessary if you are using the -button hint on a layer group. SiteGrinder will merge
layers in a -button hinted group automatically.
Layer groups with the merge hint should only contain image layers that are not meant to be interactive as
individual layers. SiteGrinder will warn you in its report if you place layers with hints like -button on a
layer that is in a merging group.
-nomerge
The -nomerge hint on a layer guarantees that SiteGrinder will not use that layer in its auto-merging
system. This means the layer is guaranteed to be available as a unique entry in SiteGrinder's
Compression panel, allowing you to assign it a custom compression setting.
This hint is most often used on background images that you want to use a jpeg setting to compress when
your default setting is a variation of gif.

336
Hints for Outputting Type Layers As Images
Normally the easiest way to control whether type layers become CSS Text or an rasterized image of text
is to use the anti-alias setting in Photoshop's character palette.
Anti-aliased type layers become images, type layers with anti-alias set to "none" become searchable CSS
styled text. This method is preferred because it is convenient and allows you to tell by eye when you
look at your document window which type layers will become images vs. CSS text.
There are two hints for text layers that override the anti-aliasing, -g and -text.
-g
This hint forces a type layer to export as an image no matter what its anti-alias setting is.
-text
We mention this hint here because it is the opposite if the -g hint.
To specify that a type layer should appear as text you can add the "-text" hint to the end of the type layer's
name to force it to be text on the web page no matter what the anti-aliasing is set to.
If you place the -g and -text hints on a single layer the universe may explode.
Background Images vs. Content Images
Web page images fall into one of two categories: content or decoration. Decoration includes background
tiles, decorative frames, basically anything that could be deleted from the website but still allow the site
to fulfill its informational purpose.
For example if a page is presenting photos of a little league baseball team's recent game, the photos of the
game are content but the semi transparent baseballs, gloves, and bats that appear in the background of the
page are decoration.
SiteGrinder treats unhinted image layers as decorative elements. (Gallery images are always treated as
content are not part of this discussion.)
The -content Hint and Images
When you place the -content hint on an image it tells SiteGrinder to treat the image as page content. This
is really just a shortcut for creating an -xmedia layer the same size and using the Content Manager to then
import the image using the xmedia "Image" importer.
This has powerful results:
The image will not be merged with others. (The equivalent of the -nomerge hint)
The image will be included in the HTML using an <img> tag which tells browsers and search
engines that it is important content. This helps search engines index your content and it tells
browsers to print the image even when your site visitors instruct the browsers not to print
background images.
The name of the image layer (not including any hints) will be included in the HTML code for the
layer as a description. This means you should use a name that makes sense in this context, like

337
"Billy at the bat! -content". (This is the alt text for you experts.)
You can change the image to a different one later in the external media editor of the Content
Manager. You should use an image of the same dimensions as a replacement unless you have a
-column set up to handle changing sized content. When you do this you can change the
description text.
If the same image layer with the -content hint appears on multiple pages in your document it is
automatically considered shared content. This means if you replace it on one page it will be
replaced on all pages.
You can add the -unique hint if you don't want a -content image shared between multiple pages
Gallery Images
Gallery images should not be imported into your Photoshop document as layers. SiteGrinder uses
external jpeg, gif, or png files when it creates galleries.
Gallery images are compressed only if they are larger than the components you want to use them with.
For example if you have a picturebox layer that is 100 x 100 and an image you want to use that is 500 x
500 then SiteGrinder will resize and therefore recompress the image to create a version that will fit.
Your choice, therefore, is whether to re-size the image yourself or let SiteGrinder do it.
Most users employ Photoshop's or Lightroom's batch features to re-size and re-compress their gallery
images to the picturebox size and let SiteGrinder itself create thumbnail sized images.
For details see the Gallery reference documentation.
Favicons and the -Fav Hint
A "fav icon" ("fav" as in "favorite") is the little icon that often appears next to your site's url in a web
browser's address bar.
The Media Lab favicon as seen in the address bars of Safari 4 (top) and Firefox 3.6 (bottom):
It also is often used by browsers next to bookmarks your visitors create for your site.
To create a favicon that works on every page of your site just make an image layer and name it anything
(except the name of one of your layer comps) and add the "-fav" hint. "site-fav" is a good choice because
it reminds you that this favicon will be for your whole site.
To create page-specific favicons, name them "pagename-fav" where "pagename" matches one of your
pages. "Wedding-fav" will be the favicon for both "wedding-page" and any pages you make in the
Content Manager based on "Weddings-page'.
Favicons are tiny, only 16x16 pixels. SiteGrinder does not scale a -fav layer for you. If you don't scale it
yourself the browsers will scale it for you but they may not do as good a job. A good compromise is to
keep the favicon at a multiple of 16. 64x64 is large enough to work with and usually scales down well.
As with other images, you can choose the compression setting for you favicon in SiteGrinder's

338
Compression Panel. If your favicon has any semi transparent areas (including anti-aliased edges) it's a
good ides to use 24bit png because browser don't always draw the favicons on white.
The "Control" Add-On
Contents
Contents
Introduction
How to Tell is Control is Activated
Requirements
Host Requirements
Client Requirements
Local vs. Remote CMS
Synchronizing the Local CMS with Remote Changes
How to Connect To the Remote CMS
Setting the Username and Password
Initially Setting Username and Password
Changing Username or Password In the Content Manager
The edit-button Hint
The Edit URL
Limiting Client Control
Using Google Docs
Using TinyMCE in Simple Mode
Introduction
All versions of SiteGrinder 3 provide the ability to edit content on pages and make new pages right
within a browser window so that changes can be viewed instantly. This is called a "CMS" or "Content
Management System".
Without SiteGrinder's optional "Control" add-on this content editing can happen only on the computer
that has Photoshop and SiteGrinder installed.
If you have the Control add-on to SiteGrinder 3 and a compatible web host then you can take advantage
of SiteGrinder's full complement of site editing tools right in a browser window from any web-connected
computer.
Because the remote CMS that the "Control" add-on provides operates in an almost identical manner to
the SiteGrinder 3 Content Manager described elsewhere throughout the rest of the SiteGrinder 3 learning
materials, this document will focus on the aspects of content management unique the the remote CMS.
How to Tell is Control is Activated
When you open the SiteGrinder plug-in from Photoshop's File->Automate menu you will be presented
with the SiteGrinder window. At the bottom of this window you will see the "Activation Status":

339
If you see "Control" listed here then the Control add-on is activated.
If you don't see Control listed here you will need to click the "Activate" button and reactivate if you have
upgraded your license for Control. If you purchased Control initially with SiteGrinder or have already
reactivated since upgrading then contact sales@medialab.com.
Requirements
Host Requirements
Not all hosts support the necessary underlying technologies required by SiteGrinder Control's remote
Content Manager.
In general your hosting account needs to support the following:
PHP 5 with Upload

Some importers require "CUrl" support
To find out if your host is fully compatible with SiteGrinder Control check the Hosting Requirements
appendix.
Client Requirements
You'll need a modern web browser and Adobe Flash Player to use Control's remote CMS.
Browser version specifics (not requirements...often eariler versions will work fine):
Firefox 3 and later

Safari 3 and later
Internet Explorer 7 or later
Opera 9 and later
Flash Player version specifics:
Adobe Flash Player 8 or later for all CMS controls except the Gallery Editor
Adobe Flash Player 9 or later for the Content Manager's Gallery Editor
Local vs. Remote CMS
When the SiteGrinder 3 Content Manager is running locally your workflow involves making edits to
content and then Synchronizing with your remote site.
When you are using the remote Content Manager to directly edit your site there is no separate
synchronization step. The changes you make are reflected immediately in the remote site.
Synchronizing the Local CMS with Remote Changes
In most situations you will want to keep your local CMS version of site in sync with the remote version.
This is where the local CMS "Synchronize" command really shines.
When you select "Upload Changes (synchronize)" from the local CMS "Upload" menu SiteGrinder will
do the following:
1.
340
1. Check to see if there are changes made locally since the last time you synchronized
2. Check to see if there are changes made to the remote site (perhaps by a client) since the last time
you synchronized
3. Remote changes will be downloaded
4. Local changes will be uploaded
5. Where there is a conflict, for example if the remote site has had a content image replaced and the
local site replaced the same image with something else, SiteGrinder will use the most recent
version
How to Connect To the Remote CMS
Not just anyone can edit a site you deploy with Control: you have to know the username and password.
If you know your username and password there are two ways to log in to a site's remote CMS system so
you can start editing its contents:
In the Photoshop document you can create a special button layer named "edit-button" which will
log you into th e CMS
SiteGrinder also creates a special login page. You can use a special url to log in to this page to
start editing your site.
See the sections below for details.
Setting the Username and Password
You set a username and password when you first create a site and you can also change it later in the
Content Manager. There is no way to change the username or password from the remote CMS.
Initially Setting Username and Password
When you first create your CMS site you can set the login and password for the CMS in the"New Site"
window using the username and password fields located next to the "remote cms" radio button:
Changing Username or Password In the Content Manager
After you deploy the pages of a site that supports SiteGrinder Control's remote CMS you can change the
login and password in the Content Manager via the "Connection Settings" window:

341
Here are the steps to change your username and/or password:
1. Open your site in the Content Manager

2. Open the "Connection Settings" window from the Content Manager's "Upload' menu
3. Type in the username and or password change in the "CMS login" area shown above
The next time you "Upload" or "Synchronize" your site with the remote server your new username and
password will be applied.
The edit-button Hint
SiteGrinder supports a special button hint for connecting to your CM online: edit-button.
The edit-button hint has a very particular function, which is to take you to your CMS login page.
As far as appearance on the page, the edit-button hint is totally flexible.
You can use it to create a CSS text button which you can style in the Design Manager or you can use it as
image button.
If you make an image button using the edit-button hint you can also create alternate states, such as
edit-hover.
Generally if you use an edit-button on your pages you will use a small, unobtrusive design, perhaps near
the bottom of the footer.
The Edit URL
Even if you don't add an edit-button to any of your pages you can still edit them by logging in to a
specific file url that SiteGrinder will activate on your site.
The file is called "sg_admin.html" and is located at the top level of your SiteGrinder remote site.
So if you are using "http://zombiehand.com" as your domain and your SiteGrinder site is at the top level
of the domain (not in a subdirectory) then the url to access the remote CMS will be:
http://www.zombiehand.com/sg_admin.html"
But if you have uploaded your site to a subdirectory you will have to add that to the admin url. For
example if you have a "Fred's Bowling" prototype uploaded to your own server at
"www.mega-awesome-designs.net/prototypes/freds-bowling" then the remote CMS admin would be
located at
http://www.mega-awesome-designs.net/prototypes/freds-bowling/sg_admin.html

342
Limiting Client Control
As of this writing the SiteGrinder Control remote CMS supports only one kind of user. This means there
is no special category that limits the actions of some users while allowing others a broader range of
editing capabilities.
There are, however, ways to manage what some users can do, as described below.
Using Google Docs
It's very easy to include Google Docs word processor documents in SiteGrinder designs using the xmedia
layer. In many cases the easiest way to handle clients who just need to edit text in a small number of
places on their site is to give them access to a Google document instead of to the entire CMS.
See the xmedia documentation for details.
Using TinyMCE in Simple Mode
When you create a site the "New Site" window provides advanced options that control what the text
editor in the Content Manager can do.
There are two choices offered here: advanced and simple.
The advanced editor includes many toolbar buttons and the ability to edit raw HTML.
The simple editor does not allow HTML editing and provides only basic text editing controls. The
simple option is useful for allowing clients to edit text without allowing them to edit HTML or make
other potentially dramatic changes.
Blogs
Contents
Contents
What is a SiteGrinder Blog?
Limitations/Requirements
The Blog Workflow
1. Create the Blog as a Photoshop Layer
2. Style The Blog in the Design Manager
3. Configure the Blog in the Content Manager
Username and password
RSS Title and Description
CAPTCHAS
4. Upload and Start Using the Blog
Spawning New Pages With Blogs
Organizing the Blog
Further Customizing Blog Appearance

343
What is a SiteGrinder Blog?
A blog allows its owner to create individual commentaries called "posts" in chronological sequence. Site
visitors are then free to post their own comments in response to a particular post.
SiteGrinder 3's -blog hint added to a type layer allows you to add a basic blog to any page.
SiteGrinder 3 blogs support the following features:
Username/password access control for the blog owner.

User comments.
"CAPTCHA" feature for adding your own questions to verify that commenters are not spam
"bots".
Customizable look including text settings and background color.
Blogs support their own RSS feed.
Blogs work togther with columns so that as they grow they don't disturb overall page layout.
Making new pages in the Content Manager from a page design with a blog starts a new unique
blog.
SiteGrinder blogs are not meant to be replace robust blogging systems like Wordpress. They are meant
to allow you to rapidly develop simple blogs you can include right on your pages rather than having to
send site visitors to a different site.
Limitations/Requirements
SiteGrinder blogs require the optional SiteGrinder 3 "Control" CMS add-on.
Blogs only work when deployed to a site that had the remote CMS system enabled in the New Site
window when it was created.
Blogs are not functional until they are actually uploaded to the remote server. They do not function
locally in either the Design Manager or Content Manager, though SiteGrinder provides dummy blog
content in the Design Manager and Content Manager so you can see how the blog will fit within your
page design once it has a few posts.
The Blog Workflow
The blog workflow involves layers in the Photoshop file, settings in the Design Manager, and more
settings in the Content Manager.
1. Create the Blog as a Photoshop Layer

The first step to creating a blog is to drag out a type layer with the type tool. The -blog layer is a
placeholder layer. Its dimensions, position, and contents will affect the final appearance of the blog but
the actual text you type into the -blog layer will not appear on the final page.
Make the layer's type rectangle the width you want the blog to have and position it in the document
where you want the blog to be. The vertical space taken up by the -blog layer is irrelevant since the
height of the blog on the final page will depend on the number of posts and comments.
Because blogs change in height as you add new posts you will usually want to put them inside a -column
layer to preserve the overall page layout as the blog grows.

344
While the text itself won't appear on the final page, the character styles that you give the text inside the
-blog layer will control the style of the text in the blog. If you make the text in the -blog layer blue, bold,
and 24 point in Photoshop using the character palette then that is the style your blog content text will
have.
Finally add the -blog hint to the type layer and you are ready to move to the next step.
2. Style The Blog in the Design Manager

You'll open SiteGrinder and build your page(s) with the -blog layer, which will open the Design
Manager.
In the Design Manager you will see a "dummy" blog for preview purposes in the page preview area.
(The dummy blog is just for preview and does not allow you to add new entries.)
If the dummy blog wreaks havoc with your page layout you will need to return to Photoshop to add or
adjust one or more -column layers to control the layout.
You will also find an entry in the "border and background styles" panel for the blog layer.
Click the style column menu next to the blog entry:

345
You can select an existing style or create a new one.
Using the style settings window for the blog style you can set the following:
Background color, borders and drop shadow for the rectangle containing the blog
Text shadow for the blog text
Clicking "apply" will change the setting of the preview blog.
One you are happy with the settings the next step is to deploy your page and configure the blog in the
Content Manager.
3. Configure the Blog in the Content Manager

The Content Manager will also present the "dummy" version of the blog for previewing.
In the Content Manager controls area you will see a blog panel:
The panel presents three button you can use to set a user name and password, title and description, even
custom captchas.
Username and password

You'll need to set a username and password to stop bots and anyone else from posting on your blog.
When you click the "User and Password" button SiteGrinder will alow you to set these in this small
window:

346
RSS Title and Description

An RSS feed is a way for you or your site visitors to subscribe to your blog. RSS readers allow blogs to
be followed and read without having to actually visit the page the blog is on.
SiteGrinder blogs support RSS. All you have to do is click the "RSS Title and Description" button to set
this information in the below window:
The title and dsscription will be displayed in RSS reader software.
CAPTCHAS
SiteGrinder blogs, like most blogs, allow anyone and everyone to post comments. The problem is that as
with any commonly accessible resource there is inevitably abuse. "Spambots" are web scripts that look
for open blogs and post dummy comments with links to sites whose search engine ranking they are trying
to improve.
A "CAPTCHA" is little test you make your blog commenters take to prove they are humans and not
spam-producing scripts. SiteGrinder blogs let you specify your own question(s) to determine this.
To set the questions(s) and answers click the "CAPTCHAS" button to reveal this window:

347
4. Upload and Start Using the Blog

When you upload your page you will finally be able to actually make your first blog post.
Load your -blog page in a browser and click "log in".
At that point you can create a new post.
Spawning New Pages With Blogs
Whenever you create a new page in the CMS system you choose a an existing page design which the new
page should be a copy of. If the base design has any -blog layers, then any new page created from that
design will have its own new empty blog.
You can assign a new user name and password to that blog, as well as title, description, and captchas.
Thus, from one page design with a single -blog layer on it, you can create as many individual user blogs
as you want.
Organizing the Blog
The blog is self-organizing. It will automatically show the latest post, provide links to see the post with
its comments, links to the older posts, etc.
These things are not changeable from within SiteGrinder. Advanced users with some HTML experience
can make links that show any number of posts, starting with whichever post number they want.
Each blog link is of the following format:

348
someblog.php?n=1&p=000001
Where n is the number of posts to show and p is the post number. Whenever n is 1, the comments for that
post will be displayed as well.
Further Customizing Blog Appearance
EXPERT TIP: For more advanced customization, you can manually edit the "yourblog.css" file. After
you've deployed te page this file will be in the "blog" directory inside the page's content directory in your
site directory. If you know CSS you can change the entries there to customize many other aspects of the
look of your blog.
The "Commerce" Add-On
Contents
Contents
About This Guide
Ecommerce Concepts
Shopping Carts
Stores
Payment Systems
Introduction to SiteGrinder Ecommerce
Ecommerce Without the SiteGrinder Commerce Add-On
The SiteGrinder Commerce Add-On
Installing the Commerce Add-On
How to Determine if Commerce is Activated
Activating Commerce
How Your Site Visitors Experience Ecommerce
Creating a SiteGrinder Ecommerce Site
Ecommerce and the Design Manager
Ecommerce and the Content Manager
The Ecommerce Panel
The Ecommerce Operation Editor
Ecommerce Buttons
Ecommerce Forms
Ecommerce Gallery Stores
Ecommerce Gallery Layers in Photoshop
Ecommerce Galleries and the Design Manager
Ecommerce Galleries and the Content Manager
The Operations Editor with Ecommerce Galleries
Preparation
About This Guide
This guide assumes you have read SiteGrinder 3 Introduction, SiteGrinder 3 Workflow, and ecommerce
Essentials so please do so now if you haven't.

349
If you want to use ecommerce with forms you will need to read the Forms Essentials.
If you want to use ecommerce with galleries you will need to read Galleries Essentials.
This guide discusses general use of SiteGrinder's ecommerce system.
For information pertaining to a specific ecommerce module, see the documentation specific to each:
FoxyCart (FoxyCart is the only supported module as of this writing)
Ecommerce Concepts
There are a few important terms to understand about ecommerce: shopping carts, stores, and payment
systems.
Shopping Carts
A shopping cart allows a user to shop on a site and can add products the cart, remove products, or change
quantities. When they check out they'll buy the contents of the cart. A cart doesn't need a database
because the information sent to the cart from a button can contain the price, item name, and any other
information necessary to the order.
A cart, such as FoxyCart, can appear as a small sub-window floating over a page of your site.FoxyCart is
a shopping cart. When used in conjunction with SiteGrinder 3 it allows your whole site to be a store. Any
page you want can be a product page, have "Buy Now" or "Add to Cart" buttons (plus "View Cart" and
others). Though, since this is page driven, not database driven, each "Buy Now" button contains its own
pricing and other information. This means that if Buy Now buttons for the same product appear on
multiple pages they'll have to be updated on multiple pages. There's no central database that would
change them all in one action.
Stores
A store is a page, a page embedded in another page, or even an entire site that lists different products that
are for sale and lets the use purchase them in some fashion. Usually there is a product database
associated with a store. This means an "Add to Cart" button can just trigger an item number and the price
etc are looked up from the data. Systems like "Ecwid" and "Cartfly" are stores, specifically stores that
are meant to be embedded inside pages using "iframes", a technique supported by SiteGrinder's -xmedia
hint. They each have a process for setting up products for sale. Their main output is a rectangular area
that lists the products for sale, letting the user browse them, navigate and purchase.
Many so-called "carts" are actually stores. "ZenCart" is a good example of this - it isn't a cart, it is a store.
Payment Systems
A payment system is a system for transferring money between parties. Most people use Paypal as a
payment system, though Paypal does offer shopping cart services for an additional fee. A shopping cart
will require some sort of payment system to finish the transaction.
Introduction to SiteGrinder Ecommerce
There are two approaches to ecommerce with SiteGrinder:
Use SiteGrinder's "Commerce" add-on to generate ecommerce buttons, forms, and galleries.

350
Use other systems like Paypal in conjunction with SiteGrinder features like the -embed and
-xmedia hints that let you include external content on your SiteGrinder pages.
Ecommerce Without the SiteGrinder Commerce Add-On
There are many approaches to eCommerce without using SiteGrinder's "Commerce" add-on:
Generate Paypal "buy now" buttons and include them on your pages using the -embed hint.
Set up your ecommerce pages on a dedicated web store site not created with SiteGrinder and link
to it using standard SiteGrinder buttons, menus, and text links.
Manually configure an on site shopping cart and use the "literal" link type to create custom links
that will open the cart with the correct product and other information.
The exact techniques involved with these approaches will depend on what you decide. Adding
eCommerce elements to your site can be complex.
Paypal buttons are usually the simplest of these approaches.
The SiteGrinder Commerce Add-On
The Commerce add-on activates a new hint with SiteGrinder, the -$ (dollar sign) hint, which tells
SiteGrinder that a button or form is linked to an eCommerce system.
These buttons and forms will send a message to an ecommerce system. The simplest and most common
action such a button can trigger is to add an item with just a name and a price to the site visitor's shopping
cart. If you use an ecommerce form you can provide any additional information along with name and
price, such as size or color.
Installing the Commerce Add-On
The Commerce add-on is not a separate download that you install. If you have installed SiteGrinder then
you have also installed Commerce. It is a set of features that is activated or not based on your
SiteGrinder unlock code.
If you originally purchased Commerce when you purchased SiteGrinder then the first time you activate
SiteGrinder you will also automatically activate Commerce - you don't have to do anything extra.
How to Determine if Commerce is Activated

When you open the SiteGrinder plug-in a message at the bottom of the window shows your activation
status.
It will display one of the following:
"Demo" means you are not activated.

"Activated" means you are activated for SiteGrinder but without any add-ons.
"Commerce" means SiteGrinder is activated along with the Commerce add-on.
"Control" means SiteGrinder is activated along with the Control add-on.
"Commerce + Control" means SiteGrinder is activated along with both add-ons.

351
Activating Commerce
If you purchase Commerce at a later date than your original SiteGrinder purchase you will need to
reactivate SiteGrinder by following these steps:
1. Open SiteGrinder and click the "Activate" button. You'll see the Activation window already filled
out with your information but you won't be able to edit it.
2. Click "Reactivate".
3. This will allow you to edit your activation info but normally you won't need to unless you are
switching to a new activation code. If you change any of the other fields you will have to approve
the change through an email sent to the previous email address you used to activate initially.
4. Click "Activate".
5. Close the Activation window.
At this point your activation status message in the plug-in window will list either "Commerce" or
"Commerce + Control" if you own both add-ons.
How Your Site Visitors Experience Ecommerce
Your site visitors will work with your page's ecommerce controls in three ways:
They'll see your ecommerce buttons and forms on your pages and click on them.
They'll see a shopping cart displayed in a "lightbox" on top of your site whenever they click an
ecommerce control that affects the cart, like "Add to cart". When viewing the cart in this way
they can delete items, change quantities, see the order total, etc.
They'll go to a checkout page for your store on the FoxyCart site when they either click a "check
out" button provided by you on one of your pages or when they select "check out" while viewing
the cart.
You can also create "Add to cart and checkout" buttons that will skip the middle step.
This is what the default FoxyCart shopping cart looks like:

352
Notice in the above image that the site visitor has not left the site. The cart is super-imposed on top of
the page they were viewing when they clicked the "Add to cart" button.
This is what the default check-out page looks like:

353
The appearance of the cart and check-out page may be customizable depending on the ecommerce
module you select.
Creating a SiteGrinder Ecommerce Site
Before you can deploy pages that contain ecommerce buttons or forms you will need to create a new site
and set up its ecommerce options.
When you select "new site" from the SiteGrinder plug-in window's "Sites" or "Deploy to" menus you will
see this window:

354
The first step to configuring ecommerce options is to select an ecommerce module from the "Module"
menu, #1 above. (At the time of this writing FoxyCart is the only supported module.)
The remaining ecommerce controls will differ depending on the module you select. In the case of
FoxyCart you'll provide the name (#2) and domain (#3) of the FoxyCart store you have previously set up
at foxycart.com.
For details of FoxyCart configuration see the FoxyCart module documentation.
Ecommerce and the Design Manager
The appearance of ecommerce buttons and forms can be modified in the Design Manager in exactly the
same way as non-ecommerce buttons and forms. There is no difference. The Design Manager has no
ecommerce-specific features or techniques.
Ecommerce and the Content Manager
If you are editing a page in the Content Manager that contains ecommerce buttons or forms you will see
the "ecommerce" panel displayed and it will list each individual button and form. You use this panel to
view and edit your ecommerce elements.

355
The Ecommerce Panel
This panel lists the ecommerce elements by their original layer names in the "Layer" column and in the
"Operation" column you'll either see "not set" or details of the assigned operation next to each element.
Ecommerce operations are just the common actions that ecommerce buttons provide, like adding an item
to the shopping cart, viewing the cart, and checking out.
To edit the ecommerce operation click the blue text in the Operation column next to the layer you want to
edit. This will open the Operation Editor.
The Ecommerce Operation Editor
Not surprisingly, the first thing you will do in the Operation Editor is select the operation for the element
you are editing from the "Operation" menu.
Which operations are available will depend on which ecommerce module you chose when you created
the site.
Here are the operations available with the FoxyCart module:
Operations like View Cart, Checkout, and Empty Cart don't require any additional information, so if you
select one of those you will click the "OK" button and be finished.
The Add to Cart operation does require more information. At the very least you will provide the item
name in the "name" field and the price in the "price" field. (The price should be entered without a
currency symbol. THe currency is determined by your ecommerce module's settings.)
If you want to provide more options you can click the "New Option" button. Each time you click it you
will be asked the name the option should have. At that point a new field will be added to the editor so

356
you can add a value for the option.
Below you can see that "Size" and "Paper" options, along with the values "8x10" and "Ultraprint", have
been added:
You name the options you add anything you want and give them whatever values you want. If you are
selling Chia (tm) pets you could create an option called "Grass Variety" and provide "Kentucky Blue" as
the value. Most options will simply be passed along to your webstore with the order for your use when
you are filling the order.
Some options, like "quantity", will be recognized by the shopping cart. Which options are recognized
depends on the cart module. If you have an item with a price set at 100 and you add a "quantity" option
with the value 3 then the FoxyCart shopping cart will show 3 as the quantity and 300 as the total.
IMPORTANT: the options you set here are not editable by your site visitor. If you want the site visitor
to be able to control some of the options you will use the ecommerce form feature described below.
Ecommerce Buttons
Ecommerce buttons are created exactly like normal SiteGrinder buttons with one difference: you add the
-$ hint to the -button layer's name, as in "Purchase-button-$". You can use all of SiteGrinder's button
techniques, such as hover and click states, showing and hiding other elements with animation, etc.
The purpose of an ecommerce button is to tell your ecommerce system to perform some specific
ecommerce operation.
Different ecommerce modules will support different operations, but most will support a common set.
Common ecommerce operations include:

357
Add to cart
Add to cart and check out
Check out
View cart
Empty cart
Some operations, like "Empty Cart", don't require any options.
Others, like "Add to cart", must specify at least the name of the item the button will add to the site
visitor's cart and what the item's price is. Additional options, such as color or size, can be included as
needed using the design manager's ecommerce operation editor as described above.
Ecommerce buttons can have only the options you provide them in the Content Manager. The user
cannot affect those options, they can only choose which button to click.
If you want to provide user-selectable options then you can use an ecommerce form, described below.
Ecommerce Forms
Ecommerce forms are created exactly like normal SiteGrinder forms with one difference: you add the -$
hint to the -form layer's name, as in "Order-form-$".
Ecommerce forms are very much like ecommerce buttons. They tell your ecommerce system to perform
an operation, and, just as with buttons, you (the designer) can provide additional options using the
Content Manager's ecommerce operation controls. The advantage of forms is that you can provide
flexible options for the user to select, like size or color, in addition to the options the user can't change
that you set in the operations editor.
NOTE: An ecommerce form can be assigned any operation your ecommerce module provides, but in
practice only "Add to cart" and "Add to cart and checkout" are used with forms. All the other operations,
such as "Empty Cart", have no options associated with them and so would never need a form.
The most common use of a form is to provide choices like size and color, but you can collect any
information you like using the form.
Some form field names will automatically be recognized by the ecommerce system and will have a direct
effect on the transaction. "Quantity" is the most common example. If you provide a field named
"quantity" then the shopping cart will recognize how many items are being added to the cart.
Some ecommerce modules, including FoxyCart, allow you to pre-populate fields in the final check-out
form (like first name, address, etc.) with fields from your own form. To do this you may need to use
custom variable names in your form. See the FoxyCart reference for details.
For a high level overview of creating forms with SiteGrinder see the Forms Essentials Guide and for
details see the Forms Reference.
Ecommerce Gallery Stores
Adding individual ecommerce buttons and forms to pages is quick and easy to do for a few products, but
what if you have lots of products? Do you need to make a button for each and every one in your
Photoshop file? Absolutely not. That's what galleries are for.
Galleries allow you to leverage a single Photoshop layercomp for many different images that you might

358
want to display. Galleries also support metadata, which means that text can be placed onto each page as
well. And galleries are supported by the SiteGrinder CMS, so you can add and remove images, reorder
them, and change the metadata for them while online.
Combined with ecommerce buttons or forms, galleries can become instant stores. "Add to cart" buttons
can add the currently selected item as displayed in the gallery and each item, using metadata, can have its
own price, name, and other options.
Before making a gallery with ecommerce you'll want to be familiar with the Gallery Documentation,
including the use of metadata in galleries.
Ecommerce Gallery Layers in Photoshop
The layer recipe for setting up an ecommerce store includes:
A picturebox layer
Optional additional gallery components for navigating the gallery like next and previous buttons
and thumbsheets
At least one layer with the -metadata hint
The picturebox will display the currently selected item. The -metadata layer will contain information like
price. The reason the metadata layer is required is that the fields you include in it, such as [[description]],
will be used to provide pricing and other information to your ecommerce buttons and forms.
Normally you will want the metadata layer(s) to be visible so the price for a given item will be displayed
in your gallery. You might decide to use the "description" metadata for your item name and the "title"
metadata to hold your price.
If your ecommerce gallery picturebox layer is named "Nature posters-picturebox", your metadata layer
would be named "Nature posters-metadata".
The contents of the "Nature posters-metadata" type layer will be something like:
Item name: [[description]]
Price: [[title]]
As your site visitor moves from image to image these values will reflect the metadata for the current
image.
You can also choose not to show some or all of the metadata you want to use with your ecommerce
buttons and forms. Let's say you want to use the "author" metadata field to hold some special code for
your own reference. You want it to be included in the order but don't need it to show on the page. To
achive this you would create an additional metadata type layer and include the "author" metadata label.
This type layer would also be named "Nature posters-metadata" to associate it with the same picturebox
as the previous metadata layer.
The contents of this type layer would just be this:
[[author]]

359
Then you would make that layer hidden in your page's layer comp. The purpose of this hidden metadata
layer is to let SiteGrinder know you will be using the "author" metadata in the Content Manager even
though it won't be displayed in text on the page. Because the name matches the picturebox name
SiteGrinder will notice this even though it's hidden.
Just as with a non-ecommerce gallery, you can fill out or edit the values for "description", "title", and
"author" metadata in two places:
Before you add your images to the gallery, using a tool like Adobe Bridge
After you add your images to the gallery using SiteGrinder's Gallery Editor
Now that you have your gallery components including whatever metadata you want to use you will create
whatever ecommerce buttons and forms you want to use and give them the "$" hint. This can be an "add
to cart" button, an "add to cart" form to allow the user to specify options, and any other buttons you want
to provide for things like "check out" or "view cart". These button and form layers don't need to be
named after the gallery. It's better to name them for your own reference, so name them in a way that tells
you what each does, like "Add to cart -button-$". You'll connect them to the gallery in the Content
Manager.
Once you've added your gallery components and ecommerce buttons and updated your layer comp it's
time to build.
Ecommerce Galleries and the Design Manager
Once you build your ecommerce gallery page you will set up the appearance of your gallery, button, and
form elements using the Design Manager.
The fact that this in an ecommerce gallery does not change what you do in the Design Manager in any
way. For more information about customizing the look of buttons, forms, and galleries in the Design
Manager see the Design Manager reference.
When you are happy with your choice of gallery components and button and form appearance settings it's
time to deploy to the Content Manager.
Ecommerce Galleries and the Content Manager
When we arrive in the Content Manager the ecommerce gallery controls look the same as the ecommerce
controls in the non-gallery examples above:
Notice we've got two controls for our ecommerce gallery, a "View cart" button and an "Add to cart"
form. So far they have no operations set for them - "view cart" and "add to cart" are just the names we
gave their layers in Photoshop. We'll assign there operations and options in the Operations Editor.
The first one we'll assign is the "View cart" button. Clicking on the blue "not set" text next to the "View
cart" layer will open the Operation Editor.

360
Because "View cart" is a simple operation with no options, setting this up is no different than setting up a
"View cart" button without a gallery:
Now it's time to set up the "Add to cart" options.
The Operations Editor with Ecommerce Galleries

Ecommerce buttons and forms (i.e. forms and buttons that use the -$ hint) are handled in a special way
when they appear on the same page as a gallery component.
As you saw in the previous sections, with non-gallery ecommerce forms and buttons you assign options
operations and options like "price" and "name" using the Operation Editor in the Content Manager. If a
button or form needs options then you just type in the values and they are set.
But what about galleries? You can't just type in a price for an ecommerce gallery's "add to cart" button
because you may have a different price for every item in the gallery. The price will need to be set based
on the currently selected gallery image.
To handle this the Operation Editor is a little different when you use it on a control that's on a page with
gallery elements. It allows you to associate metadata fields with options.
In the example from above we will be associating the "description" field with the item name, the "title"
field with the price, and the "author" field with some sort of ID field which we'll call "Product Number".
The first step is to open the Operation Editor and select "Add to cart" as the operation.
The editor will display this:

361
As you can see the usual "name" and "price" options are there. If all of your items were named the same
and had the same price you could just type them in. But that's usually not the case. We're going to have
a custom name and price for each gallery image.
Notice there is a new menu not seen in the previous Operation Editor examples: " Metadata Provider".
This menu allows you to select a gallery to be the source of some or all of your options through its
metadata.
When we select a gallery from this menu (remember pages can have more than one gallery) the controls
change a bit:
Notice above that each option (name and price) now has a new menu under the field where you normally

362
type in the option value. These menus allow you to select a metadata field name to use for that value in
the actual gallery.
Clicking on the menu for "name" reveals this:
Notice the three metadata fields we used in the metadata layers named after this gallery in our Photoshop
document are listed there, "title", "description", and "author".
We'll use these menus to select "description" for the name and "title" for the price as we did in our
original metadata layer.
Doing so results in the window looking like this:

363
We just have one more thing to do here. Remember we wanted the "author" metadata to provide an
option for each gallery image we called "Product Number".
To add this we'll click "New Option" and name the option "Product Number". This will add "Product
Number" as an option just like "name" and "price", and it will have it's own metadata menu. We'll select
"author" from that menu.
Now the Operation Editor looks like this:

364
At this point we have finished setting up the ecommerce button and form. The only thing left to do is add
our images using the Gallery Editor.
Preparation
1. Depending upon your ecommerce module, you'll want to designate at least two metadata
identifiers in the -metadata layers.. ( [[name]] and [[price]] are good).

365
A -$ layer on a page with a -picturebox can choose to be linked to that -picturebox by selecting it in the
Metadata Provider control. Then, in the lower part, rather than entering in a fixed name for the product
or a fixed price, select which metadata field you want the button to get the data from.
The list of metadata fields available is determined by which metadata identifiers were used on the page
design in the -metadata layers.
Use the CMS system to edit the metadata of the different images. Set the price and product name for
each there.
Ecommerce With FoxyCart
Contents
Contents
About This Guide
Setting Up Your FoxyCart Account
FoxyCart Operations
Customizing the Appearance of FoxyCart
Ecommerce Forms with FoxyCart
Custom Fieldnames for Custom Options
Standard Field Names Recognized By FoxyCart
Pre-Filling FoxyCart Fields From A SiteGrinder Form
About This Guide
Use of FoxyCart with SiteGrinder's "$" ecommerce hint for buttons and forms requires the optional
"Commerce" add-on as well as a FoxyCart paid subscription once your store goes live.
This guide discusses only ecommerce features that are unique to the FoxyCart ecommerce module.
For a high level overview of SiteGirnder's ecommerce features see the Ecommerce Essentials Guide. For
details about creating ecommerce buttons, forms and galleries see the Commerce Add-On reference.
The complete FoxyCart documentation is found on their wiki.
Setting Up Your FoxyCart Account
Your receipt from Media Lab for your purchase of SiteGrinder with the Commerce add-on included the
url you should use to set up your FoxyCart account.
One you are at the FoxyCart site you'll set up your FoxyCart account ad create your first store.
Setting up your FoxyCart store is a quick and easy process.
If you haven't set up an account yet you should do so now by following the set-up instructions here:
http://wiki.foxycart.com/getting_started:foxycart_setup
If you do not have a payment gateway (the service that actually transfers money from your customers to
you) you'll need to sign up for one.

366
FocyCart is compatible with all of the most popular gateways and provides a list of them with links on
their wiki. (See Section 2 - Reference, in the right-hand column)
As of March 2010 FoxyCart supports the following gateways. (Click the links for details):
Payment Gateway Information and Notes

Quantum Gateway (CDG Commerce) setup. (FoxyCart's Recommended gateway)
Authorize.net setup.
CyberSource setup.
eWAY setup. (Australia)
PayPal, what is and what is not supported.
PayPoint Gateway (formerly SecPay) setup.
Plug 'n Pay setup.
PSiGate setup.
Sage Payments setup.
Once you log in to FoxyCart you can configure many settings.
To hook up the payment gateway you'll need to click the "payment" menu at the top of the FoxyCart
page.
FoxyCart Operations
FoxyCart support 5 different operations:
add to cart
add to cart and checkout
checkout
view cart
empty cart
The first three operations have two required pieces of information: the product name and its price. You
can use eccommerce forms and the Content Manager's Operation Editor to add more options if you need
them.
The remaining three need no additional information.
Customizing the Appearance of FoxyCart
The appearance of the FoxyCart is customizable, but it must be done through editing CSS.
Documentation and screen movies on customizing your the look of your cart are available at the
FoxyCart Site.
Ecommerce Forms with FoxyCart
Generally you will use ecommerce forms with FoxyCart exactly as described in the Commerce Reference
Guide.
FoxyCart does provide some extra features you can take advantage of if you so choose:
Some form field names will be recognized by FoxyCart and given special significance

367
SiteGrinder allows you to pre-fill some of the fields on the check-out page if you gather that
information in your SiteGrinder ecommerce form.
These are described in detail below.
Custom Fieldnames for Custom Options

Many of FoxyCart's advanced features rely on you providing fields with specific "variable names" from
your form. Normally a form's field name is its variable name. A field named "email:______" uses
"email" as the variable name.
But sometimes the variable names you need to use don't make very good field names that the user will
see.
For example, FoxyCart can use a variable named "customer_first_name" to auto fill the appropriate field
on the FoxyCart check-out page. You could make a form field like
"customer_first_name:________________", but that's an ugly name to display to the site visitor.
Luckily SiteGrinder forms allow you to specify a variable name that's different from the displayed name.
In the previous example we want to make the form field show "First name" to the user but send the value
to FoxyCart with the variable name "customer_first_name".
This what we would type into that line of the form layer in Photoshop to achieve this:
"First name/customer_first_name:____________________"
Only the part of the label typed before the slash, "First name", will be displayed in the form on the page.
For more information see the "Separating Names and Value" section of the Forms Reference.
Standard Field Names Recognized By FoxyCart

Some ecommerce options, like color or size, are just information that you are gathering to go along with
the order. This kind of information will help you fill the order but won't affect the order process.
Other information, such as quantity, are recognized by FoxyCart and directly affect the transaction or the
operation of the shopping cart.
Here are the names that FoxyCart recognizes.
name: The name of the product that will be displayed in the cart.
price: The cost of the product. DO NOT enter a currency sign.
code: Item code, can be used however you’d like.
quantity: Quantity of products. If left blank, it will default to 1.
quantity_max: Maximum quantity that should be allowed per cart, per product, per cart.
quantity_min: Minimum quantity that should be allowed per cart, per product, per cart.
NOTE: Max and min quantities do not control inventory. The values are per
cart/transaction/session.
category: Category identifier for the product. This will default to the default category if left
blank.
weight: Weight, used for shipping. If left blank, it will inherit this value from the product’s
category. If no category selected, will default to the default category's weight.

368
shipto: Allows you to specify specific shipto address labels for each cart add (requires multiship
feature v0.3.0+).
coupon=coupon_code. Add a coupon code directly to the cart. (v0.4.0+) See the discount syntax
below and in the admin help for more information on how to configure coupons for your store.
You can name your fields after these or use the technique described in the previous section to pass them
as variables separate from the field names.
For more information see the FoxyCart documentation at:
http://wiki.foxycart.com/getting_started:adding_links_and_forms
Pre-Filling FoxyCart Fields From A SiteGrinder Form

FoxyCart allows you to collect information in your form that can be passed along and pre-filled when
your customer arrives on the FoxyCart check-out page.
The following names are supported:
customer_first_name
customer_last_name
customer_email
customer_address1
customer_address2
customer_city
customer_state
customer_postal_code
customer_country
customer_phone
shipping_first_name
shipping_last_name
shipping_address1
shipping_address2
shipping_city
shipping_state
shipping_postal_code
shipping_country
shipping_phone
For more information see the FoxyCart documentation at:
http://wiki.foxycart.com/docs:checkout:prepopulating
Hint Reference
About This Guide
This is an overview of how to use hints followed by a complete reference guide to all SiteGrinder 3 hints.

369
If you are a new user to SiteGrinder you probably don't need to be here. New users should start with the
SiteGrinder Essentials Guide.
Click Here to jump directly to the rules for hint usage.
A printable pdf listing the hints is available for download.
Hints Listed Alphabetically
About This Guide

Rules For Using Hints
Layer Name Matching With Hints
Full Name Hints
Examples
Layer name examples of proper hint usage:
Layer name examples of incorrect hint usage:
Hint Glossary
$
background
blog
browser-background
button
centercut
click
clickhide
clickshow
column
content
edit-button
embed
fav
footer
footer-background
footer-backgroundcolor
form
g
h1
h2
h3
h4
h5
h6
hide
hover
hoverhide
hovershow
ignore

370
link
links
menu
merge
metadata
movefrom
next
nextpanel
nextpanelset
nextthumbset
nextview
nextviewset
noedit
nomerge
page
pagesize
panel
panelsheet
panelthumb
picturebox
previous
previouspanel
previouspanelset
previousthumbset
previousview
previousviewset
scroll
shared
text
thumb
thumbsheet
unique
viewsheet
wrap
xmedia
Hints Listed By Feature

Text
text
g
h1, h2, h3, h4, h5, h6
button
menu
hover

371
click
hovershow
hoverhide
clickshow
clickhide
hide
movefrom
Predefined Buttons
edit
Creating Pages
page
Layout Within a Page
column
centercut
pagesize
panel
wrap
footer
scroll
browser-background
footer-background
background (for -pagesize or -column)
Gallery
picturebox
thumbsheet
thumb
viewsheet
metadata
panel
panelsheet
panelthumb
next
previous
nextview
previousview
nextpanel
previouspanel

372
nextthumbset
previousthumbset
nextviewset
previousviewset
nextpanelset
previouspanelset
Content Management
shared
unique
noedit
content
edit
Output Control
g
text
-h1 / -h2 / -h3 / -h4 / -h5 / -h6
content
merge
nomerge
fav
ignore
Hyperlinks
links
link
External Media
xmedia
content
embed
Forms
form
Ecommerce
Blog
blog

373
Rules For Using Hints
Hints are words like "button" or "menu", preceded by a hyphen (which we often refer to as a "dash"), that
you can add to the end of layer names in Photoshop to tell SiteGrinder what kind of web content to make
out of the layers.
Without these kinds of hints at the end of a layer name SiteGrinder will treat a layer as a non interactive
element, just a part of the background graphics of the page.
One of the simplest example of hint usage is to add the "text" hint to a Photoshop type layer's name to
ensure that SiteGrinder converts that layer to CSS text on the web page it will build with that layer on it,
such as "Company History-text".
The most important thing to keep in mind is that hints are always preceded by a dash. This means you are
free to use words in layer or set names like "hover" or "button" wherever you like. These words are
totally ignored by SiteGrinder unless they are immediately preceded by a dash, as in "-hover".
You can use multiple hints on a layer when appropriate as long as each hint has its own dash.
When you use a hint in a way that has no effect or is incorrect SiteGrinder will warn you in the report is
displays when you open the plug-in window.
Here are some general guidelines for correct usage:
Certain hints can only be used on layer groups. The hint glossary below specifies the kinds of
layers each hint can be used on, but it's usually obvious. The -merge hint, for example, merges
layers in a layer group, so it makes no sense to use it on an individual layer.
Some hints can only be used on image layers and others only on type layers. These are also
usually obvious. The -text hint makes no sense on an image layer.
Some hints can't be used with other hints on the same layer. "Home-button-hovershow" makes no
sense because a -button layer triggers a -hovershow layer.
The "-page" hint is only used on layer comps. No other hint is used on layer comps.
Many hints cannot be used inside layer group buttons.
Some hints require either the SiteGrinder Commerce add-on or the SiteGrinder "Control" add-on.
You should never put hints on the following types of layers:
Adjustment layers (apply the adjustment if you need it)

Fill layers
Image layers without any content pixels
Layer groups with no layers in them
Layers in a clipping group (merge the group)
Layer Name Matching With Hints
A graphical rollover button can be created from two graphic layers using this technique. As an example
take two layers named "click me-button" and "click me-hover". SiteGrinder knows they are part of the
same button because the parts of the named before the hint ("click me") match each other. SiteGrinder
knows from the hints that "click me-button" should appear on the final web page and be replaced by
"click me-hover" when the web page user hovers the mouse over the button.

374
Full Name Hints
A few hints must be the entire layer name. An example is"browser-background".
Examples
Layer name examples of proper hint usage:

"Cute as a -button" (spaces and multiple words before a hint's dash aren't a problem. spaces after the
dash are a problem.)
"It's so easy to make a -ButtOn" (capitalization isn't a problem either)
"Navigation -text-menu" (multiple hints are allowed)
Layer name examples of incorrect hint usage:

"It's so easy to make a-Button in SiteGrinder" (putting any words after the hint is a bad idea)
"Cute as a-buttun" (the hint must be spelled correctly!)
"a-but ton" (the space between the Ts above won't work)
"a-butto" (SiteGrinder hints must be the whole word)
"home- button" (no spaces are allowed between the dash and the hint)
Hint Glossary
Note: When "image" appears below with "Used on Layer Type", this means not only standard image
layers but also any layer that will be rendered as an image on the final web pages including object layers,
type layers that SG isn't converting to CSS, etc.
$
Requires: SiteGrinder 3 with the SiteGrinder Commerce add-on
Used on Layer Type: Image Buttons, Text Buttons, Forms
Matches to Other Layers with Hints: None
Description:
The -$ hint simply tells SiteGrinder that the particular button or form that it is attached to is an
ecommerce enabled button or form. The -$ hint is never used by itself. Instead it is modifier hint that
can be used on \ or -form layers. A \ layer that also has the -$ hint will not appear in the Links control
alongside other buttons. Similarly, a -form layer that also has the -$ hint will not appear in the list of
forms in the plugin user interface. Not all ecommerce modules may support using -$ and -form together.
If a page has any -$ buttons or forms, then in the SiteGrinder CMS, you'll see an ecommerce control and
all the -$ layers on the page listed there. If you open that entry, you'll be given a list of ecommerce

375
operations that the button might be able to perform. See the information on the different ecommerce
modules to see what options they each support. Choosing an operation may cause other entry fields to be
added to the dialog. Fill them out with the required information.
Relevant Documentation:
Essentials Guide
Reference Guide
background
Requires: SiteGrinder 3
Used on Layer Type: Image
Matches to Other Layers with Hints: -column, -pagesize
Description:
The -background hint can be used to place a repeating tile (or affixed bitmap image) on the browser
window, the page, or any column.
Any -background layer specifies the tile for something else, either another layer or the browser window's
background. If a layer is named "browser-background", then the -background layer defines the tile for
the browser window itself. Otherwise the base name of -background layer should match a -pagesize or
-column layer, for example a layer named "contact-pagesize" would get its background from
"contact-background".
There is also a variation for footers that takes the layer name "footer-background".
Essentials Guide
Reference Guide
blog
Requires: SiteGrinder 3 with the SiteGrinder Control add-on, a Site with Remote CMS
Used on Layer Type: image, text
Matches to Other Layers with Hints:
Description:
The -blog hint designates an area of the page that can have blog entries and allow site visitors to make
comments on the blog entry. Blogs are configured in the Content Manager.
If you create new pages in the Content Manager from page designs containing blogs, the blogs on the
new pages will have their own unique content.

376
Reference Guide
browser-background
Used on Layer Type: image with either pattern overlay or gradient overlay layer style
Matches to Other Layers with Hints: none
Description:
A layer whose complete name is "browser-background" indicates to SiteGrinder both the tile that should
be used in the background of the browser as well as how it should repeat.
The tiling image is set by adding either a Pattern Overlay layer style to the layer or a Gradient Overlay
layer style. If using a gradient it needs to be exactly vertical or exactly horizontal depending on how it is
to repeat.
Tile repeating is set based on the contents of the. For example if the layer content extends from the left to
the right side but not to the bottom the layer will repeat horizontally only.
Essentials Guide
Reference Guide
Used on Layer Type: image with color overlay layer style
Description:
A layer whose complete name is "browser-backgroundcolor" indicates to SiteGrinder the color that
should fill the entire background area of the browser window behind all other elements, even background
tiles.
The color is indicated by adding the Color Overlay layer style to the layer and setting the color of the
layer style to the color you want to use as the browser background.
The contents of this layer don't matter, but having the contents fill the entire document area and placing it
behind all other layers will give the most accurate preview.
Essentials Guide
Reference Guide

377
button
Used on Layer Type: any
Matches to Other Layers with Hints: -hover, -click, -hovershow, -clickshow, -hide, -hoverhide, -text
Description:
The button hint indicates that a layer or layer group represents something that will interact with the
mouse, usually by changing in appearance when hovered over and causing some action on click, such as
taking the site visitor to a new page.
Buttons can change in appearance in many ways based on mouse movement and also cause areas of the
page to change in appearance.
Buttons can consist entirely of css text when the -button hint is added to a type layer that has anti-aliasing
set to "none" or also uses the -text hint. In this case the hover and click settings are edited in the Design
Manager.
In other cases buttons will consist of an image layer or anti-aliased type layer with optional additional
hinted layers to represent alternate appearance for hover, click, etc.
Button links can be set with -link layers or using controls in the Content Manager or automatically if a
button has the same name as a page layer comp. For example a layer named "home-button" will match to
a layer comp named "home-page".
Essentials Guide
Reference Guide
centercut
Used on Layer Type: image
Matches to Other Layers with Hints: -column with a vertically repeatable image section
Description:
The centercut hint is one of the techniques you can use to create arbitrary areas that have background tiles
that can grow vertically while still properly displaying the tile.
Normally a -column layer's contents will not appear on the final web page. However, if used with a
-centercut layer it will be.
The -centercut layer contents will not appear on the final page, instead the contents tells SiteGrinder what
part of the column you want "cut out" and replaced by a vertically growing tile.
When using an image layer for a -column, place a second layer atop it with the -centercut hint. The

378
-centercut layer should be rectangular, and reach at least the left and right edges of the column, and have
the same base name as the column. ("news-column" will match to "news-centercut")
The column layer contents will be sampled in the vertical center of the area of the centercut layer to
produce a 1 pixel tall tile that will be used to fill the expanding area.
IMPORTANT: Layer styles applied to the -column layer won't be used by the -centercut layer. You'll
need to render the layer styles into the column layer contents. (See the Photoshop Techniques Reference
for instructions on rendering layer styles.)
Essentials Guide
Reference Guide
click
Matches to Other Layers with Hints: -button
Description:
The -click hint used on a layer or layer group indicates the way an image button should look when the
site visitor clicks it. A click layer will match to a button layer with the same name, as in "Home-button"
and "Home-click".
Click is used less frequently than -hover because often clicking takes the visitor to a new page
immediately.
Essentials Guide
Reference Guide
clickhide
Description:
Causes a layer or layer group to become invisible when a button with a matching name is clicked.
"Home-button" matches to "Home-clickhide" for example.
Clickhide is used less frequently than -hoverhide because often clicking takes the site visitor to a new
page immediately.

379
Essentials Guide
Reference Guide
clickshow
Description:
Causes a layer or layer group to become visible when a button with a matching name is clicked.
"Home-button" matches to "Home-clickhide" for example.
Clickshow is used less frequently than -hovershow because often clicking takes the site visitor to a new
page immediately.
Essentials Guide
Reference Guide
column
Matches to Other Layers with Hints: -centercut, -backgroundcolor, -background, button reveal/hide
hints like -hovershow and -hoverhide, -scroll
Description:
Columns group many page elements so they rearrange themselves intelligently when other page elements
change size or position. Columns can also ensure backgrounds and borders behind these changing areas
stay beautiful and organized.
The column hint is a boundary hint, meaning it "contains" other layers if their contents are above the
contents of the column layer in the layer palette and their contents don't extend beyond the edges of the
column layer's contents.
Columns can contain other columns but columns cannot intersect other columns.
Columns are extremely versatile so you should read or view the introductory supporting materials before
trying to use them.
Essentials Guide

380
Reference Guide
content
Description:
Indicates that a layer should not be treated as decoration but instead as important content on the page in
the underlying HTML code. This also allows replacing the contents of this layer in the Content Manager.
Essentials Guide
Reference Guide
edit-button
Requires: SiteGrinder 3 and the Control Add-On
Used on Layer Type:any
Description:
When a layer or layer group is named "edit-button" it will create a special button on the built page that
will allow anyone viewing that page in a browser to log in and begin editing the page in the browser
using SiteGrinder 3's content management system.
This only functions for sites deployed using the "remote CMS" option, which can only be chosen if the
SiteGrinder Control add-on is activated.
Essentials Guide
Reference Guide
embed
Used on Layer Type: text
Description:
Embed allows you to add arbitrary web code to anywhere on a page. This kind of code is usually copied

381
and pasted from services like YouTube, PayPal, or Twitter to embed videos, buy now buttons, twitter
feeds, etc.
To use this hint you create a type layer by clicking and dragging with the type tool. The rectangle you
drag out will be the rectangle the embedded code draws its contents in, such as a YouTube video.
After you create the rectangle you paste the embed code you want to use into the contents of the type
layer. Finally you add the -embed hint to the layer name, as in "Surprised Kitty -embed".
In SiteGrinder 2 this hint was called "-literal".
Essentials Guide
Reference Guide
fav
Description:
When used on an image layer this hint will add a "favicon" to your site, which is the tiny 16x16 pixel
icon that shows in the browser's address bar when visitors are viewing any of your pages. For best results
you should use a 16x16 layer so you will know exactly what you are going to get. If you use a larger
layer SiteGrinder will scale it down to 16x16.
Reference Guide
footer
Used on Layer Type: layer groups only
Matches to Other Layers with Hints: -pagesize, footer-background, footer-backgroundcolor
Description:
Layers placed inside a layer group with the -footer hint will be aligned with the bottom of the browser
window if the browser window is taller than either the original Photoshop doument height or the
-pagesize layer if there is one. If the window is the same size or smaller than the original document
hieght or pagesize layer then the footer layers will be drawn at the bottom of the content just as they
appeared in the original
Footers can have background colors and tiles as specified by the associated footer-background and
footer-backgroundcolor hints contained in the footer group.

382
Different pages can have different footers in the the same document by organizing the footer group
visibility in the different page layer comps.
Page LayoutEssentials Guide
Page FootersReference Guide
footer-background
Used on Layer Type: image with either pattern overlay or gradient overlay layer style
Description:
The footer-background hint can be used to place a repeating tile across the bottom of the browser
window.
The tile is specified by either the Pattern Overlay or Gradient Overlay layer style applied to the layer
named "footer-background". The contents of the layer can be whatever you like, but for an effective
preview the contents should stretch horizontally across the full width of the Photoshop document behind
all the other footer layers and be the height of the tile.
Essentials Guide
Reference Guide
Used on Layer Type:
Description:
The footer-backgroundcolor hint can be used to place a solid color across the bottom of the browser
window.
The color is specified by the Color Overlay layer style applied to the layer named
"footer-backgroundcolor". The contents of the layer can be whatever you like, but for an effective
preview the contents should stretch horizontally acrossthe full width of the Photoshop document behind
all the other footer layers and be the height of the footer. The height of the colored background will
match the height of the footer groups contents.
Essentials Guide

383
Reference Guide
form
Description:
The form hint tells SiteGrinder to create an interactive web form based on the contents of the type layer
that uses this hint. Most common form controls are supported. They are created using a simple system
that is detailed in the form documentation.
As a quick example the underlines in the line
"Name:_______________"
typed into a form layer would become a text entry area of the form.
All the form fields and the submit button are created together in the same type layer using this system.
Only one control can appear on each line of a form.
Form data settings, such as the email address to send the contents of the form to, are set in the Forms
panel of the SiteGrinder plug-in window.
Form layout can be further customized using the From controls in the SiteGrinder Design Manager.
Forms can be used in concert with the SiteGrinder ecommerce features provided by the Commerce
add-on.
Essentials Guide
Reference Guide
g
Used on Layer Type: -text
Description:
The -g hint is only used when you want to force a type layer that has anti-alias set to "off" to be rendered
as an image on the final built web page. It is rarely used.

384
Reference Guide
h1
h2
h3
h4
h5
h6
Description:
The h1-h6 hints cause the first paragraph of a type layer to be styled using the corresponding header tag
level in the underlying HTML. The rest of the paragraphs in the layer will use the p tag.
Just add the h level you want to the type layers name, as in "My Body Copy -h1" or "Item of interest
-h3".
Reference Guide
hide
Matches to Other Layers with Hints: -button with associated -hovershow, -menu items with associated
-hovershow layers
Description:
The "-hide" hint added to a layer will cause the layer to hide when any hovershow appears on a page.
If a page has three "-button" layers with hovershows and two "-button" layers with no hovershows, the
three buttons with hovershows will cause any "-hide" layers on the page to disappear as long as the page
user continues to hover the mouse over the button.
No name matching is required as long as the layer to hide's name ends with "-hide".
This is very useful when your hovershow appear in the same area of the page as another layer. If the
hovershow layer doesn't completely obscure the other layer and you don't want the non-hover to be
visible while the popup is up, just add the "-hide" hint to it!

385
Note that this hint is general. It works whenever any hover appears.
Essentials Guide
Reference Guide
hover
Matches to Other Layers with Hints: image -button layers
Description:
A graphical hover button requires one layer to determine what the button looks like most of the time and
a layer for what it looks like when the mouse is hovered over it. SiteGrinder figures this out by looking
for layers that have the same name with the "-hover" and "-button" hints added to the ends, for example
"home-button" and "home-hover".
In SiteGrinder 2 the hint used for this purpose was "rollover".
Essentials Guide
Reference Guide
hoverhide
Matches to Other Layers with Hints: -button, -menu
Description:
A layer with the -hoverhide hint will disappear when a -button layer with a matching name is hovered
over. A layer named "Home-button" will cause "Home-hoverhide" to disappear while "Home-button" is
hovered over.
This is not to be confused with the -hover hint. A -hover layer occupies some or all of the space occupied
by the -button layer it will replace when the button is hovered over. Layers with -hoverhide should be
positioned elsewhere on the page. For the opposite effect, see the -hovershow hint.
In SiteGrinder 2 the hint used for this purpose was "popdown".
Essentials Guide

386
Reference Guide
hovershow
Matches to Other Layers with Hints: -button, -menu
Description:
A layer with the -hovershow hint will become visible only when a -button layer with a matching name is
hovered over. A layer named "Home-button" will cause "Home-hovershow" to appear while
"Home-button" is hovered over.
This is not to be confused with the -hover hint. A -hover layer occupies some or all of the space occupied
by the -button layer it will replace when the button is hovered over. Layers with -hovershow should be
positioned elsewhere on the page. For the opposite effect, see the -hoverhide hint.
In SiteGrinder 2 the hint used for this purpose was "popup".
Essentials Guide
Reference Guide
ignore
Used on Layer Type:
Description:
Layers with the -ignore hint or inside layer groups with the -ignore hint will not be included as part of
web pages built with SiteGrinder regardless of their visibility.
The primary use of this hint is to keep "work" layers in your document for later use without having them
included in the build.
Reference Guide
link
Used on Layer Type: -text

387
Description:
A -link layer allows you to specify the link for a button inside the Photoshop file rather than using the
SiteGrinder Content Manager's button editor.
The name of the link layer will match the button, as in "Resume on PDF-button" and "Resume on
PDF-link" and the text contents of the link layer will be the link itself, as in
"http://mysite.com/downloads/resume.pdf".
The primary advantage of this hint is for times when you are deploying to multiple sites a page with a
button whose link is not going to change from site to site.
Essentials Guide
Reference Guide
links
Matches to Other Layers with Hints: -text
Description:
This hint allws you to apply hyperlinks to words or phrases within associated text layers. This sentence,
containing this link is a perfect example.
SiteGrinder allows this using two text layers. The first layer should contains the text that will appear on
the web page and be recognizable by SiteGrinder as "true text". (Its anti aliasing should be "none" or it
should have the "-text" hint.)
For the links, create a new type layer that will contain the URLs you will be using as well as the copies of
the parts of the text you want to to apply them to. Name this layer the same as the layer containing the
text, but add the "-links" hint to its name.
Thus if you have a text layer named "sightseeing-text" it will match to a text layer named
"sightseeing-links".
The text in the "-links" layer consists of words and phrases from the text layer that you want to add URLs
to paired with the URLs themselves.
Each word or phrase from the first text layer that you want to add a link to should appear on a line in the
"-links" layer followed by the URL itself on the next line. You can have as many of these as you like,
each separated from the previous URL by one or more empty lines.
You can also add links to word or phrases in type layers using the text editor in SiteGrinder's Content
Manager after you deploy your pages to a site.
Essentials Guide

388
Reference Guide
menu
Matches to Other Layers with Hints: -hovershow, -hoverhide
Description:
The "-menu" hint that turns a single type layer in Photoshop into a flexible, search-engine friendly
multi-item text menu on the built web page. Text Menus are one of the most important and powerful
features of SiteGrinder.
Like text buttons, text menu item hover and click states (how the menu items change in appearance when
they are hovered over or clicked on) are set in SiteGrinder's Design Manager, not using alternate layers.
Menu items can control hovershow and hoverhide layers. Menu items act like text buttons with the same
name as the menu item. For example if a menu item is "Home" it acts like a text button named
"Home-button" in regards to controlling other layers and auto linking to a layer comp page with the same
name as the menu item.
Menus can be horizontal or vertical depending on whether all items are on the same line or multiple lines
in the layer with the -menu hint.
Essentials Guide
Reference Guide
merge
Used on Layer Type: layer groups
Description:
The -merge hint added to the end of a layer group's name will turn the layer group layers a single graphic
when it outputs.
SiteGrinder does this automatically when it can, so this hint is almost never needed.
This allows you to keep as many layers around as you want to maximize flexibility in Photoshop, while
minimizing the number of graphics you produce for the final page.
If a text layer with the -text hint or with anti-aliasing off that is contained within a -merge layer set it will
be output as a graphic anyway, and the SiteGrinder report will notify you of this when you open
SiteGrinder.
Conversely, the -nomerge hint can be placed on individual layers to stop them from being automatically

389
merged.
Reference Guide
metadata
Matches to Other Layers with Hints: -text, -picturebox, -panelsheet, -panel, -thumbsheet
Description:
The -metadata hint tells SiteGrinder that a type layer contains one or more metadata fields surrounded by
double brackets. When SiteGrinder sees such a field in a type layer's contents, as in "I took this photo on
[[date]]" it replaces the metadata field and its surrounding brackets with metadata from the current image
gallery image. The metadata layer is named after the gallery whose images it will use to find the
metadata. If you have a picturebox named "weddings-picturebox" then you would name your metatdata
layer(s) "weddings-metadata".
You can have multiple metadata fields in a given type layer and multiple metadata type layers per gallery.
Essentials Guide
Reference Guide
movefrom
Matches to Other Layers with Hints: -button, -hovershow, -clickshow
Description:
The contents of a layer with the movefrom hint indicate the starting location for a -hovershow or
-clickshow layer that will be used with SiteGrinder's button animation effects. It's usually easiest to
duplicate the hovershow or clickshow layer and move it to its starting point. Then add the -movefrom
hint to that layer. Thus a button named "Home-button" that has a hovershow layer named
"Home-hovershow" can have that hovershow layer animate to its position from the position of a layer
named "Home-movefrom".
Essentials Guide
Reference Guide

390
next
Matches to Other Layers with Hints: -button, -hover, -click, -hovershow, -clickshow
Description:
The -next hint, used in conjunction with the -button hint and a gallery's name, will show the next image
in a gallery. So a picturebox named "weddings-picturebox" can be advanced by a button named
"weddings-next-button". Next buttons can have all the usual button alternate appearance layers, as in
"weddings-next-hover".
The -previous hint is identical except that it moves backwards through a gallery.
Essentials Guide
Reference Guide
nextpanel
Used on Layer Type:
Matches to Other Layers with Hints: -button, -panelsheet
Description:
The -nextpanel hint, used in conjunction with the -button hint and a gallery's name, will move to the next
panel in a panelsheet. So a panelsheet named "weddings-panelsheet" can be advanced by a button named
"weddings-nextpanel-button". Nextpanel buttons can have all the usual button alternate appearance
layers, as in "weddings-nextpanel-hover".
The -previouspanel hint is identical except that it moves backwards through a panelsheet.
Essentials Guide
Reference Guide
nextpanelset
Used on Layer Type:
Matches to Other Layers with Hints: -panelsheet

391
Description:
The -nextpanelset hint, used in conjunction with the -button hint and a gallery's name, will move to the
next group of panels in a panelsheet. The group is determined by the size of the panelsheet. If 3 panels
can fit in a panelsheet, then a -nextpanelset button will advance the sheet by three panels. So a
panelsheet named "weddings-panelsheet" can be advanced by a button named
"weddings-nextpanelset-button". Nextpanelset buttons can have all the usual button alternate appearance
layers, as in "weddings-nextpanelset-hover".
The -previouspanelset hint is identical except that it moves backwards through a panelsheet.
Essentials Guide
Reference Guide
nextthumbset
Used on Layer Type:
Matches to Other Layers with Hints: -thumbsheet
Description:
The -nextthumbset hint, used in conjunction with the -button hint and a gallery's name, will move to the
next group of thumbs in a thumbsheet. The group is determined by the size of the thumbsheet. If 3
thumbs can fit in a thumbsheet, then a -nextthumbset button will advance the sheet by three thumbs. So a
thumbsheet named "weddings-thumbsheet" can be advanced by a button named
"weddings-nextthumbset-button". Nextthumbset buttons can have all the usual button alternate
appearance layers, as in "weddings-nextthumbset-hover".
The -previousthumbset hint is identical except that it moves backwards through a thumbsheet.
Essentials Guide
Reference Guide
nextview
Matches to Other Layers with Hints: -viewsheet
Description:
SiteGrinder galleries can have "sub galleries" of alternate views. A gallery of houses can have "sub
galleries" for each house with alternate views of that house.

392
The -nextview hint works exactly like -next except that it advances to the next alternate view rather than
the next image.
In the example given a nextview button would go from one alternate image of the current house to the
next. Next/Previous buttons would be used to move from one house to the next.
So a picturebox named "real estate-picturebox" would advance to the next alternate view using a button
named "real estate-nextview-button". The same button could have a hover state named "real
estate-nextview-hover".
Essentials Guide
Reference Guide
nextviewset
Description:
The -nextviewset hint works exactly like -nextthumbset except that it advances to the next set of view
thumbs in a viewsheet rather than the next set of thumbs in a thumbsheet. The set is determined by the
size of the viewsheet. If 3 thumbs can fit in a viewsheet, then a -nextviewset button will advance the
sheet by three thumbs.
Essentials Guide
Reference Guide
noedit
Used on Layer Type:
Matches to Other Layers with Hints: -text, -menu
Description:
By default text layers that represent "real" css text on the final page are editable in SiteGrinder's Content
Manager.
The -Noedit hint can be put on any text layer that is going to be output this way to stop it from being
editable.

393
If used on a text -menu, the menu will not appear in the editable content list from within the CMS system,
but will still be appendable from the Content Manager's New Page dialog.
Essentials Guide
Reference Guide
nomerge
Used on Layer Type:
Description:
The -nomerge hint tells SiteGrinder to not auto-merge the layer or layer set/group with other layers
during the build.
Each separate image on a page requires a web browser to make a separate request from the web server.
Because of this, SiteGrinder tries to minimize the number of graphic files it creates from your design by
intelligently merging non-interactive background layers automatically when it builds pages.
Use this hint if you want to guarantee that an image layer is not auto-merged with others. The main
reason to do this is to allow you to set a unique compression setting for a layer that would otherwise be
merged with other layers by SiteGrinder.
This is the opposite of the -merge hint.
Reference Guide
page
Used on: layer comps
Description:
The -page hint is used to let SiteGrinder know that a layer comp represents a page design for your site.
Buttons will automatically link to layer comp pages whose names match theirs, as in a layer named
"Weddings-button" linking to a layer comp named "Weddings-page".
Often don't need to make a layer comp for every page in your site. Instead you can make a comp for
every different page layout. If you do this you can spawn new pages based on that design in the
SiteGrinder content manager and customize the content of the new pages.

394
Essentials Guide
Reference Guide
pagesize
Used on Layer Type:image
Description:
The -pagesize layer is a layer whose rectangular contents specify the "content" area of a page design.
You can use this feature to determine content margins that are used when the browser window is smaller
than the content. Footers should be completely outside the -pagesize rectangle will also maintain their
distance from the bottom of a pagesize layer when the browser window is smaller than the content
creating a minimum margin between the content and the footer. Other layers outside the pagesize
rectangle will be visible when the browser window is open wide, but will be hidden as the browser
window is made narrower.
A design with no -pagesize layer has a content area matching the Photoshop document size.
Essentials Guide
Reference Guide
panel
Matches to Other Layers with Hints: -panelsheet, -panelthumb, -metadata, -picturebox
Description:
Panels are sort of like thumbs on steroids.
The rectangular contents of an image layer with the -panel hint contain the individual elements of a panel
which will be repeated as many times as necessary to display one panel for each image in a gallery or
entry in a remote feed, such as rss. The panel hint is a boundary hint, meaning it "contains" other layers
if their contents are above the contents of the panel layer in the layers palette and their contents don't
extend beyond the edges of the panel layer's contents.
The layers contained by the panel hint can include image layers to use as panel background decorations,
type layers, type layers with the metadata hint to control image or rss data displayed in the panels, and
-panelthumb layers to determine the size of the thumbnail images displayed in the panel.
Panel layers must in turn be fully contained within the rectangle of a -panelsheet layer.

395
Essentials Guide
Reference Guide
panelsheet
Used on Layer Type: -image
Matches to Other Layers with Hints: -panel, -panelthumb, -metadata, -picturebox, -nextpanelset,
-previouspanelset, -nextpanel, -previouspanel
Description:
The rectangular contents of an image layer with the -panelsheet hint contain one panel which will be
repeated as many times as necessary to display one panel for each image in a gallery or entry in a remote
feed, such as rss. The panelsheet hint is a boundary hint, meaning it "contains" other layers if their
contents are above the contents of the panel layer in the layers palette and their contents don't extend
beyond the edges of the panelsheet layer's contents.
Panelsheets don't need pictureboxes but will control an associated picturebox if there is one. Panelsheets
can use galleries as sources for thumb images and metadata or they can use internet feeds like RSS.
Essentials Guide
Reference Guide
panelthumb
Used on Layer Type:
Matches to Other Layers with Hints: -panel, -panelsheet, -picturebox
Description:
The rectangular contents of an image layer with the -panelthumb hint determine the size of thumbs to be
optionally displayed in the -panel layer that contains the panelthumb layer. "Contained" means the
contents of the -panelthumb layer must be smaller than its panel, above the panel in the layers palette, and
positioned entirely within the borders of the panel layer.
Unlike thumbsheets and viewsheets, panelsheets won't use any image if no associated -panelthumb layer
exists.
If you are using a feed (RSS, ATOM, etc) as a source for the panelsheet rather than a gallery you may not
see any image for the panelthumb if there is none in the feed or if the feed images are in nonstandard
parts of the feed.
Essentials Guide

396
Reference Guide
picturebox
Used on Layer Type:
Description:
In a simple web gallery there are next/previous buttons, maybe thumbnail for navigation, and finally the
area containing the large version of the currently selected image. SiteGrinder uses the -picturebox hint on
an image layer to indicate that the rectangular contents of the layer with the -picturebox hint represent
that large version of the currently selected gallery image.
Pictureboxes are extremely powerful and are available in different variationg, from basic CSS to
auto-playing animated Flash movies. In fact a gallery can consist of nothing but an auto-playing
picturebox. But all the gallery navigation components, including next-buttons, thumbsheets, panelsheets,
viewsheets, can control the currently displayed picturebox image.
Pictureboxes are not necessary to have a gallery. A gallery might consist of only a thumbsheet with large
thumbs.
Finally if you would like to display an even larger image in a centered box (somtimes called a
"shadowbox") that option is available with or without a picturebox using the Design Manager's gallery
controls.
Essentials Guide
Reference Guide
previous
Used on Layer Type: -any
Matches to Other Layers with Hints:-button, -hover, -click, -hovershow, -clickshow
Description:
The -previous hint, used in conjunction with the -button hint and a gallery's name, will show the previous
image in a gallery. So a picturebox named "weddings-picturebox" can be advanced by a button named
"weddings-previous-button". Previous buttons can have all the usual button alternate appearance layers,
as in "weddings-next-hover".
The -next hint is identical except that it moves forwards through a gallery.

397
Essentials Guide
Reference Guide
previouspanel
Used on Layer Type:
Matches to Other Layers with Hints:-button, -panelsheet
Description:
The -previouspanel hint, used in conjunction with the -button hint and a gallery's name, will move to the
previous panel in a panelsheet. So a panelsheet named "weddings-panelsheet" can be moved back by one
panel by a button named "weddings-previouspanel-button". Previouspanel buttons can have all the usual
button alternate appearance layers, as in "weddings-previouspanel-hover".
The -nextpanel hint is identical except that it moves forwards through a panelsheet.
Essentials Guide
Reference Guide
previouspanelset
Used on Layer Type:
Matches to Other Layers with Hints:-panelsheet
Description:
The -previouspanelset hint, used in conjunction with the -button hint and a gallery's name, will move to
the previous group of panels in a panelsheet. The group is determined by the size of the panelsheet. If 3
panels can fit in a panelsheet, then a -nextpanelset button will move the panelsheet back by three panels.
So a panelsheet named "weddings-panelsheet" can be moved back by a button named
"weddings-previouspanelset-button". Previouspanelset buttons can have all the usual button alternate
appearance layers, as in "weddings-previouspanelset-hover".
The -nextpanelset hint is identical except that it moves forwards through a panelsheet.
Essentials Guide
Reference Guide
previousthumbset

398
Used on Layer Type:
Matches to Other Layers with Hints:-thumbsheet
Description:
The -previousthumbset hint, used in conjunction with the -button hint and a gallery's name, will move to
the previous group of thumbs in a thumbsheet. The group is determined by the size of the thumbsheet. If
3 thumbs can fit in a thumbsheet, then a -nextthumbset button will move the sheet back by three thumbs.
So a thumbsheet named "weddings-thumbsheet" can be moved back by a button named
"weddings-previousthumbset-button". Previousthumbset buttons can have all the usual button alternate
appearance layers, as in "weddings-previousthumbset-hover".
The -nextthumbset hint is identical except that it moves forwards through a thumbsheet.
Essentials Guide
Reference Guide
previousview
Used on Layer Type:
Description:
The -previousview hint works exactly like -previous except that it advances to the previous alternate view
rather than the previous primary image.
In the example given a previousview button would go from one alternate view of the current house to the
previous one. Next/Previous buttons would be used to move from one house to the next.
So a picturebox named "real estate-picturebox" would advance to the previous alternate view using a
button named "real estate-previousview-button". The same button could have a hover state named "real
estate-previousview-hover".
Essentials Guide
Reference Guide
previousviewset
Used on Layer Type:

399
Description:
The -previousviewset hint works exactly like -previousthumbset except that it goes back to the previous
set of view thumbs in a viewsheet rather than the previous set of thumbs in a thumbsheet. The set is
determined by the size of the viewsheet. If 3 thumbs can fit in a viewsheet, then a -nextviewset button
will advance the sheet by three thumbs.
Essentials Guide
Reference Guide
scroll
Used on Layer Type:
Matches to Other Layers with Hints: -text, -pagesize , -column, -xmedia, -content, -blog, -thumbsheet,
-panelsheet, -viewsheet, -form, -menu
Description:
If one of the above listed hinted layer types has more content than it can display within its original
rectangle then it will, by default, continue to flow vertically downward. This can cause the content to
obstruct elements positioned below the bottom edge of the layer.
One solution is to place the -scroll hint on the layer. This causes the contents to crop to the original layer
rectangle. A scroll bar will appear to allow viewing of all the text, but only if there is more text than can
be displayed at once.
Some components, like certain thumbsheets and panelsheets will override this hint because they provide
their own ways of navigating cropped content.
Essentials Guide
Reference Guide
shared
Matches to Other Layers with Hints: -page
Description:

400
Content that is unique to a page will not affect any other pages when edited. Content that is shared among
pages will change on every page it appears on when edited on just one of the pages.
SiteGrinder's Content Management system makes guesses about content that should exist uniquely on
each page, such as text areas, and content that should be shared between pages, such as menus.
The -shared hint allows you to force a given layer to be shared among all of the page designs that layer
appears on so changing it on one page will change it on all of the pages. It is the opposite of the -unique
hint.
Essentials Guide
Reference Guide
text
Used on Layer Type:
Matches to Other Layers with Hints: -links, -h1, -h2 (etc)
Description:
SiteGrinder can build a type layer to a web page as either text or as a rendered (aka rasterized) image of
the type layer, so you must indicate to SiteGrinder which you prefer.
To specify that a type layer should appear as text you can do one of two things:
1. In Photoshop select the text layer and set the anti-aliasing to "None" using the Photoshop character
attributes window. This is convenient because you can tell output settings at a glance by seeing which
layers are anti-aliased and which aren't in the document.
2. You can also add the "-text" hint to the end of the type layer's name to force it to be text on the web
page no matter what the anti-aliasing is set to.
For example a layer named "location" can be renamed "location-text" to force SiteGrinder to create CSS
text for it.
Essentials Guide
Reference Guide
thumb
Matches to Other Layers with Hints: -thumbsheet

401
Description:
The rectangular contents of a -thumb layer must be contained within a -thumbsheet layer or -viewsheet
layer, meaning it must be smaller than the sheet, above the sheet in the layers palette, and positioned
entirely within the borders of the sheet layer.
The size of the thumb layer contents determines the size of thumbs to be generated for the thumbsheet or
viewsheet. Thumbsheets and viewsheets can have thumbs of different sizes.
Each sheet has only one associated thumb layer. If you don't supply a thumb then SiteGrinder will use a
generic size.
The position of the thumb layer within the boundaries of the sheet has no effect. Thumb layers are just
size references.
For panels use the -panelthumb hint instead.
Essentials Guide
Reference Guide
thumbsheet
Matches to Other Layers with Hints: -thumb, -picturebox, -nextthumb, -previousthumb, -nextthumbset,
-previousthumbset
Description:
The rectangular contents of an image layer with the -thumbsheet hint contain one -thumb layer to
represent the size of the thumbs which should be displayed and which will be repeated as many times as
necessary to display one thumb for each image in a gallery. The -thumbsheet hint is a boundary hint,
meaning it "contains" other layers if their contents are above the contents of the panel layer in the layers
palette and their contents don't extend beyond the edges of the thumbsheet layer's contents.
If there are more thumbs than can be displayed at once in the thumbsheet rectangle there are various ways
to navigate to additional thumbs depending on the type of thumbsheet you choose in the Design Manager
and whther or not you also create thumbsheet navigation buttons using hints like -nextthumb and
-previousthumb.
Essentials Guide
Reference Guide
unique

402
Used on Layer Type:
Matches to Other Layers with Hints: -page
Description:
Content that is unique to a page will not affect any other pages when edited. Content that is shared among
pages will change on every page it appears on when edited on just one of the pages.
SiteGrinder's Content Management system makes guesses about content that should exist uniqeuly on
each page, such as text areas, and content that should be shared between pages, such as menus.
The -unique hint allows you to force a given layer to not be shared among all of the page designs that
layer appears on so changing it on one page will not change it on all of the pages. It is the opposite of the
-shared hint.
Essentials Guide
Reference Guide
viewsheet
Used on Layer Type:
Matches to Other Layers with Hints: -picturebox, -thumb, -nextview, -previousview
Description:
A viewsheet is almost exactly like a thumbsheet. In fact it's just an additional thumbsheet to navigate
alternate views in galleries that have a set of exhibit images, such as houses on a real estate site, and
alternate views for each exhbit, like different interior views of the currently selected site.
Use a -thumb layer with a -viewsheet to specify thumbnail size.
Essentials Guide
Reference Guide
wrap
Used on Layer Type: -image
Matches to Other Layers with Hints: -text
Description:
When an image layer with the -wrap hint is positioned in the document so that it is above a type layer and

403
fits entirely within the rectangle of the type layer, SiteGrinder will generate the CSS/HTML so the text
wraps around the image. As of this writing SiteGrinder can only wrap one image per type layer and will
position the image at the upper right or left of the type layer depending on which side it is closest to.
Essentials Guide
Reference Guide
xmedia
Used on Layer Type: image or text
Description:
The -xmedia hint is short for "External Media", as in video, Flash SWF files, etc.
The rectangular contents of a layer with the -xmedia hint tell SiteGrinder where to place some media
element which will not be chosen until you are editing your page in SiteGrinder's Content Manager.
Once in the content manager you will choose the media type to be displayed and the actual files to import
and display.
A media file can be linked to using a URL or can be a file in your site folder.
SiteGrinder supports many media types from QuickTime movies to Google documents.
Essentials Guide
Reference Guide

404
Tutorials
Step by step tutorials demonstrating various SiteGrinder features:
Adding a Twitter Feed

Making an Email Form
Using Column and Centercut
Adding a Twitter Feed
Adding a Twitter Feed To a Page
A lot of web page content actually comes from other websites. (Sometimes these embedded things are
called "badges".)
YouTube videos are a perfect example. You don't actually upload the video to your site, you just include
a little snippet of code that tells the web browser to play the video.
We'll take a look at how to include a Twitter feed because it's a little more complex than a YouTube
video, but the process for including embeddable "stuff" on your pages is the same:
1. Set up the stuff. ie Find or create a YouTube video or Twitter account. If you want to embed a
Paypal button you'd create a Paypal account for yourself and set up the "Buy Now" or "Add to
Cart" buttons at paypal.com.
2. Locate the embed code. For YouTube it's sitting right next to the video when you are viewing it
on YouTube.com. Twitter takes slightly more effort as we'll see below.
3. Figure out the dimensions for the embedded "thing".
4. Create a type layer in Photoshop matching those dimensions and position it where you want the
thing to show up.
5. Paste the embed code into the type layer's contents.
6. Give the type layer the -embed hint.
7. Build. That's it! Don't believe me? Read on...
Get the Twitter Embed Code
What could possibly surpass the excitement of having Media Lab's own Twitter feed on your page?
Nothing, right? Right?
But how on earth can we do it? There can be only one answer: "Google It!"
So the first thing we'll do is Google "embedding a twitter feed". The search results lead us quickly to the
not-very-surprising url "twitter.com/badges".
After logging into the Media Lab twitter account we follow that url and find this starting page:

405
This page asks "where do you want to put it?"
Since it's no longer 2008 we will not use the default "myspace.com" choice and will instead click on
"Other."
Clicking "Continue" yields the next screen:

406
(Now I am wondering, are we talking about a "badge" or a "widget?" Or is it a "gadget"? We'll let the
philosophers decide.)
Anyway, we have two choices here: "Flash Widget" (sexy) or "HTML Widget" (stodgy). We can use
either with SiteGrinder.
We'll choose "Flash" and click "Continue".
Now we get this:
The choice is between an "interactive widget" or "display only". We'll choose "display only" but the
choice for your own site is up to you.
Clicking "Continue" again brings up this:

407
On the left we get to choose a color for the look of our widget. In the middle we get the "embed" code
with a convenient "copy to clipboard" button and on the right we have some instructions for something
called "my space". We'll ignore those.
We'll click the "copy to clipboard" button and move on to the next step.
Figure Out the Dimensions
This is the slightly (but not very) tricky part. Take a look at the code in the middle of the screenshot
above. See where it says "width=176" and "height=176"? Amazingly enough those are the dimensions
we need.
Pretty much any embeddable media will have code like that. The YouTube embed code for my favorite
video (of the last two hours) is this, for example:
<object width="640" height="385"><param name="movie"

value="http://www.youtube.com/v/qybUFnY7Y8w&hl=en_US&fs=1&"></param><param
name="allowFullScreen" value="true"></param><param name="allowscriptaccess"
value="always"></param><embed
src="http://www.youtube.com/v/qybUFnY7Y8w&hl=en_US&fs=1&"
type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true"
width="640" height="385"></embed></object>
Notice the prominent "width" and "height" there? See, it's easy!
Or at least pretty easy...
There's one small catch. Take a close look at the purple preview on the left in the screenshot above.
Notice the cute little "follow medialabinc as http://twitter.com" text underneath the actual widget? That's
not included in the height found in the embed code. We may need to do some trial and error on the
height of our type layer if we want that text to display on our page.

408
Create A Type Layer in Photoshop
First apply the layer comp for the page you want to put the feed on if you haven't already. (If you are
using the whole document as a page you don't need to do that.)
In the Photoshop document for our web page we just need to create a type layer with the correct
dimensions. For our Twitter feed that was 176 x 176.
The quickest way to do this is to open the "Info" palette from Photoshop's Window menu. Then click on
the type tool and click and drag in the document until the dimensions shown in the Info palette match the
dimensions you want.
You can always drag either the horizontal or vertical handles with the text tool to get it just right. We
will probably want to drag the bottom center handle to give the layer some extra height to display the
bottom text described in the previous section.
Paste In The Code
Now that you have created the type layer just make sure you are still editing the type layer contents and
choose "Paste" from Photoshop's "Edit" menu. At this point you should see all the code gobbledygook
from the Twitter embed code appear in your type layer.
Remember, you won't see any of this code on the final page. Instead you will see the results of the code
(in this case the Twitter feed) drawn into the rectangle we gave the type layer, so the font choice, color,

409
and size in the type layer won't affect the outcome on the page. It's usually helpful to pick a small
readable font so you can examine the code in the Photoshop layer to verify dimensions or change
parameters (if you're an HTML whiz).
If you need to move the type layer at this point to the correct position within your layout then do so using
the type tool. You can also move your type layer using the move tool but if you do so be careful not to
stretch or otherwise distort the layer.
Important: Resizing the layer should only be done with the type tool.
Add the Embed Hint to the Layer
Now double click directly on the layer's name in the layers palette. Type in a new name followed by the
-ember hint.
Make it something clever and unpredictable like "Media Lab Twitter -embed".
If you are using layer comps you will want to update the page layer comp now so it includes this new
layer.
That's Pretty Much It!
You are now free to build at any time. You'll even see your new feed in the Design Manager preview.
Notes
The alternative to using a type layer with the -embed hint is using an image layer with the
-xmedia hint. The main difference is that instead of adding the snippet code in the Photoshop
document you will add it in the Content Manager after building and deploying. This is done in
the External Media editor using the HTML snippet importer. The main advantage of the xmedia
approach is that you can change the snippet code easily in the Content Manager without
rebuilding/redeploying and can re-use the xmedia layer on new pages you create, even putting
different snippet code on each page to show different feeds.
Sometimes embeddable content can change in dimensions in unpredictable ways depending on
the amount of or size of the content. If you are embedding this kind of content you may need to
put the embed or xmedia layer inside a -column layer to allow your design to handle the changing
dimensions.
Feel free to add decorative layers like frames behind your embedded content.
Making an Email Form
A Simple Email Form From Start To Finish
This document assumes you have read the Email and Other Forms Essentials Guide. For complete
information about forms see the Forms reference guide.
To give you an understanding of the form workflow and other important form concepts we'll create a

410
simple email form from start to finish.
The process works like this:
1. Add a type layer to the page layer comp you want to put your form on
2. Add the -form hint to the layer's name
3. Type some text into the form using some of SiteGrinder's simple form conventions
4. Open the SiteGrinder plug-in and use the Forms panel to customize a few settings
5. Build the form and edit its appearance in the Design Manager
For this tutorial we'll make simple email contact form. It will collect our site visitor's name, email
address, their favorite pick of items from a popup menu, and any comments they might have in a
multi-line text field.
Create the form layer in Photoshop
To add a form to a page we drag out a type layer rectangle using the type tool. It is good to give
ourselves plenty of extra horizontal space, because too little can cause the form to wrap in unexpected
way in our browser. You can always change the size of the type layer rectangle later using the Type
tool. All of the form elements will go into this one single type layer.
Now we'll create our form elements themselves. All SiteGrinder form elements are created by typing text
in our form layer using conventions that SIteGrinder (and usually you too) will recognize as form
elements. Indeed, if you printed out the form it would look like something you could fill out with a pen.
Add the first form field: Name

We want to collect our visitor's name, so we want to create a single line area where they can enter text.
SiteGrinder's convention for creating a single line typing area is to type the name of the field, in this case
"Name" followed by a colon, followed by some underscore characters (shift-minus on your keyboard).
The number of underscores determines the visual width of the field.

411
Note: Most SiteGrinder form elements start just like this: the name of the field, followed by a colon.
Ok, believe it or not we're done with the first field . Not so hard, hunh?
It's time to press return/enter so we can start entering the rest of the elements beginning on the next line
down.
Note: SiteGrinder form elements are always usually limited to one per line.
Add the second form field: Email Address

We want to collect our visitor's email address, so we'll create another single line typing area. This time
we'll add a couple of twists: we're going to make this field required and we'll give it "suggestion" text.
A required field will require the user to type something in it. If they try to submit the form without it
they will be brought right back to the form. The SiteGrinder convention for a required field is to start the
field name with an asterisk, as in "*Email:____________".
What's suggestion text? Have you ever seen a form that has light colored text in it before you type
anything? Usually it's there to help you figure out what to type. It disappears when you click into the
field. The SiteGrinder convention for suggestion text is to place the text in the midst of your underscores,
as in "Time:__in seconds___".
So, using our two conventions, we need to enter "*Email:_required_".
Then we just hit return/enter to start a new line.

412
Add the third form field: A menu

This time we want to add a popup menu asking for a favorite body part with the items "Hand", "Foot",
"Left Ear", "Head". The SiteGrinder convention for form menus is the same as for creating SiteGrinder
horizontal CSS menus: just separate the menu items with the vertical bar character. (shift-backslash on
your keyboard)
So on this line we enter "Favorite body part: Hand | Foot | Left Ear | Head". That's all it takes!
Another return/enter to get us to the next line.
Add the final field: A multi-line "comments" area

We want to create a multi-line comments area so our visitors can use as much text as they want to tell us
how awesome we are. You kind of already know this unless you foolishly just started reading at this
section. The only difference between creating a single line and a multi-line text area is that you simply
add more lines of underscores after the first one. The number of lines you add controls how many lines
of the form will be visible at once on the final page. We'll call our comments field "Comments:" just to
be wild and crazy.
The site visitor can type more lines than that, however, and if they do they'll see a scroll bar
automatically.

413
Add the "submit" button

Every form has one submit button, usually at the end. You enter the submit button on its own line by
itself as a word or phrase surrounded by parentheses, as in "(submit)". The parentheses are what tell
SiteGrinder it's a submit button. The text can be anything you like, so we'll be a little more creative and
enter "(Tell it like it is...)".
When your site visitor clicks the submit button the information they've entered into the form will be
added to the body of an email message that will be sent to whatever email address you specify in the
SiteGrinder Window's Forms Tab. (see below)
As of this writing there is no way to control the submit button's appearance. Different browsers will
display it in different ways.
Add the -form Hint

We need to change the name of the type layer to add the -form hint. We'll pick a sensible name,
"Zombie-form".
Add the Form To Our Page Layer Comp

If you're just going through this tutorial in an otherwise empty Photoshop file you can skip this step. But
if you are working with a document that has layer comp pages you'll need to add your new form layer to
one of the comps.
Specify What The Form Does in the Forms Tab
The next step is to tell SiteGrinder who the form contents should be emailed to and some other functional
information. This occurs in the Forms tabbed panel of the SiteGrinder plugin window.

414
Open SiteGrinder
It's time to save the file and open SiteGrinder from Photoshop's File->Automate menu.
Once SiteGrinder is open we switch to the Forms tab. All the forms on any of our pages will be listed
here, along with what type of form they are. Notice the default is "PHP Email", which is what we want.
Open the Form Editor Window

To open the form editor we just click in the type column next to the form we want to edit.
2. The "Recipient" tells SiteGrinder where to send the information the site visitor entered into your
form.
3. The "Thank You Page" is a menu of your page layer comps. When your site visitor fills out the
form (including all required fields) and clicks submit they will be taken to whatever page you
specify in this menu. If they missed some required fields they will be taken back to the form.
You can make a special Thank You Page layer comp for this or just send them to one of your
other pages.
4. The "Subject" determines the subject line of the email containing the information the site visitor
entered into your form.
5. The "Sender Name" determines the name used in the email the form will send you.
6. The "Sender Email" determines the From address used in the email the form will send you.
Fields 4, 5 and 6 above can be collected directly from the site visitor if you like using the special field
names "Email:", "Name:", and "Subject:". It's a good idea to fill them out anyway in case you forgot or
misspelled one of those fields.

415
Build and Finish The Form in the Design Manager
Once you have finished with your form settings it's time to build the page with the form on it. When the
build is complete the Design Manager will open in your browser. Select the page with the form.
If the form looks good to you then at this point you're finished. But if you want to add some visual flair
to the form impossible to add in Photoshop you'll want to open the Form Appearance editor for the form.
You will see the "form appearance" panel. Click the arrow to the left of "form appearance" to reveal the
list of forms:
Click on the name of the form you want to edit, which is easy in this case because it's the only one.
A window will open:

416
As you can see, this window has many, many options.
The options with the most impact are at the top, which control the alignment of the form elements and
their width.
Below that is a row of tabs for the different parts of the form (fieldset, legend, etc.) that you can modify
the look of. It's not the purpose of this tutorial to go into the details of these controls. The best way to
learn about them is to use them because making changes and clicking "Apply" instantly updates your
form's appearance in the browser.
Just a few tweaks resulted in our form looking like this in the browser:

417
Final Step: Deploying and Uploading
You can preview the look of your new email form in the Design Manager, but the form will not actually
send an email until its page is deployed and uploaded to a server that supports PHP. (If your server
doesn't support PHP you can use the CGI Email variant.)
For complete information about forms see the Forms reference guide.
Using Column and Centercut
Introduction
Since columns can grow and expand for their content, you'll sometimes want to use them as graphical
containers to surround elements on a page, and to grow and tile intelligently. The -centercut hint is for
this purpose.
Normally a -column layer will not be seen on the final web page. However, if used with a -centercut
layer it will appear as a graphical background behind the content the column contains.
The -centercut layer will not appear on the final page, instead it tells SiteGrinder what part of the column
you want "cut out" and replaced by a vertically growing tile.
When using an image layer for a -column, place a second image layer above it with the -centercut hint.
The -centercut layer should be rectangular, and reach the left and right edges of the column, and have the
same name as the column. If your column is named "Our Services-column" then your centercut layer
would be named "Our Services-centercut".
The column layer will be examined through the -centercut rectangle to produce a 1 pixel tall repeating tile
that will be used to fill the expanding area of the column.

418
Examples of Designs Requiring Centercut
Desgins that can be done entirely with a -column and -background combo
[[examples]]
Designs that require a -centercut approach

[[examples]]
Centercut Step By Step
In the screenshot below we can see a column layer (major-column) with some other layers above it in the
layers palette. The column has a small white border around it, a subtle drop shadow, and a gradient in the
top part. The lower part of the column is one solid brown color until it reaches the bottom edge.
This is important - its consistency can be exploited because once beyond the lighter gradient the
background of the column can repeat vertically as far as we want it to.
SiteGrinder, while pretty smart, is not smart enough to figure that out without a hint. We can use the
-centercut hint to identify the repeatable section and tell SiteGrinder to repeat it as necessary. Then the
column will become a container that can expand if our site visitor increases the font size in the browser or
if we add more items to the menu later using the SiteGrinder Content Manager.
In this next picture, we have positioned a -centercut layer above the column. We've positioned it above
the area where there is no more gradient, where the column background is consistent. We have made it
somewhat large to "cut out" as much of the -column graphic as we can.

419
Here is the final web page. The first image is the web page with just a normal text size.
The second is with the text size increased. See how the column graphic "expands" to fill the area.

420
In this next screenshot we've removed the tile. This will give you an idea of what is going on. The blank
white area between the top and bottom of the graphic is the area the tile normally fills:
!scrn-br-centercutoff.png!
Here is the tile itself. It is just a tiny graphic that is repeated over and over in the browser:
here it is again, repeated a bit to make it easier to see:

421
Centercut Columns Cannot Use Layer Styles
A -centercut layer is a great way to make columns into containers that have drop shadows, inner
shadows, etc. However, while using a -centercut layer lets you use a graphical column layer, that column
layer may not use any Layer FX. Layer FX on column layers are not supported.
How to use layer styles with centercut?

To get around this limitation you'll need to "render" the layer FX. Here is a simple step-by-step tutorial
for rendering the layer FX into the layer.
1. Place a new empty image layer below the layer with the layer FX.
2. Select the layer with the layer FX in the layers palette.
3. From the layers palette choose "Merge Down".
4. If needed rename the resulting layer.
Restrictions
-centercut layer must be rectangular

-centercut layer must be named the same as the -column it will be cutting
-column layer must be a graphic of some sort
-centercut layer must reach to both the left and right hand edges of the -column layer.
-centercut layer cannot be used with any other hints.
-column that is using a -centercut layer cannot be paired with a -background layer.
Though the -column layer can be a graphic, it cannot use any layer FX. See "Columns And
Layer FX" above.
Centercut Tips
The -centercut matches to a column by having the same name. It can be hidden in the page layer comp if
you don't like looking at it.

422
Appendices
Appendix - Accessibility and Internationalization
Appendix - Browser Compatibility
Appendix - Workflow Detailed Breakdown
Appendix - Important Tips & Best Practices
Appendix - Speeding up builds
Appendix - Sample Files
Appendix - Retired Hints
Appendix - Hosting Requirements
Appendix - Video Tutorials
Troubleshooting
Printing and PDF Manual
SiteGrinder 3 Requirements
Useful Tips
Appendix - Accessibility and Internationalization

508 accessibility tips go here.
TinyMCE Language Codes:
Use one of these in the Advanced options of the "New Site" window.
Albanian : sq
Arabic : ar
Azerbaijani : az
Belarusian : be
Bengali : bn
Bosnian : bs
Breton : br
Bulgarian : bg
Catalan : ca
Chamorro : ch
Chinese : zh
Croatian : hr
Czech : cs

423
Danish : da
Divehi; Dhivehi; Maldivian : dv
Dutch : nl
English : en
Estonian : et
Finnish : fi
French : fr
Galician : gl
German : de
Greek, Modern : el
Gujarati : gu
Hebrew : he
Hungarian : hu
Icelandic : is
Indonesian : id
Interlingua : ia
Italian : it
Japanese : ja
Korean : ko
Latvian : lv
Lithuanian : lt
Macedonian : mk
Malay : ms
Malayalam : ml
Mongolian : mn
Northern Sami : se
Norwegian : no
Norwegian Bokmal : nb
Norwegian Nynorsk : nn

424
Persian : fa
Polish : pl
Portuguese : pt
Romanian : ro
Russian : ru
Sardinian : sc
Serbian : sr
Sichuan Yi : ii
Sinhala; Sinhalese : si
Slovak : sk
Slovenian : sl
Spanish; Castilian : es
Swedish : sv
Tatar : tt
Thai : th
Turkish : tr
Twi : tw
Ukrainian : uk
Vietnamese : vi
Welsh : cy
Appendix - Browser Compatibility
Browser Compatibility With Pages Produced By SiteGrinder
One of the unavoidable annoyances of Web design is that there is simply no way to ensure that a page
will look exactly identical from browser to browser. One of the reasons for this is that there are features
provided by some browsers but not by other browsers. SiteGrinder supports some of those features
because they are very cool when browsers support them and not a big deal when they don't.
Here you'll find a list of SiteGrinder web page design features that aren't supported by all browsers.
This list is not exhaustive in terms of browser versions because the main thing that is important is that not
all modern browsers support certain features. Since you have no control over what browsers your site
visitors are using, the only decision a page designer has to make is whether it matters to them that some

425
visitors won't see some features.
CSS Rounded Corners
Feature set in: Design Manager "Border and Backgrounds" control
Not supported by: Opera, Safari, IE
Text Drop Shadows
Feature set in:
Not supported by:
Form Box Shadows
Feature set in: Design Manager "Form Appearance" control
Not supported by: Opera
Browser Compatibility with SiteGrinder Design & CMS Tools
List quirks of certain browsers not updating on Apply or caching problems in the CMS, etc.
Appendix - Workflow Detailed Breakdown
Different parts of your site are created and edited in different parts of the SiteGrinder workflow. This
document lists all of the common activities organized by which phase they are created or modified in.
For most of your page contents, layout, and background options you simply create and position type and
image layers in Photoshop and add hints when required.
These elements include:
Images for background and content
Image buttons with optional hover and click versions
CSS styled text content using the -text and optional -h1,-h2 (etc) hints on Photoshop type layers
External media placeholders using the -xmedia hint
Gallery placeholder layers
Styled CSS text menus and submenus (but not their interactive effects like rollover styles)
Embedded code to add things like YouTube videos, Twitter Feeds, and Paypal buttons using the -embed
hint on type layers

426
Form fields and controls using type layers with the -form hint
CMS-editable layers using hints ilke -content and -noedit
Ecommerce controls using the -$ hint
Page and column size and layout using image layer placement in concert with the -background,
-column and browser-background hints
Text wrapping around images using the -wrap hint on image layers and positioning them over type
layers
Animation start and end locations for button-triggered effects using the -movefrom hint
Favicon for your pages uing the -fav hint
Footer content using a footer-background or footer-background layer. All layers above these are
automatically placed into the footer. Optionally, layer group with the -footer hint
Whenever you are ready to see your work make the leap from PSD to browser, whether you have finished
a design or are just doing a quick test of a single feature, you will open SiteGrinder from Photoshop's
In this window you will can set certain options before you build, including:
Check for problems in the Report panel
Image compression settings using the "Compression" Tab
HTML additions (like meta keywords, and any extra HTML to add to, for example, the document head
section) using the SiteGrinder menu's "Edit->Settings" command
Form settings, like what email address to send form-generated emails to, in the "Forms" panel
Popup menu timing using the SiteGrinder "Edit->Settings" menu command
Which pages you want to build using the checkboxes in the "Build & Deploy" panel
When SiteGrinder starts building it will open the "Design Manager" in your web browser. As the pages
finish building you can change design options right in the browser using the controls to the left of the
content. The settings changed here affect what your site looks like and behaves in terms of visual design,
not what the content is.
These include:

427
When you have finished changing the design settings in the design manager it is time to deploy. This is
also accomplished in the SiteGrinder plug-in window's "Build and Deploy" panel.
Before you deploy you will need to select a "site" or create a new one. A site is just a folder on your
hard disk along with a few settings, such as the name of the site and what kind of content management
and ecommerce you want to use with the site.
You can also choose to deploy keep or replace changes you have made in the Content Manager to pages
you are redeploying to the same site.
The things you control when making a new site include:
Which ecommerce module your ecommerce-enabled buttons and forms will use
What kind of Content Management (if any) you want to use
Which server language (like PHP) the remote Content Management System should use
When SiteGrinder finishes deploying it will open the "Content Manager" in your web browser. Select a
page from the page list in the upper right of the browser window to start adding or modifying it's
contents.
The things you can do in the Content Manager include:
Add or edit text content to editable text areas using the "editable content" panel
Set external content, such as videos or Adobe Lightroom galleries for your -xmedia hinted layers using
the
Set source images for your SiteGrinder gallery components using the gallery editor opened from the
Edit the metadata associated with your SiteGrinder gallery images using the gallery editor opened
from the "Editable Content" panel

428
Configure blogs - blog name, blog user and password, captchas.
Synchronize your site so the version on the server is updated with any changes you've made on your
local computer (and vice versa - any remote changes will be retrieved so that both the local and remote
versions are in synch).
Configure Connection Settings - FTP login info, set CMS password.
In the Remote Content Manager
Pretty much everything you can do in the Local CMS, except Upload, Synchronize, and Configuring
Connection Settings. Occasionally in the Local CMS there are buttons or menus that are gold colored.
These controls are only available in the Local CMS. In the Remote CMS they will not be present.
Workflow Phases Organized by Feature
Background Images:
Create images as layers in Photoshop. Keep them from being merged together with the -nomerge hint.
Set image compression in the SiteGrinder plug-in window
Replace images with new ones in the Content Manager
Appendix - Important Tips & Best Practices

keep content outside Photoshop
use layercomps over separate psd files
output text as real styled HTML text as much as possible.
use text -menu layers.
[borrow from here ]
Making Builds Faster: don't build all pages. Keep common page elements near the bottom of the
layers palette, changing elements near the top. Use -text. Keep your content outside Photoshop.
whenever possible, we should make mention of these. Maybe even have a summary overview.
mind the Report

output text layers as HTML text, not graphic.
use text menus instead of layerset menus
use text menus (their use should be encouraged)
as much as possible use Photoshop to design your pages, but not to implement the content. Keep
content outside.
avoid using large, full page graphics (even if mostly transparent).
use tiles (SG3 has many options) to fill large areas of your page.
when using large blocks of color, keep them in separate rectangular layers (no feather or

429
anti-alias). SiteGrinder will output as HTML only.

don't Deploy a page too quickly. Work with it as a Preview as long as you can.
Use layercomps for pages. SiteGrinder can certainly build a site from multiple .psd files, but
proper use of layercomps will make your builds faster, downloads quicker, and your maintenance
in Photoshop easier.
Reserve the use of JPEG compression for photos. Don't use it generally. Very heavy, no
transparency. Not good.
Use sRGB Color Profile as both your working profile in Photoshop, as well as your .psd
documents profile.
Visual Design Tips
Merge down to an empty layer to render fx

Use Merge down plus PS Techniques like sponge to easily enliven the content part of a browser
or footer background tile
Cool Things People Don't Know
instead of a file as the source for -xmedia, you can also type in a URL.
a repeating "thumbnail" in a gallery doesn't have to be just the little rectangle - complex thumbs
can be made out of multiple layers, including metadata.
You can create a "medialab.com/webinar" style link by creating a folder called "webinar",
copying a page to it, and making it the index page
Troubleshooting
When in doubt REFRESH the browser!! Also set the browser cache to zero during development.
Use firebug to change text contents in the design manager - see growing columns in action
without going to the CM
Use the fact that slection and move tool boundaries can be seen at the same time to test column
and content boundaries before building
Appendix - Speeding up builds

- Don't build every page at the same time
- Use galleries for multi image navigation
- Use the CMS to make new pages when possible
- Hide the PS palettes (maybe)
- Minimize layer fx, pre-render them, or keep layers that use them near the top of the layers palette, will
help to speed up build times.
Appendix - Sample Files

Sample Sites Main Menu
Working with Text in SiteGrinder. Introduction to the -wrap hint.

430
New Layout Tools: Introduction to the -column hint.

New Layout Tools: Introduction to the -pagesize and -footer hints.
Appendix - Retired Hints

The following were hints in SiteGrinder 1 or SiteGrinder 2, but are not supported in SiteGrinder 3.
-rollover (use -hover)

-popup (use -hovershow)
-popdown (use -hoverhide)
-img (use -content)
-grow (use -column )
-tile (use -background )
-rrect (use -column and decoration pane, or column and -centercut )
-gallery (-page is enough)
-slideshow (being rolled into our gallery support)
-thumb-button combination. (no longer supported)
-up-button (no longer supported)
-link
-haslinks (no longer needed)
Appendix - Hosting Requirements
Web Host Requirements
For Remote CMS & Blog

PHP 5
... with Upload Support
... with cURL (for some of the xmedia importer)
... more to come. several modules
For e-commerce
You need a foxy cart subscription.
For Upload
ftp
For PHP Email Forms

php 4 or 5 configured with sendmail (very common)

431
Recommended Hosts
Hosts Known To Be Compatible
Hosts Known To Be Incompatible
How To Tell If Your Host is Compatible
Upload The Compatibility Tester

If you wish to test your server to see whether or not it will be able to support the SiteGrinder CMS:
1. Download the checkserver.php file from

http://www.medialab.com/sitegrinder3/resources/checkserver.php.zip
2. Unzip it
3. Connect to your web host using your ftp software and place the checkserver.php file in your web
directory
4. Type this URL in your web browser: http://yourdomain/checkserver.php (replace "yourdomain"
with your site domain, for example, "www.fredshardware.net")
If the browser window displays a file not found error you uploaded to the wrong place or mistyped your
URL. Any other error probably means your host doesn't support PHP.
If your host does support PHP you will see a page with details about compatibilty.
Or Send This Email

If the above seems to complicated, just copy and paste the below text and send it to the sales or tech
support address for your host:
Hi,
I need to know if your hosting service is compatible with the following technologies that I'll be using on
my site:
- PHP 5
- PHP cURL extension
- PHP upload support
Thank you!
Using A MobileMe (.mac) Account
MobileMe accounts don't support PHP and other technologies required for SiteGrinder's content
management system.
Appendix - Video Tutorials

432
Troubleshooting
Contents
Contents
Error - Can't Reach the SG Engine
Error - Can't Reach the SG Engine
The SiteGrinder Photoshop plug-in can't function unless the SiteGrinder 3 Engine application is running
and isn't blocked by a firewall.
When you open the SiteGrinder 3 plug-in in Photoshop it launches the SiteGrinder Engine Application
automatically.
If the engine crashes or you quit it while the SiteGrinder 3 plug-in is open the the plug-in won't be able to
reach the engine.
If the Engine isn't launching when the plugin does you can try to launch it manually and then open the
plug-in. The Engine is located in the "SiteGrinder 3" folder in your Applications Folder (Mac) or your
"Program Files" folder (Windows).
The SiteGrinder plug-in, as well as the Design Manager and Content Manager, communicate with the
engine using the same messaging that browsers use to talk to web servers. If you have that kind of
messaging blocked on your computer then you will need to allow the SiteGrinder Engine to
communicate.
SiteGrinder 3 Requirements
Photoshop Requirements
In terms of hardware and OS, if you can run Photoshop, you can run SiteGrinder 3.
In terms of software:
Microsoft Windows: Photoshop 7, CS, CS2, CS3 and CS4; Photoshop Elements 3, 4, 5, 6 and 7
Mac OS X: Photoshop CS3 and CS4; Photoshop Elements 6 and 7
Support for Photoshop CS2 Mac and earlier versions is being worked on.
Server Requirements
SiteGrinder can build three types of sites: No CMS, Local Only CMS, and interactive PHP CMS. (More
server types like ASP may be supported in the future.)
Static "No CMS" HTML (just like SiteGrinder 2 basically)

There are no extraordinary requirements. These two requirements are very common:
FTP access

433
FTP directory creation.
Local-Only CMS
The advanced SiteGrinder site management features will only run locally on your computer.
SiteGrinder Blog feature not supported
Dynamic -xmedia importers not supported.
SiteGrinder PHP CMS

PHP 5 with standard extensions
...and the cURL extension installed for certain xmedia importers (like Google docs)
...and file_uploads ON
FTP access
FTP directory creation
If you wish to test your server to see whether or not it will be able to support the SiteGrinder CMS, place
the checkserver.php file on your server and view that page. You can download the file here:
http://www.medialab.com/sitegrinder3/resources/checkserver.php.zip
ECommerce Requirements
FoxyCart- At this time there is only one ecommerce module supported. Users wishing to use
SiteGrinder's integrated ecommerce support need their own FoxyCart subscription as well as a payment
gateway.
See the Commerce Reference and FoxyCart Reference for more information.
Useful Tips
Read the Essentials Guide Before Using A Feature
SiteGrinder has an enormous variety of features, many of which have a great deal of depth. Almost no
one needs to know everything about every feature, so we've divided the crucial information up into
feature-specific "Essentials Guides". These contain only the information that every single user needs to
know before jumping into a feature.
Click here to see the Essentials Guide Index
Quickly Experiment With A Feature In A New Blank Document
When trying out something new it's quick and easy to create a new Photoshop document, create one or
just a few layers, and do a quick build and/or deploy just to get used to the feature. You don't actually
have to make a layer comp to test the things you've added to your new document either - SiteGrinder can
just use the document itself as the page, which makes this kind of testing even easier.
Let's say you want to try a text menu for the first time, for example. Just make a new document big
enough to fit the menu you want to see, create a type layer, add a few menu items to it, give it the
"-menu" hint, and you're ready to test. Open SiteGrinder and buid it and now you can check out the
menu editor in the Design Manager.
Once you get the hang of it return to your actual site design.

434
Use Layer Group Buttons and the Smart Group Duplicator
Once you have mastered the basics of creating image buttons and text buttons, be sure to explore
SiteGrinder's layer group buttons feature to save yourself time.
If you start using layer group buttons be sure to read about the " Smart Layer Group Duplicator ".
Use Tabbed Browsing
If you are doing a lot of test builds you can end up with a lot of browser windows since each build, even
of the same site, causes a new browser window to open. Because of this it is helpful to set up your
browser to open new pages in tabs inside one window instead of a new window every time. All modern
browsers support tabbed browsing. If you aren't sure how to turn it on for your particular browser just
google "tabbed browsing" along with your browser name.
Assign a Function Key To SiteGrinder
It's kind of a pain to go all the way down to the File->Automate menu and choose SiteGrinder 3, don't
you think? Okay, maybe it's just me. But keep in mind our spectacular laziness inspired us to create
SiteGrinder in the first place when saw what a pain all the other ways of creating websites are.
Anyway, I like to assign the command to a hot key using Photoshop's Edit->Keyboard Shortcuts
command. Open the FIle menu in the window that appears, find SiteGrinder 3, and give it your choice of
key. I like F3.
For extra credit if you are using Windows you can make an action that both saves your document and
opens SiteGrinder. Because of a Photoshop bug on the mac you can't automate SiteGrinder with actions,
so if you want to make a macro to both save the file and open SG you'll need to use a macro utility like
Quickeys or FastScripts.

Site Grinder 3 Docs PDF March29 2010

Uploaded by

Document Information

Original Description:

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Site Grinder 3 Docs PDF March29 2010

Uploaded by

Copyright:

Available Formats

1

Copyright © Media Lab Inc. All Rights Reserved.

You may also want to peruse the Complete Hint List.

Copyright © Media Lab Inc. All Rights Reserved.

Installing and Activating

You may also want to peruse the Complete Hint List.

Installing and Activating

Copyright © Media Lab Inc. All Rights Reserved.

Installing and Activating SiteGrinder 3

Open SiteGrinder 3 and click the "Activate" button.

This will present the following window:

Finally, close the Activation window.

Copyright © Media Lab Inc. All Rights Reserved.

IMPORTANT: Be sure to use a valid email address.

Reactivating To Add Commerce or Control

Installing an Updated Version of SiteGrinder 3

Transferring To a New Machine or Version of Photoshop

Copyright © Media Lab Inc. All Rights Reserved.

Mac Installer Troubleshooting

If you are not logged in as an administrator you may need to do so to install.

Installing Manually on a Mac

To remove SiteGrinder 3 delete these directories:

SiteGrinder 3 in your Applications (Mac) or Program Files (Windows) directory.

Media Lab SiteGrinder 3 in your Photoshop plug-ins directory.

SiteGrinder Helpers in Photoshop's Presets->Scripts directory.

Using Both SiteGrinder 2 and SiteGrinder 3

Copyright © Media Lab Inc. All Rights Reserved.

The Essentials Guides Are Essential

Essentials Guide Contents

The Essentials: What every user needs to know about SiteGrinder 3

Copyright © Media Lab Inc. All Rights Reserved.

How To Learn SiteGrinder

Detailed reference guides

Copyright © Media Lab Inc. All Rights Reserved.

Copyright © Media Lab Inc. All Rights Reserved.

General Stuff You Should Know About Photoshop

Copyright © Media Lab Inc. All Rights Reserved.

Photoshop Layers With "Hints" Tell SiteGrinder What To Do

Some Hinted Layers Act As Placeholders or Boundaries

Copyright © Media Lab Inc. All Rights Reserved.

Layers With Certain Names Can Control Page Layout Options

One Photoshop Document Can Produce Multiple Pages

Initial Settings For Your Photoshop Document

Copyright © Media Lab Inc. All Rights Reserved.

The SiteGrinder Workflow

Copyright © Media Lab Inc. All Rights Reserved.

SiteGrinder and Web Text

You can later edit this text in the Content Manager.

Each line becomes a unique menu item, as seen below:

Copyright © Media Lab Inc. All Rights Reserved.

CMS and eCommerce

Where to Go From Here

Copyright © Media Lab Inc. All Rights Reserved.

Workflow Part 1 (Design)

About This Guide

The SiteGrinder Workflow

Workflow Phase 1: Design

Copyright © Media Lab Inc. All Rights Reserved.

Check SiteGrinder's Report

Copyright © Media Lab Inc. All Rights Reserved.

Build and Adjust Your Designs

Copyright © Media Lab Inc. All Rights Reserved.

Workflow Part 2 (Content)