WordPress如何添加侧边彩色滚动条?

WordPress如何添加侧边彩色滚动条?

  • 最近更新2021年04月27日

WordPress默认的浏览器侧边栏滚动条是非常丑陋的,当然,有些WordPress主题是自带美化的侧边滚动栏不需要我们自己去美化,有些WordPI W 0 5 ^resx C p % Fs主题是没有美化侧边滚动栏的,那么这时就需要我们去美化啦!星语站长今天就教大家如何自定义美化侧边滚动d E i D栏。其实非常简单,只需一句代码的事情就可以自定义美化WordPress侧边滚动栏,并且代码适用于绝大多数WordPress主题。

1619453394-a80a507683aa45b

O ) * } M用方法

  • 一般主题都会自带自定义p m q n ~ o % s (代码@ [ f这样主题设置的,只需在主题设置自定义CSS代码里面添加美化的css代码就即可美化啦!
  • 如果主题没有自定义代码那么在Wor~ l R 7dPress主题目录文件; C O里找style.css文件或者在WordPress后台里找“外观--->自定义--->额外CSS”里面美化的css代码就即可美!

单色滚动条代码:

/*滚动条显示样式*/
::-webkit-sch a % ? :rollbar-thumb{
backgrou@ i 6 , Vnd-color:#FF6666; /*更改喜欢的十六进制颜色*/
heigb \ h f Q O e h ]ht:50px;
outline-offset:-2px;
outlineV u N:2px solid #fff;
-we\ D 7bkit-border-radius:4px;
border: 2px solid #fff;
}
/*滚动条大小*/
::-webkit-scrollbar{
width:8px;
height:8px;
}
/= 7 h V } P c*滚动框背景样式*/
:V 6 4 i u 4 K ] #:-webkit-scrollbar-track-piece{
background-color:#fff;
-webkit-border-radius:0;
}

彩色滚动条代码:

/**彩色滚动条样式*/
::-webkit-scrollbar {
width: 10px;
height: 1px;
}
::-webkit-scrollbar-thumb {
background-colorM , 5 X 9 P: #12b7f5;
backz _ , O Bground-image: -webkit-lineP ! l rar-gradient(45deg, rgba(255, 93, 143, 1) 25%, transparent 25%, transparent 50%, rgba(255, 93, 143, 1) 50%, rgba(2@ T H 1 ( A55, 93, 143, 1) 75%, transparent 75%, transparentT { m G Z ` I);
}
::-webkit-s! B ` + Y G M [ Ncrollbar-track {
-webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
backgroundc / | F . $ +: #f6f6f6;
}
分享到 :
相关推荐

在QQ/微信中被拦截提示在浏览器打开网站解决方案

 相信各位站长朋友们,经常会遇到在QQ里面或者是在微信里面发的个人网站链接...

开源可运营全新淘宝客APP双端原生源码

源码简介:独家首发淘宝客APP源码开源私有化部署淘宝客原生态可运营可二次开发,含全套...

资源俱乐部突然关站的原因以及网站备案的经历与心得

最近很多人在咨询资源俱乐部,为什么没有任何的通知就突然关战了是不是倒闭了或者跑路了?...

WordPress速度优化经验

WordPress作为一个动态网站如果不经过一番优化速度是比较慢的,速度慢的影响就不...