You are now in the main content area

960 Template

This template is now considered a legacy template. It will continue to be supported for existing sites; however, no new sites will be created using these templates and no new enhancements will be made.  New sites use the responsive templates.

The information provided on this page is for authors who maintain websites that were built using this template.

Features of the 960 template:

  • Content area is 960 pixels wide (including default padding)
  • Header that displays a 960 pixel image or solid background colour
  • Horizontal and Vertical Navigation Options

    • Horizontal - Auto   
    • Horizontal - Custom
    • Horizontal Mega Menu - Custom
    • Horizontal Columned - Custom
    • Vertical - Auto (a.k.a Left Navigation)
       
  • Wayfinding Navigation
  • Left template file that can be displayed on content pages
  • Right template file that can be displayed on content pages

File Structure

The 960 template requires the pages created using the following files in your root folder:

  • header - site header template
  • left - left column template
  • right - right column template  

Optional templates include:

The Header file is where the site name is defined and the navigation created.

  • Use the tabs to make changes to your header
  • Components cannot be used in the header
Header with site name and custom horizontal navigation

Create site name:

  • Open the header file by double-clicking on the file name 
  • Right-click and select edit
  • On site name tab, add the site name in the site name field
  • Modify font colour in site name colour
  • Font is Univers; cannot be modified
  • Un-check the 'Display Site Name' if an image with text has been added

Create site name:

  • Open the header file by double-clicking on the file name 
  • Right-click and select edit
  • On site name tab, add the site name in the site name field
  • Modify font colour in site name colour
  • Font is Univers; cannot be modified
  • Un-check the 'Display Site Name' if an image with text has been added

Add a background image:

  • The site header image must be 960px wide and can be 200 - 420px in height.
  • The height is specified in pixels within the site header height field. 
  • If a picture is smaller than the height you specified, it will tile repeatedly.
  • The background colour will only be seen if an image is not selected, otherwise the image will cover the entire background.

There are multiple navigation options available. All navigation is limited to three levels, and the functionality of this navigation builder is different depending on which navigation style you select.

Every menu, except vertical navigation, appears on the lower portion of the header image.  It is important to recognize that the navigation will cover the bottom portion of the image.  Keep this in mind when selecting/cropping your site header image.

1.  Horizontal Navigation - Auto, Custom and Mega Menu

There are several options for horizontal navigation.  Within each horizontal menu option, the navigation overlaps the bottom 50 pixels of the header image or background colour.

Auto and Custom Horizontal navigation provide a first level of navigation in a drop-down menu.  When a user hovers over the first level of navigation, the second level menu items appear.

If a first level menu item contains secondary or second level menu options, it will have a downward facing arrow to the right.

The top-level (or first level) items are always visible.  Secondary navigation (or sub-menu) items appear upon hover but are not viewable when the mouse hovers outside of the boundaries of the sub-menu.

The Mega menu displays a large drop-down menu divided into columns with optional headers and indented text links. This type of menu is always the same width as the header (960 pixels).  When a mouse hovers over a menu item, or sub-menu item, the navigation expands its display over the content area of the page.  The menu collapses or recedes when the mouse leaves the area covered by the menu.

2.  Vertical navigation

When vertical navigation is selected, the header component will not display any navigation.  Vertical navigation will be visible in the left column.

If the left feature column is enabled on a page, the menu will display above the contents of the "left" file.  If the left feature is not enabled on a page, only the left navigation menu will be visible.

Creating Navigation

You must have the header file open for editing.  Note: When the header file is open, the sidekick appears blank - and restricts you from adding components to the header.  It is used only to set the navigation structure and identity of the site you are working on.

Select the type of navigation you want within the third tab - Main Nav.

Auto versus Custom

Both vertical and horizontal menus can be generated automatically (via page properties> hide in navigation) but only horizontal navigation can be customized manually.  When you choose auto generated navigation, you must still select which files you want to appear within your navigation.  This is done by deselecting "Hide in Navigation" within the Page Properties for a file.   

Custom: Horizontal and Mega Menu

Within the field "Site Navigation Layout" in the main nav tab, you will see the option to select the navigation type you need.

The Add Navigation Items button is used to add a new navigation or menu item.  The Remove Navigation Item button  removes the currently selected menu item, or an entire sub menu can be removed if selected.

You will always find a folder named "Main" as the first item, any items created under "Main" will be first level menu items visible within your navigation.  Select a first-level menu item and click "Add Navigation Item" to create secondary menu items underneath the corresponding first-level menu item. The same action can be done to secondary menu items to create a third level of navigation items.  The second and third level menus are visible when you hover your mouse over them.  Remember, only three levels of navigation are permitted.

The "Link Name" is the text visible on your navigation menu item.  The field  "Link URL" is the file location where the user will be taken to on click through.  The path finder is used to create a link to content within CQ, or an external link can be entered; however, it must contain the full path including http://www...

Building Custom Mega Menu Navigation

The mega menu provides the ability to organize a large number of related links.  The process of adding links is very much the same as building a custom horizontal navigation; however, with one significant difference.

The first menu items added by selecting "Main" and clicking "Add Navigation Item" will be the first level menu items;  however, the second-level navigation items added within those first-level items represent a column within the mega menu that expands when a user hovers over the corresponding menu item.

As seen in Figure 12, the first level "Menu Item 1" has three second-level items as its children, each of which represents a column - Column Header 1, Column Header 2 and Column Header 3.

Tertiary (or third level) navigation appears within the second-level menus.  Each level can contain customized groupings of text navigation and link locations.

Colour & Opacity Fields "Navigation Text Colour" will modify the colour of the text for each menu item.

  • "Navigation BG Colour" will modify the background colour for all of the menu items
  • "Navigation BG Opacity" will modify the transparency of the background of the menu items; however, this is only for the first level of navigation. The drop down menu opacity is permanently set to 100, and the Mega Menu drop down opacity is set to 80.  This ensures that text is legible when it overlaps the content below.  This cannot be modified.
     

Wayfinder Navigation

The Wayfinder can be enabled or disabled using the "Display Wayfinder Navigation" checkbox in the fourth tab, you can also modify the appearance.

  • "Wayfinder Text Colour" will modify the colour of the text for each wayfinder item.
  • "Wayfinder BG Colour" will modify the background colour for all of the wayfinder items
  • "Wayfinder BG Opacity" will modify the transparency of the background of the wayfinder items.

The left and right files are separate files in your website. The content can be viewed/not viewed by enabled them in each content page:

  • Enable Left Feature, or
  • Enable Right Feature

The left and right columns are edited by modifying the left and right files which are created using the left template and right template.   They can accommodate most components; however, it is important to remember that this content will be scaled to fit into a smaller space when displayed with the rest of the content.

The left column is 200 pixels wide.  The right column is 250 pixels wide.

The fifth tab in the header can be used to add custom JavaScript & CSS. 

IMPORTANT:  Digital Publishing will NOT support or troubleshoot issues relating to user-added scripts or styles that interfere with the inherent functional of CQ/AEM templates or components. 

Related: