Die Schrift kommt immer von Ihrer Website
Das Plugin bringt keine eigene Schriftart mit und lädt auch keine nach. Es erbt die Schrift, die auf Ihrer Seite schon gilt.
Das hat zwei Gründe. Erstens sieht es so aus wie der Rest Ihrer Website, ohne dass jemand etwas einstellen muss. Zweitens wird nichts von einem fremden Server geladen, was sonst sofort eine Datenschutzfrage aufwirft.
Wollen Sie die Schrift ändern, ändern Sie sie an Ihrer Website. Das Plugin folgt. Die Größe einzelner Überschriften und des Preises können Sie trotzdem anpassen: unter Darstellung › Basis im Abschnitt Schriftgrößen.
Zwei Wege zu den Farben
Unter MG Connector › Einstellungen › Darstellung › Basis steht die Design-Quelle. Es gilt immer genau eine, nie beide.
- Design-Basis verwenden. Das Plugin nimmt ein festes Farbschema, das Sie darunter wählen. Die Voreinstellung und der Weg ohne Zusatzsoftware.
- ACSS-Variablen verwenden. Das Plugin erbt Ihr Design-System aus Automatic CSS. Das ist die feinste Lösung, wenn Sie damit arbeiten.
Die zweite Möglichkeit ist ausgegraut, solange das ACSS-Modul unter Erweiterungen nicht eingeschaltet ist. Steht darunter, dass ACSS erkannt, das Modul aber noch aus ist, schalten Sie es unter Erweiterungen ein.
Einstellungen › Darstellung › Basis: Hier legen Sie fest, ob das MG Connector Design-System oder Ihr eigenes Template die Detailseiten ausgibt. Darunter folgt die Preisspanne für die Empfehlungen.
Die Farbschemata
Bei der Design-Basis wählen Sie ein Schema:
- Gold. Die Voreinstellung.
- Monochrom. Schwarz und Weiß, sehr zurückhaltend.
- Blau.
- Grün.
- Grau. Neutral, ordnet sich jeder Seite unter.
Reicht keines, nehmen Sie Individuell und tragen Ihre eigenen Werte im Abschnitt Individuelle Farben ein. Die greifen ausschließlich in dieser Einstellung.
Am schnellsten kommen Sie zu einem stimmigen Bild, wenn Sie die Akzentfarbe Ihrer Website übernehmen. Sie steuert Preis, Plakette, Schaltflächen und Links.
Mit Automatic CSS
Ist ACSS als Quelle gewählt, setzt das Plugin seine eigenen Werte auf die Variablen Ihres Design-Systems. Ändern Sie dort eine Farbe, ändert sie sich hier mit.
Zwei Werkzeuge helfen beim Einrichten. Beide finden Sie unter MG Connector › Erweiterungen › Automatic CSS:
- ACSS-Settings importieren. Sie exportieren Ihre ACSS-Einstellungen und fügen sie hier ein. Beim Speichern leitet das Plugin daraus die Rückfallwerte ab, damit Vorschau und Rückfall Ihre echten Farben zeigen statt der Standardwerte. Der eingefügte Text wird nicht gespeichert. Schriften werden bewusst nicht übernommen.
- Token-Zuordnung. Eine Tabelle mit vier Spalten: der Token des Plugins, die CSS-Variable, auf die er zeigt, ein Rückfallwert und der Zweck. Variable und Rückfallwert sind frei änderbar. Die Zuordnung wirkt nur bei eingeschaltetem ACSS-Modul.
Die Token-Zuordnung ist auch die Antwort auf „mein Framework ist ein anderes”. Mit eingeschaltetem ACSS-Modul lässt sich jede Zeile auch auf Variablen eines anderen Aufbaus zeigen. Und wo eine Variable fehlt, greift der Rückfallwert, statt dass die Farbe ausfällt.
Eine einzelne Farbe stimmt nicht
Gehen Sie in dieser Reihenfolge vor:
- Finden Sie in der Token-Tabelle die Zeile, um die es geht. Die Beschreibung daneben sagt, wo der Wert wirkt, zum Beispiel „Akzent: Preis, Badge, Buttons, Links”.
- Bei ACSS: Tragen Sie in der Spalte CSS-Variable die richtige Variable ein.
- Als Sicherheitsnetz bei ACSS: Tragen Sie in der Spalte Fallback den Farbwert direkt ein.
- Ohne Automatic CSS wählen Sie unter Darstellung › Basis das Farbschema Individuell und tragen die Farbe dort ein. Die Token-Zuordnung wirkt nur bei eingeschaltetem ACSS-Modul.
- Speichern, dann den Seiten-Cache leeren und in einem privaten Fenster nachsehen.
Das Farbfeld in der Tabelle zeigt im Backend immer den Rückfallwert, weil die Variablen Ihres Frameworks nur im Frontend geladen sind. Beurteilen Sie das Ergebnis deshalb auf der Website, nicht in der Einstellung.
Betrifft die Farbe nur eine Kartenvorlage, passen Sie sie unter Darstellung › Listenansicht über das Stift-Symbol an dieser Karte an. Leere Felder nutzen die Standardwerte. Eintragen können Sie eine ACSS-Variable oder eine Farbe.
Der Abstand zum Header
Gehört technisch zur Darstellung und kommt bei fast jeder Seite mit festem Header einmal auf. Unter Darstellung › Basis gibt es dafür den Abschnitt Header und Seitenanfang. Er gilt zentral für alle Seiten des Plugins.
Sie stellen ein, wie sich Ihr Header verhält (Header-Verhalten) und wie hoch er ist (Header-Höhe), dazu den Abstand oben am Seitenanfang. Daraus berechnet das Plugin zwei verschiedene Werte:
- Der Abstand am Seitenanfang. Damit der Inhalt nicht unter einem überlagernden Header verschwindet.
- Der Abstand beim Springen. Klickt jemand auf einen Link zu einem Abschnitt, scrollt der Browser die Zielüberschrift genau an den oberen Rand, also unter den Header. Dieser Wert schiebt sie darunter hervor.
Die Tafel „So rechnet das Plugin gerade“ zeigt beide Werte. Den Abstand beim Springen tragen Sie nicht selbst ein, er ergibt sich aus Header-Höhe und Header-Verhalten.
Wenn eine Farbe gar nicht greift
- Steht die Design-Quelle auf ACSS, obwohl Sie das feste Schema meinen? Die beiden schließen sich aus. Ist ACSS gewählt, wirkt das Farbschema nicht.
- Haben Sie „Individuell” gewählt? Die individuellen Farben greifen nur in dieser Einstellung.
- Überschreibt Ihr Theme? Manche Themes setzen Farben mit sehr hoher Gewichtung. Dann gewinnt das Theme.
- Cache. Farben stehen in einer CSS-Datei, und die liegt gern im Zwischenspeicher. Leeren und in einem privaten Fenster prüfen.
Nicht weitergekommen?
Schreiben Sie uns, woran es hängt. Wir antworten persönlich und ergänzen die Anleitung, wenn etwas fehlt.
Frage stellen