CMS Contao 4.11.x

Hier findest Du einige von mir geänderte Templates, die ich unter anderem auf dieser Seite verwende. Viele dieser Templates habe ich schon in Version 2.11.17 genutzt, allerdings poste ich nur noch die aktuelleren ab Version 4.9.x, die anderen sind einfach zu alt... 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! Manch Eintrag ist von Version 4.7.x / 4.8.x und mit dem Update auf 4.9.x weggefallen, allerdings lass ich es (noch) drin, da es noch jung ist...

« Letzter Eintrag Nächster Eintrag »

Codewrapper

Man kann sich den Effekt des moo_accordion gut zunutze machen, um mit der Code Highlightning Funktion in Contao grössere Codeblöcke verschlossen darzustellen. Dazu kopiere ich erstmal das Template ce_code.html5 zweimal: Einmal als ce_code_nowrap.html5 und als ce_code_wrapper.html5. Um die h Tags bei den Überschriften wegzubekommen, modifiziere ich die Templates nach Anleitung:

ce_code_nowrap.html5

<?php
	// Add the highlight.php style sheet
	$GLOBALS['TL_CSS'][] = 'files/layout/css/syntax-highlight.css';
?>
<div class="<?= $this->class ?> block"<?= $this->cssID ?><?php if ($this->style): ?> style="<?= $this->style ?>"<?php endif; ?>>
  <?php $this->block('headline'); ?>
    <div class="nowrap"><p><?= $this->headline ?></p></div>
    <div class="code-no-wrap">
      <pre><code class="<?= $this->cssClass ?>"><?= $this->code ?></code></pre>
    </div>
</div>

ce_code_wrapper.html5

<?php
	// Add the highlight.php style sheet
	$GLOBALS['TL_CSS'][] = 'files/layout/css/syntax-highlight.css';
?>
<div class="<?= $this->class ?> block"<?= $this->cssID ?><?php if ($this->style): ?> style="<?= $this->style ?>"<?php endif; ?>>
  <?php $this->block('headline'); ?>
    <div class="wrap"><p><?= $this->headline ?></p></div>
    <div class="wrapper"> Code eingefügt. Hier klicken zum Ein- / Ausblenden </div>
    <div class="code">
      <pre><code class="<?= $this->cssClass ?>"><?= $this->code ?></code></pre>
    </div>
</div>

Den Effekt vom ce_code_nowrap sieht man oben schön, den ce_code_wrapper sehen wir gleich. Ich kopiere das moo_accordion.html5 und nenne es um in moo_codewrapper.html5, und ändere es ein wenig ab:

moo_codewrapper.html5

Code eingefügt.

<?php
  $wid = '-1'; // default all closed
  //$wid = '0'; // default first open
  if (is_numeric($this->Input->get('wid'))) {
    $wid=(int)$this->Input->get('wid');
  }
?>
<script>
  window.addEvent('domready', function() {
    new Fx.Accordion($$('.wrapper'), $$('.code'), {
      opacity: false,
      display: <?php echo $wid; ?>,
      duration: 1000,
      alwaysHide: true,
	  onActive: function(tog, el) {
        el.setProperty('aria-hidden', 'false');
		tog.addClass('active');
		tog.setProperty('aria-expanded', 'true');
		tog.getNext('div').fade(1);
		new Fx.Scroll(window,{duration: this.options.duration}).toElement(tog.getNext('div'));
		return false;
      },
      onBackground: function(tog, el) {
        el.setProperty('aria-hidden', 'true');
		tog.removeClass('active');
		tog.setProperty('aria-expanded', 'false');
		tog.getNext('div').fade(0.35);
		return false;
      }
    });
    $$('.wrapper').each(function(el) {
      el.setProperty('role', 'tab');
      el.setProperty('tabindex', 0);
      el.addEvents({
        'keypress': function(event) {
          if (event.code == 13 || event.code == 32) {
            this.fireEvent('click');
          }
        },
        'focus': function() {
          this.addClass('hover');
        },
        'blur': function() {
          this.removeClass('hover');
        },
        'mouseenter': function() {
          this.addClass('hover');
        },
        'mouseleave': function() {
          this.removeClass('hover');
        }
      });
    });
    $$('.ce_code').each(function(el) {
      el.setProperty('role', 'tablist');
    });
    $$('.code').each(function(el) {
      el.setProperty('role', 'tabpanel');
    });
  });
</script>

Dazu noch ein paar Einträge im CSS vornehmen und sich passende Icons suchen. Ich habe die Feather Icons von Cole Bemis im Einsatz:

CSS für Codewrapper

Code eingefügt.

/* Code Wrapper Dateiname */
.wrap {
    width:40%;
    display:inline-block;
    padding-left:2em;
    vertical-align:middle;
    background-image:url("../../layout/svg_icons/file-text.svg");
    background-position:left center;
    background-repeat:no-repeat;
    font-weight:bold;
    background-size: 18px;
}

/* Code No Wrapper Dateiname */
.nowrap {
    width:40%;
    padding-left:2em;
    vertical-align:middle;
    background-image:url("../../layout/svg_icons/file-text.svg");
    background-position:left center;
    background-repeat:no-repeat;
    font-weight:bold;
    background-size: 18px;
}

/* Code Wrapper Inhalt */
.code {
    padding-right:2em;
    padding-left:2em;
}

/* Code No Wrapper Inhalt */
.code-no-wrap {
    padding-right:2em;
    padding-left:2em;
}

/* Code Wrapper Toggler */
.wrapper {
    display:inline-block;
    padding-left:2em;
    vertical-align:middle;
    background-image:url("../../layout/svg_icons/maximize-2.svg");
    background-position:left center;
    background-repeat:no-repeat;
    font-weight:bold;
    background-size: 18px;
    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;
}

/* Code Wrapper Toggler Hover */
.wrapper: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;
}

/* Code Wrapper Toggler Aktiv */
.wrapper.active {
    background-image:url("../../layout/svg_icons/minimize-2.svg");
    background-position:left center;
    background-repeat:no-repeat;
    background-size: 18px;
}

Durch Auswahl des Elements Code und der Überschrift in Verbindung mit dem Template ce_code_wrapper erhalte ich den Code versteckt, mit dem Template ce_code_nowrap ist er sichtbar.

Achtung:

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

Zurück