CSS- und JavaScript-Beispiele

Diese Seite zeigt ein Beispiel auf einer Demo-Website namens Harbor. Der Header erhält das Logo und die Farben von Harbor sowie zwei zusätzliche Links. Eine schwebende Ask AI-Schaltfläche befindet sich unten rechts. Du kannst die Dateien unverändert kopieren und anschließend dein eigenes Logo und deine eigenen Farben einsetzen.

Die Screenshots zeigen die Benutzeroberfläche auf Englisch.

Was an diesem Header anders ist

Standardmäßig fügt sich der Jam-Header in die Seite ein. Im hellen Modus ist er durchsichtig und zeigt den sanften Farbverlauf dahinter. Im dunklen Modus hat er denselben nahezu schwarzen Farbton wie der Rest. Seine Schaltflächen haben leicht abgerundete Ecken. Die Harbor-Version ändert vier Dinge:

• Auch im dunklen Modus ist der Header ein marineblauer Balken.
• Entlang der Unterkante verläuft eine dünne orangefarbene Linie.
• Das Suchfeld sowie Ask AI und Book a demo sind vollständig abgerundete Pillen.
• Das weiße Harbor-Logo ersetzt das Standardlogo.

Die Änderungen bestehen aus CSS und einer Logodatei. Der Header von Jamdesk selbst bleibt unverändert. Suche, Ask AI, der Theme-Schalter und das mobile Menü funktionieren wie zuvor.

Das Beispiel verwendet diese Dateien in deinem Projekt:

harbor-docs/
├── docs.json              ← logo, header links and brand colors
├── style.css              ← header and button styles
├── script.js              ← creates the Ask AI button
└── images/
    └── harbor-logo.svg    ← white logo for the navy header

Mit docs.json beginnen

Der erste Teil kommt ohne Code aus. Das Logo, die Farben, die Header-Links und die Schaltfläche Book a demo kommen in docs.json:

{
  "logo": {
    "light": "/images/harbor-logo.svg",
    "dark": "/images/harbor-logo.svg"
  },
  "colors": {
    "primary": "#C2410C",
    "light": "#D9480F",
    "dark": "#9A3412"
  },
  "navbar": {
    "links": [
      { "label": "Blog", "href": "https://example.com/blog" },
      { "label": "Status", "href": "https://example.com/status" }
    ],
    "primary": {
      "type": "button",
      "label": "Book a demo",
      "href": "https://example.com/demo"
    }
  }
}

Das Logo ist weiß. Der Header ist immer marineblau. Verwende dieselbe Datei für light und dark.

Jamdesk verwendet deine primary-Farbe für die Schaltfläche Book a demo, den aktiven Eintrag in der Seitenleiste und Links. Im dunklen Modus wird stattdessen die Farbe light verwendet. Achte darauf, dass sie dunkel genug ist, damit weißer Text auf der Schaltfläche gut lesbar bleibt. Unter Navigationslinks findest du alle Optionen für die Navbar.

Den Header gestalten

Text, Rahmen, Suchfeld und abgerundete Ecken des Headers werden über CSS-Variablen gesteuert. Lege diese Variablen im Header fest, um nur den Header zu ändern:

/* header[data-has-tabs] matches the site header only.
   A plain `header` selector would also match the title
   block at the top of every page. */
header[data-has-tabs] {
  --header-top: #0f1d3a;
  --header-bottom: #1b2f5b;
  --header-stripe: #f97316;
  --color-text-primary: #ffffff;
  --color-text-secondary: #cbd5e1;
  --color-text-tertiary: #cbd5e1;
  --color-text-muted: #94a3b8;
  --color-bg-primary: #0f1d3a;
  --color-bg-secondary: rgba(255, 255, 255, 0.08);
  --color-bg-hover: rgba(255, 255, 255, 0.16);
  --color-border: rgba(255, 255, 255, 0.16);
  /* Rounds the search box, Ask AI and buttons into pills */
  --radius-md: 999px;
  --radius-lg: 999px;
}

html.dark header[data-has-tabs] {
  --header-top: #0a1328;
  --header-bottom: #13234a;
  --color-bg-primary: #0a1328;
}

/* Some themes keep the header background transparent on
   purpose, so paint the color on a layer behind it. */
header[data-has-tabs]::before {
  content: "";
  position: absolute;
  inset: 0 -24px; /* reach past the 16-24px page gutter */
  z-index: -1;
  background: linear-gradient(
    90deg, var(--header-top), var(--header-bottom)
  );
  border-bottom: 3px solid var(--header-stripe);
}

/* The sparkle icon uses the accent color, which is hard to
   see on navy, so give it the stripe color instead */
header[data-has-tabs] .fa-sparkles {
  color: #fdba74;
}

Das Marineblau liegt auf einer ::before-Ebene, weil das Jam-Theme den Header-background mit !important auf none setzt. Eine normale background-Regel für den Header würde sich nicht durchsetzen. Die Ebene liegt hinter dem Inhalt des Headers. Sie funktioniert in jedem Theme.

Wenn du --radius-md und --radius-lg auf 999px setzt, werden die Schaltflächen im Header zu Pillen. Die Änderung gilt nur innerhalb von header[data-has-tabs]. Karten und Codeblöcke auf der Seite behalten ihre gewohnten Ecken.

Das Ask AI-Symbol im Header verwendet deine Akzentfarbe. Auf Marineblau ist diese Farbe schwer zu erkennen. Die letzte Regel färbt es hellorange.

Jamdesk fügt dem <html>-Element im dunklen Modus die Klasse dark hinzu. Der Block html.dark macht das Marineblau dort etwas dunkler:

Eine schwebende Ask-AI-Schaltfläche hinzufügen

Dein Skript fügt der Seite ein normales <button>-Element hinzu. Beim Klicken sendet es Ctrl+I – die Tastenkombination, mit der das Chat-Panel geöffnet und geschlossen wird. Die Ask AI-Schaltfläche im Header bewirkt dasselbe.

(function () {
  if (document.getElementById('ask-ai-fab')) return;

  var button = document.createElement('button');
  button.id = 'ask-ai-fab';
  button.type = 'button';

  // Jamdesk loads Font Awesome, so its icons are available here
  var icon = document.createElement('i');
  icon.className = 'fa-solid fa-sparkles';
  icon.setAttribute('aria-hidden', 'true');
  button.append(icon, ' Ask AI');

  button.addEventListener('click', function () {
    // Same as pressing Ctrl+I / Cmd+I: toggles the chat panel
    var shortcut = { key: 'i', ctrlKey: true, bubbles: true };
    document.dispatchEvent(new KeyboardEvent('keydown', shortcut));
  });

  document.body.appendChild(button);
})();

Füge anschließend die Stile für die Schaltfläche zu style.css hinzu:

#ask-ai-fab {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 40; /* below the header, search and mobile menu */
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 18px;
  border: 0;
  border-radius: 999px;
  background: #c2410c;
  color: #fff;
  font: inherit;
  font-weight: 600;
  box-shadow: 0 6px 20px rgba(15, 29, 58, 0.25);
  cursor: pointer;
}

#ask-ai-fab:hover {
  background: #9a3412;
}

#ask-ai-fab:focus-visible {
  outline: 2px solid #f97316;
  outline-offset: 2px;
}

/* Hide the button while the chat panel is open. On mobile
   the closed panel stays in the page with data-open="false",
   so exclude that case. */
body:has([data-chat-panel]:not([data-open="false"])) #ask-ai-fab {
  display: none;
}

@media (max-width: 767px) {
  #ask-ai-fab {
    right: 16px;
    bottom: 16px;
  }
}

Auf einem Smartphone ist die Schaltfläche 16px von den Rändern entfernt. Das geöffnete Chat-Panel bedeckt den größten Teil des Bildschirms. Die Schaltfläche wird ausgeblendet, bis der Chat geschlossen wird:

Der KI-Chat muss aktiviert sein, damit die Schaltfläche funktioniert. Ist chat.enabled in docs.json auf false gesetzt, bewirkt ein Klick nichts. Lass die Schaltfläche in diesem Fall weg.

Ein Support-Widget wie Crisp oder Intercom befindet sich wahrscheinlich ebenfalls unten rechts. Halte die Widgets auseinander, indem du bei #ask-ai-fab left: 24px statt right verwendest. Oder erhöhe bottom, um die Schaltfläche über dem Widget zu platzieren.

Code nach jedem Seitenwechsel ausführen

Dein Skript wird einmal ausgeführt, wenn jemand die Website zum ersten Mal öffnet. Beim Klicken auf einen Link in der Dokumentation wird der Seiteninhalt ausgetauscht, ohne die Seite neu zu laden. Das Skript wird nicht erneut ausgeführt. Die Ask AI-Schaltfläche ist davon nicht betroffen. Sie ist an <body> angehängt, und <body> bleibt bestehen.

Code, der den Seiteninhalt liest oder ändert, muss erkennen, wann die Seite wechselt. Dieses Snippet beobachtet die Hauptspalte und prüft, ob sich die URL geändert hat. Füge es unter dem Code für die Schaltfläche in dieselbe script.js ein:

(function () {
  var lastPath = location.pathname;
  var main = document.getElementById('main-content') || document.body;

  function onPageChange() {
    // Your per-page code goes here
    console.log('Now on', location.pathname);
  }

  new MutationObserver(function () {
    if (location.pathname === lastPath) return;
    lastPath = location.pathname;
    onPageChange();
  }).observe(main, { childList: true, subtree: true });
})();

onPageChange wird einmal pro neuer Seite ausgeführt – unabhängig davon, ob jemand auf einen Link in der Seitenleiste klickt, die Suche verwendet oder die Zurück-Schaltfläche betätigt.

Zu verwendende Selektoren

Die Klassennamen von Jamdesk stammen aus Tailwind und können sich mit jeder Veröffentlichung ändern. Auch die Beschriftungen der Schaltflächen können sich ändern. Auf mehrsprachigen Websites werden sie übersetzt. Verwende stattdessen diese Selektoren:

Änderungen testen

jamdesk dev zeigt dein CSS an, führt aber kein eigenes JavaScript aus. Der KI-Chat funktioniert nur auf deiner veröffentlichten Website. Teste das Skript lokal, indem du es auf der Vorschauseite in die Konsole deines Browsers einfügst. Dort wird die Schaltfläche angezeigt. Der Chat lässt sich erst nach der Veröffentlichung öffnen.

Prüfe das Ergebnis auf einem Smartphone-Display mit einer Breite von 375px und im dunklen Modus, nicht nur auf dem Desktop. Dort treten Probleme mit Header-Farben und fixierten Schaltflächen am häufigsten auf.

Wie geht es weiter?