Home → Contao →

Verwendung: Animierte Überschrift Platzierung

• Edit

Michi

05 Jul, 2024 08:07 AM

Produkt: Oneo Contao
Contao-Version: 3.5.36
Browser und Browserversionen: Firefox und Chrome

Hallo
Ich wollte die Animierte Überschrift nicht zentriert sondern am unteren Rand des Slider-Bildes einfügen und zudem mit einem leicht transparenten Hintergrund hinterlegen.
Ich habe es über diese css Anpassung versucht:
.typing-headline h2 > .typing-headline-text, .typing-headline h3 > .typing-headline-text { position: absolute; top: 250px; left: 0; width: 100%; height: 100%; background-color: lightgreen; }

Ich habe hier das "Top" geändert und auch "Background-color" hinzugefügt. Grundsätzlich bring ich es so schon an den unteren Rand des Sliders, doch in der mobilen Version sieht das dann nicht mehr so gut aus.
Gibt es eine andere css Anpassung, die besser ist und dann auch auf allen Endgeräten funktioniert ?

Vielen Dank und Grüsse
Michi

1. Support Staff 1 Posted by RockSolid Theme... on 05 Jul, 2024 01:58 PM

   

   Vielen Dank für Ihre Frage.

   Ihre Frage betrifft eine individuelle Anpassung. In unseren Support-Richtlinien weisen wir darauf hin, dass wir leider keine Hilfe bei Umbauten leisten können. Dennoch versuchen wir Ihnen, in diesem Fall, im Rahmen unserer Möglichkeiten weiterzuhelfen:

   Gibt es eine andere css Anpassung, die besser ist und dann auch auf allen Endgeräten funktioniert ?

   Mit folgendem CSS-Code sollte sich der gewünschte Effekt realisieren lassen:

   @media (min-width: 1024px) {
       .main-slider .typing-headline {
           margin-top: max(0px, calc(100vh - 35em));
       }
   }
   .main-slider .typing-headline > :is(h1, h2, h3) {
       background-color: rgba(144, 238, 144, 0.8);
   }
   

   • Edit

2. 2 Posted by Michi on 08 Jul, 2024 11:27 AM

   

   Vielen Dank, mit Eurem Vorschlag habe ich den transparenten Hintergrund bekommen, doch leider ist die animierte Schrift nicht am unteren Rand des Sliders... Muss ich da noch was anpassen ?
   https://fussballcamp.svruemlang.ch/index.php/home.html

   Vielen Dank und Grüsse

   • Edit

3. Support Staff 3 Posted by RockSolid Theme... on 09 Jul, 2024 11:43 AM

   

   In unserem Test befand sich die animierte Überschrift im unteren Bereich des Sliders, siehe Screenshot anbei.

   Die genaue Position können Sie durch Veränderung des Werts 35em einstellen.

   • Screenshot-Slider.png 2.92 MB
   • Edit

4. 4 Posted by Michi on 26 Aug, 2024 04:12 PM

   

   Hallo, kann es sein das mit der obigen erwähnten Einstellung das Titelbild, der Slider in der Mobilen Version anders ist ? Bei meinem hand in Hochfformat ist die animierte Schrift wieder mitten im Bild, sogar eher am oberen Rand des Bildes.
   Wenn ich es quer halte, dann ist es auch eher oben und vor allem ist das Titelbild viel kleiner als sonst, resp es ist nicht voll im Header ausgefüllt. Klemmt das irgendwo im css mit der obigen erwähnten Anpassung ?

   • Edit

5. Support Staff 5 Posted by RockSolid Theme... on 28 Aug, 2024 10:02 AM

   

   Ja, der CSS-Code der sich innerhalb von @media (min-width: 1024px) { … } befindet wird nur auf Bildschirmbreiten größer als 1024 Pixel angewendet.

   • Edit

6. 6 Posted by Michi on 01 Sep, 2024 11:27 AM

   

   Hallo, ich habe den Effekt auf svr1.loeffler-web.ch versucht einzubauen.
   Was mit aber aufgefallen ist, dass auf dem Handy Hochformat und Querformat das Bild nicht voll ausgefüllt ist. Beim Hochformat geht es nur knapp bis an die Linie, beim Querformat hat es einen riesen Abstand zur Navigation. Wie bekomme ich es hin, dass das Bild auch auf dem Handy voll bis an den Rand der Navigation gefült ist ?

   • Edit

7. Support Staff 7 Posted by RockSolid Theme... on 02 Sep, 2024 10:11 AM

   

   Stellen Sie dafür bitte in den Einstellungen des Slides den „Hintergrund-Skalierungsmodus“ auf „Beschneiden“ ein. Dadurch wird verhindert, dass ein weißer Rand unter dem Bild entsteht.

   • Edit

8. 8 Posted by Michael Löffler on 02 Sep, 2024 10:32 AM

   

   Vielen Dank, ich habe die Einstellung vorgenommen, doch auf der Einstiegsseite sehe ich dafür keine Veränderung Es hat nach wie vor unten einen weissen Rand und bei der Quer-Version einen sehr grossen Rand.
   Svr1.loeffler-web.ch

   Sehen Sie ob es da noch irgendwo anders blockt ?

   • Edit

9. Support Staff 9 Posted by RockSolid Theme... on 03 Sep, 2024 09:24 AM

   

   Dem Quelltext nach zu urteilen ist der „Hintergrund-Skalierungsmodus“ nach wie vor auf „Proportional“ eingestellt.

   Navigieren Sie im Contao-Backend bitte zu: „Inhalte › RockSolid Slider › Slider bearbeiten › Slide-Einstellungen bearbeiten“ und nehmen dort die erwähnte Einstellung im Bereich „Hintergrund“ vor.

   • Edit