Fügen Sie ein custom.css-Stylesheet hinzu. Wenn Ihre Vorlage nicht automatisch abgerufen wird, können Sie sie in Ihre head.php einfügen. Der Pfad lautet normalerweise: templates / templatename / tpls / blocks / head.php <link rel = "stylesheet" href = "/ templates / templatename / css / custom.css "type =" text / css "/>
Tony M
Antworten:
22
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.
(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:
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
Für den allgemeinen Gebrauch würde ich vorschlagen, eine andere Antwort zu verwenden, JHtml::_('stylesheet', 'path/to/file')anstatt addStyleSheetwie bereits diskutiert darüber :) Ansonsten, verdammt gute Antwort. Wird auf jeden Fall nützlich sein für Leute
Lodder
Vielen Dank, @Lodder. Ich hoffe, diese Informationen können für die Menschen nützlich sein. Zu Ihrem Vorschlag habe ich die Aussprache gelesen. Wie kann JHtml::_mit verwendet werden $this->template?
Tatsächlich verwenden die neueren Raketenthemen WENIGER. Alles, was Sie tun müssen, ist eine Datei mit dem Namen template-custom.less im Ordner LESS zu erstellen und Ihren Code darin abzulegen. Dann können Sie die Tricks genießen, die WENIGER bringt. Mit Warp 7 können Sie Ihren eigenen "Stil" im Ordner "Stile" erstellen und tatsächlich eine custom.css-Datei in DIESEM Ordner (in seinem eigenen css-Ordner) ablegen. Auf diese Weise kann jeder Stil sein eigenes benutzerdefiniertes CSS haben. Es hält auch Vorlagen-Upgrades stand. Wenn Sie die Standarddatei custom.css verwenden, wird sie bei jedem Upgrade des Themas überschrieben.
Brian Peat
1
Tolle Antwort und sehr nützlich! Eine weitere Option, die Sie für Vorlagen / Frameworks hinzufügen möchten, die keine Bereitstellung für benutzerdefinierte CSS-Dateien enthalten, ist die Verwendung einer Drittanbieter-Erweiterung wie CSSConfig extensions.joomla.org/extensions/style-a-design/templating/… which ist genau für diesen Zweck konzipiert.
Neil Robertson
7
Joomla 3.5+ (Protostar-Vorlage)
Ab Joomla 3.5 können Sie eine Datei mit dem Namen erstellen user.cssund in folgenden Verzeichnissen ablegen :
templates / protostar / css / user.css
Hinweis: Der Dateiname muss seinuser.css
Die Protostar-Vorlage prüft, ob:
Die Datei existiert
Die Dateigröße beträgt > 0.
Wenn beide Bedingungen erfüllt sind, wird diese Datei automatisch für Sie importiert.
Ein weiteres Joomla-Template-Framework, das den Anpassungsworkflow erleichtert.
Helix Framework-Vorlagen bieten auch eine einfache Möglichkeit, Ihre benutzerdefinierten Stile mit zwei praktischen Methoden hinzuzufügen.
Im Template Control Panel im Backend gibt es ein Custom CSS Feld. Hier können Sie Ihre CSS-Datei eingeben, die als Stilelement im Kopfbereich Ihrer Seiten hinzugefügt wird und als solche auch Vorrang vor anderen externen CSS-Dateien hat. Natürlich ist diese Option nicht ideal, wenn Sie eine Reihe von CSS-Zeilen schreiben möchten, daher gibt es eine zweite Methode.
Wie viele andere Vorlagen-Frameworks bietet Helix auch die Möglichkeit, Ihre eigene custom.css-Datei zu erstellen. Erstellen Sie es einfach und platzieren Sie es im CSS-Ordner der Vorlage. Die Vorlage analysiert sie und fügt sie in den Kopfbereich Ihrer Seiten ein.
Johanpw hat bei der Beantwortung seiner eigenen Frage sehr gute Arbeit geleistet ... insbesondere in Bezug auf die CSS-Überschreibungen für viele kommerzielle Vorlagen.
Ich möchte hier nur meine zwei Cent hinzufügen ...
Wie Johanpw unterstrichen hat, wird empfohlen, CSS-Überschreibungen zu erstellen. Behalten Sie Ihr benutzerdefiniertes CSS in einer einzigen Datei, von der Sie wissen, dass sie nach einem Update nicht gelöscht oder überschrieben wird.
Dies ist für alle Joomla-Erweiterungen wichtig. Versuchen Sie nicht, die Kern-CSS-Datei eines Moduls oder einer Komponente zu ändern. Versuchen Sie stattdessen besser, Ihre eigene template.css-Datei zu erstellen, laden Sie sie zuletzt und erstellen Sie dort alle Ihre benutzerdefinierten Stile.
In Fällen, in denen eine kommerzielle Vorlage keine Möglichkeit zum Hinzufügen einer CSS- Überschreibung bietet, können Sie eine Erweiterung wie die folgende verwenden: Benutzerdefiniertes CSS hinzufügen , mit der genau dies möglich ist. Um eine benutzerdefinierte CSS-Überschreibungsdatei zu erstellen, müssen Sie diese zuletzt laden.
Eine weitere Option, die ich häufig auf von mir verwalteten Websites ausführe , ist das Ändern der Vorlage und das Hinzufügen eines eigenen Links zu meiner custom.css-Datei kurz vor dem schließenden head-Tag der Vorlage. Dies ist eine geringfügige Änderung, die leicht zu merken und wiederherzustellen ist und mit der ich mich befassen kann, wenn eine Vorlagenaktualisierung eintrifft.
Gantry 5 ist die neueste Version des beliebten Vorlagen-Frameworks und bietet viele neue Funktionen.
In Bezug auf CSS-Überschreibungen gibt es eine Menge Flexibilität und Optionen.
Unter Verwendung des Wasserstoff-Themas , das als Standardvorlage für Gantry 5 veröffentlicht wurde, wird ein Ordner mit dem Namen custom bereitgestellt.
In diesem Ordner kann der Benutzer seine benutzerdefinierten Dateien / Overrides für das Gantry-Framework / die Vorlage ablegen (nicht zu verwechseln mit den Joomla-Vorlagen-Overrides, die im Ordner template / html verbleiben). Sie können dort Ihre custom.css-Datei ablegen. Anschließend können Sie über das Administrationsfeld für Gantry-Vorlagen Ihre Vorlagenlayouts anpassen und ein benutzerdefiniertes CSS / JS-Atom-Partikel (eine neue Gantry 5-Funktion) verwenden, um Ihre custom.css zur Vorlage hinzuzufügen . Gantry 5 bietet auch die sogenannten Stream-Links (wie Verknüpfungen), um Ihre custom.css-Datei einfach zu verknüpfen.
Aus dem Inneren des Atom-Partikels heraus würden Sie es also verknüpfen, indem Sie Folgendes verwenden:
gantry-theme://custom/thing.css
Die gantry-theme://Verknüpfung bezieht sich immer auf den aktuellen Gantry-Vorlagenordner.
Mit diesem Ansatz können Sie auf effiziente Weise custom.css für bestimmte Vorlagenumrisse Ihrer gantry5-Vorlage hinzufügen.
Ein zweiter Ansatz, der global für die gesamte Gantry-Vorlage funktioniert, ist das Hinzufügen einer custom.scss- Datei in:
template_directory/custom/scss/custom.scss
In diesem Fall lädt und kompiliert gantry5 diese scss-Datei immer und alle von Ihnen angewendeten css-Regeln überschreiben die Standardregeln der Vorlage.
Innerhalb der SCSS-Datei sind Sie entweder mit SCSS oder einfach mit CSS in Ordnung. Der Compiler kann beide kompilieren.
Antworten:
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.
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 derindex.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.(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:!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 seinYOURTEMPLATEFOLDER-custom.css.Beispiel: Wenn Sie ihre kostenlose
Afterburner 2Vorlage verwenden, lautet das Standardvorlagenverzeichnis/templates/rt_afterburner2/. Fügen Siert_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 sieOverride 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 anExtensions -> 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 werdenin die Datei
/layouts/template.config.php.quelle
JHtml::_('stylesheet', 'path/to/file')anstattaddStyleSheetwie bereits diskutiert darüber :) Ansonsten, verdammt gute Antwort. Wird auf jeden Fall nützlich sein für LeuteJHtml::_mit verwendet werden$this->template?JHtml::_('stylesheet', JUri::root() . 'templates/' . $this->template . '/css/style.css');Joomla 3.5+ (Protostar-Vorlage)
Ab Joomla 3.5 können Sie eine Datei mit dem Namen erstellen
user.cssund in folgenden Verzeichnissen ablegen :Hinweis: Der Dateiname muss sein
user.cssDie Protostar-Vorlage prüft, ob:
> 0.Wenn beide Bedingungen erfüllt sind, wird diese Datei automatisch für Sie importiert.
Siehe Pull Request auf Github
quelle
Helix Framework ( JoomShaper )
Ein weiteres Joomla-Template-Framework, das den Anpassungsworkflow erleichtert.
Helix Framework-Vorlagen bieten auch eine einfache Möglichkeit, Ihre benutzerdefinierten Stile mit zwei praktischen Methoden hinzuzufügen.
Im Template Control Panel im Backend gibt es ein Custom CSS Feld. Hier können Sie Ihre CSS-Datei eingeben, die als Stilelement im Kopfbereich Ihrer Seiten hinzugefügt wird und als solche auch Vorrang vor anderen externen CSS-Dateien hat. Natürlich ist diese Option nicht ideal, wenn Sie eine Reihe von CSS-Zeilen schreiben möchten, daher gibt es eine zweite Methode.
Wie viele andere Vorlagen-Frameworks bietet Helix auch die Möglichkeit, Ihre eigene custom.css-Datei zu erstellen. Erstellen Sie es einfach und platzieren Sie es im CSS-Ordner der Vorlage. Die Vorlage analysiert sie und fügt sie in den Kopfbereich Ihrer Seiten ein.
quelle
Johanpw hat bei der Beantwortung seiner eigenen Frage sehr gute Arbeit geleistet ... insbesondere in Bezug auf die CSS-Überschreibungen für viele kommerzielle Vorlagen.
Ich möchte hier nur meine zwei Cent hinzufügen ...
Wie Johanpw unterstrichen hat, wird empfohlen, CSS-Überschreibungen zu erstellen. Behalten Sie Ihr benutzerdefiniertes CSS in einer einzigen Datei, von der Sie wissen, dass sie nach einem Update nicht gelöscht oder überschrieben wird.
Dies ist für alle Joomla-Erweiterungen wichtig. Versuchen Sie nicht, die Kern-CSS-Datei eines Moduls oder einer Komponente zu ändern. Versuchen Sie stattdessen besser, Ihre eigene template.css-Datei zu erstellen, laden Sie sie zuletzt und erstellen Sie dort alle Ihre benutzerdefinierten Stile.
In Fällen, in denen eine kommerzielle Vorlage keine Möglichkeit zum Hinzufügen einer CSS- Überschreibung bietet, können Sie eine Erweiterung wie die folgende verwenden: Benutzerdefiniertes CSS hinzufügen , mit der genau dies möglich ist. Um eine benutzerdefinierte CSS-Überschreibungsdatei zu erstellen, müssen Sie diese zuletzt laden.
Eine weitere Option, die ich häufig auf von mir verwalteten Websites ausführe , ist das Ändern der Vorlage und das Hinzufügen eines eigenen Links zu meiner custom.css-Datei kurz vor dem schließenden head-Tag der Vorlage. Dies ist eine geringfügige Änderung, die leicht zu merken und wiederherzustellen ist und mit der ich mich befassen kann, wenn eine Vorlagenaktualisierung eintrifft.
quelle
Portal 5 (RocketTheme)
Gantry 5 ist die neueste Version des beliebten Vorlagen-Frameworks und bietet viele neue Funktionen.
In Bezug auf CSS-Überschreibungen gibt es eine Menge Flexibilität und Optionen.
Unter Verwendung des Wasserstoff-Themas , das als Standardvorlage für Gantry 5 veröffentlicht wurde, wird ein Ordner mit dem Namen custom bereitgestellt.
In diesem Ordner kann der Benutzer seine benutzerdefinierten Dateien / Overrides für das Gantry-Framework / die Vorlage ablegen (nicht zu verwechseln mit den Joomla-Vorlagen-Overrides, die im Ordner template / html verbleiben). Sie können dort Ihre custom.css-Datei ablegen. Anschließend können Sie über das Administrationsfeld für Gantry-Vorlagen Ihre Vorlagenlayouts anpassen und ein benutzerdefiniertes CSS / JS-Atom-Partikel (eine neue Gantry 5-Funktion) verwenden, um Ihre custom.css zur Vorlage hinzuzufügen . Gantry 5 bietet auch die sogenannten Stream-Links (wie Verknüpfungen), um Ihre custom.css-Datei einfach zu verknüpfen.
Aus dem Inneren des Atom-Partikels heraus würden Sie es also verknüpfen, indem Sie Folgendes verwenden:
Die
gantry-theme://Verknüpfung bezieht sich immer auf den aktuellen Gantry-Vorlagenordner.Mit diesem Ansatz können Sie auf effiziente Weise custom.css für bestimmte Vorlagenumrisse Ihrer gantry5-Vorlage hinzufügen.
Ein zweiter Ansatz, der global für die gesamte Gantry-Vorlage funktioniert, ist das Hinzufügen einer custom.scss- Datei in:
In diesem Fall lädt und kompiliert gantry5 diese scss-Datei immer und alle von Ihnen angewendeten css-Regeln überschreiben die Standardregeln der Vorlage.
Innerhalb der SCSS-Datei sind Sie entweder mit SCSS oder einfach mit CSS in Ordnung. Der Compiler kann beide kompilieren.
quelle