Wilt u een aangepaste schuifbalk toevoegen in WordPress? Door het uiterlijk van de schuifbalk te wijzigen, kunt u vooral opvallen wanneer u een aangepast thema voor uw website maakt.
In dit artikel laten we u zien hoe u eenvoudig een aangepaste schuifbalk in WordPress kunt toevoegen. We laten u twee oplossingen zien en u kunt er een kiezen die het beste bij u past.
Problemen met aangepaste schuifbalkkleuren
CSS wordt standaard niet geleverd met een regelset waarmee u de eigenschappen van de schuifbalk kunt wijzigen. Er zijn enkele voorstellen om dit toe te voegen, maar deze worden momenteel niet door de meeste browsers ondersteund.
Om dit te verhelpen, gebruiken ontwerpers en ontwikkelaars browserspecifieke pseduo-elementen of JavaScript om het standaard uiterlijk van de schuifbalk te negeren.
We laten je beide technieken zien. Houd er echter rekening mee dat u uw site met verschillende browsers en apparaten moet testen om er zeker van te zijn dat deze correct werkt in alle browsers.
Dat gezegd hebbende, laten we eens kijken hoe u aangepaste schuifbalkkleuren in WordPress kunt toevoegen.
Methode 1. Voeg een aangepaste schuifbalk toe aan WordPress met een plug-in
Deze methode is eenvoudiger en wordt aanbevolen voor de meeste gebruikers. Het ondersteunt echter geen mobiele browsers.
Allereerst moet u de plug-in Advanced Scrollbar installeren en activeren .
Na activering moet u naar de pagina Instellingen »Instellingen schuifbalk voor aangepaste kleuren gaan om de plug-in te configureren.
Vanaf hier kunt u de kleur van de schuifbalk en de achtergrondkleuren van de schuifbalk wijzigen. U kunt vervolgens de scrolstap van de muis selecteren, dit is de scrollsnelheid van het muiswiel.
U kunt ook selecteren of u de schuifbalk automatisch wilt verbergen of altijd wilt weergeven.
Je hebt de optie om de optie ‘Alleen cursor’ te kiezen, die de schuifbalk zou weergeven, maar niet de knop.
Daaronder vindt u opties om de scrollsnelheid in te stellen, de uitlijning van de rails (links of rechts) te wijzigen en het aanraakgedrag in te schakelen.
Vergeet niet op de knop Wijzigingen opslaan te klikken om uw instellingen op te slaan.
U kunt nu uw website bezoeken om uw aangepaste schuifbalkkleuren in actie te zien.
Methode 2. Voeg aangepaste schuifbalkkleuren toe in WordPress met behulp van CSS
Deze methode gebruikt CSS om je schuifbalk op te maken, wat sneller is dan met jQuery.
Het werkt echter alleen op desktopbrowsers die gebruikmaken van de WebKit-rendering-engine zoals Google Chrome, Safari, Opera en meer.
Het heeft geen effect op mobiele browsers of Firefox en Edge op desktopcomputers.
U moet de volgende aangepaste CSS aan uw WordPress-thema toevoegen .
| 12345678910111213141516171819202122 | ::-webkit-scrollbar {-webkit-appearance: none;}::-webkit-scrollbar {width: 10px;} ::-webkit-scrollbar-track {background: #ffb400; border:1px solid #ccc;} ::-webkit-scrollbar-thumb {background: #cc00ff; border:1px solid #eee;height:100px;border-radius:5px;} ::-webkit-scrollbar-thumb:hover {background: blue; } |
Voel je vrij om kleuren en andere CSS-eigenschappen te wijzigen.
Als u tevreden bent, vergeet dan niet uw wijzigingen op te slaan. Daarna kunt u een voorbeeld ervan bekijken in een ondersteunde browser.
Dit is hoe het eruit zag op onze demo-website tijdens het bekijken op Google Chrome op een Mac-computer.
We hopen dat dit artikel je heeft geholpen om te leren hoe je een aangepaste schuifbalk in WordPress kunt toevoegen.
0 Comments