Breadcrumb : class="first" in erstes a-Tag?

[osterwaldi]

Breadcrumb : Wie bekomme ich die class="first" in das erste a-Tag?

Ich möchte gern den ersten Eintrag (Wurzelseite) in der Breadcrumb per CSS anders formatieren.

[netnite]

Du gibst der ersten Seite, meist ist das ja die Startseite, in der Seitenstruktur unter Experten-Einstellungen einfach eine CSS-Klasse.

Oder aber du bearbeitest das Template der Breadcrump-Navigation.

[osterwaldi]

Hallo Netnite,
das hilft mir leider nicht weiter, da ich eine ziemlich verschachtelte Seitenstruktur habe.

Ich habe unten nun ein paar Screenshot angehängt und wie der Code der Breadcrumb mit Firebug aussieht.

Was ich möchte ist, dass ich dem erste a-Tag "Startseite" ("Startpunkt einer Website" bzw. Wurzelseite) eine Klasse zuordnen kann um diesen Punkt mit css gesondert zu formatieren. Beim Typ "Startpunkt einer Website" gibt es aber keine Möglichkeit eine Klasse anzugeben. Daher müßte die Klasse im Template eingebaut werden, aber wie? Dazu kenn ich mit mit PHP viel zu wenig aus.

Breadcrumb-Ansicht mit Firebug:

<nav class="mod_breadcrumb block">
    <a title="Startseite" href="hauptmenue.html">Startseite</a>
    &gt;
    <a title="Fussball" href="fussball.html">Fussball</a>
    &gt;
    <a title="1. Herren" href="news-22.html">1. Herren</a>
    &gt;
    <span class="active">News</span>
</nav> 

Original Breadcrumb-Template:

<!-- indexer::stop -->
<nav class="<?php echo $this->class; ?> block"<?php echo $this->cssID; ?><?php if ($this->style): ?> style="<?php echo $this->style; ?>"<?php endif; ?>>
<?php if ($this->headline): ?>

<<?php echo $this->hl; ?>><?php echo $this->headline; ?></<?php echo $this->hl; ?>>
<?php endif; ?>

<?php foreach ($this->items as $item): ?>
<?php if ($item['isActive']): ?>
<span class="active"><?php echo $item['title']; ?></span>
<?php else: ?>
<a href="<?php echo $item['href']; ?>" title="<?php echo $item['title']; ?>"><?php echo $item['link']; ?></a> > 
<?php endif; ?>
<?php endforeach; ?>

</nav>
<!-- indexer::continue -->

Meine Seitenstruktur:
seitenstruktur.png

Konfiguration mod_breadcrumb:
breadcrumb.png

Ansicht Breadcrumb:
breadcrumb_ansicht.png

[lucina]

http://www.quirksmode.org/css/firstchild.html (unterstützt ab IE7).

Carolina.

[osterwaldi]

Hallo lucina,

vieeeelen Dank .
Genau das habe ich gesucht und ich muß nicht mal das Template ändern.

[k-webdesign]

Hi,

ich brauche leider explizit eine first-Klasse, da ich am Code bereits etwas ändern musste und wenn ich jetzt auf .breadcrumb a:first-child gehe, dann erhalte ich für jedes a das Hintergrundbild, da es ja nun immer das erste a im div ist... kann mir bitte jemand explizit sagen, wie ich eine first-Klasse in dieses Template einfüge?

<!-- indexer::stop -->
<div class="<?php echo $this->class; ?> block"<?php echo $this->cssID; ?><?php if ($this->style): ?> style="<?php echo $this->style; ?>"<?php endif; ?>>
<?php if ($this->headline): ?>

<<?php echo $this->hl; ?>><?php echo $this->headline; ?></<?php echo $this->hl; ?>>
<?php endif; ?>

<?php foreach ($this->items as $item): ?>
<?php if ($item['isActive']): ?>
<span class="active"><?php echo $item['title']; ?></span>
<?php else: ?>
  <div class="link"><a href="<?php echo $item['href']; ?>" title="<?php echo $item['title']; ?>"><?php echo $item['link']; ?></a><span class="arrow"> > </span></div>
<?php endif; ?>
<?php endforeach; ?>

</div>
<!-- indexer::continue -->

[Mike1410]

Verstehe ich nicht, das macht er doch automatisch. Welche Contao Version?

[k-webdesign]

Version 2.11.9, weil ich Isotope benutze. Auf den Shop-Seiten verwende ich die Breadcrumb, aber das hat mit dem Shop selbst ja nichts zu tun. Mein Template-Code ist, bis auf das link-div und den arrow-span auch unverändert.

Im Firebug sieht es dann so aus:
Bildschirmfoto 2013-03-25 um 18.41.16.png

[Mike1410]

Ich nutze Contao 3, da wird das standardmäßig so ausgegeben. Sorry bei der 2er weiss ich das nicht.

[k-webdesign]

Muss mich leider korrigieren, das C3 Template setzt mir nur die Klasse "last":

Bildschirmfoto 2013-03-25 um 19.23.30.png

[Mike1410]

Dann wurde mod_breadcrumb in C3 modifiziert

Vielleicht kannst ein nav_default nehmen und das ändern, und für die breadcrumb nehmen. Sowas hab ich auch schon mal gebastelt.

[webster]

Hi,

ich brauche leider explizit eine first-Klasse, da ich am Code bereits etwas ändern musste und wenn ich jetzt auf .breadcrumb a:first-child gehe, dann erhalte ich für jedes a das Hintergrundbild, da es ja nun immer das erste a im div ist... kann mir bitte jemand explizit sagen, wie ich eine first-Klasse in dieses Template einfüge?

<!-- indexer::stop -->
<div class="<?php echo $this->class; ?> block"<?php echo $this->cssID; ?><?php if ($this->style): ?> style="<?php echo $this->style; ?>"<?php endif; ?>>
<?php if ($this->headline): ?>

<<?php echo $this->hl; ?>><?php echo $this->headline; ?></<?php echo $this->hl; ?>>
<?php endif; ?>

<?php foreach ($this->items as $item): ?>
<?php if ($item['isActive']): ?>
<span class="active"><?php echo $item['title']; ?></span>
<?php else: ?>
  <div class="link"><a href="<?php echo $item['href']; ?>" title="<?php echo $item['title']; ?>"><?php echo $item['link']; ?></a><span class="arrow"> > </span></div>
<?php endif; ?>
<?php endforeach; ?>

</div>
<!-- indexer::continue -->

Wenn ich das richtig sehe, müsste aber

.breadcrumb div.link:first-child a {/* ... */}

doch funktionieren, oder?