Verwendung: TAO: Hintergrund der Elemente transparent

Roland's Avatar

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

    RockSolid Themes's Avatar

    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;
    }
    
  2. 2 Posted by Roland on 19 Dec, 2015 08:13 AM

    Roland's Avatar

    Guten Tag.

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

    Vielen Dank

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

    RockSolid Themes's Avatar

    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.

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

    Eve's Avatar

    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

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

    RockSolid Themes's Avatar

    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.

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

    Eve's Avatar

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

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