Differences

This shows you the differences between two versions of the page.

--- wiki:apw:configure [2026/04/20 10:23] – created Neil Thomas
+++ wiki:apw:configure [2026/04/20 16:38] (current) – Neil Thomas
@@ Line 3: / Line 3: @@
 This page covers all the configuration options available in the current APW release
+<WRAP nicebox round teal>
+==== IMPORTANT ====
+All configuration settings are held in a discrete file - config.js.  This is loaded by all pages before any other site specific files meaning changes made to it will be instantly implemented across the whole site.  If modifying a live site, all current visitors will see the changes made on the next page load or refresh - take care not to make any mistakes!
+</WRAP>
+<WRAP coolbox teal round>
+<WRAP group>
+<WRAP half column>
+==== Full cmxConfig object ====
+<code javascript>
+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
+}
+</code>
+==== Gull ====
+Entries in this section control the animation of the gull on the left of the screen.
+**Animation**<wrap indent>This can be any of //Drop//, //Slide LtR//, //Slide RtL//, //Grow// or left blank for the default animation.</wrap>
+**Speed**<wrap indent>Set the time, in seconds, over which the animation runs.  Setting to '0' will effectively stop any animation. It can accept any positive real number.</wrap>
+</WRAP>
+<WRAP half column>
+===== Information =====
+==== Custom ====
+This section provides options for:
+**SideMenu**<wrap indent>Setting this to 'true' will remove the bar menu below the logo and replace it with a hamburger.</wrap>
+**BannerStyle**<wrap indent>If 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//.</wrap>
+**Theme**<wrap indent>As in previous versions, you can opt for any of the available themes (or your own if you have created one).</wrap>
+**Logo**<wrap indent>Again as in previous versions, you can opt to use your own logo.</wrap>
+**Banner Image**<wrap indent>If 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.++</wrap>
+==== Geometry ====
+**StaticHead**<wrap indent>As 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.++</wrap>
+**StaticFoot**<wrap indent>This locks the footer at the bottom of the screen except on screens smaller than 600px high.((On these screen, the footer will always scroll.))</wrap>
+**Top & Bottom padding**<wrap indent>This 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.</wrap>
+**Units**<wrap indent>This can accept **any** valid css unit, not just pc, em, or vh.  Remember that pixels are not responsive while other units might be.</wrap>
+==== 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 {{:wiki:apw:page-options}}. ++
+**VariableHeights**, make the primary panels on pages adjust their height to just enough for their contents.
+</WRAP>
+</WRAP>
+</WRAP>