🎨 Custom CSS: Helix Ultimate

Für Websites mit Joomla 6.x und dem Template Helix Ultimate v2.2.x

Diese Anleitung zeigt, wie du eigenes Custom CSS dauerhaft und update-sicher einbindest – ohne Änderungen am Template-Core.
Die Methode nutzt die eingebaute Helix-Option „Custom Code“ und eine separate Datei override.css.

🎨 1. Warum override.css?

Helix Ultimate lädt standardmäßig keine custom.css, wenn CSS- und JS-Kompression aktiv sind.
Mit einer eigenen Datei override.css, die im Template-Verzeichnis liegt, kannst du alle Layout-Anpassungen zentral pflegen.
Diese Datei bleibt auch nach Template-Updates erhalten.

🧩 2. override.css im Backend anlegen

Öffne im Joomla-Backend:

System → Site-Templates → Dateien → Shaper_helixultimate – Details und Dateien

Klicke oben auf Neue Datei
Wähle im Verzeichnisbaum rechts den Ordner css aus.
Gib folgende Angaben ein:
- Dateiname: override
- Dateityp: css
  → anschließend auf Erstellen klicken
Trage nun deinen eigenen CSS-Code in die neue Datei override.css ein (siehe Beispiel unten)
und speichere die Änderungen.

🧱 3. Beispielinhalt für override.css

/* override.css – Joomla 6 / Helix Ultimate v2.2.1 – Stand: 2025-11-07 */

/* Blockquote (Zitat) */

blockquote {
  position: relative;
  margin: 1.5em 0;
  padding: 1.2em 1.5em;
  /* nutzt zuerst Helix/Bootstrap, faellt zur Cassiopeia-Variante und dann zu Fixfarbe */
  border-left: 4px solid var(--bs-link-color, var(--template-link-color, #0d6efd));
  background-color: var(--bs-tertiary-bg, rgba(0,0,0,0.03));
  font-style: italic;
  color: var(--bs-body-color, #444);
  border-radius: 6px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
  transition: background-color 0.3s ease;
}

blockquote:hover {
  background-color: color-mix(in srgb, var(--bs-tertiary-bg, #f8f9fa) 85%, black 15%);
}

blockquote footer {
  margin-top: 0.6em;
  font-size: 0.9em;
  color: #666;
  text-align: right;
  font-style: normal;
}

blockquote footer::before {
  content: "\2014 "; /* Em Dash per Unicode (robust gegen Encoding-Probleme) */
}

/* "Featured"-Badge ersetzen und anpassen */
.badge.bg-danger {
  position: relative;
  display: inline-block;          /* sorgt für sauberes Boxverhalten */
  color: transparent !important;  /* Originaltext unsichtbar */
}

/* Neuer Text auf dem Badge */
.badge.bg-danger::after {
  content: "Top";                 /* neuer Text */
  color: #fff;
  font-weight: 700;
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

/* Abstand zur Überschrift */
.badge.bg-danger + * {
  display: block;
  margin-top: 0.5rem;
}

/* Optional: Entfernt den Standard-Abstand zwischen Breadcrumbs und Inhaltsbereich */
#sp-main-body { padding-top: 0 !important; }

/* Unterkategorien als Raster-Karten */
.com-content-category-blog__children {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 12px;
}

/* Überschrift über dem Raster */
.com-content-category-blog__children > h3 {
  grid-column: 1 / -1;
  margin: 0 0 8px 0;
  font-size: 1.5rem;
  font-weight: 700;
}

/* einzelne Karte */
.com-content-category-blog__child {
  position: relative;                 /* für stretched link nötig */
  cursor: pointer;                    /* gesamter Card-Hover zeigt klickbar an */
  background: var(--bs-tertiary-bg, #f8f9fa);
  border: 1px solid var(--bs-border-color, #e5e7eb);
  border-radius: 10px;
  padding: 12px 16px;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease, background-color .15s ease;
}

/* Hover-Effekt */
.com-content-category-blog__child:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,.06);
  border-color: color-mix(in srgb, var(--bs-border-color, #e5e7eb) 80%, #000 20%);
  background-color: color-mix(in srgb, var(--bs-tertiary-bg, #f8f9fa) 92%, #000 8%);
}

/* Tastaturfokus sichtbar machen (A11y) */
.com-content-category-blog__child:focus-within {
  outline: 2px solid var(--bs-link-color, #0d6efd);
  outline-offset: 2px;
}

/* Titel/Link in der Karte */
.com-content-category-blog__child .item-title {
  margin: 0;
  font-size: 1.1rem;
  line-height: 1.25;
}

.com-content-category-blog__child .item-title a {
  text-decoration: none;
  font-weight: 600;
  color: var(--bs-link-color, var(--template-link-color, #0d6efd));
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

/* kleines Icon vor dem Kategorienamen */
.com-content-category-blog__child .item-title a::before {
  content: "📁 ";
  font-size: 1.1em;
}

/* Weniger Animation fuer Nutzer mit Bewegungsreduktion */
@media (prefers-reduced-motion: reduce) {
  blockquote,
  .com-content-category-blog__child {
    transition: none;
  }
}

/* Responsive Einspalter auf sehr kleinen Screens */
@media (max-width: 480px) {
  .com-content-category-blog__children {
    grid-template-columns: 1fr;
    gap: 8px;
  }
}

/* --- Unterkategorien-Kacheln als kompletter Link (stretched-link) --- */
.com-content-category-blog__child {
  position: relative;   /* Referenz für das ::after */
  z-index: 0;           /* Basis-Stacking */
}

/* unsichtbare Klickfläche über die ganze Kachel */
.com-content-category-blog__child .item-title a::after {
  content: "";
  position: absolute;
  inset: 0;             /* deckt die gesamte Kachel ab */
  z-index: 1;           /* liegt über dem sichtbaren Kachelinhalt */
}

/* Hover/Fokus: Farbe, kein Unterstreichen */
.com-content-category-blog__child:hover .item-title a,
.com-content-category-blog__child:focus-within .item-title a {
  color: var(--bs-link-hover-color, #0a58ca);
  text-decoration: none;
}

/* --- Top-Menü (dezente Helix-konforme Verfeinerung) --- */
#sp-header .sp-megamenu-parent > li { margin: 0 1px; }
#sp-header .sp-megamenu-parent > li > a {
  display: inline-flex;
  align-items: center;
  gap: 5px;                   /* kleinerer Abstand Emoji/Text */
  padding: 6px 10px;
  border-radius: 12px;
  line-height: 1.2;
  text-decoration: none;
  transition: background-color .12s ease, box-shadow .12s ease, color .12s ease;
}

/* Hover/Fokus: sehr leichte Tönung, kein Bubble-Effekt */
#sp-header .sp-megamenu-parent > li > a:hover,
#sp-header .sp-megamenu-parent > li > a:focus-visible {
  background-color: color-mix(in srgb, var(--bs-tertiary-bg, #f8f9fa) 92%, black 8%);
  text-decoration: none;
}

/* Tastaturfokus */
#sp-header .sp-megamenu-parent > li > a:focus-visible {
  outline: 2px solid var(--bs-link-color, #0d6efd);
  outline-offset: 2px;
}

/* Aktiver Menüpunkt: sehr dezent */
#sp-header .sp-megamenu-parent > li.active > a,
#sp-header .sp-megamenu-parent > li.current > a {
  background-color: color-mix(in srgb, var(--bs-link-color, #0d6efd) 8%, transparent);
  box-shadow: inset 0 -1px 0 var(--bs-link-color, #0d6efd);
  font-weight: 600;
}

💡 Tipp: Verwende immer die Template-Variablen (z.B. --template-link-color), damit sich dein Design automatisch an das Farbschema anpasst.

⚙️ 4. override.css im Template aktivieren

Im Joomla-Backend:

System → Site-Templates → Stile → Helix Ultimate (Default)

Links im Menü → Custom Code
Im Feld Before </head> folgenden Code einfügen:

<link href="/templates/shaper_helixultimate/css/override.css" rel="stylesheet" />

Änderungen speichern

🚀 5. Cache leeren und prüfen

Joomla-Cache leeren
(System → Wartung → Cache leeren)
Browser mit Strg + F5 neu laden
Im Seitenquelltext prüfen, ob folgende Zeile enthalten ist:

<link href="/templates/shaper_helixultimate/css/override.css" rel="stylesheet">

Wenn ja → alles korrekt eingebunden ✅

🧹 6. Hinweise & Wartung

Änderungen an override.css wirken nach dem Leeren des Joomla- und Browsercaches sofort.
Die Datei bleibt bei Template-Updates erhalten.
Kein Eingriff in template.css oder custom.css erforderlich.

Optional: Versionskommentar hinzufügen:

/* override.css – Joomla 6 / Helix Ultimate v2.2.1 – Stand: 2025-11-07 */

Ergebnis:
Eigene CSS-Anpassungen werden sauber eingebunden, sind update-sicher und kompatibel mit der CSS-Kompression von Helix Ultimate.