Zum neuen Design wechseln

Design (theme) installieren

Auf der Design-Übersichtsseite (/admin/appearance) werdet ihr zunächst feststellen, dass OpenCulturas Next noch nicht installiert werden kann, weil es bestimmte Module benötigt. Danach braucht ihr nicht zu suchen, sie sind schon im System und müssen nur aktiviert werden.

1. Rufe Erweitern (/admin/modules) auf und hake Block Group, Layout Builder Component Attributes, Layout Options an. Klicke Installieren und bestätige (Layout Builder wird der Liste automatisch hinzugefügt).
2. Wechsle zur Design-Übersichtsseite, suche dort OpenCulturas Next und klicke Installieren. Wichtig: auf einer Live-Website wie bei Managed OpenCulturas, wähle nicht “Installieren und als Standard festlegen”. 

Das mit dem Standard kommt ein bisschen später.

Designentscheidungen: OpenCulturas Next konfigurieren

Angenommen, ihr habt bereits euer Logo für das bisherige Design OpenCulturas Base hochgeladen, kannst du jetzt einfach den Dateipfad von dort kopieren.

Logo

Deaktiviere den Schalter „Das vom Theme bereitgestellte Logo verwenden” und füge den kopierten Logo-Pfad (einschließlich Dateiname) ein. Alternativ kann hier ein anderes Logo hochgeladen werden.

Favicon

Ähnlich verfährst du mit dem Favicon (dem Symbol, das oben im Browser-Tab neben dem Titel angezeigt wird). Schalter deaktivieren, Pfad/Dateiname einfügen oder Datei hochladen.

Hintergrundbild

Wie im bisherigen Design kann hier entschieden werden, ob ein Bild hinter dem Inhaltsbereich die Browserhintergrundfläche füllen soll. Es gibt nach wie vor die Optionen Globales Bild, Hauptbild des jeweiligen Inhalts verwenden - oder keins zu setzen.

Hero-Layout

Neu in OpenCulturas Next: Du kannst jetzt entscheiden, wie der Seitenkopf layoutet sein soll. Beispiele findest du im Artikel über das neue Design.

Layout-Builder

Dies ist ein wichtiger Schritt: 

This is an important step: Klappe beide Unterbereiche auf und aktiviere Layout-Builder für alle aufgelisteten Entitäten! Andernfalls zieht eure Plattform wenig Vorteile aus den verbesserten Layouts, die mit dem neuen Design bereitgestellt werden.

Es ist nach dem Speichern immer noch möglich, das klassische Layout wiederherzustellen, wenn euch das fallweise lieber ist.

Jetzt Konfiguration speichern.

Ein paar weitere Schritte braucht's noch, um das neue Design als Standard zu setzen. Danke für deine Geduld. Immerhin: wer schafft schon ein Redesign innerhalb weniger Stunden.

Textlastige Seiten fit machen

Mit Sicherheit habt auch ihr ein paar Seiten, die vorwiegend Text und kaum Layoutelemente enthalten. Typischerweise Impressum, Datenschutzerklärung & Co. Solche Seiten würden im neuen Design unausgewogen aussehen, aber es gibt eine einfache Einstellmöglichkeit, um das Problem zu lösen. 

Gehe zur Inhaltsübersichtsseite (/admin/content) und filtere nach dem Inhaltstyp: Einfache Seite. Übersichtsseiten wie Kalender, Orte oder Magazin kannst du ignorieren. Ebenso Seiten, die mit Bausteinen wie dem Container-Abschnitt oder Teaser-Container gestaltet wurden.

1. In der jeweiligen Tabellenzeite Bearbeiten klicken. Bei mehrsprachigen Inhalten achte darauf, die Originalversion zu bearbeiten. 
2. Öffne die Sektion Administrativ in der Seitenleiste. 
3. Setze das Feld Layoutschalter auf Textlastige Seite.
4. Speichern.

Dadurch wird der ganze Inhaltsblock in breiten Browserfenstern optisch zentriert. Diese Einstellung kann auch schon lange vor der Umstellung auf das neue Design vorgenommen werden; Textlastige Seite hat keine Auswirkung im OpenCulturas-Base-Design.

Farben anpassen

1. Geh zu den CSS-Injektoren (/admin/config/development/asset-injector/css)
2. Beim Eintrag OpCulturas Next CSS overrides, nutze den Dropbutton zum Duplizieren, gib der Kopie einen individuellen Namen (idealerweise unter Verwendung des Namens eurer Website)
3. Aktiviere und bearbeite euren CSS-Injektor

Ja, das sind eine Menge Möglichkeiten. Wir fokussieren uns hier auf die Wichtigsten, die euer individuelles Aussehen maßgeblich ausmachen:

• --oc-color-link
• --oc-color-interaction

Setze Farbcodes aus euren Hausfarben ein und achte bitte darauf, dass es eine Farbstufe ist, die genügend Kontrast zum hellen Hintergrund hat. Dadurch erhaltet ihr die Barrierefreiheit, die OpenCulturas mitbringt.

Die Hauptfarbe color-primary in Zeile 32 kommt selten zum Einsatz, hauptsächlich zum Einfärben der Kartenmarkierungen (die ihr aber auch separat anders färben könnt). Hier kann sinnvollerweise die Hauptfarbe eurer Marke eingetragen werden. Die Sekundärfarbe color-secondary wird vom Basisdesign nicht benutzt. Wenn ihr eine Sekundärfarbe habt und diese wiederverwendbar zur Hand haben wollt, kannst du hier den Farbcode eintragen.

Die Akzentfarben (--oc-color-accent-*) werden vorwiegend in Farbverläufen eingesetzt, z. B. wenn du den Hintergrund eines Abschnitt mit dem Stil „Lebhaft” einfärbst. Die Hintergrundverlaufstypen wiederum kannst du im Bereich ab Zeile 85 separat ändern. In Zeile 95 besteht die Möglichkeit, dem Stil „Lebhaft” statt des Block-Verlaufs einen weichen Verlauf zu geben: --oc-color-gradient-smooth statt --oc-color-gradient-blocks.

Dark-Mode: Farben und Logo

Im CSS-Injektor ab ca. Zeile 170 beginnt der Abschnitt für die Dark-Mode-Farben. Lege den Fokus auf die Farben, die du oben bereits geändert hast und trage hier korrespondierende Farben ein. Achte auch hier auf genügend Kontrast zu dunklen Hintergründen.

Für das Logo im Darkmode findest du Schritt-für-Schritt-Anweisungen ab Zeile 219. Bearbeite diesen Part und entferne die Auskommentierungsmarken (/* vor und */ nach den einzelnen Schritten). Andernfalls würde im Dark-Mode das OpenCulturas-Logo auftauchen.

Optional: Weitere Designelemente anpassen

Hier sind ein paar Beispiele. 

Teaserstile

Wenn euch das Standard-Teaserdesign nicht gefällt, findet ihr im CSS-Injektor ab Zeile 318 jede Menge Optionen. Bitte beachtet dabei, dass die Rahmenlinie (border) nicht auf 0 gesetzt werden sollte (sonst schlagen ein paar automatische Berechnungen fehl). Die Rahmenlinie sollte mindestens auf 1px gesetzt werden; die Rahmenfarbe kann dann auf transparent gesetzt werden.

Die Teaserstile gelte für alle Teaser mit folgenden Ausnahmen: für Profilteaser und Ortsteaser gibt es ein paar separate Einstellmöglichkeiten.

Profilbilder

• Ihr wollt keine runden Profilbilder? Setze --oc-profile-image-border-radius auf 0 in Zeile 300.
• Ihr wollt keine visuelle Unterscheidung zwischen Profilen und Orten? Es gibt eine dedizierte Radiuseinstellung für Orte in der darauffolgenden Zeile: --oc-location-image-border-radius

Hintergrundfarben

Ab Zeile 86 könnt ihr ein paar charakteristische Hintergrundfarben setzen:

• --oc-color-bg-page = Hintergrund des Inhaltsbereichs
• --oc-color-bg-neutral-canvas = Browserfläche hinter dem Inhaltsbereich (sichtbar wenn ihr kein Hintergrundbild setzt). Die Farbe wird mit etwas Transparenz gemischt auch verwendet, um das Hintergrundbild „einzufärben”.

Viel Spaß beim Entdecken weiterer Optionen!

Um Doppelungen mit dem OpenCulturas-Basis-CSS zu vermeiden, empfehlen wir zum Abschluss, dass ihr alles auskommentiert (mit den Kommentarmarken /* */), was ihr nicht geändert habt. Das hilft auch beim späteren Überblick, wo ihr Änderungen vorgenommen hattet.

Überschriftenstile

Vielleicht sind euch die Beispiele im Abschnitt über die Schrift im neuen Design aufgefallen.

Es gibt vorbereitete Schriftstärken, die ihr verwenden könnt:

// Generic font weights
--oc-font-weight-light: 300;
--oc-font-weight-normal: 400;
--oc-font-weight-medium: 500;
--oc-font-weight-semi-bold: 600;
--oc-font-weight-bold: 700;
--oc-font-weight-extra-bold: 820;
--oc-font-weight-black: 900;

// Font weights globally set
--oc-font-weight-teaser-subtitle: var(--oc-font-weight-semi-bold);
--oc-font-weight-label: var(--oc-font-weight-semi-bold);

Diese können beispielsweise verwendet werden, um für den Seitentitel eine extradünne Schrift oder eine extrafette für die Teaser-Titel zu setzen:

h1 {
  font-weight: var(--oc-font-weight-light);
}

h3.teaser--title {
  font-weight: var(--oc-font-weight-black);
}

Kartenmarkierungen

Seit OpenCulturas 2.6 habt ihr die Option, eine eine einzige Bildquelle für alle Kartenmarkierungen zu setzen. Abhängig von eurer Entscheidung gibt es drei Wege, das Aussehen anzupassen.

In jedem Fall denkt bitte daran, dass die Cluster-Markierungen standardmäßig die Primärfarbe der Website verwenden. Diese Farbe kann in Zeile 165 geändert werden: --oc-color-bg-cluster-icon. 

Option 1: Standard-Markierung verwenden

Das Icon im Modul wird möglicherweise in einer künftigen Verseion geändert, aktuell ist es noch purpurfarben. Ihr könnt mit den CSS-Filter-Werten experimentieren, um die gewünschte Farbe zu finden (siehe Option 2).

Option 2: Das Marker-Icon von OC Next verwenden

1. Gehe zu den OpenCulturas-Map-Einstellungen (/admin/config/content/openculturas_map)
2. Deaktiviere den Schalter „Das vom Modul bereitgestellte Icon verwenden” und füge folgenden Pfad ein: /profiles/contrib/openculturas-distribution/profile/themes/opcult/images/map_marker.svg Die Grundfarbe dieses Icons ist schwarz, was es deutlich vereinfacht, dieses mit der Wunschfarbe einzufärben.
3. Notiere den gewünschten Farbcode und nutze ein Tool wie z. B. posstack.com/css-color-filter-generator/ zum Erzeugen der Filter-Werte.
4. Gehe zu eurem CSS-Injektor und füge den Wert (brightness, saturate, hue-rotate etc.) als ganzes in Zeile 164 ein. Stelle sicher, dass nicht zusätzlich filter: in diesem Wert steht!
5. In einem weiteren individuellen CSS-Injektor (“Individuelle Anpassungen”) oder ganz am Ende vom gegebenen CSS-Injektor füge folgende Zeilen ein:

img.leaflet-marker-icon {
 mask-position-y: 0;
}

Option 3: Eigenes Marker-Icon verwenden

1. Gehe zu den OpenCulturas-Map-Einstellungen (/admin/config/content/openculturas_map)
2. Deaktiviere den Schalter „Das vom Modul bereitgestellte Icon verwenden” und lade euer eigenes Icon hoch. Damit die Abmessungen der Grafik ausgelesen werden können, speichere jetzt und fahre dann mit den Einstellungen fort. Stelle sicher, dass die ausgelesene Breite und Höhe nicht viel mehr als 32 Pixel betragen.Falls doch, reduziere die Werte proportional.

Falls das hochgeladene Icon bereits in der gewünschten Farbe kommt, setze die Einfärbung wie folgt zurück (siehe auch Schritt 5 oben):

img.leaflet-marker-icon {
  filter: unset;
  mask-image: none;
}

Wenn du hingegen eine schwarze Grafik hochgeladen hast und diese einfärben möchtest, setzt du nur das mask-image zurück:

img.leaflet-marker-icon {
  mask-image: none;
}