Ripro主题css,Wordpress教程：RiPro主题美化-添加资源VIP
⾓标
添加资源VIP⾓标
⾸先，到ripro -> inc -> theme-functions.php⽂件，并全局搜索”// 获取图⽚⾼度” 默认为176⾏，在【
】后⾯添加如下代码：
echo '';
}else{
echo '';
}
>
修改CSS
然后，到，主题⽬录ripro -> assets -> css -> diy.css 添加如下样式：
/*VIP图标 样式开始*/
.vvip0,.vvip10,.vvip30,.vvip70,.vvip75,.vvip80,.vwip0,.vwip10,.vwip30,.vwip70,.vwip75,.vwip80,.vvip302,.vvip702,.vvip752,.vvip8 {
display: inline-block;
background-image: url(../images/xxx.png);
background-size: auto 40px;
vertical-align: middle;
height: 40px;
width: 40px
}
.vvip0,.vvip10,.vvip30, .vvip70, .vvip75, .vvip80, .vvip302, .vvip702, .vvip752, .vvip802 { position: absolute;
top: 0;
left: 0;
z-index: 10;
}
.vvip0,.vwip0 {
background-position: 0 0
}
.vvip70,.vwip70 {
background-position: -80px 0
}
.vvip30,.vwip30 {
background-position: -40px 0
}
.vvip302,.vvip702,.vvip752,.vvip802 {
background-position: -200px 0
}
.vvip75 {
background-position: -160px 0
}
.vvip80,.vwip75,.vwip80 {
background-position: -120px 0
}
.vwip0,.vwip10,.vwip30,.vwip70,.vwip75,.vwip80,.vwip302 {
position: absolute;
z-index: 10;
border-radius: 0
}
.vvip10,.vwip10 {
background-position: 0 0
}
.cvip0,.cvip10,.cvip30,.cvip85,.cvip70,.cvip75,.cvip80,.nvip,.nvip1,.nvip2,.nvip3,.nvip4,.nvipc {
float: left;
margin: 0 16px 0 33px;
display: inline-block;
background-image: url(../images/xxx.png);
vertical-align: middle;
height: 60px;
width: 36px
}
.cvip0,.cvip10 {
background-position: 0 -65px
}
.cvip30 {
background-position: -36px -65px
}
.cvip70 {
background-position: -72px -65px
}
.cvip75 {
background-position: -36px -65px
}
.cvip80 {
background-position: -144px -65px
}
.
wordpress主题怎么安装cvip85 {
background-position: -180px -65px
}
/*VIP图标 样式结束*/
其中xxx.png是第三步中的图⽚名称，这张图你另存为后名字可能会和我的不⼀样，⾃⼰改掉就好。添加资源⾓标图⽚
第三步：主题⽬录ripro -> assets -> images 放⼊如下图⽚

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。