Gestern habe ich für einen Kunden die Enfold-Webseite aktualisiert. Genauer gesagt: ich sollte eine neue Seite erstellen zum Thema Baumfällung. Dabei habe ich erfolgreich die Seite mit CSS gepimpt. Was bedeutet das? Mit der Programmiersprache CSS lassen sich kleine und auch größere optische Veränderungen in Schriftgröße und Farbe, Rändern und Abständen erreichen. Hier zeig ich Dir, was genau ich gemacht habe.

Verweise unter dem eigentlichen Beitrag

Den auf der Seite verfassten Beitrag lassen wir mal außer acht. Hier gehts um die Verweise darunter. Ziel ist ja, den Webseitenbesucher möglichst lange auf der Seite zu halten, um ihm viele schöne Dinge zeigen zu können und ihn so mit der eigenen Marke vertraut zu machen. Also habe ich unter den Beitrag noch einen Bereich mit Verweisen eingefügt. Zum einen auf einen ähnlichen Bericht zum Thema Sturmschaden. Das war einfach nur ein Foto mit Text drüber. Das Schöne ist, ich konnte dem Foto noch ein transparentes Layer in Schwarz drüberziehen. Damit ist die Schrift besser zu erkennen und es sieht einfach nicht ganz so gewöhnlich aus.

Daneben habe ich einen Verweis auf Blogbeiträge platziert, mit Bild und Titel. allerdings, out of the box ist die Schrift wirklich unpassend groß, ich glaube etwa 20 Pixel.

Das sah dann so aus:

Ja genau! Nicht schön, aber selten. Wie ändern? In so einem Fall frage ich immer nur einen, nämlich Google. Und meistens, weiß er Rat. Ich fand eine Support-Seite vom Enfold-Theme-Support, dort wurde die Lösung für ein ähnliches Thema präsentiert. Dort ging es aber um CSS-Änderungen für eine ganze Seite.

Meine Änderungen in CSS

Da ich ja nur diesen Abschnitt ändern wollte, habe ich zunächst mal diese Elemente in eine Farbsektion verfrachtet. Damit kann ich dieser Sektion eine eigene ID geben, in dem Falle “weiterlesen” und diese dann per CSS ansteuern.

Dafür gibts bei Enfold in den Theme Options extra ein Feld. Dort habe ich folgenden Code eingefügt:

#weiterlesen .entry-title {
font-size: 14px !important;
}

Mit dem eigentlichen Wert, nämlich hier der Schriftgröße habe ich etwas experimientiert. Bei einer größeren Schriftgröße als 14 sieht es auf dem Tablett noch zu groß aus. So habe ich mich von 18 über 16 auf 14 runtergetastet. Das geht ja schnell.

Eines ist allerdings zu beachten:

Clear Cache

Clear Cache

Damit ich die Ergebnisse sehen konnte, musste ich jeweils den Cache leeren. Sonst gibt der Browser die gecachte Seite wider und nicht die Änderungen. Auf der Seite ist Comet Cache installiert, damit geht das wunderbar. Einfach oben in der Browserleiste auf Clear Cache – current url – gehen und schon wird genau das gemacht und die Auswirkungen der CSS-Änderungen sind sichtbar.

 

 

 

 

So sieht es nun also aus. Ich bin sehr zufrieden, Kunde auch. Und wenn Du’s live auf der Webseite sehen möchtest, dann ist hier der Link.

Bloggrid nachher, Enfold CSS

Bloggrid nach dem Hinzufügen von CSS

Vielleicht hast Du Lust, das auch mal zu probieren. Nur keine Scheu. Der Code ist schnell wieder entfernt und schlimmstenfalls passiert einfach … NCIHTS. So ist es zumindest bei mir. Viel Spaß beim Ausprobieren.

 

0 Kommentare

Dein Kommentar

An Diskussion beteiligen?
Hinterlasse uns Deinen Kommentar!

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.