AnleitungenSoftware - Tipps

Firefox Sidebar per Maushover öffnen




Standardmäßig ist im Firefox die Sidebar nach Aktivierung immer geöffnet. Nachteil, bei kleineren Monitoren fehlt dann der Platz in der Ansicht von Webseiten, und alles verschiebt sich nach rechts.

In meinem Beispiel soll nun die Sidebar auf der linken Seite vom Firefox darum nur durch einen Maushover erscheinen, bzw. automatisch wieder ausgeblendet werden wenn man die Maus wieder entfernt.

Hier möchte ich mal beschreiben wie man diese hover Funktion per CSS erstellt.

Bis zur Firefox Version 56 war es möglich einige Funktionen durch diverse Erweiterungen zu ändern.

Das Eine oder Andere ist seit der Firefox Version 57 nicht mehr möglich, da Mozilla dafür (zumindest noch) keine Schnittstelle mehr zur Verfügung stellt.



Aus diesem Grund muss man jetzt diese optischen Änderungen am Firefox mit einer userChrome.css Datei erstellen.

Dazu bedarf es allerdings erst einer kleineren Vorbereitung, die ich hier schon mal erklärt hatte.

userChrome.css erstellen

Sidebar per Maushover öffnen

Als erstes gehen wir in den Profilordner vom Firefox, öffnen den dort selber angelegten Ordner chrome, und klicken dann auf die Datei: userChrome.css und öffnen sie.

Dann fügen wir diesen CSS Code in die Datei ein:

/* Sidebar per Maushover einblenden */

@-moz-document url("chrome://browser/content/bookmarks/bookmarksPanel.xul"),

url("chrome://browser/content/browser.xul"),

url("chrome://browser/content/history/history-panel.xul") {

#menu_bookmarksSidebar {
display:-moz-box !important;
}

#sidebar-box {
display:-moz-box !important;
position:fixed!important;
top:125px; /* Abstand nach oben bis zur untersten Leiste vom Browser */
bottom:0px; /* Abstand nach unten bis zur Taskleiste */
width: 0px !important;
overflow-x: hidden !important;
-moz-appearance: none !important;
border: 1px solid transparent !important;
border-left: 0 !important;
opacity: 0 !important;
-moz-transition: width .2s ease-out .2s, opacity .2s ease-out .2s !important;
}

#sidebar-box:hover {
width: 230px !important; /* Breite der Sidebar */
opacity: 1 !important;
-moz-transition: width .2s ease-out .2s, opacity .2s ease-out .2s !important;
}

#sidebar-header {
width:100%;
border: 0 !important;
}

#sidebar {
display:-moz-box !important;
width:100%!important;
height:92%!important; /* Höhe der Sidebar */
}
}

(am besten den obigen Code mit der Maus markieren…kopieren..und dann einfügen)

Damit man später noch genau weiß was der jeweilige Code bedeutet, sollte man sich über dem CSS Code einen aussagekräftigen Hinweis erstellen.

Dazu schreibt man vor dem Text erst einen Slash und einen Stern /* dann die Beschreibung der Funktion…und als Abschluss schreibt man diesmal erst den Stern und dann das Slashzeichen */

Die Zeichen vorher und nachher bedeuten, dass der Text auskommentiert ist, und somit keinen Einfluss auf den CSS Code haben.

So sieht das dann mit dem Code aus:

Die CSS Bezeichnungen sind immer in englischer Sprache.

Sollte schon ein anderer Code in der userChrome.css vorhanden sein, dann schreibt man den neuen Code einfach unten drunter.

Hier mal ein Beispiel wie das bei einem schon vorhandenen Code aussieht.

Nachdem wir den Code eingetragen haben, schließen und speichern wir die Datei userChrome.css.

Jetzt muss man einmalig die Sidebar aktivieren durch setzen eines Hakens unter:

Ansicht..Sidebar..

und hier dann als Beispiel mal auf: Lesezeichen

Sollte der Firefox noch geöffnet sein bitte schließen und neu starten, denn erst nach einem Neustart wird der CSS Code aktiviert.

Wenn man jetzt mit der Maus an den linken Rand vom Desktop geht, öffnet sich die Sidebar und schiebt sich über die gerade geöffnete Webseite.

Entfernt man die Maus wieder vom Rand, schließt sich die Sidebar automatisch, ohne dass sich die Position der Webseite verändert.

 

Hier hatte ich mal beschrieben was man alternativ zur userChrome.css Datei am besten machen sollte:

userChrome.css aufräumen

 

Tags
Mehr anzeigen

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.