【WordPress】网站添加侧边彩色的滚动条

释放双眼,带上耳机,听听看~!

今天在访问友情链接九零优优网站的时候,看到了这篇不错的美化滚动条的css,我就给转载了。

WordPress默认浏览器侧边栏滚动条有点丑,当然,个别WordPress主题是自带美化的侧边滚动栏无需我们自己美化,有些WordPress主题是没有美化侧边滚动栏,没有怎么办呢,我们自己美化!优优网站长就教大家自定义美化侧边滚动栏。非常简单,一句代码的事情就可以完成自定义美化WordPress侧边滚动栏,代码适用于绝大多数WordPress主题。

使用方法

一般主题都会自带 自定义代码 这样主题设置的,只需在主题设置自定义CSS代码里面添加美化的css代码就即可美化啦!

如果主题没有 自定义代码 那么在WordPress主题目录文件里找style.css文件或者在WordPress后台里找“外观—>自定义—>额外CSS”里面美化的css代码就即可美!

单颜色的滚动条css代码如下:

/*滚动条显示样式*/  
::-webkit-scrollbar-thumb{
   background-color:#FF6666;  /*更改喜欢的十六进制颜色*/
   height:50px;  
   outline-offset:-2px;  
   outline:2px solid #fff;  
   -webkit-border-radius:4px;  
   border: 2px solid #fff;  
}  
/*滚动条大小*/ 
::-webkit-scrollbar{  
   width:8px;  
   height:8px;  
}  
/*滚动框背景样式*/  
::-webkit-scrollbar-track-piece{  
   background-color:#fff;  
   -webkit-border-radius:0;  
}

彩色的滚动条css代码,也是本站使用的

/**彩色滚动条样式*/
::-webkit-scrollbar {
  width: 10px;  
  height: 1px;
}
::-webkit-scrollbar-thumb {
  background-color: #12b7f5;
  background-image: -webkit-linear-gradient(45deg, rgba(255, 93, 143, 1) 25%, transparent 25%, transparent 50%, rgba(255, 93, 143, 1) 50%, rgba(255, 93, 143, 1) 75%, transparent 75%, transparent);
}
::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
    background: #f6f6f6;
}

给TA买糖
共{{data.count}}人
人已赞赏
PC壁纸壁纸默认

《Wallpaper Engine》截图壁纸分享

2021-5-3 15:35:34

其他默认

WordPress等博客使用QQ微信微博第三方授权登陆网站的实现方法

2021-5-10 8:13:37

声明:本站上的部份代码及教程来源于互联网,仅供网友学习交流,若您喜欢本文可附上原文链接随意转载。无意侵害您的权益,请发送邮件至 xutian@ahap.cn 或点击右侧 私信:许天娱乐 反馈,我们将尽快处理。
0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
购物车
优惠劵
有新私信 私信列表
搜索