Table of Contents

The Masthead

The masthead sits at the head of your page, serving as an anchor in your design, and factoring into both your personal branding and your site's search engine optimization. CE2 engines offer three unique styles of masthead: Traditional, Nuovo and Retro. The masthead and navigation menu together comprise the site header.

The Masthead controls are located in the Site Info control pane, and each of the three styles contains some basic controls in common:

Masthead Basic Controls

Display Masthead determines whether the masthead is displayed on the page at all. In most cases, you will want to keep this enabled.

Background-color, when enabled, determines the color of the masthead background. If disabled, the masthead background will be transparent, allowing the page background to show through.

Masthead Height determines the total height of the masthead's box. This should be large enough to accommodate the full size of your masthead's graphic, plus as much negative space as you deem necessary.

Margin-top allows you to put some space between the top of the browser window and the top of your masthead's box.

The Identity Plate controller, unlabeled but pictured above containing The Turning Gate's graphic masthead, allows you to create or embed a logo in your masthead. A textual logo may be created within Lightroom, or you may important a graphical identity plate created in another image-editing program, such as Photoshop. The latter typically yields the best results. Click the controller and select 'Edit' to get at the options here. These are the same as for Lightroom's first-party web engines, so see Lightroom documentation for more information on how to use these features.

Alt Text for Identity Plate allows you to embed text into the source code for your graphic. While this text will rarely, if ever, be seen, it does help with search engine optimization. You will typically want to write out whatever text appears in your logo graphic, along with any other information – such as a slogan – that may be relevant. For the TTG logo pictured above, I would write in “THE TURNING GATE - Adobe Photoshop Lightroom Web Engines, Tutorials & Resources”.

Hyperlink for Identity Plate allows you to make your masthead clickable. The most typical use for this would be to allow the user to easy return to your Home page, http://www.domain.com. The hyperlink should be written as an absolute URL beginning with http://.

Note that some masthead layouts disable this hyperlink.

Traditional

The Traditional style masthead is the CE2 default, and is visually similar to the masthead seen in CE and some earlier versions of TTG web engines, though source code changes give this new version some extra weight for SEO.

Masthead, Traditional style

Masthead, Traditional controls

The traditional masthead may be positioned above or below the navigation menu. Additionally, the traditional style is the only choice that allows the identity plate to be placed within the navigation menu, though the hyperlink then becomes unavailable.

The identity plate may be positioned anywhere within the masthead using the percentage controls, ID Plate X Position for horizontal control and ID Plate Y Position for vertical control. For both, a value of 50% is perfectly center along the horizontal or vertical axis, respectively.

For ID Plate X Position, a value of 0% is fully aligned to the left, and a value of 100% is fully aligned right.

For ID Plate Y Position, a value of 0% is top aligned, while a value of 100% is bottom aligned.

When setting Masthead Position to either Nav Container or Nav Content, use the Navigation controls to add padding to the navigation menu bar, creating space for your identity plate.

Nuovo

The Nuovo style is visually similar to Traditional, but with some important changes to the controls. The most significant difference is the ability to set a background-image for the masthead.

Masthead, Nuovo style

Masthead, Nuovo controls

The background-image controls are similar to the controls for the Page Background-image, but stripped down some. Users may select any of the provided background-images, or may supply their own image by first copying the image file into the web engine's resources, then writing in the image path.

The Nuovo masthead may be positioned above or below the navigation menu. The identity plate cannot be positioned within the navigation using the Nuovo style.

For the Nuovo style, the ID Plate X Position and ID Plate Y Position controls now operate in pixel measurements and are used to offset the identity plate alignment. The identity plate may be horizontally aligned Left, Right or Center. For vertical alignment, the identity plate will stick to the top of the masthead, but may be pushed down by using the ID Plate Y Position slider to create some padding.

Note that in Nuovo style, the hyperlink will only be active on the identity plate graphic, not on the entire masthead.

Retro

The Retro style masthead hearkens back to the earliest days of TTG, featuring a beefed up rendition of the masthead that appeared in many of our 1.0 releases back in 2007. This masthead includes options for a textual title and subtitle.

Masthead, Retro style

Masthead, Retro controls

In the Retro style, the identity plate may only be aligned to the top left, with the title and subtitle being aligned to the top right. The ID Plate X Position and ID Plate Y Position sliders allow the identity plate to be offset from its default position, while the Titles X Position and Titles Y Position sliders allow the same for the titles.

The typographic options apply to the titles and should be self-explanatory.

Print/export