Zum Inhalt springen
Astrid

Grundgerüst

Cassiopeia Grundgerüst

Das Cassiopeia-Template für Joomla 4 hat ein Grundgerüst, das die Modulpositionen ermöglicht und außerdem das Grid-System von Bootstrap für ein responsives Design nutzt. Dieses Grundgerüst unterstützt HTML5 Bereiche wie header, nav, main und footer.

Wenn wir das gesamte PHP aus der Datei index.php entfernen, sehen wir das Grundgerüst des Templates wie unten dargestellt. Dies ist für das statische Layout, mit <body class="site-grid site wrapper-static">. Dem fluid-Layout ist <body class="site-grid site wrapper-fluid"> zugewiesen, welches es ermöglicht, dass der Body so groß wie die Bildschirmgröße ist und sich proportional verkleinert. Wenn wir die Option fluid unter den Optionen in Cassiopeia auswählen, verwendet Joomla PHP-Code, der den Text “-fluid” an den Klassennamen anfügt.

<!DOCTYPE html>
<html lang="" dir="">
<head>
  <jdoc:include type="metas" />
  <jdoc:include type="styles" />
  <jdoc:include type="scripts" />
</head>

<body class="site-grid site wrapper-static">

  <header class="header container-header full-width">
    <div class="grid-child">
      <div class="navbar-brand">
        LOGO
      </div>
   </div>
    <div class="grid-child container-nav">
      <nav class="navbar navbar-expand-md">
      </nav>
    </div>
  </header>

  <div class="grid-child container-component">
    <main>
    </main>
  </div>

  <footer class="container-footer footer full-width">
    <div class="grid-child">
    </div>
  </footer>

</body>
</html>

Body

Das Standard-Styling für das Cassiopeia Template hat keinen Rand. Kopfzeile, Navigation, Hauptbereich und Footer nehmen die gesamte verfügbare Breites ein. Das Logo befindet sich in der Kopfzeile im <header>-Tag. <body class=".. wrapper-fluid"> ist eine Breite von 100% zugewiesen. <body class=".. wrapper-static"> ist eine Breite auf 1320px begrenzt.

Links und rechts vom Hauptinhalt befinden sich Seitenleisten. Diese werden beide nach unten verschoben, wenn die Anzeigegröße kleiner als 992 Pixel ist.

...
	<?php if ($this->countModules('sidebar-right', true)) : ?>
	<div class="grid-child container-sidebar-right">
		<jdoc:include type="modules" name="sidebar-right" style="card" />
	</div>
	<?php endif; ?>
...