MokoCassiopeia Template Position Reference

Every visible region of a MokoCassiopeia page is controlled by a named module position. This reference shows exactly where each position renders on desktop and mobile — so you always know which position to assign a module to.

Auto-grid positions (top-a, top-b, bottom-a, bottom-b) divide the 12-column Bootstrap grid equally among however many modules are placed — up to 6. With 6 modules each gets col-md-2; with fewer they stretch wider. All four positions work identically.

Desktop Layout

Full-width view (≥768px). Positions are colour-coded by zone.

topbar Top bar — social links, login state, utility nav
below-topbar Below top bar — alerts, promo bars, announcements
below-logo Below branding — header images, taglines
menu Navigation bar — mod_menu and custom nav modules (9 cols)
search
3 cols
banner Hero / full-width banner — primary CTAs, intro messaging
top-a full width — up to 6 modules Own full-width row above content.
1
2
3
4
5
6
↳ 7th module wraps to a new row within top-a
top-b full width — up to 6 modules Second full-width row above content.
1
2
3
4
5
6
↳ 7th module wraps to a new row within top-b
sidebar-left
main-top
📄 Component / Content
main-bottom
sidebar-right
bottom-a full width — up to 6 modules First full-width footer row.
1
2
3
4
5
6
↳ 7th module wraps to a new row within bottom-a
bottom-b full width — up to 6 modules Second full-width footer row.
1
2
3
4
5
6
↳ 7th module wraps to a new row within bottom-b
footer Copyright, legal links, utility footer
Off-canvas positions — drawer-left and drawer-right slide in as panels triggered by a toggle button. Not shown in either diagram.

Mobile Layout

Narrow view (<768px). All Bootstrap columns stack to full width. Sidebars reorder: sidebar-left appears above content, sidebar-right appears below. Auto-grid modules stack vertically one per row.

topbar
below-topbar
below-logo
menu (hamburger)
search (stacks below)
banner
top-a modules stack 1 per row
mod 1 (full width)
mod 2 (full width)
mod 3 (full width)
mod 4 (full width)
mod 5 (full width)
mod 6 (full width)
top-b modules stack 1 per row
mod 1 (full width)
mod 2 (full width)
mod 3 (full width)
mod 4 (full width)
mod 5 (full width)
mod 6 (full width)
sidebar-left ↑ moves above content
main-top
📄 Component Content
main-bottom
sidebar-right ↓ moves below content
bottom-a modules stack 1 per row
mod 1 (full width)
mod 2 (full width)
mod 3 (full width)
mod 4 (full width)
mod 5 (full width)
mod 6 (full width)
bottom-b modules stack 1 per row
mod 1 (full width)
mod 2 (full width)
footer
Mobile behaviour summary
PositionMobile behaviour
topbar Full width, unchanged
below-logo Full width, unchanged
below-topbar Full width, unchanged
menu Collapses to hamburger icon; search stacks below it
search Stacks below menu (no longer shares the row)
banner Full width, unchanged
top-a Each module becomes full width, stacked vertically
top-b Each module becomes full width, stacked vertically
sidebar-left Moves above the Component Content
main-top Full width, unchanged
main-bottom Full width, unchanged
sidebar-right Moves below the Component Content
bottom-a Each module becomes full width, stacked vertically
bottom-b Each module becomes full width, stacked vertically
footer Full width, unchanged
drawer-left/right Especially useful on mobile — triggered by toggle buttons in nav
Breakpoint: Columns collapse at <768px (md breakpoint). The auto-grid positions switch from equal-width columns to stacked full-width blocks at this point. To test, resize your browser or use DevTools device simulation.

Auto-Grid Positions & Bootstrap Grid

The four positions top-a, top-b, bottom-a, and bottom-b each render as a Bootstrap row. The template divides the 12 Bootstrap columns equally among however many modules are placed in the position. With 6 modules each gets col-md-2 — the narrowest and widest the grid supports for 6 equal items. With fewer modules they stretch proportionally wider, filling the full 12 columns.

The rendered HTML structure looks like this:

<div class="row">                    <!-- position: top-a -->
  <div class="col-md-12">...</div> <!-- 1 module  = col-md-12 -->

  <div class="col-md-6">...</div>  <!-- 2 modules = col-md-6 each -->
  <div class="col-md-6">...</div>

  <div class="col-md-2">...</div>  <!-- 6 modules = col-md-2 each (row full) -->
  <div class="col-md-2">...</div>
  <div class="col-md-2">...</div>
  <div class="col-md-2">...</div>
  <div class="col-md-2">...</div>
  <div class="col-md-2">...</div>

  <div class="col-md-2">...</div>  <!-- 7th module wraps to new row -->
</div>
Modules in positionBootstrap classDesktop width eachColumns usedMobile
1 col-md-12 100% 12 / 12 Full width
2 col-md-6 50% 12 / 12 Full width stacked
3 col-md-4 33.3% 12 / 12 Full width stacked
4 col-md-3 25% 12 / 12 Full width stacked
5 col-md-2 16.6% 10 / 12 (2 cols unused) Full width stacked
6 col-md-2 16.6% 12 / 12 — row full Full width stacked
7+ col-md-2 16.6% wraps — new row starts Full width stacked

Each position is independent.

top-a and top-b are separate full-width rows stacked vertically — not two halves of a shared row. Six modules in top-a and six in top-b gives you two full 6-column rows, one above the other. Same applies to bottom-a and bottom-b.

Position Reference

PositionZoneDesktopMobileTypical useNotes
search Nav bar 3 cols (~17%) Full width, stacks below menu Search box, smart search input Fixed right end of nav bar on desktop
menu Nav bar 10 cols (~83%) Hamburger icon Main navigation — mod_menu, mega menu Collapses to hamburger on mobile; search stacks below it
topbar Header Full Full Social icons, login state, utility nav Very top of every page
below-logo Header Full Full Header images, taglines, rotating banners Below the branding/logo area, above the nav bar
below-topbar Header Full Full Alert bars, promo notices, announcements Below the top bar, above the logo/branding area
banner Hero Full Full Full-width hero images, CTAs, intro blocks Supports mokocassiopeia:hero layout. Use moduleclass_sfx to vary per page.
top-a auto-grid Top Full (1–6 cols) Each mod full-width stacked Intro content, stats, highlight cards above the article Full-width row. Up to 6 modules auto-arrange. 7th wraps to new row.
top-b auto-grid Top Full (1–6 cols) Each mod full-width stacked Second row above content — complementary to top-a Full-width row below top-a. Independent auto-grid.
sidebar-left Content ~17% Full width, above content Secondary nav, category lists, tag clouds Only renders when a module is assigned. Expands to fill when empty.
main-top Content Inner full Full Content-area alerts, page-specific intros Inside the main column, above the article.
main-bottom Content Inner full Full Related articles, comments, pagination Inside the main column, below the article.
sidebar-right Content ~17% Full width, below content Related links, newsletter, promo widgets Only renders when a module is assigned. Expands to fill when empty.
bottom-a auto-grid Footer Full (1–6 cols) Each mod full-width stacked First footer row — contact info, about blurb, quick links Full-width row. Up to 6 modules auto-arrange. 7th wraps to new row.
bottom-b auto-grid Footer Full (1–6 cols) Each mod full-width stacked Second footer row — social links, newsletter, secondary links Full-width row below bottom-a. Independent auto-grid.
footer Footer Full Full Copyright, legal links, back-to-top Very bottom of every page.
drawer-left Off-canvas Panel Panel Mobile nav, quick links, login form Slides in from left. Especially useful on mobile.
drawer-right Off-canvas Panel Panel Cart sidebar, notifications, help panel Slides in from right.
brand-aside Header Partial Full Content beside the logo/brand in the header Appears in the branding row alongside the site logo.
debug System Full Full Joomla debug output — queries, profile, language strings Only visible when Site Debug is enabled.

Assigning Modules to Positions

  1. Go to Admin → Content → Site Modules.
  2. Open the module you want to place.
  3. Set the Position field to the position name (e.g. top-a).
  4. On the Menu Assignment tab, choose which pages the module appears on.
  5. Save & Close, then clear cache.
Preview tip: Enable Preview Module Positions in System → Templates → Site Templates → Options, then append ?tp=1 to any front-end URL to see position outlines. Disable before going live.

Page-Specific Module Assignment

  • On all pages — module appears site-wide
  • Only on the pages selected — tick individual menu items
  • On all pages except those selected — exclude specific pages

For banner this lets you show a unique hero per page without duplicating modules. For top-a / top-b it allows section-specific intro rows that appear only on relevant category pages.