2 Fragen zu Sidebar

Um beim Klick auf ein Overlay die entsprechende Offcanvas-Sidebar zu schließen oder zu ändern, kannst du JavaScript oder jQuery verwenden. Hier ist ein einfaches Beispiel, wie du das umsetzen kannst: 1. **HTML-Struktur**: Stelle sicher, dass du zwei Offcanvas-Elemente und ein Overlay hast. ```html <div id="overlay" class="overlay"></div> <div id="offcanvas1" class="offcanvas">Inhalt Sidebar 1</div> <div id="offcanvas2" class="offcanvas">Inhalt Sidebar 2</div> ``` 2. **CSS**: Füge grundlegende Stile für das Overlay und die Sidebars hinzu. ```css .overlay { display: none; /* Standardmäßig versteckt */ position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5); } .offcanvas { display: none; /* Standardmäßig versteckt */ position: fixed; top: 0; right: 0; width: 300px; height: 100%; background: white; } ``` 3. **JavaScript**: Verwende JavaScript, um das Overlay und die Sidebars zu steuern. ```javascript let currentSidebar = null; function openSidebar(sidebarId) { if (currentSidebar) { closeSidebar(currentSidebar); } currentSidebar = sidebarId; document.getElementById(sidebarId).style.display = 'block'; document.getElementById('overlay').style.display = 'block'; } function closeSidebar(sidebarId) { document.getElementById(sidebarId).style.display = 'none'; document.getElementById('overlay').style.display = 'none'; currentSidebar = null; } document.getElementById('overlay').addEventListener('click', function() { if (currentSidebar) { closeSidebar(currentSidebar); } }); ``` 4. **Sidebar öffnen**: Du kannst die Sidebars mit einer Funktion öffnen, z.B. durch einen Button-Klick. ```html <button onclick="openSidebar('offcanvas1')">Sidebar 1 öffnen</button> <button onclick="openSidebar('offcanvas2')">Sidebar 2 öffnen</button> ``` Mit diesem Setup wird beim Klick auf das Overlay die aktuell geöffnete Sidebar geschlossen. Du kannst die `openSidebar`-Funktion aufrufen, um eine Sidebar zu öffnen, und das Overlay wird angezeigt, solange eine Sidebar geöffnet ist.

Im Firefox-Browser lässt sich die Hintergrundfarbe der Lesezeichen-Sidebar nicht direkt über die normalen Einstellungen ändern. Allerdings kannst du das Aussehen der Sidebar mit Hilfe von benutzerdefinierten CSS-Anpassungen verändern. Das geschieht über die Datei **userChrome.css**. Hier eine Schritt-für-Schritt-Anleitung: 1. **Benutzerprofil-Ordner finden:** - Gib in die Adressleiste `about:support` ein und drücke Enter. - Klicke beim Eintrag „Profilordner“ auf „Ordner öffnen“. 2. **Ordner „chrome“ anlegen:** - Im Profilordner sollte ein Ordner namens `chrome` existieren. Falls nicht, erstelle ihn. 3. **Datei „userChrome.css“ erstellen oder bearbeiten:** - Lege im `chrome`-Ordner eine Datei mit dem Namen `userChrome.css` an (Texteditor verwenden). - Füge folgenden Beispiel-Code ein, um die Hintergrundfarbe der Lesezeichen-Sidebar zu ändern (z.B. auf hellgrau): ```css #bookmarksPanel { background-color: #f0f0f0 !important; } ``` - Du kannst die Farbe (`#f0f0f0`) nach Wunsch anpassen. 4. **CSS-Unterstützung aktivieren:** - Öffne `about:config` in Firefox. - Suche nach `toolkit.legacyUserProfileCustomizations.stylesheets` und setze den Wert auf `true`. 5. **Firefox neu starten:** - Schließe und starte Firefox neu, damit die Änderungen wirksam werden. **Hinweis:** Diese Anpassung wirkt sich nur auf deinen lokalen Firefox aus und kann nach Updates ggf. angepasst werden müssen. Weitere Infos findest du z.B. im [Mozilla-Wiki zu userChrome.css](https://wiki.mozilla.org/UserChrome.css). **Achtung:** Das Bearbeiten von `userChrome.css` ist eine fortgeschrittene Anpassung und wird offiziell von Mozilla nicht unterstützt. Änderungen erfolgen auf eigene Gefahr.