Vorlage Awesome - Variante Groovy: Ändern der Hintergrundfarbe des Date-Header

Die Farbe hinter dem Tagesdatum über den Posts kann man per CSS nicht ansehnlich ändern, wenn man nicht auch das Hintergrundbild austauscht, das dort wirksam ist.

---

Original-Date-Header:

Der Date-Header hat ein Hintergrundbild. Der obere Bereich des Bildes ist teiltransparent farbig, der untere Teil des Bildes ist links und rechts neben dem Pfeil farblos transparent, deshalb scheint dort das Hintergrundbild des Blog-Body durch.

Original-CSS-Code zum Date-Header:

.main-inner .widget h2.date-header {
background: transparent url(//www.blogblog.com/1kt/awesomeinc/date_background_groovy.png) repeat-x scroll bottom center;
border-top: 1px solid #664400;
border-bottom: 1px solid transparent;
position: absolute;
bottom: 100%;
right: 15px;
}

Original-Date-Header mit "red" statt "transparent" im Code:

Ändert man die Farbe im Background-Code von transparent zu einem farbigen Wert, z.B. Rot, dann ist diese Farbe im oberen Bildbereich verfremdet zu sehen und taucht aber unverfälscht dort auf, wo man sie nicht haben will, nämlich links und rechts neben dem Pfeil.

Neues Hintergrundbild, um Farbe nur im oberen Bildteil ändern zu können:

Man braucht also ein anderes Hintergrundbild.

Damit die Farbe im oberen Bereich unverfälscht angezeigt wird, muss das Bild dort volltransparent sein. Damit die Farbe nur dort angezeigt wird, benötigt man ein Bild, das im unteren Bereich nicht transparent ist.

Man kann das bestehende Bild runterladen und in einem Bildbearbeitungsprogramm ändern oder ein eigenes erstellen. Dann kann man es in einem Post-Entwurf hochladen, auf Originalgröße stellen und im HTML-Modus des Editors die Bildadresse kopieren.

Code, um das neue Bild zu nutzen

Die Adresse des neuen Bildes kann man dann in dem folgenden Code einfügen, den man unter Vorlage > Anpassen > Erweitert > CSS hinzufügen eintragen kann:

/* DATE-HEADER */
.main-inner .widget h2.date-header {
background: HINTERGRUNDFARBE url(BILDADRESSE) repeat-x scroll bottom center;
border-bottom:1px solid RAHMENFARBE;
}

Die Einträge mit Großbuchstaben sind Platzhalter, die durch Farbwerte bzw. die Bildadresse ausgetauscht werden müssen.

Nicht vergessen, auf "Auf Blog anwenden" zu klicken und zu warten, bis das erledigt ist.

Fertiges Bild, das man nutzen kann

Wer will, kann das Bild runterladen, um es zu nutzen, das man unter der folgenden Adresse findet: https://drive.google.com/folderview?id=0BxGyLDldtJCRcElscTMxM2lKLTg&usp=sharing. Auf das Bild klicken und dann auf das Download-Symbol ganz oben unter dem Rand der Anzeige klicken. Sollte das Symbol nicht zu sehen sein, muss man die Maus oben unter den Rand halten, um die Anzeige des Symbols zu aktivieren. (Das Ausblenden ist eines der hippen Designs von Google, die extrem dumm sind.)
Das Bild ist eine geänderte Version des Original-Bildes. Dem unteren Teil habe ich ein Orange (#FCA33B) gegeben, das im Body-Background vorherrscht. Es macht Sinn, den gleichen Farbwert im oben genannten Code auch bei border-bottom einzutragen.

Beispiele, wie damit verschiedene Hintergrundfarben aussehen:

Bis auf das Dunkelrot (#941800) kommen alle Farben auch im Background-Image des Body vor.

#FDF094

#F9E958

#F78638

#EB5C24

#F1847D

#9CCC00

#941800

Schriftart, Schriftgewicht, Schriftfarbe und die Farbe für die Rahmenlinien oben und an den Seiten kann man unter Vorlage > Anpassen > Erweitert > Date-Header ändern. Die untere Linie, mit dem Pfeil, ist Teil des Bildes und kann deshalb im Vorlagedesigner nicht geändert werden.

• Awesome - groovy - Webvorlage Web | Mobil

Ute Ziemes, sg.utez.de, 2051-01-06