MediaLab Sitegrinder 3 hints

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

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

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

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

Used on Layer Type: image with color overlay layer style

Matches to Other Layers with Hints:

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.

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

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

Requires: SiteGrinder 3

Used on Layer Type: image

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.

Used on Layer Type: any

Matches to Other Layers with Hints: -button

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.

Requires: SiteGrinder 3

Used on Layer Type: any

Matches to Other Layers with Hints: -button

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.

Used on Layer Type: image

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

Requires: SiteGrinder 3

Used on Layer Type: image

Matches to Other Layers with Hints:

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.

Requires: SiteGrinder 3 and the Control Add-On

Used on Layer Type:any

Matches to Other Layers with Hints:

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.

Used on Layer Type: text

Matches to Other Layers with Hints:

Description:

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

• In SiteGrinder 2 this hint was called
• "-literal".

Used on Layer Type: image

Matches to Other Layers with Hints:

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.

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 document height or
• the -pagesize layer if there is one. If the window is the same size or
• smaller than the original document height 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.

• Different pages can have different footers in
• the the same document by organizing the footer group visibility in the
• different page layer comps.

• Used on Layer Type: image with either pattern overlay or gradient overlay
• layer style

Matches to Other Layers with Hints:

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.

Used on Layer Type:

Matches to Other Layers with Hints:

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

Used on Layer Type: text

Matches to Other Layers with Hints:

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 Form controls in the SiteGrinder Design Manager.

• Forms can be used in concert with the
• SiteGrinder ecommerce features provided by the Commerce add-on.

Used on Layer Type: -text

Matches to Other Layers with Hints:

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.

Used on Layer Type: text

Matches to Other Layers with Hints:

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