Catalog - Template anpassen zwecks CSS editing für Feld

[mavnet]

Hallo,

komme leider mal wieder nicht weiter und mittlerweile sind mir sämtliche Ideen ausgegangen .
Würde euch daher mal mit einer weiteren Frage belästigen ;-).

Ich habe ein Catalog-Feld namens 'Anzeigen_Titel', welches im Frontend ausgegeben wird.
Den Titel möchte ich nun mit css editieren (fettere Schrift etc.).
Sowie ich es bisher verstanden habe, muss dafür das Template (catalog_simple.tpl) angepasst werden.

Nach der Ausgabe des Arrays zwecks

<?php $this->showTemplateVars(); ?>

fand ich heraus,
dass 'Anzeigen_Titel' in der Variable namens [VALUE] ausgegeben wird.
Soweit so gut, in dieser Variable wird nun aber auch der 'Anzeigen_Text' ausgegeben, sodass ich 'Anzeigen_Titel' nicht einzeln bearbeiten konnte.

Also habe ich meinem Template folgenden Code hinzugefügt, um 'Anzeigen_Titel' als Überschrift 'h3' auszugeben und dann mit css bearbeiten zu können:

<h3><?php echo $entry['data']['anzeigen_titel']['value']; ?></h3>

Das Ergebnis davon war, dass mein Titel nun dreifach dargestellt wird.
Also habe ich BE im Modul unter 'Sichtbare Felder' das Anzeigen der Überschrift deaktivert - ohne Besserung.

Dann dachte ich, es wäre vielleicht der richtige Weg diesen Code aus dem Template zu entfernen:

<div class="value"><?php echo $data['value']; ?></div>

, da dieser ja enscheinend schon das gesamte Value inkl. Überschrift ausgibt.
So stand dann erstmal

<h3><?php echo $entry['data']['anzeigen_titel']['value']; ?></h3>

alleine da und es wurde gar kein Titel mehr ausgegeben (soweit ich mich nach ein paar Stunden rumprobieren erinnern kann - jedenfalls hat das auch nicht funktioniert.

Meine catalog_simple.tpl sieht aktuell standardmäig so aus:

<?php if (count($this->entries)): ?>

<div class="layout_simple">

<?php foreach ($this->entries as $entry): ?>
<div class="item<?php echo $entry['class'] ? ' '.$entry['class'] : ''; ?>">
<?php foreach ($entry['data'] as $field=>$data): ?>
<?php if (!in_array($field, array('catalog_name','parentJumpTo'))): ?>
<div class="field <?php echo $field; ?>">
    <div class="label"><?php echo $data['label']; ?></div>
    <div class="value"><?php echo $data['value']; ?></div>
</div>
<?php endif; ?>
<?php endforeach; ?>

<?php if ($entry['showLink'] && $entry['link']): ?>
<div class="link"><?php echo $entry['link']; ?></div>
<?php endif; ?>
<?php if ($entry['linkEdit']): ?>
<div class="linkEdit"><?php echo $entry['linkEdit']; ?></div>
<?php endif; ?>
</div>

<?php endforeach; ?>
</div>
 
<?php else: ?>

<?php if ($this->condition): ?>
<div class="condition"><?php echo $this->condition; ?></div>
<?php else: ?>
<p class="info">There are no entries matching your search.</p>
<?php endif; ?>

<?php endif; ?>

Was mache ich falsch?

[Silvano]

Hallo mavnet

Mit dem folgenden Abschnitt gibt es jeweils der Feldname UND der Inhalt von diesem Feld aus.

<div class="field <?php echo $field; ?>"> 
    <div class="label"><?php echo $data['label']; ?></div> 
    <div class="value"><?php echo $data['value']; ?></div> 
</div>

Wenn ich Catalog verwende, nehme ich diese beiden Einträge eigentlich immer raus, und verwende dann eigentlich jeweils für jedes Feld einen eigenen Eintrag (so wie Du es gemacht hast).

<?php echo $entry['data']['anzeigen_titel']['value']; ?>

Klar, wenn Du dann "schnell" ein zusätzliches Feld willst, musst Du noch das Template anpassen gehen, aber der Vorteil ist, das Du jedes Feld selber gestalten kannst. Also kannst Du um deinen Eintrag ein <div> oder was auch immer legen oder auch Inline-Styles verwenden.

<div class="anzeigen_titel"><?php echo $entry['data']['anzeigen_titel']['value']; ?></div>

Eben, wie geschrieben, nimm die beiden Einträge label und value aus deinem Template raus, und füge für jedes Feld einen solche $entry Zeile ein und ggf. um jede Zeile (oder auch um eine Gruppe) ein <div>.

[mavnet]

Es will, aber nicht richtig ....

Hi,

danke für deine Antwort :-), das hat vom Verständnis her schonmal sehr geholfen.
Habe aber noch das Problem, dass der 'anzeigen_titel' nun dreifach im Frontend ausgegeben wird.

Wenn ich 'Anzeigen_Titel' im BE als Sichtbares Feld deaktiviere, wird der Titel trotz

<div class="anzeigen_titel"><?php echo $entry['data']['anzeigen_titel']['value']; ?></div>

im Template überhaupt nicht ausgegeben.
Wenn ich das Feld wieder als sichtbar aktivieren, dann wieder dreifach.

Verstehe das nicht so ganz, entweder dreifach oder gar nicht...

Das Template sieht aktuell bei mir so aus:

<?php if (count($this->entries)): ?>

<div class="layout_simple">

<?php foreach ($this->entries as $entry): ?>
<div class="item<?php echo $entry['class'] ? ' '.$entry['class'] : ''; ?>">
<?php foreach ($entry['data'] as $field=>$data): ?>
<?php if (!in_array($field, array('catalog_name','parentJumpTo'))): ?>

<div class="field <?php echo $field; ?>">

<div class="anzeigen_titel"><?php echo $entry['data']['anzeigen_titel']['value']; ?></div>

  
</div>  

<?php endif; ?>
<?php endforeach; ?>

<?php if ($entry['showLink'] && $entry['link']): ?>
<div class="link"><?php echo $entry['link']; ?></div>
<?php endif; ?>
<?php if ($entry['linkEdit']): ?>
<div class="linkEdit"><?php echo $entry['linkEdit']; ?></div>
<?php endif; ?>
</div>

<?php endforeach; ?>
</div>
 
<?php else: ?>

<?php if ($this->condition): ?>
<div class="condition"><?php echo $this->condition; ?></div>
<?php else: ?>
<p class="info">There are no entries matching your search.</p>
<?php endif; ?>

<?php endif; ?>

Habe ich noch etwas vergessen?

Gruß,
mavnet

[Andreas]

Ich habe dafür ne Vorlage, die müsstest du eigentlich leicht an deine Bedürfnisse anpassen können. Das Hauptproblem bei dir ist, dass du das mit der foreach-Schleife nicht verstanden hast, deshalb hast du das z.B. 3 mal.

[mavnet]

Danke !!

Herzlichen Dank für eure großartige Hilfe !!

Ich werde mir die Sache mit der fore each - Schleife nochmal genauer angucken und verstehen müssen,
da wird die Vorlage sehr gut helfen! :-).



Um die Catalog-Felder ansich einzeln mit css zu editieren habe ich zufällig diese Lösung gefunden:

Im Backend unter 'Themes' meine css ausgewählt und eine neue Formatdefinition hinzugefügt:

.anzeige_titel

Dieser Klassenname entspricht dem Spaltennamen, dem ich dem Feld zugewiesen habe.
Ich wusste noch gar nicht, dass unter contao der Spaltenname automatisch = css klasse ist!

Auf die Art und Weise kann ich ja jetzt auch mein Feld '.anzeige_text' .... '.anzeige_bild' usw. einzeln via css stylen.

Danke nochmal !

Viele Grüße,
Mavnet

[Andreas]

Mit Firebug kannst du im Firefox die CSS-Selektoren herausfinden. Im Normalfall benötigt man keine extra Klassen oder IDs. Es sind schon jede Menge vorhanden, meistens mehr, als man benötigt.

[mavnet]

Hi,
ja Firebug benutze ich auch.
In dem Fall hat es mich verwirrt, dass die div-Klassen
"field anzeige_text" anstatt "anzeige_text" hießen, aber wieder was dazu gelernt ;-).

Dennoch vielen Dank für den Tipp.

Viele Grüße

[xtra]

Ich wusste noch gar nicht, dass unter contao der Spaltenname automatisch = css klasse ist!

Ist auch nicht in Contao so, sondern nur im Catalog um eben genau das stylen mit CSS einfacher zu machen.

Hi,
ja Firebug benutze ich auch.
In dem Fall hat es mich verwirrt, dass die div-Klassen
"field anzeige_text" anstatt "anzeige_text" hießen, aber wieder was dazu gelernt ;-).

Das ist auch aus gutem Grunde so, denn so kannst du unterscheiden, dass es auch wirklich ein catalog field ist.

Bsp:

<div class="anzeige_text">Hier koennte ihre Werbung stehen.</div>
[...]
<div class="field anzeige_text">blabla vom Catalog</div>
[...]

Wenn du nun ".anzeige_text" stylest, wird dann sowohl obiges Werbebanner rot als auch der Catalog Text:

.anzeige_text
{
  color: red;
}

Wenn du aber ".field.anzeige_text" stylest, wird dann nur der Catalog Text rot:

.field.anzeige_text
{
  color: red;
}

[mavnet]

genial, danke ! :-)