scrollbar.css - so geht es einfach
Themenseiten
Wenn ich eine Seite mit farblichem Hintergrund erstelle, möchte ich gerne auch die Scrollbar anpassen. In meinem Fall, wenn ich einen schwarzen Hintergrund verwende, stört mich eine helle Scrollbar. Nun habe ich einige Versuche gemacht und dabei ist diese CSS-Datei entstanden. Vorraussetzung ist ein aktueller Browser wie z.B. Mozilla Firefox, Google Chrome, Microsoft Edge oder Safari. Leider klappt es nicht so gewünscht mit dem Opera. Im Firefox, der mein Favorit ist, habe ich es nicht geschafft, den "Thumb" (Scrollbalken in der Scrollbar) abzurunden, oder in der Breite in Pixeln zu beeinflussen...
c Bitte Beachten: Das Aussehen kann sich auch schnell wieder ändern, da die Entwickler aller Browser ständig neue Features entwickeln!
Wer also gerne ebenfalls seine scrollbar farblich anpassen möchte, kann diese CSS-Datei verwenden, die sie am Ende dieser Seite herunterladen können. Wollen Sie Ihre Seiten mit unterschiedlichen Farben anzeigen, erstellen Sie einfach eine neue CSS-Datei - für jede Seite andere Farbe, eine andere Variante.
In der CSS-Datei ist das Notwendigste dokumentiert.
Um diese CSS-Datei zu nutzen, sollten Sie zuerst die Farben wählen (hier Rot markiert):
/* Scrollbar mit CSS farblich beeinflussen - Funktioniert nur mit Aktuellen Browsern */
/* In dieser Datei: Scrollbalken in Rot und Scrollbar in Schwarz */
/* Funktioniert mit dem Firefox */
* {
scrollbar-width: auto; /* scrollbar-width: thin; oder ... : none; */
scrollbar-color: #FF0000 #000000; /* Farben Rot Schwarz */
}
/* Funktioniert mit dem Google Chrome, Microsoft Edge und dem Safari */
*::-webkit-scrollbar {
width: 18px; /* Breite der Scrollbar */
}
*::-webkit-scrollbar-track {
background: #000000; /* Farbe Schwarz */
}
*::-webkit-scrollbar-thumb {
background-color: #FF0000; /* Farbe Rot */
border-radius: 20px; /* Scrollbalken mit abgerundeten Enden */
border: 3px #000000; /* Rahmen-Farbe Schwarz, Breite 3 Pixel */
}
*::-webkit-scrollbar-button { /* Farben für die Buttons am Anfang und Ende der Scrollbar */
background: #FF0000; /* Farbe des Buttons Rot */
border: 2px solid #FFFFFF; /* Farbe des Buttonrahmens Weiss */
}
Nach der Anpassung der gewünschten Farben, muss die CSS-Datei auf den Server geladen werden.
Nun muss für die entspechende Seite noch eine Zeile Code eingefügt werden, damit die CSS-Datei geladen wird:
<link rel="stylesheet" type="text/css" href="scrollbar.css" media="screen" />
Haben Sie die CSS-Datei in einem Ordner abgelegt, passen Sie den Pfad entsprechend im Code an. Sie können auch die komplette URL eingeben:
<link rel="stylesheet" type="text/css" href="https://www.ihr-domainname.de/ihr-ordnername/scrollbar.css" media="screen" />
Diesen Code fügen Sie am besten wie folgt ein:
Klicken Sie in Ihrer websiteX5-Version auf "Sitemap" und aktivieren die gewünschte Seite durch einmaliges Anklicken. Dann wählen Sie oben im Hauptmenü die Option "Eigenschaften" und klicken anschließend im Untermenü auf "Erweitert" (siehe folgende Abbildung). Hier wählen Sie im Listenfeld die Option "nach dem <body>-Tag". Hier fügen Sie die Code-Zeile ein. Nun sollte alles einwandfrei funktionieren.
Hier können Sie sich die Codezeile in einer txt-Datei und die CSS-Datei in einer ZIP-Datei herunterladen.
CSS scrollbar
Erstellt: 20.05.2023
Revision 01 vom 04.06.2023 - Erweiterung für Firefox für Scrollbar-Weite
Wissenswert zur Scrollbar beim Firefox: