WordPress website building tutorial, beautify/customize browser side scroll bar

888u

Last update at :2024-01-30,Edit by888u

WordPress's default browser sidebar scroll bar is very ugly. This time the blogger will teach you how to customize and beautify the sidebar. It is very simple, can be solved with just one line of code, and is suitable for most themes.

1. Beautify the code

Add the following code in the WordPress style.css file or "Appearance>Customization>Additional CSS" or in the theme settings custom CSS code:

/*---Scroll bar default display style--*/ ::-webkit-scrollbar-thumb{ background-color:#018EE8; height:50px; outline-offset:-2px; outline:2px solid #fff; -webkit-border-radius:4px; border: 2px solid #fff; } /*---Scroll bar size-change parameters according to your preference-*/ ::-webkit-scrollbar{ width:8px; height:8px; } /*---Scroll box background style--*/ ::-webkit-scrollbar-track-piece{ background-color:#fff; -webkit-border-radius:0; }

Recommended site searches: Chinese domain name registration, Hong Kong IP, host space, vps IP exchange, domain name registration information query domain name space, domain name, registration-free virtual space, Korean independent server, US server website,

WordPress website building tutorial, beautify/customize browser side scroll bar

All copyrights belong to 888u unless special state
取消
微信二维码
微信二维码
支付宝二维码