WordPress主题如何将侧边滚动条变成彩色

2022年5月10日13:32:07
评论

WordPress默认的浏览器侧边栏翻滚条是十分丑恶的,当然,有些WordPress主题是自带美化的侧边翻滚栏不需要咱们自己去美化,有些WordPress主题是没有美化侧边翻滚栏的,那么这时就需要咱们去美化啦!今日就教我们怎么自定义美化侧边翻滚栏。其实十分简略,只需一句代码的事情就可以自定义美化WordPress侧边翻滚栏,并且代码适用于绝大多数WordPress主题。

WordPress主题如何将侧边滚动条变成彩色

教程讲解/使用教程

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

如果主题没有自定义代码那么在WordPress主题目录文件里找style.css文件或者在WordPress后台里找“外观—>自定义—>额外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;  
}

彩色滚动条代码:

/**彩色滚动条样式*/
::-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;
}

 

WordPress实现和本地电脑对接Contabo对象存储 WordPress

WordPress实现和本地电脑对接Contabo对象存储

这是我第一次用国外的对象存储,综合对比了下选择了contabo家,不过由于他们家是新出来的,目前功能比较弱,地区也少,还默认走的cloudflare cdn,所以如果用户主要是面向国内的还是多考虑下吧...
WordPress如何获取文章顶级分类的目录信息 WordPress

WordPress如何获取文章顶级分类的目录信息

因为 WordPress 数据库结构设计的原因,有时候就级别多一点就需要循环了获取,如果分类目录层级多了,要想获取到顶级目录的信息还真的需要折腾一下,而且也查询过 WordPress 并没有提供相关的...
WordPress实现博文标题链接到自定义网址链接 WordPress

WordPress实现博文标题链接到自定义网址链接

相信不少博主遇到过需要把wordpress文章的标题链接到自定义的URL地址的情况,点击文章链接时不是直接访问文章详情页面,而是直接访问分享的链接网页,就像微博一样。要实现这种效果,可以使用插件:Pa...
匿名

发表评论

匿名网友 填写信息

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: