tag:help.rocksolidthemes.com,2012-07-23:/discussions/contao/55406-verwendung-animierte-headline-als-h1
RockSolid Themes: Discussion
2020-04-28T07:26:56Z
tag:help.rocksolidthemes.com,2012-07-23:Comment/48286742
2020-04-28T06:54:48Z
2020-04-28T06:55:09Z
Verwendung: animierte Headline als h1
<div><p>Vielen Dank für Ihre Frage.</p>
<p>Ersetzen Sie bitte in der Datei <em>files/oneo/css/main.css</em> alle Vorkommen von<br>
<code>.typing-headline h2</code> mit <code>.typing-headline h1</code>.</p>
<p>Fall Sie die <em>main.css</em>-Datei nicht anpassen möchten um Theme-Updates zu erleichtern können Sie folgenden CSS-Code in die Datei <em>files/oneo/css/custom.css</em> einfügen:</p>
<pre>
<code>.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;
}</code>
</pre></div>
RockSolid Themes
tag:help.rocksolidthemes.com,2012-07-23:Comment/48286742
2020-04-28T07:08:30Z
2020-04-28T07:08:32Z
Verwendung: animierte Headline als h1
<div><p>Besten Dank.</p></div>
Zille