Warum CSS-Overrides verwenden?
Es ist immer eine gute Idee, Ihre CSS-Stile vom vorhandenen Vorlagenstil zu trennen, wenn Sie eine vorgefertigte Joomla-Vorlage verwenden.
- Es ist einfacher zu pflegen
- Ihre Änderungen gehen nicht verloren, wenn Sie die Vorlage aktualisieren
- Sie können die Änderungen problemlos in eine andere Vorlage oder auf eine andere Site kopieren / verschieben.
Wie funktioniert das Überschreiben von CSS?
CSS bedeutet "Cascading Style Sheets", in diesem Kontext "Cascading", dh, da für ein bestimmtes HTML - Element mehrere Stylesheet - Regeln gelten können, wird die verwendete Regel ausgewählt, indem von den allgemeineren Regeln auf die jeweils erforderliche Regel (die "Cascading" - Regel) heruntergeschaltet wird Die spezifischste Regel wird ausgewählt) oder basiert auf der Reihenfolge der Regeln für ein Element (die zuletzt gefundene Regel wird ausgewählt).
Solange Ihre angepasste CSS-Datei nach den Standardvorlagen-CSS-Dateien geladen ist , können Sie Ihre eigenen Stile hinzufügen, um bestimmte Elemente nach Bedarf zu überschreiben (es gibt einige Ausnahmen, mehr dazu weiter unten).
Allgemeine Verwendung
Um ein benutzerdefiniertes Stylesheet in das Joomla- <head>Tag zu laden , kann der index.phpDatei Ihrer Vorlage ( YOURDOMAIN.COM/templates/yourtemplate/index.php) direkt vor dem End- </head>Tag der folgende Code hinzugefügt werden, um sicherzustellen, dass Ihre Datei zuletzt geladen wird.
JHtml::_('stylesheet', JUri::root() . 'templates/' . $this->template . '/css/custom.css');
(Die CSS-Datei kann einen beliebigen Namen haben und muss sich nicht im Unterordner / css / befinden. Auf diese Weise wird sie jedoch übersichtlicher.)
Es ist auch möglich, ein normales <link>Tag hinzuzufügen , dies ist jedoch weniger flexibel als die oben genannte Option:
<link rel="stylesheet" href="/joomla//templates/mytemplate/css/custom.css" type="text/css" />
!Wichtig
Einige Erweiterungen können ihre CSS-Stile nach Ihren laden (oder sogar Stile direkt in die index.php-Datei einfügen) und so Ihre Überschreibungen überschreiben. Dies kann normalerweise durch Hinzufügen !importantzu Ihren Stilen gelöst werden , z.h1{color:red!important;}
Verwendung in verschiedenen Frameworks
Jetzt der unterhaltsame Teil: Viele Template-Frameworks haben jedoch die Möglichkeit, dass Benutzer Änderungen an ihren Templates vornehmen möchten, und fügen so eine einfache Möglichkeit hinzu, Ihre CSS-Überschreibungen einzubeziehen. Hier sind einige der verwendeten Methoden:
Raketenthemenportal 4
RocketTheme-Vorlagen werden vom Gantry Framework unterstützt und eine angepasste CSS-Datei wird automatisch geladen, wenn sie gefunden wird. Die CSS-Datei muss im /templates/yourtemplate/css/Ordner abgelegt werden und der Name muss sein YOURTEMPLATEFOLDER-custom.css.
Beispiel: Wenn Sie ihre kostenlose Afterburner 2Vorlage verwenden, lautet das Standardvorlagenverzeichnis /templates/rt_afterburner2/. Fügen Sie rt_afterburner-custom.cssdem / css / -Unterordner eine Datei mit dem Namen (vorsichtig mit Unterstrich und Bindestrich) hinzu, die vom Gantry-Framework automatisch geladen wird.
Form 5
Shape 5-Vorlagen werden mit einer leeren custom.cssDatei im Unterverzeichnis / css / Ihrer Vorlage ausgeliefert. Fügen Sie einfach Ihre Stile zu dieser Datei hinzu und sie werden in Ihr Layout aufgenommen.
Gavick Pro
Gavick Pro-Vorlagen werden mit einer leeren overrides.cssDatei im Unterverzeichnis / css / ausgeliefert. Beachten Sie jedoch, dass diese Datei nicht standardmäßig geladen wird. Sie müssen sie Override CSSin den Vorlageneinstellungen auf der Registerkarte Erweiterte Einstellungen aktivieren .
Joomla Shine
Erstellen Sie eine benutzerdefinierte CSS-Datei im / css / -Unterordner Ihrer Vorlage custom.cssund geben Sie den Dateinamen an Extensions -> Templates -> [template name] -> SEO & System -> Custom CSS/JS File(s).
T3 Framework
Vorlagen, die auf dem T3 Framework basieren, enthalten möglicherweise / möglicherweise keine custom.cssDatei im / css / -Unterordner Ihrer Vorlage (erstellen Sie sie einfach, wenn sie nicht vorhanden ist), aber wenn vorhanden, wird die Datei nach einer anderen CSS-Datei geladen.
Warp Framework
Vorlagen, die auf dem Warp Framework basieren, laden automatisch die custom.cssim / css / -Unterordner gefundene Datei. Zusätzliche CSS-Dateien können durch Hinzufügen geladen werden
$this->warp->stylesheets->add('css:yourcssfile.css');
in die Datei /layouts/template.config.php.