Ein Tutorial zur Verwendung des Cassiopeia-Templates für Joomla 4 - Grundgerüst

Ändere diesen Beitrag

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 das "-fluid" an den Klassennamen anzuhängt.

<!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.

Sidebar

...
	<?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; ?>
...

Wir können dies testen, indem wir die Größe Ihres Bildschirmfensters verringern.

Ändere diesen Beitrag

Comments