WordPress的默认浏览器侧边栏滚动条非常难看。当然,一些WordPress主题有自己的美化侧边栏,我们不需要自己美化它。有些WordPress主题没有美化侧边栏,所以我们这时候需要美化它!今天,教我们如何定制和美化侧翻栏。其实很简单。你只需要一段代码就可以自定义和美化WordPress的侧边栏,这段代码适用于大多数WordPress主题。
通用主题将使用它们自己的自定义代码进行设置。只需在主题设置自定义css代码中添加美化CSS代码即可美化它们!
如果主题没有自定义代码,请在WordPress主题目录文件中查找style.css文件或查找“外观-》;自定义-》额外css中的美化CSS代码可以很漂亮!
单色滚动条代码:
/*滚动条显示样式*/::-Webkit-Scroll bar-thumb { background-color:# ff 6666;/*更改您喜欢的十六进制颜色*/height:50px;轮廓偏移:-2px;大纲:2px solid # fff-WebKit-border-radius:4px;边框:2px solid # fff}/*滚动条大小*/::-Webkit-Scroll bar { width:8px;高度:8px}/*滚动框背景样式*/::-Webkit-Scroll bar-track-piece { background-color:# fff;-WebKit-border-radius:0;}彩色滚动条代码:
/* *彩色滚动条样式*/::-Webkit-scroll bar { width:10px;高度:1px}::-WebKit-scroll bar-thumb { background-color:# 12b7f 5;背景-图像:-WebKit-线性-渐变(45deg,rgba(255,93,143,1)25%,透明25%,透明50%,rgba(255,93,143,1)50%,rgba(255,93,143,1)75%,透明75%,透明);}::-WebKit-scroll bar-track {-WebKit-box-shadow:inset 0 0 5px rgba(0,0,0,0.2);背景:# f6f6f6}