Änderung Template ce_code: Überschrift h4 / h5
Hallo miteinander,
ich habe diese Anleitung gelesen und eine Frage dazu: Wie bekomme ich in der Überschrift den h Tag weg, bzw geändert in einen von mir festgelegten?
Gibt es dazu eine DCA Möglichkeit, das h Auswahlmenü zu erweitern?
Hintergrund ist: ich habe mir aus dem moo_accordion einen moo_codewrapper gebastelt, der Code Elemente ausblendet, wenn diese länger sind (wäre auch was fürs Forum hier ;) )
Einmal ist das ce_code Template für die direkte Anzeige von kurzem Code, einmal zum ausblenden:
ce_codewrapper:
Code:
<?php $this->extend('block_searchable'); ?>
<?php $this->block('content'); ?>
<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>
<?php $this->endblock(); ?>
ce_code_nowrap:
Code:
<?php $this->extend('block_searchable'); ?>
<?php $this->block('content'); ?>
<div class="code-no-wrap">
<pre><code class="<?= $this->cssClass ?>"><?= $this->code ?></code></pre>
</div>
<?php $this->endblock(); ?>
Meine Frage bezieht sich auf das Styling mittels CSS, denn da muss ich den h4 / h5 Tag missbrauchen, um das gewünschte Ergebnis zu erzielen:
Code:
/* Code Wrapper Dateiname */
h4 {
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-size:1em;
font-weight:bold;
background-size: contain;
}
/* Code No Wrapper Dateiname */
h5 {
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-size:1em;
font-weight:bold;
background-size: contain;
}
/* 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: contain;
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: contain;
}
Ich bin mal gespannt, wie Eure Ideen zur Lösung sind (ohne eine eigene Erweiterung basteln zu müssen) :D
ToM
PS: Wäre sowas eigentlich als Feature in Contao gut? Normalerweise sind die Codeblöcke ja nicht die kürzesten, siehe mein Beitrag hier...