[WBB 4.0.12] SideBar Hintergrundfarbe beim Schließen/Öffnen via Transition anpassen

  • Nabend Zusammen,


    nach langer Zeit hat mich wieder die Lust zum erstellen von WBB Designs gepackt. Nach der anfänglichen Findungsphase habe ich mich schon recht gut eingearbeitet und hänge jetzt an der blöden Sidebar.
    Ich möchte gerne der Sidebar, wenn sie zugeklappt wird eine Transition zuweisen um die background-color zu ändern. Damit wäre die Sidebar dann im Design nicht mehr sichtbar. Einzig und allein der Button bleibt. Wenn die Sidebar aufgeklappt wird soll dann wieder die Ursprüngliche Background-color angeommen werden.


    Mir ist schon aufgefallen, dass sobald die Sidebar eingeklappt wird ein Script automatisch die Klasse .sidebarCollapsed zu einingen Elementen zufügt.
    Ist es möglich das ganze hier: "<aside class="sidebar" data-is-open="false" data-sidebar-name="com.woltlab.wbb.BoardListPage">" bei der Klasse einzufügen? Dann sollte es doch klappen oder?


    Andere Ideen sind natürlich erwünscht :3


    Ahja, fast vergessen. Die Höhe der Sidebar beträgt immer die Höhe des Contentbereiches. Ist es möglich die Höhe der Sidebar auf den Content der Sidebar zu limitieren?
    Habs nicht geschafft. :/


    Vielen Dank :)

    • Teambeitrag

    Du kannst:


    .sidebarOrientationRight .sidebar { … }


    und:


    .sidebarOrientationRight.sidebarCollapsed .sidebar { … }


    für die Transitions verwenden.


    Ansonsten ist das nicht ohne weiteres möglich da die Sidebar als Teil einer Tabelle definiert ist und Zellen sind nun mal immer so groß wie ihre angrenzen Zellen in der selben Reihe.


    Aber es spricht nichts dagegen den Container innerhalb der Sidebar zu verwenden:


    .sidebar > div { … }


    Der ist immer nur so hoch wie der Inhalt.

    Deine Anfrage wurde nicht beantwortet? Dann bitte einfach noch mal kurz im Thema nachfragen.


    Mein Blog: TwentyMag <- Lesen, Teilen, Liken, Kommentieren, Abonnieren. Ihr wisst bescheid, was labere ich hier groß rum :eyes:

  • Hey Tom,


    danke für die Hilfe!
    Habe jetzt einfach die background-color von .sidebar auf none gesetzt und nur mit der sidebar > div gearbeitet.
    Hat wunderbar geklappt, da wenn nur die div eine background-color hat, diese sowieso wenn die sidebar geschlossen wird nicht mehr zu sehen ist.
    Das Problem mit der höhe hat sich damit auch erledigt. :)