Configuring the APW

Full cmxConfig object

let cmxConfig = {
    //  Edit this to set your required configuration
    "Custom": {
        "SideMenu": true,      // Set to true to use a sidebar menu
        "BannerStyle": "thin", // Accepts 'thin' to reduce the height of the banner; only on sidebar navigation
        "Theme": "",            // Set to the name of an existing theme WITHOUT 'css'
        "Logo": "",             // Set to the absolute or relative path and name of the image to use OR leave blank
        "BannerImage": "",      //  As above or leave blank
        "BannerPosition":"center bottom 40%",   // Use allowable css values including units
    },
    "DataPath": "/data/",      // Set to the absolute or relative path of your data
    "Geometry": {
        "StaticHead": true,     // true or false accepted
        "StaticFoot": true,     // true or false accepted
        "PaddingTop": 2,        // Numeric value only (real numbers accepted but ignored if using px as unit)
        "PaddingBottom": 1,     // Numeric value only ( ditto )
        "Units": "em",          // Accepts any valid css unit 
    },
    "Gull": {                   // Affects the standing gull only
        "Animation": "",        // Values: Blank, 'Expand', 'Enter left', 'Enter right' or 'Drop' only
        "Speed": 5,             // Positive numeric values only (can be real)
        "OnTop": false,          // true or false
    },
    "Panels": {
        "Shadows": "",          // Blank, Basic or Enhanced only
        "VariableHeight": true,// true or false
    },
    "Menu": "js/menu.js",       // Relative path and name of menu script.
    "NOAAPath": "/data/Reports/",   // Absolute or relative path to your NOAA Reports
}

Gull

Entries in this section control the animation of the gull on the left of the screen.

AnimationThis can be any of Drop, Slide LtR, Slide RtL, Grow or left blank for the default animation.

SpeedSet the time, in seconds, over which the animation runs. Setting to '0' will effectively stop any animation. It can accept any positive real number.

Information

Custom

This section provides options for:

SideMenuSetting this to 'true' will remove the bar menu below the logo and replace it with a hamburger.

BannerStyleIf the SideMenu is 'true' then setting this to 'thin' will move the hamburger for the 'SideMenu' to the left of the site log thus making the banner thinner.

ThemeAs in previous versions, you can opt for any of the available themes (or your own if you have created one).

LogoAgain as in previous versions, you can opt to use your own logo.

Banner ImageIf you have a suitable image, you can opt to display this rather than the plain coloured banner.Note
It should be at least 2000px wide as it is always centred within the browser window. On very wide screens even this width may not be enough. You can adjust its position within the banner using the next entry BannerPosition. You can use words: top, center, bottom, and specify a pixel or percentage offset to suite your needs.

Geometry

StaticHeadAs its name implies, this entry dictates whether or not the banner is fixed to the top of the screen. Consider
On long pages, if the banner scrolls, then the visitor cannot get to the menu without scrolling back to the top.

StaticFootThis locks the footer at the bottom of the screen except on screens smaller than 600px high.¹⁾

Top & Bottom paddingThis is the space between the banner and the main page content and then the footer. It can be set zero but this will not place the page content right at the bottom of the banner or top of the footer. These page elements also have their own spacing to ensure that are always legible.

UnitsThis can accept any valid css unit, not just pc, em, or vh. Remember that pixels are not responsive while other units might be.

Panels

Only two options available here; Shadows and VariableHeights. You can add one of three options for shadows; Blank - in which case there are none, 'Basic' or 'Type 2' Note
It is possible to stop specific panels displaying a shadow regardless - see page-options.

VariableHeights, make the primary panels on pages adjust their height to just enough for their contents.