Home → Contao →

Verwendung: TAO: Hintergrund der Elemente transparent

• Edit

Roland

18 Dec, 2015 08:58 AM

Produkt: Tao Contao

Guten Tag!

Ich möchte gerne den Hintergrund der Elemente als Transparent darstellen, so dass es möglich ist einen einheitlichen Hintergrund mit Designelementen zu erstellen. Wenn ich versuche die Hintergrundfarben über den Theme-Assistenten zu löschen werden diese immer wieder eingefügt. Leider lässt sich beim Farbwähler nur eine Farbe einstellen, allerdings keine Transparenz. Wie kann ich das ändern?

Vielen Dank!

1. Support Staff 1 Posted by RockSolid Theme... on 18 Dec, 2015 01:42 PM

   

   Vielen Dank für Ihre Frage.

   Um den Seitenhintergrund transparent zu gestalten, fügen Sie bitte folgenden CSS-Code in die Datei files/tao/css/custom.css ein:

   .page {
       background-color: transparent;
   }
   

   • Edit

2. 2 Posted by Roland on 19 Dec, 2015 08:13 AM

   

   Guten Tag.

   Bei einigen Elementen funktioniert es, bei anderen nicht.
   Der Navigationsbereich zum Beispiel, oder Icon Boxes, bleibt ebenfalls undurchsichtig.

   Vielen Dank

   • Edit

3. Support Staff 3 Posted by RockSolid Theme... on 21 Dec, 2015 09:54 AM

   

   Mit folgendem CSS-Code können Sie auch den Header-Bereich transparent gestalten:

   .page,
   .tagline,
   .header-bar,
   .header-navigation {
       background-color: transparent;
   }
   .header-links.-secondary a,
   .header-links.-secondary a:before {
       background-color: transparent !important;
   }
   

   Da die Navigation jedoch beim Scrollen die restlichen Inhalte überlagert, können dadurch unerwünschte Effekte auftreten und zu Problemen mit der Lesbarkeit führen.

   • Edit

4. 4 Posted by Eve on 09 Aug, 2018 03:41 PM

   

   Knüpfe hier mal an. Habe vergeblich nach einer Klasse gesucht die es möglich macht dem transparenten Bereich beim scrollen eine Hintergrundfarbe zu geben. Ich habe die Navigation über den Slider gelegt damit das Bild durchscheint. Beim scrollen sollte jedoch die Hintergrundfarbe greifen. Leider ist es so dass nur die header-navigation-inner zur Verfügung steht. Gibt es hier eine Lösung? Also zuerst unsichtbar und erst beim scrollen mit Hintergrundfarbe.
   Danke und liebe Grüße

   • Edit

5. Support Staff 5 Posted by RockSolid Theme... on 10 Aug, 2018 07:16 AM

   

   Vielen Dank für Ihre Frage.

   Dafür können Sie die Datei files/tao/js/script.js anpassen und vor der Zeile addClass(header, 'is-fixed'); folgenden Code einfügen:

   if (offset > 70) {
       addClass(header, 'enable-background');
   }
   else {
       removeClass(header, 'enable-background');
   }
   

   Über die CSS-Klasse .enable-background lässt sich dann der Hintergrund dann steuern.

   • Edit

6. 6 Posted by Eve on 10 Aug, 2018 09:25 AM

   

   SUPER
   Vielen Dank, klappt perfekt
   Wirklich ein klasse Support hier!!

   • Edit

7. 7 Posted by mike on 04 Dec, 2020 07:38 PM

   

   quote Ich habe die Navigation über den Slider gelegt damit das Bild durchscheint.

   Wie kann ich die Navigation über den Slider legen?

   • Edit

8. Support Staff 8 Posted by RockSolid Theme... on 07 Dec, 2020 09:00 AM

   

   Wie kann ich die Navigation über den Slider legen?

   Indem Sie z. B. den Tagline-Bereich nach oben verschieben. Dafür können Sie folgenden CSS-Code einsetzen:

   .tagline {
       margin-top: -85px;
   }
   

   • Edit

9. 9 Posted by Thomas Ritz on 08 Jul, 2024 12:42 PM

   

   This comment was split into a new discussion: Tao: Beim runter scrollen verkleinert sich das logo

   -

   • Edit