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.352
    Danke erhalten:
    11.198
    Danke vergeben:
    1.601
    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.352
    Danke erhalten:
    11.198
    Danke vergeben:
    1.601
    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:
    10
    Danke erhalten:
    4
    Danke vergeben:
    10
    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 ;-).