Style-Lifting Teil III: Tabellarische Bloganzeige

Im dritten Teil der Serie über "Pimp my Jimdo-Homepage" möchte ich Euch noch die Umformatierung der Bloganzeige hin zu einer tabellarischen Blog-Übersicht vorstellen.

Ich habe das zum Beispiel auf der Titelseite unserer Homepage eingebaut und dort könnt Ihr auch nachschauen wie es aussehen kann.

Tatsächlich ist es so, dass die Original-Jimdo-Bloganzeige nur sehr wenige Einstellungsmöglichkeiten hat. So wird zu jedem Blogeintrag eine (wählbare) Anzahl von Text- oder Bildblöcken des Artikels angezeigt, sowie immer die Überschrift und das Datum des Eintrages. Darüber hinaus sind aber bei der Blog-Übersichtsanzeige immer alle diese Elemente in der vollen Größe und Breite zu sehen, wie dann im Blog-Artikel selber auch. Deshalb ist die Bloganzeige für viele Artikel auch nicht sehr übersichtlich, weil immer die volle Seitenbreite und Größe der Bilder dargestellt wird.

Praktischer und übersichtlicher wäre es, wenn man hier wählen könnte in welcher Größe Text und Bilder dargestellt werden, und wenn eine Übersicht eher in einem tabellarischen Array-Format daherkommen würde. Auch bei einigen sehr schönen Wordpress-Themes ist das der Fall, wie zum Beispiel bei dem schon früher erwähnten "Hatch" oder dem Original von "Sight". Aber wir haben ja schon früher an der Gestaltung von Jimdo-Elementen herumgefeilt, warum also nicht mal an der Bloganzeige?

Im folgenden seht Ihr den Style-Bereich des head unserer Seite, der den Blog auf der Titelseite umformatiert:

<style type="text/css">

/*<![CDATA[*/

div#cc-m-7879335084 .j-blogarticle {width: 276px !important; margin: 0 10px 20px 10px !important; overflow:hidden !important; display: inline-block !important;}

div#cc-m-7879335084 .j-blogarticle h1 {width: 100% !important; height: 2.8em !important; font-size: 1.5em !important; overflow: hidden !important;}

div#cc-m-7879335084 .j-blogarticle .j-textWithImage p {display: none !important;}

div#cc-m-7879335084 .j-blogarticle .j-textWithImage div {height: 210px !important; overflow:hidden !important;}

div#cc-m-7879335084 .j-blogarticle img {width: 276px !important; height: auto !important; min-height: 210px !important; vertical-align: middle !important;}

/*]]>*/

</style> 

Hier die Erklärung für die einzelnen Zeilen:

  • Zunächst mal wird nur diese eine Blog-Anzeige auf der ganze Webseite umformatiert. Deshalb beziehen sich alle Angaben auf <div id=cc-m-7879335084>, was eben genau dieses Element referenziert. Das Jimdo-CMS vergibt eine solche eindeutige ID jedesmal, wenn Ihr ein Element auf Eurer Webseite einbaut, und die ID bleibt auch erhalten, wenn dieses Element in die Zwischenablage geschoben und woanders wieder eingebaut wird. Ihr müsst hier natürlich die ID eurer speziellen Bloganzeige einbauen, die Ihr als Ziel anpeilt.
  • In der ersten Zeile wird die Breite der Anzeige eines Blogartikels eingestellt (276px), was zusammen mit der Breite unseres Inhaltsbereiches genau für eine dreispaltige Anzeige von Blogartikeln passt. Margin stellt die weißen Ränder zum Nachbarartikel rechts, links und unten ein und overflow: hidden schneidet alles ab was übersteht. Display: inline-block ist wichtig, weil ja mehrere solcher Artikel-Boxen nebeneinander in einer Zeile dargestellt werden sollen.
  • Die zweite Zeile stellt das Aussehen der Überschrift eines Artikels ein. Hier 1.5x die normale Textgröße bei 2 sichtbaren Zeilen Text (height: 2.8em). Warum nicht 3em Höhe? Dann sähe der weiße Abstand unter dem Text zu breit aus.
  • Zeile 4 verhindert, dass beschreibender Text zum Titelbild mit ausgegeben wird (display: none).
  • Zeile 5 stellt die Höhe des Bildbereiches ein (210px) und
  • Zeile 6 skaliert die Bilder so, dass sie das Kästchen 276px / 210px in der Breite und Höhe genau ausfüllen und dabei nicht verzerrt werden (es wird entweder in der Breite oder der Höhe ein bisschen abgeschnitten, je nach Bildgröße).

Das war's schon - einfach, oder? Natürlich kann man jetzt noch viele andere Umformatierungen vornehmen, die Anzeige auf das Darüberfahren des Mauszeigers ansprechen lassen etc., aber für mich sieht das jetzt so schon ganz hübsch aus. Ich mag es lieber, wenn das Design der verschiedenen Bloganzeigen über die Webseite hinweg nicht zuviel variiert, weil es sonst zu uneinheitlich wirkt.

Für alle diese Umarbeitungen der Jimdo-Styles gilt das schon in den vorigen Artikeln gesagte über Kompendien für HTML- und CSS-Programmierung im Internet und das Vermeiden des Zerstörens der Seitenstruktur.

So, und jetzt viel Spaß bei Euren eigenen Versuchen!

Holger

Print Friendly and PDF

Kommentar schreiben

Kommentare: 4
  • #1

    Lars (Montag, 20 Juni 2016 21:13)

    Hallo, wie ist es mir denn möglich mithilfe von css einzelne elemente in die Bloganzeige einzufügen?
    Konkret möchte ich eine Trennlinie zwischen den einzelnen Einträgen haben. Danke

  • #2

    Holger (Dienstag, 21 Juni 2016 21:29)

    Hallo Lars,
    mit css kannst Du nicht einzelne Elemente einfügen, das geht nur mit Javascript. Aber Du kannst vorhandenen Elementen eine untere Kante geben, z.B. für alle Blogs mit
    div.j-blogarticle {
    border-bottom-style: solid;
    border-bottom-color: aqua !important;
    }

  • #3

    Sarah (Montag, 12 Dezember 2016 19:25)

    Hallo Holger,
    wo finde ich die ID meines Blogeintrages, damit ich es einbauen kann?
    Ich bin noch in der Anfangsstufe, was das formatieren und programmieren angeht, also bitte entschuldige.
    Hast du noch ein paar genauere Tipps für mich in dieser Hinsicht?
    Gruß
    Sarah

  • #4

    Holger (Montag, 12 Dezember 2016 21:51)

    Hallo Sarah,
    die Serie ist ja schon ein paar Jährchen alt, aber die Basics stimmen natürlich immer noch. Im Jimdo-Code haben sich ein paar Details geändert, ebenso in den Browsern. Wie man die Element-ID findet hatte ich damals im ersten Teil der Serie beschrieben. Am einfachsten ist das mit dem Browser Chrome; man scrollt das Element in den Sichtbereich des Browsers, klickt mit der rechten Maustaste darauf und wählt "Untersuchen".
    Viele Grüße,
    Holger

Kontakt & Empfehlung:

Follow on Bloglovin

Jetzt online zum Download:

Klein. Fantastischer Roman
Klein. Fantastischer Roman

Rezept-Übersichten: