CSS und JavaScript

CSS und JavaScript sind das Herzstück des Template-Designs. Hier lernst du wie du Styles und Skripte korrekt in WBCE-Templates einbindest.

CSS einbinden

Eigenes Stylesheet:

<link rel="stylesheet" href="<?php echo TEMPLATE_DIR; ?>/css/style.css">

Modul-CSS automatisch laden:

<?php register_frontend_modfiles('css'); ?>

Immer im <head> platzieren — vor dem schließenden </head>.

JavaScript einbinden

Eigenes Script:

<script src="<?php echo TEMPLATE_DIR; ?>/js/main.js"></script>

Modul-JS automatisch laden:

<?php register_frontend_modfiles('js'); ?>

Immer vor dem schließenden </body> platzieren.

Empfohlene Reihenfolge

<head>
    <!-- 1. Eigenes CSS -->
    <link rel="stylesheet" href="<?php echo TEMPLATE_DIR; ?>/css/style.css">
    <!-- 2. Modul-CSS -->
    <?php register_frontend_modfiles('css'); ?>
</head>
<body>
    ...
    <!-- 3. Modul-JS -->
    <?php register_frontend_modfiles('js'); ?>
    <!-- 4. Eigenes JS -->
    <script src="<?php echo TEMPLATE_DIR; ?>/js/main.js"></script>
</body>

Responsive Design

WBCE unterstützt responsives Webdesign vollständig. Viewport Meta-Tag nicht vergessen:

<meta name="viewport" content="width=device-width, initial-scale=1">

Framework integrieren

Beliebte CSS-Frameworks können direkt eingebunden werden:

Bootstrap:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5/dist/css/bootstrap.min.css">

Tailwind (CDN):

<script src="https://cdn.tailwindcss.com"></script>

Bekannte Eigenheiten

WBCEZon / Responsee Framework:

display:flex wird durch Framework-CSS überschrieben
→ float:left als Alternative verwenden

Emojis direkt im HTML → werden als ???? dargestellt
→ HTML-Entities verwenden: &#128640; statt 🚀

CKEditor fügt nach Tabellen leere <p> Tags ein
→ Im Quellcode manuell entfernen

TEMPLATE_DIR vs. WB_URL

<?php echo TEMPLATE_DIR; ?>
// URL zum Template-Verzeichnis
// Für: Bilder, CSS, JS im Template

<?php echo WB_URL; ?>
// Basis-URL der Installation
// Für: Links zur Startseite, API-Aufrufe

Nächster Schritt: Module programmieren — eigene Funktionen für WBCE bauen