如何更换WP-Polls投票插件结果的样式？

WP-Polls 投票插件非常强大，但是它的投票结果样式太丑了，为了让我们的投票结果更加活泼生动，非常有必要把这个投票结果样式改变一下，比如每一个结果显示的颜色都不一样，具体做法如下：

第一步：在WordPress后台 >> 点击“投票 – 投票选项”>> 投票条形图样式中选择“使用CSS样式”，并点击底部的【保存更改】按钮。具体见下图所示：

第二步：在“投票 – 调查模板”页面，将两个“结果正文”中的以下代码：

<div class="pollbar"

都修改为

<div class="pollbar0"

最后记得点击底部的【保存更改】按钮。

第三步：在WordPress后台点击“插件 – 插件文件编辑器”，在“选择要编辑的插件”中选择“WP-Polls”，并点击【选择】按钮，然后点击选择polls-css.css文件，最后在该文件代码最后添加以下代码（PS：代码只添加了6个选项的背景色，如需更多选项背景色请自行添加），并点击【更新文件】按钮。

.wp-polls-ul li:nth-child(1) .pollbar0 {
background: rgb(66, 136, 208);
}
.wp-polls-ul li:nth-child(2) .pollbar0 {
background: rgb(46, 204, 113);
}
.wp-polls-ul li:nth-child(3) .pollbar0 {
background: rgb(82, 82, 82);
}
.wp-polls-ul li:nth-child(4) .pollbar0 {
background: rgb(90, 104, 165);
}
.wp-polls-ul li:nth-child(5) .pollbar0 {
background: rgb(230, 126, 34);
}
.wp-polls-ul li:nth-child(6) .pollbar0 {
background: rgb(44, 62, 80);
}
.wp-polls .pollbar0 {
border: 1px solid #c8c8c8;
height: 25px;
border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
}

至此，我们就成功更换了WP-Polls投票插件结果的样式。具体投票结果样式效果如下图所示：

当然，如果你不喜欢上图中的投票结果样式，只需要修改上文第三步中第1～18行代码的背景色即可。

本文地址：https://boke112.com/article/p4199.html