Ripro主题美化-列表页面右上角3个彩色圆点效果实现

Ripro主题美化-列表页面右上角3个彩色圆点效果实现

列表页面右上角有3个彩色圆点效果，模仿友站的！分享给大家~
1、找到wp-content/themes/ripro/assets/css/diy.css并将下面的css样式内容整体复制进去并保存

.float-rightse {
float: right;
position: absolute;
right: 30px;
}
.title-iconse {
height: 8px;
width: 8px;
background: #fd4b4b;
padding: 0px;
display: inline-block;
border-radius: 50%;
line-height: 0;
position: relative;
-webkit-transition: ease-in-out 0.25s;
transition: ease-in-out 0.25s;
margin: 0 10px;
}
.title-iconse:before {
content: ” “;
height: 8px;
width: 8px;
background: #ffd12a;
border-radius: 50%;
margin-left: 15px;
position: absolute;
display: block;
-webkit-transition: ease-in-out 0.25s;
transition: ease-in-out 0.25s;
}
.title-iconse:after {
content: ” “;
height: 8px;
width: 8px;
background: #79f52a;
border-radius: 50%;
margin-left: 30px;
position: absolute;
display: block;
-webkit-transition: ease-in-out 0.25s;
transition: ease-in-out 0.25s;
}

2、找到/wp-content/themes/ripro/inc/theme-functions.php并搜索

entry-meta

可以看到以下代码

3、并将下面的内容整体复制进去放在最后面的后面并保存

<i class="title-iconse float-rightse"></i>

效果样式

资源宝分享:www.httple.net