Artikel Teaser formatieren

**MTB** · 30.10.2010, 11:54

Hallo Contao Gemeinde,

so langsam habe ich die ersten Erfoglserlebnisse mit Contao. Langsam macht sich Begeisterung breit. Das System macht immer öfter macht was ich möchte. Das Forum und die Dokus sind da eine große Hilfe. Das darf mal gesagt werden.

Bei einem Problem komme ich aber aus eigener Kraft nicht weiter. Es geht um die Artikel Teaser:

Wenn ich mehrere Artikel auf einer Seite habe werden die entsprechenden Teasertexte wie folgt angezeigt:

Überschrift_1
Teasertext_1
Weiterlesen...
Überschrift_2
Teasertext_2
Weiterlesen...
u.s.w.

Mir ist das zu wenig strukturiert. Das erste was mich gestört hat, war, das vor und nach dem „Weiterlesen...“ kein Abstand war. Das habe ich im css mit Hilfe vom Firebug hinbekommen. Jetzt möchte ich noch das die Überschriften eigens formatiert sind. (Hintergurndfarbe und Schriftgrösse) Ich blicke nicht wie ich die <h1> für die Teaserüberschriften gesondert formatiert bekomme. Ich ändere immer nur alle <h1> und das will ich nun auch wieder nicht. Ich habe mir für meinen Versuch die „Musik Academy“ angepasst.

Kann mir jemand über diese Hürde helfen?

Gruß
MTB

**thepixture** · 30.10.2010, 12:55

Versuchs mal mit

Code:

.mod_newslist .layout_latest h1 { ... }

**Sebastian** · 30.10.2010, 14:22

HI

Du könnest pro Artikelteaser eine spezielle Klasse vergeben (kann man im Teaser einstellen), damit müsste dann der Teaser gesondert ansprechbar sein. In der Tat fehlt im Moment ein spezieller <div> oder eine spezielle Teaser-Klasse für den gesamten Teaser, da steht nur .mod_article, und um den Text .teaser – ohne Überschrift.

Versuch mal die eigene Klasse, und wenn das hilft, könnte man sie per dcaconfig.php oder Template-Änderung automatisch einfügen.

Sebastian

**MTB** · 30.10.2010, 15:03

Hallo Sebastian,

das mit der speziellen Klasse für den Teaser hat funktioniert. Da hätte ich auch selber drauf kommen können. Aber die Werkzeuge sitzen noch nicht richtig. Danke für den Hinweis. Anpassungen am Template darf ich ja als Anfänger noch nicht machen

. Aus diesem Grund werde ich es im Moment noch manuell organisieren. Danke für die Hilfe!

Gruß
MTB

**MTB** · 30.10.2010, 15:06

Zitat von thepixture

Versuchs mal mit

Code:

.mod_newslist .layout_latest h1 { ... }

Hallo thepixture,

mein Problem ist zwar gelöst, ich würde aber deinen Hinweis gerne verstehen. Was ist .layout_latest für eine Klasse? Ich steh' auf dem Schlauch.

Gruß
MTB

**thepixture** · 30.10.2010, 15:16

Ich bin mal davon ausgegangen, dass Du im Modul Nachrichtenliste das Template layout_latest für die Teaseransicht verwendet hast. In diesem Template ist die Klasse .layout_latest angelegt.

Für die anderen Templates wären das:
layout_full -> .layout_full
layout_simple -> .layout_simple
layout_short -> .layout_short

Wobei in layout_short ebenfalls der Teaser verwendet wird.

**MTB** · 30.10.2010, 16:14

Hi thepixture,

nein, ich verwende das Modul Nachrichtenliste nicht. Darum finde ich die Klasse in meinen CSS Dateien nicht. Ich habe einfach mehrere Artikel (mit je einem Texteelement) auf einer Seite. Entsprechend steht mir (ab 2 Artikeln) die Teaserfunktionalität zur Verfügung. Und die Formatierung dieser Darstellung wollte ich verändern. Wie ich jetzt gelernt habe alles ohne Klimmüge möglich Aber jetzt verstehe ich auch deinen Hinweis. Wenn ich mich bis zur Nachrichtenliste vorgearbeitet habe, werde ich mich daran erinnern. Vielen Dank!

Gruß
MTB

**Andreas** · 30.10.2010, 17:06

Ums nochmal deutlich zu machen:

HTML-Code:

<div class="mod_article block" id="helen-lewis">
  <h1></h1>
  <div class="teaser">
    Teasertext
    <p class="more">
      <a href="#">Read more …</a>
    </p>
  </div>
</div>

Also im Prizip ist alles vorhanden um es anzusprechen, außer, dass dieser DIV sich nicht von anderen Artikeln unterscheidet (.mod_article). (Über die ID ist ja keine Lösung.)

Ich meine ich hätte diese oder letzte Woche ein akzeptiertes Ticket dazu gesehen. Bis zur nächsten Version kann man folgende Zeile in mod_article_teaser.tpl verändern. Natürlich nicht im Original.

PHP-Code:


<div class="<?php echo $this->class; ?> block"...

ändern nach

PHP-Code:


<div class="<?php echo $this->class; ?> block teaserWrap"...

Danach kann man die Überschrift mit z.B. '.teaserWrap h1' ansprechen.
Gruß

**Sebastian** · 30.10.2010, 17:10

HI

Ja, meines.

Sebastian

**thepixture** · 30.10.2010, 17:37

Ach jetzt hab ich erstmal gesehen, dass du Artikel-Teaser meintest. Das hab ich völlig übersehen. Dachte es ging um die News.

Warum sagt mir das keiner?

**Andreas** · 30.10.2010, 18:40

Zitat von Sebastian

Ja, meines.

Das passt ja wie die Faust ins Auge

lol

**MTB** · 31.10.2010, 09:09

Hier meine Lösung:

ich habe den Tipp von Sebastian

... Du könnest pro Artikelteaser eine spezielle Klasse vergeben...

umgesetzt.

Das schaut dann im Code so aus:

Code:

<div class="inside">
<div class="mod_article teaserueberschrift block" id="id-2142010-winterabschluss">
<h1>21.4.2010: Winterabschluss</h1>
<div class="teaser">
<p>Teasertext</p> 
<p class="more">Haupttext</p>
</div>
</div>

Im CSS kann ich jetzt über die Klasse ".teaserueberschrift h1" speziell die Überschrift im Teaser ansprechen.

Das Ziel des Tickets verstehe ich so, dass dann schon eine Klasse für die Überschrift existieren wird, die ich direkt ansprechen kann. Ich spare mir dann das vergeben der Klasse für jeden Teaser.

Im Prinzip ist das dann so wie ich es beim ersten Teil meines Problemes vorgefunden hatte: Das "Weiterlesen..." hat schon fest im Template die Klasse ".more". So war es ohne Zwischenschritt möglich den <p class="more"> nach meinen Wünschen anzupassen.

Falls ich hier Mist erzähle, bitte ich um Aufklärung.

Gruß
Eckart

**Andreas** · 31.10.2010, 14:31

@Sebastian: Ich habe mir dein Ticket nochmal genau angesehen. Es macht doch nicht genau das, was wünschenswert wäre. Es behebt nur das Problem mit dem Grid-System. Könntest du das vielleicht noch ergänzen, dass Leo direkt auch eine Klasse in den äußeren DIV setzt?

PHP-Code:


<div class="<?php echo $this->class; ?> block"...

wird zu

PHP-Code:


<div class="<?php echo $this->class; ?> teaser block"...

Es gibt ja nicht so viele mod_article_xxx.tpl Templates und in mod_article_nav.tpl ist z.B. auch schon das hier drin:

PHP-Code:


<div class="<?php echo $this->class; ?> pagination block"...

Gruß Andreas

**member31** · 15.09.2011, 08:11

Hallo Community,

ich habe folgendes Problem. Ich habe ein 2 spalten Layout, mitte content, rechts news. Nun möchte ich in der Mitte die Artikel Teaser in Boxen per CSS nebeneinander auflisten. Dies funktioniert leider nicht, die Teaser Boxen in der Mitte werden immer nach unten geschoben, bis zu dem Punkt wo rechts die News aufhören. Ich habe schon alles probiert, jedoch ohne Erfolg. Ein Bild habe ich als Anlage beigefügt. Über eine Lösung würde ich mich freuen.

Gruß Markus

**kos** · 15.09.2011, 08:59

Hallo member31,

bei Problemen mit dem CSS wäre ein LINK zur Seite hilfreich, sonst kann man nur raten.

**member31** · 15.09.2011, 13:27

Den CSS-Style für die Boxen in der Mitte, wende ich ja auch für die Artikel an, wo ich keine Probleme mit der rechten Spalte habe. Nur wenn ich den Style für den Artikelteaser einsetze, dann werden die Boxen unter die News geschoben, wie auf dem Bild zusehen.