图龙网

WordPress教程:RiPro主题美化 – 添加资源VIP角标

作者: 图龙网 发布时间: 2021-03-31 375 人阅读

添加资源VIP角标

首先,找到ripro -> inc -> theme-functions.php文件,并全局搜索”// 获取图片高度” 默认为176行,在【<div class=”entry-media”>】后面添加如下代码:

<?php if ((_get_post_shop_hide()) ||(_get_post_price()!=0)&& _cao('grid_is_price',true)){ 
    	 echo '<i class="vwip30"></i>'; 
      }else{
    	echo '<i class="vwip10"></i>';
     }
  ?>

修改CSS

然后,找到,主题目录ripro -> assets -> css -> diy.css 添加如下样式:

/*VIP图标 样式开始*/
.vvip0,.vvip10,.vvip30,.vvip70,.vvip75,.vvip80,.vwip0,.vwip10,.vwip30,.vwip70,.vwip75,.vwip80,.vvip302,.vvip702,.vvip752,.vvip802,.vwip302,.vwip702,.vwip752,.vwip802 {
    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
}

.cvip85 {
    background-position: -180px -65px
}

/*VIP图标 样式结束*/

其中xxx.png是第三步中的图片名称,这张图你另存为后名字可能会和我的不一样,自己改掉就好。

添加资源角标图片

第三步:主题目录ripro -> assets -> images 放入如下图片

图龙网关注各大互联网媒体前沿设计风格,紧跟行业趋势,精选大气优质好资源
图龙网 » WordPress教程:RiPro主题美化 – 添加资源VIP角标

常见问题FAQ

免费下载或者VIP会员专享资源能否直接商用?
本站所有资源版权均属于原作者所有,这里所提供资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担。更多说明请参考 VIP介绍。
提示下载完但解压或打开不了?
最常见的情况是下载不完整: 可对比下载完压缩包的与网盘上的容量,若小于网盘提示的容量则是这个原因。这是浏览器下载的bug,建议用百度网盘软件或迅雷下载。 若排除这种情况,可在对应资源底部留言,或 联络我们.。
找不到素材资源介绍文章里的示例图片?
对于PPT,KEY,Mockups,APP,网页模版等类型的素材,文章内用于介绍的图片通常并不包含在对应可供下载素材包内。这些相关商业图片需另外购买,且本站不负责(也没有办法)找到出处。 同样地一些字体文件也是这种情况,但部分素材会在素材包内有一份字体下载链接清单。

发表评论


提供中小企业建站正版精品资源信息

正品模板 建站教程