Replace DNN DDRMenu with the CISS MegaMenu skin object

The CISS MegaMenu skin object can replace a standard DNN DDRMenu skin object without replacing the rest of the theme. This guide uses the DNN 10 Aperture theme as a complete example: the original page structure, panes, modules, logo, footer, typography, and responsive content remain intact while CISS owns the desktop MegaMenu, mobile drawer, Search box, Menu Builder, and the review-first AI Content launcher.

When to use the CISS skin object

Use this integration when a site must keep its current DNN skin but needs the ACME navigation system. The CISS skin object is responsible for navigation rendering and administration. The surrounding skin remains responsible for page panes, module containers, header geometry, and footer markup.

Install the Aperture sample

1. Back up the DNN database and the /Portals folder.
2. Install the current CISS SideMenu extension.
3. Install ApertureCiss_Install.zip from Settings > Extensions.
4. Create or choose a test page that already uses the standard Aperture skin.
5. Apply ApertureCiss - default to that page only.
6. Compare the test page with the original. Pane names and module positions must remain unchanged.

Replace DDRMenu in another skin

Register the CISS skin object in the skin control:

<%@ Register TagPrefix="dnn"
    TagName="DNN360MENUSK"
    Src="~/DesktopModules/CISS.SideMenu/SideMenuSkinObject.ascx" %>

Replace the standard DDR menu instance in the header with one CISS instance:

<div class="my-theme-menu-shell">
  <dnn:DNN360MENUSK runat="server"
      id="siteMegaMenu"
      style="AcmeMega" />
</div>

Load the CISS MegaMenu stylesheet and runtime supplied by the extension:

<link rel="stylesheet"
  href="/DesktopModules/CISS.SideMenu/DDRStyles/AcmeMega/AcmeMega.css" />
<script defer
  src="/DesktopModules/CISS.SideMenu/DDRStyles/AcmeMega/AcmeMega.js"></script>

Render only one AcmeMega skin object. Its runtime already creates the responsive drawer. Adding a second Drawer skin object duplicates controls and can change the header height.

Keep administration controls available

If the host theme removes its top utility line, move the DNN USER, LOGIN, Host-only Edit menu, and Administrator/Host AI Content launchers into the main menu row. Do not remove these controls with the old header. Normal visitors should see only public controls.

Use AI Content with ApertureCiss

1. Sign in as a DNN Host or a member of the Administrators role.
2. Open the page that contains the content to update and click AI Content.
3. Describe the target precisely, for example: Change only the heading and introductory paragraph in the Home Banner module. Preserve the facts and the current tone.
4. Review every proposed field, media change, SEO update, or approved module action in the right-hand panel.
5. Click Apply changes only after the draft matches the request. Publishing remains under DNN and 2sxc control.

The assistant can work with exposed 2sxc text and media fields, visible text in DNN HTML modules, supported SEO metadata, and explicitly requested approved blocks. Images uploaded through the assistant are validated, converted to WebP, and registered in the DNN file manager. It cannot invent or modify CSS, Razor, arbitrary HTML, routes, JavaScript, or skin structure.

Configure the AI provider endpoint

1. Open AI Content and click the settings icon in the dialog header.
2. Enable ACME AI and choose a provider preset.
3. Confirm the model or deployment name, Base URL, and API version required by that provider.
4. Enter the API key. Leave the field blank on later edits to retain the stored key.
5. Use Save & test to validate the endpoint before preparing content changes.

The same Host-level settings are shared by AI Content and the Menu Assistant. Presets support Google Gemini, OpenAI, Anthropic, Kimi, OpenRouter, Azure OpenAI, local Ollama/LM Studio, and custom OpenAI-compatible endpoints. The API key is encrypted in DNN Host Settings and is never returned to the browser after saving.

Choose a menu style and configure Search

Open Edit menu, select Site Design, and use the Menu Bar panel. CISS supports the Classic, Modern, Minimal, Bold, Elegant, German, and Centered presets. A selected preset is stored with the CISS menu configuration, so it also works in skins that do not load the ACME Site Design scripts.

The Search box switch controls both the desktop header and the mobile drawer. Search submits to the active portal's DNN Search Results page with the standard Search query parameter. Pressing Enter and clicking the search icon perform the same action.

Isolate the host theme CSS

A host skin may contain broad selectors such as header a, sticky-header rules, or mobile menu rules. Scope integration overrides under a wrapper such as .aperture-ciss-header. Preserve the host theme's header height and let only one system own sticky positioning.

• Do not rename or move DNN panes while replacing navigation.
• Do not load the host skin's old mobile-menu script if it expects DDR-specific markup that no longer exists.
• Do not globally restyle headings, links, images, or module wrappers to make the new menu fit.
• Keep the CISS drawer fixed to the viewport and above the host header stacking context.

Visual QA checklist

1. Apply the integration to one existing Aperture page and compare every pane and module with the original page.
2. Open a MegaMenu, test a simple link, and verify the active underline sits below the correct item.
3. Scroll the page and confirm the menu does not shrink, repaint, or detach from the host header.
4. Test Search by clicking the icon and pressing Enter.
5. Switch every Menu Bar preset and reload after saving.
6. At mobile width, open and close the drawer, expand a section, run a search, and confirm body scrolling is restored after close.
7. As an Administrator, open AI Content and confirm Snapshot loads the current page inventory before opening provider settings.
8. Check for horizontal overflow, browser console errors, hidden links, and duplicated menu controls.

The supplied sample passed this matrix on DNN 10.3.3: HTTP 200, unchanged Aperture pane/module structure, working desktop and mobile Search, all seven menu presets, working MegaMenu and drawer, no horizontal overflow, and a successful AI Content Snapshot of the current page.