Normalerweise passe ich nur vorhandene kostenlose Vorlagen an und ändere Farben und Schriftarten. Die Frage ist, wie kann ich am einfachsten Änderungen an der CSS-Vorlage vornehmen, wenn ich meine Joomla-Seite bereits online habe?

Derzeit verwende ich die Chrome-Entwicklungstools , um bestimmte Stile für eine Vorschau zu finden und anzupassen. Wenn es mir gefällt, passe ich die CSS-Datei der Vorlage direkt im Online-Editor im Administrationsbereich an.

Als ich anfing und keine Inhalte hatte, verwendete ich einen lokalen Webserver mit Joomla, der den Vorteil hatte, dass ich eine richtige IDE zum Schreiben von CSS- und PHP-Code verwenden konnte. Da ich bereits einige Inhalte habe, möchte ich sehen, wie die Änderungen, die ich an den Inhalten vornehme, aussehen.

Ich weiß, dass dies eine grundlegende Frage ist, aber gibt es einen bevorzugten Workflow, wenn jemand das Design einer vorhandenen Site anpassen möchte?

Klonen Sie die Livesite mit Akeeba, installieren Sie sie lokal und passen Sie sie nach Bedarf an. Wenn Sie mit SSH / FTP fertig sind, kehren Sie mit Ihren geänderten Dateien zur Live-Site zurück.

Es gibt viele gute Gründe, warum es unklug ist, eine Live-Site zu optimieren ...

Je nachdem, ob Sie sich auf einfache Bedienung, Automatisierung oder Kosten konzentrieren, haben Sie hier einige Optionen:

• Tun Sie genau das, was Sie zuvor mit Ihrer lokalen Installation getan haben, aber ändern Sie nach der Installation die lokale Joomla-Installation so, dass Ihre Live-MySQL-Remote-Datenbank verwendet wird configuration.php, wenn Ihr Host Remotezugriff unterstützt. Seien Sie jedoch vorsichtig - alle DB-Änderungen werden in Live übertragen ...

• Verwenden Sie eine Komponente wie den Extplorer und bearbeiten Sie die Vorlagendateien direkt im Browser. Auf einer anderen Registerkarte wird die Site angezeigt, wobei Sie weiterhin die Entwickler-Tools von Chrome verwenden. Der Extplorer verfügt über eine Codefarbe und eignet sich hervorragend, um kleine Änderungen schnell vorzunehmen.

• Verwenden Sie ein Versionskontrollsystem, um Änderungen zu veröffentlichen. Entwickeln Sie beispielsweise Ihre Vorlage in einer lokalen Joomla-Installation mit der von Ihnen ausgewählten IDE und der Vorlage in einem Repository. Wenn Sie fertig sind, übertragen Sie die Änderungen auf Ihre Live-Site. Verwenden Sie einen Post-Commit-Hook, um diese Änderungen als funktionierende Version auszuchecken. Das Einrichten ist zwar komplizierter, aber Sie können jederzeit auf alte Vorlagenversionen zurücksetzen, wenn Sie einen Fehler machen. Fügen Sie Remote-MySQL hinzu, um die Datenkonsistenz lokal und live sicherzustellen.

• Bezahlen Sie für ein korrektes Template / Template-Framework - in meinem Unternehmen verwenden wir YooTheme- Templates. Dieses Vorlagenframework verfügt über eine Funktion namens "Customizr", bei der es sich im Grunde um ein Fenster mit zwei Fenstern handelt, das links Hunderte von CSS-Variablen (also WENIGER Variablen) und rechts eine Live-Vorschau enthält. Diese Variablen steuern nahezu jedes Element der Vorlage, vom Auffüllen der Rinnen bis zum Textschatten des Menüelements und alles dazwischen. Änderungen werden sofort in die Vorschau übernommen und es können mehrere "Stile" definiert werden, damit Sie mit verschiedenen Variablenkonfigurationen spielen können. Dies alles sagte, ich bin sicher, andere Template-Frameworks haben sehr ähnliche Funktionen.

NB: Ich bin weder Extplorer noch YooTheme verbunden, außer als Benutzer.

Wenn Sie nur CSS-Änderungen vornehmen, können Sie diese auch in den Chrome-Entwicklungstools in der Vorschau anzeigen. In einer Online-Entwicklungsumgebung wie Cloud9 oder ShiftEdit können Sie eine direkte Verbindung zu Ihrem Server über FTP herstellen und Änderungen an der Live-Site mithilfe einer geeigneten IDE vornehmen Ähnlich wie Sie es gemacht haben, als es lokal gehostet wurde.

Ich würde dies jedoch nicht für größere Änderungen empfehlen, die Ihre Website beschädigen könnten (ich habe es vor einigen Jahren auf die harte Tour gelernt). Für diese empfehle ich, einen lokalen Server (oder eine kostenlose VM von koding.com ) einzurichten , die Site mit Akeeba zu klonen und Git * zu verwenden, um Änderungen an Ihrer Live-Site zu übertragen, sobald sie getestet wurden.

* Wenn Sie nicht möchten, dass Ihr Code auf GitHub veröffentlicht wird, ist BitBucket eine gute Alternative .

Methode 1

Eine Methode, die ich verwendet habe, ist das Hinzufügen einer eigenen CSS-Datei zur Datei template index.php. Dies kann umbrochen werden, um es nur hinzuzufügen, wenn Sie der Benutzer sind.

Eine Möglichkeit, dies zu erweitern, besteht darin, ein einfaches Plugin zu schreiben, das eine CSS-Datei hinzufügt, wenn Sie der Benutzer sind. Ich habe dies verwendet, um Änderungen an der Standard-Admin-Vorlage vorzunehmen, um zu vermeiden, dass Änderungen direkt in der Vorlage vorgenommen werden, die möglicherweise durch das nächste Update ersetzt werden.

Etwas wie...

class plgSystemBB extends JPlugin {
    public function onBeforeCompileHead() {

    if (JFactory::getUser()->username == 'my.login.name.goes.here')
    {
        JFactory::getDocument()->addStylesheet("/templates/protostar/css/test.css");
    }

    if(!JFactory::getApplication()->isAdmin()){
        return;
    }   

    JFactory::getDocument()->addStylesheet("/templates/isis/css/admin-extra.css");
}

Methode 2

Um eine Vorschau der Vorlagenänderungen anzuzeigen, können Sie die Vorlage duplizieren und Änderungen daran vornehmen. Um diese Änderungen anzuzeigen, hängen Sie an die URL "? Template = test" an, wodurch die Vorlage überschrieben wird. Ersetzen Sie "test" durch den Namen, den Sie für das Duplikat verwenden möchten.

Beachten Sie, dass Sie die gesamte Vorlage und nicht nur einen Stil duplizieren müssen. Sowohl Stile als auch Vorlagen können in der Admin-GUI dupliziert werden.

Ich glaube nicht, dass es möglich ist, einen Stil in der URL zu überschreiben. [PW: Ich habe gerade herausgefunden, dass Sie in J3 einen Stil in der URL überschreiben können. Siehe Methode 3.]

Methode 3

Ähnlich wie Methode 2, jedoch mit Stilen. Verwenden Sie einen "Test" -Stil und ändern Sie die Hauptvorlage, um das Test-Stylesheet einzuschließen. Um einen Stil in der URL zu überschreiben, fügen Sie? TemplateStyle = hinzu, wobei der Vorlagenbezeichner (dh numerisch) ist.