Neptune is a responsive, HTML5 based, Zen 7.x-5.x sub-theme.

-----

• Installing Neptune
• Theme settings
  • Layout
  • Max width
  • Display the default main menu
• Mobile friendly mini nav
• Web fonts
• IE8 support

Installing Neptune

As Neptune is a Zen sub-theme both Neptune and Zen are required:

• Download both Neptune (latest version) and Zen 7.x-5.x
• Unpack the theme folders ('neptune' and 'zen') and place them in your site's 'sites/all/themes' directory (or other installation directory if required - see https://drupal.org/getting-started/install-contrib/themes)
• Log into your site and go to the 'Appearance' page (/admin/appearance) - both Neptune and Zen should be listed
• Click the 'Enable and set default' link for Neptune

Theme settings

Both Neptune and Zen include theme settings, allowing you to customise aspects of your theme (e.g. layout).

Neptune provides three theme settings:

• Layout
• Max width
• Display the default main menu

You can find these settings, along with other theme settings provided by Zen, by logging into your site and going to Neptune's settings page (/admin/appearance/settings/neptune).

Layout

Neptune includes three layout options:
- single column (default option)
- right sidebar
- left sidebar

Single column: at all resolutions the sidebar(s) are positioned beneath the main content area.

Right/Left sidebar: the sidebar(s) are positioned to the right/left of the main content area at desktop resolutions and are positioned beneath the main content area at mobile resolutions.

Max width

The 'Max width' setting allows you to define the maximum width (in pixels) to which the site can expand.

For a single column layout, the max-width area is measured from one side of the main content area to the other.

For either a right or left sidebar layout the max-width area will include both the main content area and the sidebar.

The default max-width is 750px.

Display the default main menu

The 'Display the default main menu' setting defines whether or not Drupal's default main menu will be displayed. If you're using a different method to display the main menu, e.g. the main menu block, you may want to uncheck this option.

The default value is checked.

Mobile friendly mini nav

Neptune implements a mobile friendly mini nav (at less than 768px).

The above image shows:

• the standard menu
• the mini nav (closed)
• the mini nav (open)

Note: if you're using a menu block instead of Drupal's default main menu, currently only menu blocks which are placed in Neptune's 'Navigation bar' region will be minified at mobile resolutions.

Web fonts

Neptune uses Google's WebFont Loader (a JavaScript library that gives fine grained control over font loading) to asynchronously load and display fonts.

Two fonts are used:

• Montserrat for H1 and H2 tags
• Istok Web for all other text

IE8 support

CSS aggregation
Whilst not required, enabling CSS aggregation (admin/config/development/performance -> 'Aggregate and compress CSS files') is recommended as it will help IE8 display the theme properly.

Triangles
By default, IE8 will not display the triangles across the top of the page.

This is because the triangles are drawn to the canvas element, but as IE8 doesn't natively support the canvas element the triangles don't show up.

The recommended solution is to use explorercanvas:

• download explorercanvas from https://code.google.com/p/explorercanvas/downloads/list
• extract the contents of the download and copy 'excanvas.compiled.js' into Nepunte's 'js' folder (so that you have '/neptune/js/excanvas.compiled.js')
• add the following code to Neptune's 'html.tpl.php' file (located at '/neptune/templates/html.tpl.php')
  

  <!--[if lt IE 9]>
  <script src="<?php print url(path_to_theme() . '/js/excanvas.compiled.js'); ?>"></script>
  <![endif]-->
  

  directly after the line

  <?php print $scripts; ?>