versuche nun schon seit geraumer Zeit den Konfigurator etwas farblich und grafisch zu personalisieren mit einer custom.css Datei bzw. den Content Snippets, welches nicht so recht gelingen möchte, weshalb ich euch einmal um Hilfe bitten würde.
Problem 1:
Farbanpassungen per custom.css Datei funktionieren überhaupt nicht:
möchte gerne die Farbe verschiedener Elemente wie Buttons oder des Hintergrundes des Konfigurators ändern. Dies wollte ich nach dieser Anleitung hier (Benutzerdefiniertes CSS (custom.css)) wie beschrieben über eine hochgeladene custom.css Datei erreichen…
habe dazu mit dem Standard Texteditor wie beschrieben eine CSS-Datei mit folgendem Code angelegt:
→ anschließend wurde im Backend unter dem Punkt Medien ein Unterordner apto mit einem weiteren Unterordner css angelegt
→ in den Unterordner namens css habe ich dann die Datei custom.css hochgeladen.
Leider färbte sich hier im Demo One Page Konfigurator nichts um.
→ nach diesem Fehlversuch habe ich anschließend per FTP die custom.css Datei in den Ordner web/public/assets/css hochgeladen…aber auch hier trat keine Änderung auf
Gibt es hier einen Fehler meinerseits? bzw. wo könnte der Fehler liegen?
Problem 2:
Möchte gerne die Logos per Content Snippets ändern… dies funktioniert auch mit einer eingefügten Bilddatei sehr gut… sobald ich aber neben dem „Aktiv“ auf „Html“ klicke, um ein Bild per HTML Code mit einer per HTML-Code definierten Breite x Höhe einfügen will…funktioniert gar nichts mehr…
kann ich überhaupt über den HTML Button so etwas realisieren? Für was ist der Menüpunkt HTML gedacht?
Es klingt aber nicht so, als wäre es die Anpassung die du haben wolltest.
Kennst du dich denn mit css aus? Du kannst immer im Browser in den Entwicklertools sehen, welche css Anweisung zu hinterlegen ist. Dort siehst du welche HTML Tags zur Verfügung stehen und welche css Anweisungen aktuell greifen. Du kannst auch in der Konsole erstmal deine Anpassungen machen und musst nicht jedes Mal die custom.css hochladen.
Ein wichtiger Hinweis. Du kannst Dateien nicht überschreiben. Wenn du eine neue custom.css hochladen willst, lösche die alte vorher.
Zu deinem 2. Anliegen.
Das ContentSnippet Logo ist so nicht gedacht. Da im Code nur die Bilddatei erwartet wird, bekommst du hier bei der Verwendung von HTML einen Fehler.
Die Logogröße kannst du über die Custom.css anpassen.
vielen Dank für deine nette und ausführliche Antwort! habe den Fehler nach langer Suche gefunden, warum bei einem korrekten Code und custom.css Datei keine Anpassungen vorgenommen wurden.
Der Fehler lag im Cache, bzw. beim aktualisieren des Internet-Browsers. Hatte die Seite immer neu geladen nachdem ich die custom .css datei aktualisiert hatte. Allerdings schien der Browser jedoch immer auf die ursprüngliche (noch normale) Datei zurück zu greifen.
Lösung: nach löschen des Browserverlaufs (inkl. Cache und gespeicherten Dateien/Formularen) und erneutem Laden der Seite wurde nun auch die Änderung korrekt dargestellt
Bezüglich CSS:
Genau. Möchte halt verschiedene Anpassungen vornehmen…und grobe CSS Kenntnisse sind vorhanden …
wo ich mir allerdings noch etwas schwer tue ist das erkennen der Namen eurer Classes, ID’s etc. um die Elemente gezielt anzusprechen… gibt es hier denn evtl. eine Liste/Documentation wie die Hauptelemente heißen?
habe es bereits wie du beschrieben hast über die Entwicklungstools versucht…ist aber etwas mühseelig…
da könnte man ja auch gleich in die passende style datei schreiben…
Mit dem Punkt „HTML“ hatte ich mir schon so in etwa gedacht…dachte nur das man evtl. Header oder Footer als eine Art kleine eigene HTML Seite gestalten könnte…
PS: Gibt es die Möglichkeit den Hintergrund des Konfigurators auch statt einer Farbe mit einem Bild/Muster gestalterisch zu füllen?
der Browsercache ist eine sehr nervige Fehlerquelle. Da bin ich ganz bei dir. Ich aktualisiere eine Seite schon nur noch mit Cache leeren. Gut das du es rausgefunden hast.
Danke für die ausführliche Fehlerbehebungsanleitung. Das hilft sicher auch anderen.
Eine Liste mit Html Ids und Klassen gibt es nicht, da der HTML Baum selbst die Liste ist.
Du musst ja auch nicht die selben Klassen oder Ids ansprechen, die bereits genutzt werden. Du musst nur mindestens so explizit sein, wie das css des Apto.ONE. Da die custom.css Datei als letztes eingelesen wird, überschreibt sie die vorherigen Befehle, sollten sie weniger genau sein.
Wenn du im Browser in den Entwicklertools das + Zeichen nutzt, in dem Element das du ändern willst, solltest du da auch weiter kommen. Die Entwicklertools werden dir die Klassen hinschreiben, welche dieses Element ansprechen.
Den Hintergrund kannst du als Farbe machen, oder mit background-image ein Bild hinterlegen. Das Bild würde ich dann in den Medienordner hochladen. Um weite Pfade zu sparen und auch für die Übersichtlichkeit, direkt in den apto/css Ordner.
werde mich wahrscheinlich einfach mal etwas durchprobieren und einarbeiten müssen mit den Befehlen…
könntest du mir evtl. aber doch noch einmal kurz erklären wie der korrekte Befehl zum ersetzen der Hintergrundfarbe gegen das Bild lautet? bzw. wo er rein muss?
hatte jetzt versucht über die custom.css mit dem Befehl:
vielen Dank für deine Antwort! und bitte entschuldige mein sehr spätes Feedback…das hat super geklappt mit dem Hintergrund… und der Konfigurator sieht dadurch schon ziemlich gut aus.
Gibt es denn auch die Möglichkeit das Seitenverhältnis/Abstand zwischen dem Vorschaubild und den Optionen anzupassen?
und noch eine letzte Frage…
da ich einen Konfigurator mit wirklich vielen Optionen im Dropdown-Stil erstellt habe…kann ich das Vorschaubild sozusagen er custom.css mitlaufen lassen… zur Zeit passiert es…das wenn viele Drop Downs ausgeklappt sind das Vorschaubild nicht mehr zu sehen ist…
Nochmals vielen Dank für deine Mühe!
Ihr habt wirklich hier einen tollen Konfigurator am Start!
ich hoffe du hattest auch ein schönes Osterfest.
Vielen Dank für dein positives Feedback. Es tut gut das zu hören. Darüber freuen wir uns sehr und es motiviert uns weiter am Apto.ONE zu arbeiten.
Einen Abstand zwischen Renderbild und Hintergrund darzustellen ginge durch eine kleinen Trick.
Ich nehme an, deine Bilder sind immer gleichgroß und nicht dynamisch. Falls die Bilder dynamisch generiert werden, meld dich nochmal, dann erkläre ich dir den Weg dazu.
Um aber einem statischen Bild einen gewissen Abstand zum Hintergrund zu geben, würde ich eine Sektion anlegen, diese ist versteckt und hat ein Element, welches „Default“ ausgewählt ist. Dieses Element hat nur ein Renderbild, welches den weißen Hintergrund hat. Welcher den Abstand von Renderbild zu Hintergrund abbildet. Die Layerposition ist die niedrigste, damit es keine wirklichen Renderbilder überschreibt. Somit würde immer ein weißes Bild hinter dem Renderbild liegen.
Alternativ kannst du auch deinem niedrigsten Layerbild, einfach den Rahmen mitgeben. Ohne dein Produkt zu kennen, schwierig zu sagen, was genau die bessere Wahl ist.
Das Vorschaubilds im OnePager:
Im Onepager kann nur eine Sektion gleichzeitig geöffnet sein, die bereits geöffnete Sektion wird geschlossen und die neue aufgeklappt. Ich weiß daher nicht genau was du meinst. Es ist aber nicht möglich oder aktuell angedacht daran Anpassungen vorzunehmen.
Eventuell ist ja die Step-By-Step Darstellung mehr was für deine Zwecke. Hast du dies mal probiert?
Viele Grüße und einen guten Start in die Woche.
Juliane
