CMS Contao 2.11.1x

Hier findest Du einige von mir geänderte Templates, die ich unter anderem auf dieser Seite verwende. Einige Ideen und Anregungen hab ich dem Contao Community Forum entnommen. Viel Hilfe habe ich auch vom Kellerkind erhalten, an dieser Stelle nochmals vielen Dank dafür!

Akkordeoneffekt bei Newsliste / Eventliste

Die Newsliste / Eventliste sieht mit einem Akkordeoneffekt einfach schöner aus, daher hab ich die beiden Templates modifiziert.

event_teaser_akkordeon.html5:

Code eingefügt. Hier klicken zum Ein- / Ausblenden
<div class="toggler"<?php if ($this->classHeader): ?> style="<?php echo $this->classHeader; ?>"<?php endif; ?>>
    <h2><?php echo $this->title; ?></h2>
</div>
<div class="event layout_teaser<?php echo $this->classList; ?>"><div class="accordion">
<?php if ($this->details): ?>
<?php if ($this->day): echo $this->day; ?>, den <?php endif; echo $this->date; if ($this->time): ?> (<?php echo $this->time; ?> Uhr)<?php endif; ?>
<?php else: ?>
<span class="date"><?php echo $this->firstDate; ?></span><?php if ($this->firstDay): ?> <span class="day">(<?php echo $this->firstDay; ?>)</span><?php endif; ?> 
<?php endif; ?>
<div class="teaser">
<?php echo $this->teaser; ?> 
</div>
<?php if ($this->details): ?>
<p class="more"><a href="<?php echo $this->href; ?>" title="<?php echo $this->readMore; ?>"<?php echo $this->target; ?>><?php echo $this->more; ?> <span class="invisible"><?php echo $this->link; ?></span></a></p>
<?php endif; ?>
</div>
</div>

news_latest_akkordeon.html5:

Code eingefügt. Hier klicken zum Ein- / Ausblenden
<div class="toggler"<?php if ($this->headlineStyle): ?> style="<?php echo $this->headlineStyle; ?>"<?php endif; ?>>
  <h2><?php echo $this->headline; ?></h2>
</div>
<div class="layout_latest block<?php echo $this->class; ?>"><div class="accordion">
    <?php if ($this->hasMetaFields): ?>
        <p class="info"><time datetime="<?php echo $this->datetime; ?>"><?php echo $this->parseDate("d. F Y", $this->timestamp); ?></time> <?php echo $this->author; ?> <?php echo $this->commentCount; ?></p>
    <?php endif; ?>
    <?php if ($this->addImage): ?>
        <div class="image_container<?php echo $this->floatClass; ?>"<?php if ($this->margin || $this->float): ?> style="<?php echo trim($this->margin . $this->float); ?>"<?php endif; ?>>
        <?php if ($this->href): ?>
            <a href="<?php echo $this->href; ?>"<?php echo $this->attributes; ?> title="<?php echo $this->alt; ?>">
                <?php endif; ?>
                    <img src="<?php echo $this->src; ?>"<?php echo $this->imgSize; ?> alt="<?php echo $this->alt; ?>" />
                <?php if ($this->href): ?>
            </a>
        <?php endif; ?>
        <?php if ($this->caption): ?>
            <div class="caption"><?php echo $this->caption; ?></div>
            <?php endif; ?>
            </div>
            <?php endif; ?>
            <div class="teaser"><?php echo $this->teaser; ?></div>
            <?php if ($this->text): ?>
                <p class="more"><?php echo $this->more; ?></p>
            <?php endif; ?>
            </div>
        <div>
    </div>
</div>

Nicht vergessen, moo_accordion muss auch im Seitenlayout zu aktiviert werden. Standardmässig wird das erste Akkordeonelement geöffnet dargestellt. Wer das nicht möchte, fügt einfach eine Zeile hinzu (display: -1,):

Code eingefügt. Hier klicken zum Ein- / Ausblenden
<script>
(function($) {
  window.addEvent('domready', function() {
    new Accordion($$('div.wrapper'), $$('div.code'), {
      opacity: false,
      display: -1,
      alwaysHide: true,

Dazu noch ein paar Einträge im CSS vornehmen:

Code eingefügt. Hier klicken zum Ein- / Ausblenden
/* Akkordeon Inhalt */
.accordion {
    padding-left:21px;
}
/* Akkordeon Toggler */
.toggler {
    margin-top:7px;
    padding-left:21px;
    background: url("files/layout/icon_plus.png") left center no-repeat;
    cursor: pointer;
    /* WebKit */ -webkit-transition: color 500ms ease-in-out;
    /* Firefox */ -moz-transition: color 500ms ease-in-out;
    /* Opera */ -o-transition: color 500ms ease-in-out;
    /* Standard */ transition: color 500ms ease-in-out;
}
/* Akkordeon Toggler Hovereffekt */
.toggler:hover {
    color:#f60;
    /* WebKit */ -webkit-transition: color 500ms ease-in-out;
    /* Firefox */ -moz-transition: color 500ms ease-in-out;
    /* Opera */ -o-transition: color 500ms ease-in-out;
    /* Standard */ transition: color 500ms ease-in-out;
}
/* Akkordeon Toggler Aktiv */
.toggler.active {
    background: url("files/layout/icon_minus.png") left center no-repeat;
    /* WebKit */ -webkit-transition: color 500ms ease-in-out;
    /* Firefox */ -moz-transition: color 500ms ease-in-out;
    /* Opera */ -o-transition: color 500ms ease-in-out;
    /* Standard */ transition: color 500ms ease-in-out;
}

Man kann einzelne Akkordeonelemente auch per Link direkt ansprechen, dann ist das entsprechende Akkordeon gleich geöffnet. Dazu muss man zu Beginn des moo_accordion.html5 Templates noch etwas PHP einfügen und den Wert display -1; durch die zuvor gesetzte Variable ersetzen:

Code eingefügt. Hier klicken zum Ein- / Ausblenden
<?php
//$aid = '-1'; // default all closed
$aid = '0'; // default first open
if (is_numeric($this->Input->get('aid'))) {
  $aid=(int)$this->Input->get('aid');
}
?>
<script>
(function($) {
  window.addEvent('domready', function() {
    new Accordion($$('div.toggler'), $$('div.accordion'), {
      opacity: false,
      display: <?php echo $aid; ?>,
      alwaysHide: true,

Um jetzt ein Akkordeon direkt aufzurufen, muss man der Link URL nur folgenden Parameter dranpappen: ?aid=id

Man beginnt, das erste Element mit 0 zu zählen, also nicht wundern. Als Beispiel für das fünfte Akkordeonelement ergibt sich folgender Link: http://nightwing.eu/contao.html?aid=4

 

Achtung:

Bitte die Templates im Backend unter Templates auswählen und speichern und dann dort editieren! Ansonsten sind die Änderungen nicht updatesicher.

Zurück