DOD2 Header Replacement Banner + Hero

v1.3.3

This version supports unified, split, and header-only layouts, separate hero media controls, current-page nav detection, centered custom hero image behavior, configurable shrink/fill handling, and clean hiding for empty hero text.

Layout Mode
Layout Mode unified | split | header-only
header-only

Use unified to keep header and hero on one shared background. Use split to give hero its own region below the header. Use header-only to disable the hero region entirely.

Header Height Desktop
220px

Top header-region height when using split mode.

Header Height Mobile
180px

Mobile top header-region height when using split mode.

Media Sources
Header / Unified Image Source Required
https://me.joint.afpims.mil/Portals/20/Papercut_mountain_range_maine_Darker_even_Smaller.png?ver=hqpLEgyRWOkSJRCxRVPQtQ%3d%3d

Used as the shared image in unified mode, or the header image in split mode.

Hero Image Source Split Mode
https://me.joint.afpims.mil/portals/20/rentals/img/rental_logo.jpg

Used only in split mode for the hero region background image.

Seal Image Source Required
https://me.joint.afpims.mil/Portals/20/images/MaineNationalGuardLogo2019.png?ver=5HxS3J0NTCVOgloTMX9Jzg%3d%3d

Full portal image path or image URL for the seal or logo.

Header Layout
Icon Size Desktop Base
140px

Maximum rendered size for the seal.

Underline Gap From Icon Desktop
15px

Spacing between the seal edge and both underline segments.

Underline Vertical Adjust Desktop
-20px

Negative lowers the line. Positive raises it.

Nav Text Size Fluid Clamp
clamp(12px, 1.15vw, 16px)

Responsive font size for nav links and the mobile menu button.

Navbar Styling
Nav Button Horizontal Padding Desktop + Mobile
14px

Left and right padding inside each nav button.

Nav Text Color RGBA Allowed
rgba(255, 255, 255, 1)

Default nav text color, including optional transparency.

Nav Active Underline Color RGBA Allowed
rgba(255, 255, 255, 0.92)

Active page underline color, including transparency support.

Nav Active Underline Thickness Desktop + Mobile
4px

Thickness of the current-page underline.

Hero Content
Hero Subtitle Text

 

Smaller line of text shown above the main hero title. Leave blank to hide it.

Hero Title Text

 

Primary hero headline displayed in the center of the banner. Leave blank to hide it.

Hero Accent Bar auto | true | false
auto

Use auto to show the bar only when hero text exists. Use true to always show it. Use false to always hide it.

Hero Height Desktop

500px

Desktop minimum height for the hero region in split mode, or the full shared area in unified mode.

Hero Height Mobile
320px

Mobile minimum height for the hero region in split mode, or the full shared area in unified mode.

Hero Overlay Color RGBA Allowed
rgba(10, 25, 47, 0.1)

Overlay tint placed over the hero image for contrast.

Hero Title Color Text
#ffffff

Color for the main hero title text.

Hero Subtitle Color Text
#d4af37

Color for the hero subtitle text.

Hero Title Size Fluid Clamp
clamp(2.5rem, 6cqi, 4.5rem)

Responsive font size for the main hero title.

Hero Subtitle Size Fluid Clamp
clamp(1.2rem, 3cqi, 2rem)

Responsive font size for the hero subtitle.

Hero Accent Color RGBA Allowed
#d4af37

Accent color for the subtitle styling and hero underline bar.

Hero Accent Bar Width Size
80px

Width of the hero underline bar below the title.

Hero Accent Bar Height Size
4px

Thickness of the hero underline bar below the title.

Hero Image Sizing
Hero Image Fit cover | contain | custom

custom

Use cover for full bleed, contain for full image visibility, or custom for manual shrink sizing.

Hero Image Scale Custom Only

50%

Used only when Hero Image Fit is custom. Example: 70%, 80%, 90%, 100%.

Hero Fill Color RGBA Allowed
#ffffff

Color shown in the unused space around a contained or custom-sized hero image.

Navigation Mapping
Nav Links Mapping List Format

Use one bullet per line in this format: Nav Label | /link-url

  • Home | /navbar/home
  • About Us | /navbar/about-us
  • Resources | /navbar/resources
  • News | /navbar/news
  • Contact Us | /navbar/contact-us
  • Crisis Support | /navbar/crisis-support
AFPIMS setup note: container and title display are often turned off for cleaner stacked or full-width presentation.
Site seal

Maine National Guard

Always Ready. Always There.

 
⚙️ Title & Description Settings Module Type: Screen-Offset Title & Overview Card (v1.1.0)
Unique Module Name ?:
mod-intro-main
Section Title ?:
Maine Armory Rentals
Bleed Mode ?:
full
Content Width Mode ?:
tile
Description Content ?:
The Maine Army National Guard is committed to the accommodation of public and private use of its armories to the maximum extent possible. Such use supports building and maintaining strong ties within the local community, and provides a vital source of funds to help defray the operation and maintenance expenses of these state-owned facilities.
📐 Typography & Text Size (Section 508 Fluid Clamps)
Title Text Size ?:
clamp(1.25rem, 2.5vw, 2rem)
Description Text Size ?:
clamp(0.95rem, 1.2vw, 1.2rem)
🎨 Color & Appearance Theme Settings
Bleed Background Color ?:
linear-gradient(135deg, #24344d 0%, #152238 100%)
Card Background Color ?:
#1c2b42
Card Border Color ?:
rgba(255, 255, 255, 0.18)
Title Text Color ?:
#ffffff
Title Accent Bar Color ?:
#38bdf8
Description Text Color ?:
#e2e8f0

Maine Armory Rentals

The Maine Army National Guard is committed to the accommodation of public and private use of its armories to the maximum extent possible. Such use supports building and maintaining strong ties within the local community, and provides a vital source of funds to help defray the operation and maintenance expenses of these state-owned facilities.

 
⚙️ Interactive Map Settings Module Type: Screen-Offset Embedded Map (v1.0.0)
Unique Module Name ?:
mod-map-main
Bleed Mode ?:
full
Content Width Mode ?:
tile
Map Height (e.g. 440px) ?:
440px
Google Map Embed URL ?:
https://www.google.com/maps/d/embed?mid=1_BG87kmodhQPniCUloGK_Hrv5mhuGHg&ehbc=2E312F&noprof=1
Bleed Background ?:
linear-gradient(135deg, #24344d 0%, #152238 100%)
📍 Click to Explore Map
 
⚙️ Resource Directory Settings Module Type: Screen-Offset Resource Directory (v1.1.0)
Unique Module Name ?:
mod-applications-list
Section Title ?:
Application & Information
Bleed Mode ?:
left
Content Width Mode ?:
tile
Description (Optional) ?:
 
Links Mapping (Format: Title | URL | Tag): ?:
  • Maine Armory Rental Application | /Portals/20/blankrentalapp.pdf | [PDF]
  • Marquee Set-Up | /Portals/20/rentals/docs/Marquee-Set-up.pdf | [PDF]
  • State Agency Pricing Guide | /Portals/20/rentals/docs/State-Agency-Link.pdf | [PDF]
📐 Typography & Text Size (Section 508 Fluid Clamps)
Title Text Size ?:
clamp(1.15rem, 2.2vw, 1.75rem)
Description Text Size ?:
clamp(0.95rem, 1.2vw, 1.2rem)
Button Link Text Size ?:
clamp(0.875rem, 1vw, 1.05rem)
🎨 Color & Appearance Theme Settings
Bleed Background Color ?:
linear-gradient(135deg, #24344d 0%, #152238 100%)
Card Background Color ?:
#1c2b42
Button Box Background ?:
#131e30
Card Border Color ?:
rgba(255, 255, 255, 0.18)
Button Border Color ?:
rgba(255, 255, 255, 0.16)
Title Text Color ?:
#ffffff
Description Text Color ?:
#e2e8f0
Link & Accent Color ?:
Button Hover Background ?:
#38bdf8
Button Hover Text Color ?:
#0f172a

Application & Information

 
 
⚙️ Resource Directory Settings Module Type: Screen-Offset Resource Directory (v1.1.0)
Unique Module Name ?:

mod-rentals-list

Section Title ?:

RENTAL LOCATIONS & INFO

Bleed Mode ?:
left
Content Width Mode ?:
tile
Description (Optional) ?:

Clicking on any of the links below will launch an information sheet in Portable Document Format (PDF) about the armory's rental space.

Links Mapping (Format: Title | URL | Tag): ?:
  • Augusta | /Portals/20/rentals/docs/Augusta-Armory-REV-011404.pdf | [PDF]
  • Brewer | /Portals/20/rentals/docs/Brewer-Armory-REV-050504.pdf | [PDF]
  • Calais | /Portals/20/rentals/docs/Calais-Armory-REV-050504.pdf | [PDF]
  • Houlton | /Portals/20/rentals/docs/Houlton-Armory-REV-050504.pdf | [PDF]
  • Lewiston | /Portals/20/rentals/docs/Lewiston-Armory-REV-022206.pdf | [PDF]
  • Norway | /Portals/20/rentals/docs/Norway-Armory-REV-012104.pdf | [PDF]
  • Presque Isle | /Portals/20/rentals/docs/Presque-Isle-Armory-REV-022206.pdf | [PDF]
  • Sanford | /Portals/20/rentals/docs/Sanford-Armory-REV-010904.pdf | [PDF]
  • Skowhegan | /Portals/20/rentals/docs/Skowhegan-Armory-REV-021406.pdf | [PDF]
  • Waterville | /Portals/20/rentals/docs/Waterville-Armory-REV-012104.pdf | [PDF]
  • Westbrook | /Portals/20/rentals/docs/Westbrook-Armory-REV-010904.pdf | [PDF]
📐 Typography & Text Size (Section 508 Fluid Clamps)
Title Text Size ?:
clamp(1.15rem, 2.2vw, 1.75rem)
Description Text Size ?:
clamp(0.95rem, 1.2vw, 1.2rem)
Button Link Text Size ?:
clamp(0.875rem, 1vw, 1.05rem)
🎨 Color & Appearance Theme Settings
Bleed Background Color ?:
linear-gradient(135deg, #24344d 0%, #152238 100%)
Card Background Color ?:
#1c2b42
Button Box Background ?:
#131e30
Card Border Color ?:
rgba(255, 255, 255, 0.18)
Button Border Color ?:
rgba(255, 255, 255, 0.16)
Title Text Color ?:
#ffffff
Description Text Color ?:
#e2e8f0
Link & Accent Color ?:
Button Hover Background ?:
#38bdf8
Button Hover Text Color ?:
#0f172a

Application & Information

 
 
⚙️ Contact & Mailing Settings Module Type: Screen-Offset Contact & Mailing Info (v1.0.0)
Unique Module Name ?:
mod-contact-info
Section Title ?:
Contact & Mailing Information
Bleed Mode ?:
right
Content Width Mode ?:
tile
Mailing Address ?:
Armory Rentals
DFE, Building #7
32 State House Station
Augusta, ME 04333-0033
Email Address ?:
Daniel.p.nadeau2.nfg@army.mil
Phone Local ?:
(207) 430-2105
Phone Mobile ?:
(207) 561-0969
Phone Fax ?:
(207) 626-4553
Bleed Background ?:
linear-gradient(135deg, #24344d 0%, #152238 100%)

Contact & Mailing Information

📍
Mailing Address
Armory Rentals
DFE, Building #7
32 State House Station
Augusta, ME 04333-0033
✉️
Point of Contact Email Daniel.p.nadeau2.nfg@army.mil
›
📞
Office / Local Telephone (207) 430-2105
›
📱
Mobile Telephone (207) 561-0969
›
📠
Facsimile (Fax) (207) 626-4553

Header & Navbar Settings

This version matches the resource directory module’s editor design language while keeping the header replacement logic focused on DOD2 live navigation behavior.

DOD2 Header & Navbar Replacement
Version 3.2.0
AFPIMS configuration required: disable container and title display settings if surrounding page chrome creates layout gaps or exposed module framing.
Editor note: CKEditor reflects the authoring surface well, but live header behavior, DOM targeting, and menu injection occur on the published page.

Navigation content

Start here. Define the module instance ID and the top-level navigation mapping that will be injected into the live DOD2 menu.

Unique Module Name Required i
[module-id]

Use a unique ID if more than one module instance may appear on the page.

Mobile Toggle Label Required i
Navigation Menu

Use concise language that clearly signals the mobile menu purpose.

Navigation Mapping Required i

Example format

Resources | /resources | Overview|/overview, Forms|/forms
Contact | /contact |

Keep the vertical bars exactly as separators. The third segment accepts comma-separated dropdown items in Label|URL format.

Visibility and header behavior

These settings control what the live header suppresses or preserves when the override is active.

Hide Search Live behavior i

Allowed values: yes, no.

Hide Social Live behavior i
yes

Allowed values: yes, no.

Hide Title Live behavior i
yes

Allowed values: yes, no.

Hide Subtitle Live behavior i
yes

Allowed values: yes, no.

Hide Nav Background Live behavior i
yes

Allowed values: yes, no.

Overlay Opacity Live behavior i
0.68

Example values: 0.5, 0.68, 0.8.

Layout and positioning

Use these controls only when the live DOD2 skin requires spacing, alignment, or offset correction.

Header Height i
220px

Example: 220px.

Logo Scale Desk i
120px

Example: 120px.

Logo Scale Mob i
1.2

Example: 1.2.

Logo Offset X i
0px

Example: 0px or 8px.

Logo Offset Y i
0px

Example: 0px or -4px.

Nav Offset X i
0px

Example: 0px.

Nav Offset Y i
-40px

Example: -40px.

Hamb. Offset Y i
15px

Example: 15px.

Navigation styling

These values control live navigation typography, alignment, and dropdown presentation.

Font Family i
'Montserrat', sans-serif

Example: 'Montserrat', sans-serif.

Nav Font Size i
14px

Example: 14px.

Menu Align i
right

Allowed values: left, center, right.

Menu Gap i
0px

Example: 0px, 6px.

Menu Radius i
6px

Example: 6px or 999px.

Dropdown Min Width i
220px

Example: 220px.

Live theme

These values define the live color identity for the injected navigation and dropdown treatment.

Theme Color Live
#1b365d
Hover Color Live
#ffcc33
Nav Link Color Live
Dropdown Background Live
#10243f
Dropdown Text Color Live
#ffffff

Editor theme

These values style the CKEditor settings panel only. They do not affect the live header or navigation.

Editor Panel Background Editor only
#0f1724
Editor Panel Border Editor only
rgba(148, 163, 184, 0.25)
Editor Header Text Editor only
#f8fafc
Editor Body Text Editor only
#d6e2f1
Editor Subtext Editor only
#94a3b8
Editor Divider Color Editor only
rgba(148, 163, 184, 0.18)