Verwendung: Animierte Überschrift mit Hintergrundfarbe

br's Avatar

br

25 Jun, 2018 12:45 PM

Produkt: Oneo Contao
Contao-Version: 3.5.34

Hallo,
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?

Schonmal vielen Dank für eure Hilfe.

  1. Support Staff 1 Posted by RockSolid Theme... on 26 Jun, 2018 05:18 AM

    RockSolid Themes's Avatar

    Vielen Dank für Ihre Frage.

    Dafür können Sie folgenden CSS-Code in die Datei files/oneo/css/custom.css einfügen:

    .typing-headline h1 {
        background-color: #ff0000;
    }
    .typing-headline h2 {
        background-color: #ff0000;
    }
    .typing-headline h3 {
        background-color: #ff0000;
    }
    

    Ersetzen Sie dabei ff0000 mit dem jeweiligen gewünschten Farbcode.

  2. 2 Posted by br on 26 Jun, 2018 08:57 PM

    br's Avatar

    Hallo,

    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?

  3. Support Staff 3 Posted by RockSolid Theme... on 27 Jun, 2018 05:15 AM

    RockSolid Themes's Avatar

    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?

  4. 4 Posted by br on 27 Jun, 2018 07:08 AM

    br's Avatar
  5. Support Staff 5 Posted by RockSolid Theme... on 27 Jun, 2018 03:14 PM

    RockSolid Themes's Avatar

    Der CSS-Code dafür kann folgendermaßen aussehen:

    .typing-headline p {
        background-color: #ff0000;
    }
    

    Weitere Informationen zur Anpassung von Elementen finden Sie auch in unserem Tutorial Wie passe ich Element X an.

  6. 6 Posted by br on 28 Jun, 2018 06:34 AM

    br's Avatar

    Genau das haben wir gesucht. Danke

    Noch eine kleine Frage dazu:
    Ist es möglich die Größe des Hintergrunds an die Textbreite automatisch anzupassen? Oder beim animierten Text mitwachsen zu lassen?

  7. Support Staff 7 Posted by RockSolid Theme... on 28 Jun, 2018 10:13 AM

    RockSolid Themes's Avatar

    Für die Überschriften lässt sich das mit folgendem CSS-Code realisieren, allerdings wächst der Hintergrund dabei nicht mit der Animation mit:

    .typing-headline h2 > .typing-headline-dummy {
        background-color: #ff0000;
    }
    

    Für den Text muss zuerst das Template templates/oneo/rsce_oneo_typing_headline.html5 bearbeitet werden und folgende Zeile:

    <p<?php if ($this->textColor): ?> style="<?php echo htmlspecialchars($textColor) ?>"<?php endif ?>><?php echo $this->text ?></p>
    

    mit dieser Zeile ersetzt werden:

    <p<?php if ($this->textColor): ?> style="<?php echo htmlspecialchars($textColor) ?>"<?php endif ?>><span><?php echo $this->text ?><span></p>
    

    Danach lässt sich der Texthintergrund folgendermaßen einfärben:

    .typing-headline p span {
        background-color: #ff0000;
    }
    

Reply to this discussion

Internal reply

Formatting help / Preview (switch to plain text) No formatting (switch to Markdown)

Attaching KB article:

»

Attached Files

You can attach files up to 10MB

If you don't have an account yet, we need to confirm you're human and not a machine trying to post spam.

Keyboard shortcuts

Generic

? Show this help
ESC Blurs the current field

Comment Form

r Focus the comment reply box
^ + ↩ Submit the comment

You can use Command ⌘ instead of Control ^ on Mac