StyleEdit 4: Was ist was?

Thema wurde von Anonymous, 29. Mai 2020 erstellt.

  1. Anonymous
    Anonymous Erfahrener Benutzer
    Registriert seit:
    30. Oktober 2015
    Beiträge:
    2.349
    Danke erhalten:
    573
    Danke vergeben:
    506
    Ich bin gerade im SE4 unterwegs bei Allgemein > Buttons.
    Ich steige bei diesen cryptischen Bezeichnungen nicht durch.

    upload_2020-5-29_21-51-44.png

    Wo oder was ist ein "Primär" Button?
    Welche Farbe ist "$btn-primary-bg"?

    upload_2020-5-29_21-52-54.png

    Wo oder was ist ein "Default" Button?
    Welche Farbe ist "$btn-default-color"?
    Welche Farbe ist "$btn-default-bg"?

    Wo finde ich was dazu? Wo finde ich "primary" oder "default" Buttons?
     
  2. barbara
    barbara G-WARD 2014-2020
    Registriert seit:
    14. August 2011
    Beiträge:
    35.657
    Danke erhalten:
    11.371
    Danke vergeben:
    1.616
    Die Primär-Farbe ist das, was als Hauptfarbe des Shops fest gelegt ist.
    (Grundlagen -> Allgemein)
    Der Primär-Button ist z.B. "Filtern", oder der "Anmelden" - Button in der Newsletter-Box,

    Der Default-Button ist z.B. in der Filterbox "Zurücksetzen", oder "weiter einkaufen" im Warenkorb.
    Dazu gehören aber auch die Button der Pagination (Listen / Kachelansicht, Filter, Anzahl der Artikel je Seite über den Artikeln in der Kategorie)

    Wo die Farbe definiert wird, weiß ich allerdings nicht. Man kann aber z.B. das "$btn-primary-bg" aber durch eigene Farb-Codes ersetzen.
     
  3. Anonymous
    Anonymous Erfahrener Benutzer
    Registriert seit:
    30. Oktober 2015
    Beiträge:
    2.349
    Danke erhalten:
    573
    Danke vergeben:
    506
    Gut.
    Zusammenfassend kann mal also sagen, dass man den Shop stundenlang per Try&Error durchforsten muss, um zu sehen, welcher Button als Primär oder Default definiert ist, weil es keinerlei aussagekräftige Dokumentation gibt.
     
  4. barbara
    barbara G-WARD 2014-2020
    Registriert seit:
    14. August 2011
    Beiträge:
    35.657
    Danke erhalten:
    11.371
    Danke vergeben:
    1.616
    Eigentlich ist das ganz einfach:
    Die Button "in den Warenkorb" oder "zum Artikel" sind extra
    Alles was eingibt / aktiviert / öffnet (Konto erstellen, Newsletter Anmeldung, Filter, Warenkorb ...) ist primär
    Alles was zurücksetzt oder abbricht ist default

    Und im SE fehlen noch die Submit / sekundär-Button.
    Das sind die zum Gutschein einlösen oder Suchen (im Header)
    Die erben die Hintergrundfarbe aus Allgemein -> Sekundär-Farbe
     
  5. Anonymous
    Anonymous Mitglied
    Registriert seit:
    3. Mai 2020
    Beiträge:
    11
    Danke erhalten:
    4
    Danke vergeben:
    16
    Das ist das Bootstrap Framework "eingedeutscht".

    War für mich als Entwickler etwas irritierend, aber nach ein paar Minuten hatte man das Prinzip verstanden.
    Im Endeffekt editiert du über den StyleEditor möglichst viele der builtin-Klassen. Rest machst du über custom CSS wie üblich. Sprich was ist Primär Button -> ".btn-primary" etc.

    Später bei der Theme-Entwicklung ist es wichtig zu wissen, was eine builtin klasse ist, was von Gambio hinzukommt und was von deinem Custom-Theme hinzukommt (dynamic theme CSS compilations). Die sind nicht so leicht ersichtlich, aber i.D.R. ist es aus dem Bootstrap, aus der Styleedit CSS und wenn nicht dann von dir ;-).