Verwendung: animierte Headline als h1

zille's Avatar

zille

28 Apr, 2020 05:31 AM

Produkt: Oneo Newsletter- & Print-Templates Contao
Contao-Version: 4.9.2

Moin,
die animierte Überschrift ist als h2 (und h3) definiert.
Ich möchte diese gern als h1 (und h3) verwenden und habe dazu im Tamplate »rsce_oneo_typing_headline.html5« in Zeile 40 auf h1 geändert. Tatsächlich wird jetzt die Überschrift als h1 ausgegegeben … allerdings mit einem eigenartigen Effekt: der eingetragene Text wird 2x hintereinander angezeigt.
Was mache ich falsch?

  1. Support Staff 1 Posted by RockSolid Theme... on 28 Apr, 2020 06:54 AM

    RockSolid Themes's Avatar

    Vielen Dank für Ihre Frage.

    Ersetzen Sie bitte in der Datei files/oneo/css/main.css alle Vorkommen von
    .typing-headline h2 mit .typing-headline h1.

    Fall Sie die main.css-Datei nicht anpassen möchten um Theme-Updates zu erleichtern können Sie folgenden CSS-Code in die Datei files/oneo/css/custom.css einfügen:

    .typing-headline h1 {
        position: relative;
        margin: 0;
        font-size: 4em;
        line-height: 1.2;
    }
    @media screen and (max-width: 599px) {
        .typing-headline h1 {
            font-size: 2.4em;
        }
    }
    .typing-headline h1 > .typing-headline-dummy {
        color: transparent;
        pointer-events: none;
    }
    .typing-headline h1 > .typing-headline-text {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }
    .typing-headline h1 > .typing-headline-text.is-typing:after,
    .typing-headline h1 > .typing-headline-text.is-done-typing:after {
        content: "";
        display: inline-block;
        vertical-align: middle;
        width: 0;
        height: 1em;
        margin: -0.5em -0.06667em -0.5em 0.03333em;
        border-left: 2px solid currentColor;
    }
    .typing-headline h1 > .typing-headline-text.is-done-typing:after {
        margin-right: -0.33333em;
        margin-left: 0.3em;
        -webkit-animation: typing-cursor 0.5s linear infinite alternate;
        animation: typing-cursor 0.5s linear infinite alternate;
    }
    .typing-headline h1 {
        font-weight: bold;
    }
    
  2. 2 Posted by Zille on 28 Apr, 2020 07:08 AM

    Zille's Avatar

    Besten Dank.

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