Verwendung: Tao Floating Sidebar

Tim's Avatar

Tim

10 Jul, 2018 12:33 PM

Produkt: Tao Contao
Contao-Version: 3.5.35

Hallo,
wie kann ich eine floating Sidebar in Tao einfügen?
Beispiel: https://mashshare.net/wp-content/uploads/edd/2016/01/floating.png

Vielen Dank für Ihre Mühe!

  1. Support Staff 1 Posted by RockSolid Theme... on 11 Jul, 2018 05:31 AM

    RockSolid Themes's Avatar

    Vielen Dank für Ihre Nachricht.

    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:

    Sie können dafür z. B. ein Inhaltselement vom Typ „Icon-Links“ erstellen und die CSS-Klasse floating-sidebar zuweisen. Danach fügen Sie folgenden CSS-Code in die Datei files/tao/css/custom.css ein um das Element am linken Bildschirmrand zu positionieren:

    .floating-sidebar {
        position: fixed;
        top: 50%;
        left: 0;
        transform: translateY(-50%);
        z-index: 1;
    }
    
  2. 2 Posted by Ralf on 14 May, 2025 02:36 PM

    Ralf's Avatar

    Hallo, gibt es eine Möglichkeit in Tao diesen Button dann nur in der mobilen Version anzuzeigen? Vielen Dank.

  3. Support Staff 3 Posted by RockSolid Theme... on 15 May, 2025 09:33 AM

    RockSolid Themes's Avatar

    Vielen Dank für Ihre Frage.

    Ja, das ist möglich indem Sie einen Media-Query verwenden um den Button auszublenden. Der CSS-Code dafür kann z. B. folgendermaßen aussehen:

    @media (min-width: 600px){
        .floating-sidebar {
            display: none;
        }
    }
    

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