tag:help.rocksolidthemes.com,2012-07-23:/discussions/contao/28496-verwendung-animierte-berschrift-mit-hintergrundfarbeRockSolid Themes: Discussion 2018-06-28T10:14:02Ztag:help.rocksolidthemes.com,2012-07-23:Comment/455568142018-06-25T12:45:41Z2018-06-25T12:45:41ZVerwendung: Animierte Überschrift mit Hintergrundfarbe<div><p>Produkt: Oneo Contao<br>
Contao-Version: 3.5.34</p>
<p>Hallo,<br>
Wie können wir bei der „Animierten Überschrift“ für die Überschrift oder Überschrift2 den Texthintergrund farbig verändern ohne das ganze Systemweit für H1 /H2/H3 per css zu hinterlegen?</p>
<p>Schonmal vielen Dank für eure Hilfe.</p></div>brtag:help.rocksolidthemes.com,2012-07-23:Comment/455568142018-06-26T05:18:39Z2018-06-26T05:18:39ZVerwendung: Animierte Überschrift mit Hintergrundfarbe<div><p>Vielen Dank für Ihre Frage.</p>
<p>Dafür können Sie folgenden CSS-Code in die Datei <em>files/oneo/css/custom.css</em> einfügen:</p>
<pre>
<code>.typing-headline h1 {
background-color: #ff0000;
}
.typing-headline h2 {
background-color: #ff0000;
}
.typing-headline h3 {
background-color: #ff0000;
}</code>
</pre>
<p>Ersetzen Sie dabei <code>ff0000</code> mit dem jeweiligen gewünschten Farbcode.</p></div>RockSolid Themestag:help.rocksolidthemes.com,2012-07-23:Comment/455568142018-06-26T20:57:18Z2018-06-26T20:57:19ZVerwendung: Animierte Überschrift mit Hintergrundfarbe<div><p>Hallo,</p>
<p>vielen Dank das hat schonmal gut geklappt. Wie müsste der CSS Code aussehen um die Textzeile innerhalb des Elementtyps: Animierten Überschrift mit einem Hintergrund zu versehen?</p></div>brtag:help.rocksolidthemes.com,2012-07-23:Comment/455568142018-06-27T05:15:34Z2018-06-27T05:15:34ZVerwendung: Animierte Überschrift mit Hintergrundfarbe<div><p>Der angegeben CSS-Code bezieht sich bereits auf den Hintergrund der Textzeilen des Elementtyps „Animierte Überschrift“. Können Sie uns einen Screenshot senden der genau zeigt welchen Bereich Sie einfärben möchten?</p></div>RockSolid Themestag:help.rocksolidthemes.com,2012-07-23:Comment/455568142018-06-27T07:08:45Z2018-06-27T07:08:48ZVerwendung: Animierte Überschrift mit Hintergrundfarbe<div><p>Siehe Bild</p></div>brtag:help.rocksolidthemes.com,2012-07-23:Comment/455568142018-06-27T15:14:49Z2018-06-27T15:14:49ZVerwendung: Animierte Überschrift mit Hintergrundfarbe<div><p>Der CSS-Code dafür kann folgendermaßen aussehen:</p>
<pre>
<code>.typing-headline p {
background-color: #ff0000;
}</code>
</pre>
<p>Weitere Informationen zur Anpassung von Elementen finden Sie auch in unserem Tutorial <a href="http://rocksolidthemes.com/de/contao/support/tutorials/elemente-anpassen">Wie passe ich Element X an</a>.</p></div>RockSolid Themestag:help.rocksolidthemes.com,2012-07-23:Comment/455568142018-06-28T06:34:00Z2018-06-28T06:34:01ZVerwendung: Animierte Überschrift mit Hintergrundfarbe<div><p>Genau das haben wir gesucht. Danke</p>
<p>Noch eine kleine Frage dazu:<br>
Ist es möglich die Größe des Hintergrunds an die Textbreite automatisch anzupassen? Oder beim animierten Text mitwachsen zu lassen?</p></div>brtag:help.rocksolidthemes.com,2012-07-23:Comment/455568142018-06-28T10:13:59Z2018-06-28T10:13:59ZVerwendung: Animierte Überschrift mit Hintergrundfarbe<div><p>Für die Überschriften lässt sich das mit folgendem CSS-Code realisieren, allerdings wächst der Hintergrund dabei nicht mit der Animation mit:</p>
<pre>
<code>.typing-headline h2 > .typing-headline-dummy {
background-color: #ff0000;
}</code>
</pre>
<p>Für den Text muss zuerst das Template <em>templates/oneo/rsce_oneo_typing_headline.html5</em> bearbeitet werden und folgende Zeile:</p>
<pre>
<code><p<?php if ($this->textColor): ?> style="<?php echo htmlspecialchars($textColor) ?>"<?php endif ?>><?php echo $this->text ?></p></code>
</pre>
<p>mit dieser Zeile ersetzt werden:</p>
<pre>
<code><p<?php if ($this->textColor): ?> style="<?php echo htmlspecialchars($textColor) ?>"<?php endif ?>><span><?php echo $this->text ?><span></p></code>
</pre>
<p>Danach lässt sich der Texthintergrund folgendermaßen einfärben:</p>
<pre>
<code>.typing-headline p span {
background-color: #ff0000;
}</code>
</pre></div>RockSolid Themes