Ripro-首页VI资源小图标教程

释放双眼,带上耳机,听听看~!

效果如下:

Ripro-首页VI资源小图标教程-90咸鱼网

教程开始:

首先找到ripro\inc\theme-functions.php文件,并全局搜索”// 获取图片高度” 默认为176行,得到以下内容。并将以下内容全部替换成下面的代码

// 获取图片高度
function cao_entry_media( $options = array() ) {
  global $post;
  $ratio = cao_thumbnail_ratio(); ?>
  <div class="entry-media">
    <div class="placeholder" style="padding-bottom: <?php echo esc_attr( $ratio ); ?>;">
    	
    <?php if ((_get_post_shop_status() || _get_post_shop_hide()) && _cao('grid_is_price',true)) : 
    ?>
    <?php echo '<i class="tags src-vip"></i> '?>
    <?php endif; ?>
      <a<?php echo _target_blank();?>  href="<?php echo esc_url( get_permalink() ); ?>">
        <img class="lazyload" data-src="<?php echo esc_url(_get_post_timthumb_src()); ?>" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" alt="<?php echo get_the_title(); ?>">  
      </a>
    </div>
    <?php get_template_part( 'parts/entry-format' ); ?>
  </div>
<?php 
}

 

然后找到ripro根目录下的style.css文件 将附件内的style.css文件进行替换。

 

.src-vip {
    height: 48px;
    width: 35px;
    background-position: -70px 0;
      position: absolute;
    top: -4px;
    left: 10px;
    z-index: 20;
    text-align: center;
    color: #fff;
    font-size: 0;
}

.tag-free, .tag-original, .src-vip {
    display: inline-block;
    background-image: url(https://img.srcdict.com/icons_tag.png);
    background-repeat: no-repeat;
    background-size: auto 48px;
}

 

角标图片:

Ripro-首页VI资源小图标教程-90咸鱼网

 

人已赞赏
wordpress教程教程分享

ripro下载美化插件

2020-3-21 13:52:51

wordpress教程教程分享

ripro主题美化-添加vip页面

2020-3-23 10:50:24

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
有新消息 消息中心
搜索