Have any questions?
+44 1234 567 890
Ab Apto Base V1.2.70
Die Konfigurator-Software Apto.ONE bietet die Möglichkeit, eine benutzerdefinierte CSS-Datei zu nutzen, um eigene Styling-Anweisungen hinterlegen zu können.
Um benutzerdefinierte Styling-Anweisungen nutzen zu können, muss eine der folgenden Methoden gewählt werden. Unsere Empfehlung ist "Datei in den Medien hinterlegen", da sie von jedem ausgeführt werden kann und die Datei dort einfach zu bearbeiten / ersetzen ist.
Datei in den Medien hinterlegen
- im Backend mit Ihren Logindaten einloggen
- in der Sidebar, auf der linken Seite, den Menüpunkt "Medien" auswählen
- in dem sich öffnenden Fenster "Medien", muss nun das "+"-Symbol, welches sich rechts oben befindet, angeklickt werden
- hier öffnet sich nun das Formular für die Erstellung eines neuen Ordners
- geben Sie nun dem neuen Ordner den Namen "apto"
- der Ordner muss nun durch Betätigen des "Hinzufügen"-Buttons erstellt werden
- n dem sich öffnenden Fenster "apto", muss nun das "+"-Symbol, welches sich rechts oben befindet, angeklickt werden
- hier öffnet sich nun das Formular für die Erstellung eines neues Unterverzeichnisses
- dem Unterverzeichnis muss nun der Name "css" gegeben werden
- der Ordner muss nun durch Betätigen des "Hinzufügen"-Buttons erstellt werden
- nun muss hier eine CSS-Datei mit dem Namen "custom.css" hochgeladen werden
Hinweis: Alle in Anführungsstriche gesetzten Bezeichnungen müssen ohne Anführungsstriche und korrekt übernommen werden.
Datei per FTP im Apto.ONE hinterlegen
Bei dieser Methode muss sich per FTP z.B. anhand des Programms FileZilla mit dem Server verbunden werden, auf dem die Konfigurator-Software Apto.ONE installiert ist.
Sobald die Verbindung hergestellt wurde, muss die Datei unter folgendem Pfad hinterlegt werden: „web/public/assets/css“.
Nun können eigene CSS-Anweisungen vorgenommen werden.
Um dies an einem Beispiel zu verdeutlichen, wurde ein Beispielcode vorbereitet. Dieser befindet sich unter diesem Text. Anhand dieses Codes wurden im Step-by-Step Konfigurator die Button-Farben von den Standardfarben in grün, die Farbe des Summenwertes in der Zusammenfassung (zu sehen im Bild auf der rechten Seite) auf blau-violett und die Schriftgröße aller List-Items auf 10px abgeändert.
Gerne können Sie sich den Code kopieren und in Ihre eigene CSS-Datei einfügen. Hierfür eignen sich jegliche Editoren, in denen es möglich ist, die Datei Endung in ".css" abzuändern.
Zusätzlich wurde dieser Code nochmal als Beispieldatei im rechten Block als "custom.css.zip" angehängt. Diese ZIP-Datei beinhaltet bereits die fertige custom.css. Um diese nutzen zu können, muss diese lediglich heruntergeladen und im Anschluss entpackt werden. Wenn Sie nun die "custom.css" öffnen, sehen Sie den Code, der unten beigefügt wurde.
Haben Sie Ihre custom.css entsprechend abgeändert und den richtigen Klassen oder IDs zugeordnet, wird diese Änderung angewandt, sobald Sie die CSS-Datei im Medienverzeichnis hochgeladen haben.
apto-sidebar-summary .info-block span {
color: blueviolet;
}
button {
background: yellowgreen;
}
li {
font-size: 10px;
}Wichtig: sollte die Änderung, die Sie für eine Klasse/ID vorgenommen haben, nicht funktionieren, besteht noch die Möglichkeit hinter die Änderung ein "!important" zu setzen. Damit wird ausgedrückt, dass diese Änderung wichtig ist und über anderen Änderungen in derselben Klasse/ID stehen soll. Dieser Zusatz sollte jedoch wirklich nur als "letzter Ausweg" genutzt werden!
Beispiel mit "!important":
apto-header .mat-toolbar {
background-color: green !important;
}
Template der Produkte einzeln anpassen
- der Inhalt der "custom.css"-Datei ist nach Belieben gestaltbar
- hier können alle im Konfigurator enthaltenen Produkte, durch das ansteuern des jeweiligen Produkts als Klasse in der hochgeladenen CSS-Datei individuell angepasst werden. Hierzu muss man den Identifier des Produkts als Klasse in der Datei angeben
- den Identifier des jeweiligen Produkts findet man unter dem Menüpunkt: Katalog > Produkt > Produkt bearbeiten > in der Produktansicht steht der Identifier oben links
- somit kann man auf Wunsch auch Hintergrundbilder oder farbliche Änderungen bei den einzelnen Produkten hinterlegen
Custom css-Anpassung im Apto.ONE 2.1
Neuerung ab der Apto.ONE Version 2.1:
ab Version 2.1 muss aus technischen Gründen zusätzlich vor allen Anweisungen #shop-template-apto gesetzt werden. Diese muss am Anfang aller neuen Einträge stehen.
Also zum Beispiel:
#shop-template-apto .select-basket {
background: aqua;
}
Andernfalls greift die custom.css nicht und die Änderungen werden nicht sichtbar.