WebMasterService N3rds@Work

PSeCommerce Shop-Master Kurs

Wie das Designen eines PSeCommerce Themes funktioniert

Es gibt mehrere Möglichkeiten das Aussehen Deines PSeCommerce-Shops anzupassen, die einfachste ist es einfach eine Theme-CSS Datei zu erstellen.


Wikipedia sagt zu CSS: 

CSS wurde entworfen, um Darstellungsvorgaben weitgehend von den Inhalten zu trennen. Wenn diese Trennung konsequent vollzogen wird, werden nur noch die inhaltliche Gliederung eines Dokumentes und die Bedeutung seiner Teile in HTML oder XML beschrieben, während mit CSS gesondert davon, vorzugsweise in separaten CSS-Dateien, die Darstellung der Inhalte festgelegt wird (z. B. Layout, Farben und Typografie). Gab es anfangs nur einfache Darstellungsanweisungen, so wurden im Verlauf komplexere Module hinzugefügt, mit denen z. B. Animationen und für verschiedene Ausgabemedien verschiedene Darstellungen definiert werden können. (QUELLE)


Was Du für CSS benötigst

Damit Dein PSeCommerce Shop wirklich perfekt zu Deiner Webseite passt, kannst Du natürlich jeden Aspekt des Shops selbst designen.

Benötigt für diese Einheit:

Du benötigst einen Texteditor oder ein Entwicklertool. Wir werden in diesem Kurs mit Visual Studio Code (kostenlos) arbeiten, welches wir empfehlen.

Damit wir nicht bei 0 anfangen haben wir bereits Vorlagen-Designs für PSeCommerce erstellt. In diesem Kurs benötigst Du unsere Standardvorlage, welche Du in unserem GitHub Repo findest. Lade am besten den ganzen Ordner herunter und entpacke ihn. Öffne die Datei „standard.css“ mit Deinem Editor, oder wie wir mit Visual Studio Code.

Gut, dann lass uns loslegen!

Wenn Du die standard.css zum ersten mal geöffnet hast

So sieht ein PSeCommerce Theme-File aus. Lass Dich nicht abschrecken, es ist einfacher als es aussieht!
So sieht ein PSeCommerce Theme-File aus. Lass Dich nicht abschrecken, es ist einfacher als es aussieht!

Teilen wir PSeCommerce mit das es Dein Theme ist

Ganz oben, an erster Stelle findest Du folgenden Absatz:

/*
PSeCommerce Style: Standard-Vorlage
*/

/**
PSeCommerce Standard-Vorlage v1.1
Autor: DerN3rd, Die N3rd
Das ordinäre Standard-Design von PSeCommerce als Vorlage zum umstylen
**/

Damit PSeCommerce nun dieses Theme erkennt und im Menü anzeigen kann ändern wir die Bezeichnung „Standard-Vorlage„. Wie wärs mit: „Awesome Shopdesign„?

WICHTIG: Es darf nur die Bezeichnung geändert werden, ansonsten kann PSeCommerce das Design nicht erkennen!

Für andere Autoren, wenn Du zB Dein Design veröffentlichst, oder Du es bei uns einreichst um es in PSeCommerce zu übernehmen, fügen wir nun noch die Informationen über das Design und dem Autoren an:

/**
PSeCommerce Standard-Vorlage v1.1
Autor: DerN3rd, Die N3rd
Das ordinäre Standard-Design von PSeCommerce als Vorlage zum umstylen
**/

Passe es einfach an Deine Bedürfnisse an. Somit hat Dein Design nun einen Header und kann, sobald Du es hochgeladen hast, von PSeCommerce erkannt werden und wird zur Auswahl in den Darstellungs-Einstellungen von PSeCommerce stehen. Dort kann es dann aktiviert werden.

« Zurück
0