Als Erstes, verbinden Sie sich mit Ihrem FTP-Server. Dieses können Sie mit jedem beliebigen FTP-Client durchführen. Nach Verbindung mit dem Server und je nach Auswahl des Templates, müssen Sie in den jeweiligen Ordner wechseln.

Beispiel:

Wenn Sie das Standard-Template nutzen, so wechseln Sie in den Ordner:

templates/template/frontend/_resources/images

Hier befindet sich die Logodatei (logo.jpg), die Sie dementsprechend anpassen können. Um das Ganze zu vereinfachen, laden Sie einfach das Bild herunter und bearbeiten Sie dieses.

Nach der Bearbeitung des Bildes, können Sie es anschließenden Verfahren erneut hochladen und das alte Logo durch das neue Logo ersetzen lassen. Wichtig hierbei ist es, genau den Namen des heruntergeladenen Bildes zu verwenden, denn so ist es in der style.css definiert.

Falls Sie nun ein Bild haben, welches größer und anders positioniert werden soll, so müssen Sie dieses in der style.css definieren. Die style.css finden Sie im Ordner templates/_default/frontend/_resources.

Hierbei können Sie mit Hilfe des Mozilla-Tools Firebug die Änderungen erst Lokal vornehmen und nach gewünschten Anpassungen im Browser in die style.css einbinden. Hierzu müssen Sie im Container des Logos die Änderungen vornehmen:

Beispiel:

Um nun neben der Größe auch noch die Position zu bestimmen, können Sie im Modul des Firebug das Register des Layouts aufrufen und hier die Werte ändern. Die Änderungen werden sofort im Browser dargestellt, jedoch nicht gespeichert. Nachdem Sie die Seite neu laden, wird das Logo an der exaten Stelle wie vor der Anpassung dargestellt.

Beispiel:

Nachdem Sie die Postionierung und Größe des Logos Lokal im Browser vorgenommen haben und mit dem Ergebnis zufrieden sind, können Sie nun die Einstellungen auch in die style.css einbinden.

Hierzu gibt Firebug ebenfalls die Zeile aus, in der sich die Positionierung des Logos befindet und es somit es ein leichtes ist die Position zu bearbeiten. Falls Sie mit dem Editor arbeiten, haben Sie die Möglichkeit mit der Suchfunktion den gewünschten Container zu suchen. In diesem Fall ist es der Container: #logo a indem sich die Positionierungen befinden.

Die Änderungen der Positionierungen werden wie folgt direkt im Container des Logos eintragen: