Manchmal reichen die Standardfunktionen von Elementen einfach nicht aus. Vielleicht möchtest Du dem Slider zusätzlichen Glanz verleihen, oder der Stil Deiner Webseite legt nahe, dass der Hintergrund des Tabs-Elements gut eine Textur vertragen könnte?

Heute zeige ich Dir, wie Du eigene, wiederverwendbare Stilvorlagen für Upfront-Elemente erstellst, und stelle Dir Code-Snippets zur Verfügung, mit denen Du eigene Anpassungen vornehmen kannst.
Du wirst sehen, wie Upfront die CSS-Bearbeitung Deines Themes grundlegend verändert: Änderungen werden direkt im Kontext vorgenommen und das Layout wird dynamisch aktualisiert, um diese sofort widerzuspiegeln. Dank des direkten Feedbacks zu Deinen Eingaben wird die Erweiterung Deines Themes mittels CSS erstaunlich einfach.
Dies ist der vierte Beitrag unserer Serie zur Einführung in Upfront. Wir passen ein bestehendes Upfront-Theme – in diesem Fall „Spirit“ – an und verwandeln es in eine völlig neue Webseite, komplett mit eigenem Branding, Bildern, individuellen Schriftarten und responsivem Layout.

Im Verlauf dieser Serie zeigen wir Dir anhand zahlreicher Beispiele, wie Du Upfront nutzt:
Teil 1: Die Grundlagen, Themenfarben und Typografie
Teil 2: Strukturieren Deiner Webseite mit Regionen
Teil 3: Gestalte Deine Webseite mit Elementen
Teil 4: Elemente und benutzerdefinierten Code optimieren
Teil 5: Plugins hinzufügen und Powerform-Formulare gestalten
Teil 6: Responsive Webseiten erstellen
Teil 7: Arbeiten mit Seiten und Beiträgen

Wir nehmen das „Spirit“-Theme, überarbeiten dessen Bereiche und Inhalte grundlegend und wandeln es in ein Produkt-Theme um – inklusive eigenem Branding, Farben, Schaltflächen, Bildern, Typografie, Newsletter-Anmeldeformular und weiteren Elementen.

Bislang haben wir in dieser Serie die Theme-Farben aktualisiert, benutzerdefinierte Schriftarten hinzugefügt, Bereiche gelöscht, das Header-Bild aktualisiert und einen Videobereich über die volle Breite eingefügt. Hier ist ein Überblick über unsere bisherigen Fortschritte:

– Links unser Fortschritt. Rechts das, worauf wir hinarbeiten.

Anpassung von Elementen mit individuellem CSS

Beginnen wir damit, einige unserer bestehenden Theme-Styles (zwei Blockquote-Varianten und Link-Stile) zu optimieren, indem wir das Code-Element für eine horizontale Trennlinie nutzen; anschließend fügen wir unseren Buttons, Bildunterschriften und Galerie-Thumbnails animierte Übergänge hinzu.
In diesem Beitrag verwende ich der Übersichtlichkeit und Benutzerfreundlichkeit halber CSS-Eigenschaften ohne Präfixe. Ich empfehle jedoch dringend, einen Dienst wie Pleeease zu nutzen, um Präfixe automatisch zu generieren und die Browserkompatibilität Deines Codes sicherzustellen. Füge dazu einfach Deinen Code ohne Präfixe in das linke Feld ein und kopiere das Ergebnis aus dem rechten Feld.

Optimierung unserer globalen Typografie

Bislang konnten wir die Typografie in dieser Upfront-Serie nur über Theme-Einstellungen > Typografie anpassen.
Meist reicht das aus, um die grundlegende typografische Struktur festzulegen. Wir wollen jedoch noch einen Schritt weiter gehen. Aktuell verwenden unsere Blockzitate zwar die gewünschten Schriftarten und Farben, aber das „Anführungszeichen“-Symbol aus dem Spirit-Theme ist weiterhin vorhanden.
Lass uns mithilfe von individuellem CSS eigene Stile für Blockzitate erstellen. Klicke in der Seitenleiste unter Theme-Einstellungen > Typografie auf Individuelle CSS-Regeln hinzufügen. Daraufhin öffnet sich am unteren Bildschirmrand ein Code-Bereich mit zusätzlichen CSS-Regeln, die im Spirit-Theme verwendet werden. Die Zeilen 12 bis 34 sind für die Gestaltung der Blockzitate zuständig. Löschen wir diese und fügen stattdessen unseren eigenen Code ein:

blockquote {
background:#ufc3;
padding:30px;
border-radius:5px;
position:relative;
margin:20px 0 40px;
}
blockquote.upfront-quote-alternative {
background:none;
border-left:3px solid #ufc3;
border-radius:0;
padding:5px 15px;
margin-left:15px;
}
blockquote.upfront-quote-alternative:before, blockquote.upfront-quote-alternative:after {
display:none;
}

Das ist ziemlich einfaches CSS, aber was hat es mit diesem `#ufc3`-Ding auf sich? Das ist kein gültiger Hexadezimal-Farbwert, wirst du vielleicht sagen – und damit hättest du vollkommen recht.
Tatsächlich ist `#ufc3` eine integrierte Upfront-Variable. Sie ermöglicht es mir, innerhalb des Code-Elements jene Theme-Farben zu verwenden, die wir im ersten Artikel dieser Serie definiert haben.
Die Farbvariablen reichen von 0 bis 9; um also die erste definierte Theme-Farbe anzusprechen, verwendet man `#ufc0`, für die zweite `#ufc1` und so weiter. Der übrige Code ist Standard. Upfront bietet zwei Blockquote-Stile an: Wir nutzen den `blockquote`-Selektor für den ersten Stil und `blockquote.upfront-quote-alternative` für die alternative Variante.
Jetzt zeige ich dir einen kleinen CSS-Trick, damit unser erstes Blockquote eher wie eine Sprechblase aussieht. Füge den folgenden Code zu deinen Blockquote-Styles hinzu:

blockquote:after {
content:'';
width: 0;
height: 0;
border: 0 solid transparent;
border-left-width: 9px;
border-right-width: 0px;
border-top: 10px solid #ufc3;
position:absolute;
bottom:-10px;
left:45px;
}

Hier verwenden wir `:after` – ein Pseudoelement, das ein äußerst mächtiges Werkzeug in deinem CSS-Repertoire darstellt. Es gibt einen hervorragenden Artikel von Chris Coyier über die tollen Dinge, die sich mit Pseudoelementen anstellen lassen.

Nachdem wir nun unsere Blockzitate gestaltet haben, wollen wir etwas Code hinzufügen, um unsere Inline-Links ein wenig interessanter zu gestalten:

Stil Eins

/* border bottom grows into box */
p a {
position:relative;
}
p a:after {
content:'';
height:2px;
width:100%;
background-color:#ufc2;
position:absolute;
left:0;
bottom:0;
z-index:-1;
transition:height .1s linear;
opacity:.2;
}
p a:hover:after {
height:100%;
}

Stil Zwei

/* box effect — from large to regular */
p a {
position:relative;
}
p a:after {
content:'';
height:100%;
width:100%;
background-color:#ufc2;
position:absolute;
left:0;
bottom:0;
z-index:-1;
transform:scale(1.5);
opacity:0;
transition:all .1s linear;
}
p a:hover:after {
transform:scale(1.1);
opacity:.2;
}

Stil Drei

/* box effect — in reverse */
p a {
position:relative;
}
p a:after {
content:'';
height:100%;
width:100%;
background-color:#ufc2;
position:absolute;
left:0;
bottom:0;
z-index:-1;
transform:scale(1);
opacity:.2;
transition:all .1s linear;
}
p a:hover:after {
transform:scale(1.5);
opacity:0;
}

Stil Vier

p a {
position:relative;

}
p a:after {
content:'';
height:3px;
width:0%;
background-color:#ufc2;
position:absolute;
left:0;
bottom:0;
z-index:-1;
opacity:.1;
transition:width .1s linear, opacity .1s linear;
}
p a:hover:after {

opacity:.5;
}

Wie Du siehst, lässt sich die Standard-Typografie mit nur wenigen Zeilen Code erheblich aufwerten.
Das Tolle an dieser Art von Erweiterbarkeit ist, dass sie es Dir ermöglicht, den Code anderer zu übernehmen und auf Deiner eigenen Webseite zu nutzen. Hier ist eine hervorragende Webseite, die ich entdeckt habe und die einige inspirierende Beispiele für das Styling von Inline-Links bietet.

Anpassung der Elemente in UpFront

Genau wie bei der globalen Typografie bietet UpFront die Möglichkeit, tiefer ins Detail zu gehen, das Erscheinungsbild von Elementen individuell anzupassen und diese Änderungen als wiederverwendbaren Stil zu speichern. Diesen Stil kannst Du anschließend überall auf Deiner Webseite auf Elemente desselben Typs anwenden.

Lass uns dies anhand eines animierten Button-Stils genauer betrachten:

Ziehe ein neues Button-Element auf Deinee Webseite, öffne die Einstellungen und erstelle eine neue Voreinstellung (Preset). Ich nenne meine Voreinstellung `NoFill`.
Versehen wir diesen Button mit einem 3 Pixel breiten Rahmen und wählen eine unserer Theme-Farben dafür aus (ich habe mich für Grün entschieden; bei mir ist das der Farbcode `#ufc0`). Außerdem habe ich den Hintergrund transparent gestaltet und den Button-Text in derselben Farbe gehalten, die wir zuvor verwendet haben.
Für den Hover-Zustand (wenn man mit der Maus darüberfährt) habe ich alle Werte beibehalten, aber die Textfarbe des Buttons auf Weiß geändert. Bevor wir fortfahren, klicken wir auf OK und speichern das Layout (denke immer daran, Deinen Fortschritt zu speichern!).

Im Moment haben wir lediglich einen Button, dessen Textfarbe sich beim Überfahren mit der Maus ändert. Jetzt fügen wir das gewisse Etwas hinzu. Gehe zurück in die Einstellungen, die gerade erstellte Voreinstellung sollte bereits ausgewählt sein. Öffne den Bereich CSS Styles & Anchor Settings (CSS-Stile & Anker-Einstellungen) unten im Einstellungsfenster und klicke auf add new style (neuen Stil hinzufügen). Daraufhin erscheint am unteren Rand des Browsers ein bekanntes Code-Fenster. Du wirst feststellen, dass dieses Fenster – im Gegensatz zum Bereich für globales Theme-CSS – auf der linken Seite einen Abschnitt mit der Bezeichnung Available element selectors: (Verfügbare Element-Selektoren) enthält. Dieser Abschnitt ist für alle Elemente vorhanden und soll Dich beim Styling unterstützen, indem er die passenden CSS-Selektoren für das jeweilige Element anzeigt.

Auch hier werde ich nicht auf die Details eingehen; füge einfach den Code aus dem untenstehenden Snippet in Deinen Code-Bereich ein, vergib einen Namen für den Stil (ich habe mich für „hover-effect“ entschieden) und klicke auf Speichern.

Fahre nun mit der Maus über den Button; du wirst sehen, dass er jetzt einen Animationseffekt aufweist. Ziemlich cool, oder? Falls der Rahmen nicht in der von dir gewählten Farbe erscheint, kannst du dies im Code (Zeile 8, `background-color:#ufc0;`) anpassen – entweder durch deine gewünschte Farbvariable oder durch eine beliebige andere Farbe.

Hinzufügen einer Animation zur Bildunterschrift des Bildelements

Lass uns versuchen, eine Bildunterschrift zu animieren:

Füge deinem Layout ein Bildelement hinzu und lade entweder ein neues Bild hoch oder wähle eines aus dem Medienmanager aus.
Fahre anschließend mit der Maus über das Bild, um ein zusätzliches Bedienfeld einzublenden. Klicke auf die dritte Option,  Caption Position (Position der Bildunterschrift), und wähle die vierte Option,  Covers Image Middle (Überdeckt Bildmitte). Gib nun etwas Text ein – ein paar Zeilen genügen. Die Hintergrundfarbe der Bildunterschrift lässt sich in den Element-Einstellungen anpassen. Du kannst auch einstellen, dass die Bildunterschrift nur „On Hover“ (beim Überfahren mit der Maus) angezeigt wird; für den Moment empfehle ich jedoch, die Einstellung so zu belassen, damit wir sehen, was wir tun, während wir den Code hinzufügen (außerdem wird der Code, den wir gleich einfügen, ohnehin dafür sorgen, dass die Bildunterschrift nur beim Überfahren mit der Maus sichtbar ist).

Gehe zum Bereich für CSS-Styles, erstelle einen neuen Style und füge den Code aus dem folgenden Snippet ein:

.upfront-image .wp-caption div {
padding:30px;
}
.upfront-image .wp-caption {
transform:translate(50px,50px);
opacity:0;
transition:all .2s cubic-bezier(0,1.07,1,1.25);
}
.upfront-image:hover .wp-caption {
transform:translate(-10px,-10px);
opacity:1;
}

Speichere nun deinen Stil (ich habe meinen „caption-transform“ genannt) und sichere anschließend das Layout. Du solltest den Effekt sehen können, sobald du mit der Maus über das Bild fährst. Nicht schlecht, oder?
Dir wird auffallen, dass wir im CSS keine Farben verwendet haben; das bedeutet, dass du den Hintergrund und die Schriftfarbe der Bildunterschrift weiterhin über die Element-Einstellungen und die Textbearbeitungsfunktionen anpassen kannst. So kannst du verschiedene farbige Bildunterschriften erstellen, die alle dieses Verhalten nutzen.
Du wirst sehen, dass ich meine Bildunterschrift so versetzt habe, dass sie 10 px oberhalb und links vom eigentlichen Bild beginnt. Das war meine persönliche stilistische Entscheidung. Wenn du die Bildunterschrift lieber direkt über dem Bild platzieren möchtest, musst du Zeile 10 von `transform:translate(-10px,-10px);` in `transform:translate(0px,0px);` ändern.

Hinweis: Vergiss nicht, das CSS durch das zuvor erwähnte Pre-Fixing-Tool laufen zu lassen. Normalerweise schreibe ich mein CSS in Upfront ohne Präfixe, und sobald ich mit dem Ergebnis zufrieden bin, lasse ich es durch das Tool laufen. Für mich ist das der effizienteste Weg, um sicherzustellen, dass mein CSS korrekt ist.

Hinzufügen dezenter Effekte zum Galerie-Element

Ich möchte, dass meine Vorschaubilder standardmäßig etwas weniger deckend sind und beim Überfahren mit der Maus voll deckend werden sowie heranzoomen.
Ich habe meinen Stil „gallery-hover“ genannt und den folgenden CSS-Code hinzugefügt:

.ugallery {
backface-visibility: hidden;
}
.ugallery_item img {
transform:scale(.95);
opacity:.8;
transition:transform .1s linear, opacity .1s linear;
}
.ugallery_item:hover img {
transform:scale(1);
opacity:1;
}

Und so sieht das Hinzufügen des Codes in Upfront in der Praxis aus:

Anpassung des Stils der Navigation an unser Theme-Design.

Im vorherigen Beitrag dieser Reihe UpFront – Layout der Website mit Elementen haben wir das Erscheinungsbild der Navigation im Header auf ein vertikales Layout umgestellt, sind jedoch nicht näher auf deren weitere Anpassung eingegangen.
Ich habe einen neuen Stil für meine Navigation mit dem Namen `parrot-main-nav` erstellt und den folgenden CSS-Code hinzugefügt, um sie an mein Design anzupassen:

.upfront-navigation {
padding-top:0px;
}
div[data-style='horizontal'] ul.menu > li.menu-item > a, div[data-style='vertical'] ul.menu > li.menu-item > a {
color:#fff;
font:300 15px/15px 'Open Sans', Helvetica, Arial, sans-serif;
padding:10px 0px 5px;
}
div[data-style='horizontal'] ul.menu > li.menu-item:hover > a, div[data-style='vertical'] ul.menu > li.menu-item:hover > a {
color:#ufc0;
}

Ich habe lediglich einen sehr einfachen Farbwechsel beim Überfahren mit der Maus (Hover-Effekt) eingebaut, aber angesichts der Beispiele, die ich zuvor gezeigt habe, lasse Dich gerne zu eigenen Experimenten inspirieren!

Das Code Element

Abschließend möchte ich kurz auf das Code-Element eingehen. In unserem Design verwenden wir sehr dezente, einzeilige Trennlinien. Solche Linien lassen sich auf verschiedene Weise realisieren – etwa durch die Verwendung von Bildern oder durch das Zuweisen eines unteren Rahmens (`border-bottom`) an das vorhergehende Element. Meiner Meinung nach ist es jedoch am einfachsten, das Code-Element zu nutzen und die Linien selbst zu erstellen.
Füge dazu ein Code-Element in Dein Layout ein und wähle die Option Write Custom Code (Eigenen Code schreiben). Du wirst feststellen, dass der bereitgestellte Code-Bereich nun Optionen für HTML, CSS und JS bietet. Das bedeutet, dass Du UpFront um vielfältige, individuell programmierte Funktionen erweitern kannst – vorausgesetzt, Du verfügst über entsprechende Programmierkenntnisse.
In späteren Artikeln werde ich verschiedene Möglichkeiten vorstellen, wie sich das Code-Element nutzen lässt, um den Funktionsumfang Ihrer Themes zu erweitern. Für den Moment beschränke ich mich jedoch auf das Wesentliche und verwende nur die HTML- und CSS-Bereiche.

Füge den folgenden Code in den HTML-Bereich ein:

<hr class="ps-divider">

Füge anschließend diesen Code in den CSS-Bereich ein (und wähle dabei eine Farbe deiner Wahl):

.ps-divider {
border: 0;
border-top: 1px solid #ddd;
margin: 20px 0;
}

Klicke im Code-Bereich auf Save (Speichern), schließe ihn und speichere Dein Layout. Solltest Du weitere Trennlinien in Deinem Layout benötigen, kannst Du mit der rechten Maustaste auf das Code-Element klicken und es duplizieren.

Zusammenfassung

In diesem Beitrag haben wir gesehen, dass sich in Upfront so gut wie alles mit nur wenigen Zeilen CSS anpassen lässt. Zudem habe ich die Flexibilität der Plattform sowie die großen Vorteile der Live-Code-Bearbeitung demonstriert, die Upfront bietet. Wir haben außerdem gelernt, wie man CSS-Animationen zu Galerie-, Bild- und Button-Elementen hinzufügt, mit der Gestaltung von Links und Blockzitaten experimentiert und mithilfe des Code-Elements einen eigenen Trennstrich erstellt. Upfront ist ein hervorragendes Werkzeug für alle, die gerade erst programmieren lernen; wer sich jedoch bereits auskennt, dem sind bei der Umsetzung eigener Ideen praktisch keine Grenzen gesetzt.

Lies den nächsten Beitrag dieser Reihe: Teil 5: Plugins hinzufügen und PowerForms gestalten