Ripro主题专用首页VIP介绍引导美化,样式+文件WordPress教程

作者 : 小编 本文共6308个字,预计阅读时间需要16分钟 发布时间: 2020-03-30 共509人阅读

源码介绍

一、首先修改ripro/inc/codestar-framework/options目录下options.theme.php文件,找到660左右的// 会员开通引导模块或直接全局搜索“// 会员开通引导模块”,

一直到

// 列表设置

全部替换成内容!注意备份原文件否则有问题我也救不了你 哈哈。

// 会员开通引导模块
array(
'id' => 'home_vip_mod',
'type' => 'fieldset',
'title' => '会员开通引导模块',
'fields' => array(

array(
'id' => 'vip_group',
'type' => 'group',
'title' => '添加介绍',
'max' => '3',
'fields' => array(
array(
'id' => '_time',
'type' => 'text',
'title' => '时长',
'default' => '一个月',
),
array(
'id' => '_price',
'type' => 'text',
'title' => '价格',
'default' => '10',
),
array(
'id' => '_tehui',
'type' => 'text',
'title' => '优惠信息',
'default' => '限时优惠',
),
array(
'id' => '_vipms01',
'type' => 'text',
'title' => '描述1',
'default' => '',
),
array(
'id' => '_vipms02',
'type' => 'text',
'title' => '描述2',
'default' => '',
),
array(
'id' => '_color',
'type' => 'color',
'title' => '模块自定义主颜色',
'desc' => '',
'default' => '#34495e',
),
),
),

),
),

),
));

//
// 列表设置

二、找到ripro/assets/css目录下div.css文件,在div.css文件内最下方插入内容!

/*VIP*/
.container .row .card {
border: solid 1px #e5e5e5;
width: 23.5%;
background-color: #fff;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
border-radius: 12px;
}

.container .row .card.active {
box-shadow: 4px 8px 40px 0 rgba(0, 0, 0, .1)
}/*.container .row .card:not(:last-of-type) {*/
.container .row .card {
margin: 10px;
}

.container .row .card.ent-base:hover {
transform: translate(0, -10px);
-webkit-transform: translate(0, -10px);
-moz-transform: translate(0, -10px);
-o-transform: translate(0, -10px);
box-shadow: 0 26px 40px -24px rgba(0, 36, 100, 0.3);
}

.container .row .card.ent-base {
transition: all .3s ease-out;
-webkit-transition: all .3s ease-out;
-moz-transition: all .3s ease-out;
-o-transition: all .3s ease-out;
}

.container .row .card.ent-base .btn {
background-image: -webkit-linear-gradient(bottom, #fff 30%, #fff);
background-image: linear-gradient(to top, #fff 30%, #fff)
}

.container .row .card .version {
font-weight: 700
}

.container .row .header {
border-radius: 12px 12px 0 0;
color: #fff;
font-size: 14px;
line-height: 1;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
padding-top: 23px;
font-weight: 300;
z-index: 1;
}

.container .row .header .price-year {
margin-top: 12px;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: end;
-webkit-align-items: flex-end;
-ms-flex-align: end;
align-items: flex-end;
font-weight: 400
}

.container .row .header .pricing-deco {
width: 100%;
}

.container .row .header .price-year .dollar {
font-size: 18px;
-webkit-align-self: flex-start;
-ms-flex-item-align: start;
align-self: flex-start;
margin-top: 3px;
font-weight: 300
}

.container .row .header .price-year .price {
font-size: 46px;
letter-spacing: 1.7px;
font-weight: 700;
font-family: Helvetica
}

.container .row .header .price-quarter {
font-size: 12px;
margin: 5px auto 17px
}

.container .row .header .btn {
width: 160px;
/*line-height: 12px;*/
border-radius: 2px;
color: rgba(0, 0, 0, .7);
font-size: 14px;
border: 0;
font-weight: 500;
font-family: PingFangSC;
cursor: pointer
}

.container .row .header .btn:hover {
box-shadow: 5px 5px 5px 0 rgba(0, 0, 0, .14)
}

.container .row .content {
position: relative;
font-size: 12px;
/* padding-top: 24px; */
-webkit-box-flex: 1;
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
z-index: 99;
top: -10px;
background-color: #fff;
}

.container .row .content .desc {
line-height: 1;
padding-left: 37px;
margin-bottom: 18px;
color: rgba(62, 62, 62, .8);
position: relative
}

.container .row .content .desc:before {
position: absolute;
content: "";
height: 6px;
width: 9px;
border: 2px solid #3e3e3e;
-webkit-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
transform: rotate(-45deg);
top: 20%;
left: 16px;
border-top: 0;
border-right: 0;
opacity: .6;
filter: alpha(opacity=60)
}

@media screen and (max-width: 1450px) {
.container .row .card {width: 23.2%}
}
@media screen and (max-width: 750px) {
.container .row .card {width: 100%}
}
@media (min-width: 1460px) {
.container .row .card {
width: 23.5%;
}
}

.container .row .pricing-deco .deco-layer {
-webkit-transition: -webkit-transform 0.5s;
transition: transform 0.5s;
}

.container .row .pricing-deco:hover .deco-layer--1 {
-webkit-transform: translate3d(15px,0,0);
transform: translate3d(15px,0,0);
}

.container .row .pricing-deco:hover .deco-layer--2 {
-webkit-transform: translate3d(-15px,0,0);
transform: translate3d(-15px,0,0);
}

三、找到ripro/parts/home-mode目录下vip.php文件,将vip.php的内容全部替换成内容!

<!--?php $home_mode_vip = _cao('home_vip_mod'); ?-->
<div class="section pt-0 pb-0">
<div class="home-vip-mod">
<div class="container">
<div class="row">
<div class="card ent-base ">
<div class="header" style="background: #19d44a;">
<div class="version">注册用户</div>
<div class="price-year"><span class="dollar">¥</span><span class="price">0</span></div>
<div class="price-quarter"><span class="tehui"><i class="fa fa-diamond"></i> 限时优惠</span></div>
<!--?php if (is_user_logged_in()) : ?-->
<a class="btn-sm primary" style="background: <?php echo $item['_color'];" href="<?php echo esc_url(home_url('/user?action=vip'));?>"><button class="btn user-login">升级会员</button></a>
<!--?php else: ?-->
<a class="login-btn btn-sm primary"><button class="btn user-login"><i class="fa fa-user"></i> 立即注册</button></a>
<!--?php endif; ?-->
<div class="pricing-deco"></div>
</div>
<div class="content">
<div class="desc">站内免费资源</div>
<div class="desc">永久无限下载次数</div>
<div class="desc"><strong style="color: red;">折扣次数</strong>:无折扣</div>
<div class="desc"><strong style="color: red;">会员权限</strong>:无权限</div>
</div>
</div>
 
<div class="card ent-base ">
<div class="header" style="background: <?php echo $item['_color'];">
<div class="version"></div>
<div class="price-year"><span class="dollar">¥</span><!--?php echo $item['_price'];?--></div>
<div class="price-quarter"><!--?php if ($item['_tehui']) : ?-->
<i class="fa fa-diamond"></i> <!--?php echo $item['_tehui'];?--></div>
 

<!--?php if (is_user_logged_in()) : ?-->
<a class="btn-sm primary" style="background: <?php echo $item['_color'];" href="<?php echo esc_url(home_url('/user?action=vip'));?>"><button class="btn user-login">前往开通</button></a>
<!--?php else: ?-->
<a class="login-btn btn-sm primary"><button class="btn user-login"><i class="fa fa-user"></i> 登录购买</button></a>
<!--?php endif; ?-->
<div class="pricing-deco"></div>
</div>
<div class="content">
<div class="desc"></div>
<div class="desc"></div>
<div class="desc"><strong style="color: red;">折扣次数</strong>:有效期内全站随意下载</div>
<div class="desc"><strong style="color: red;">会员权限</strong>:VIP只是到期时间不同</div>
</div>
</div>
 

</div>
</div>
</div>
</div>

源码属性

整站源码 、完全开源

演示系统

源码截图

Ripro主题专用首页VIP介绍引导美化,样式+文件WordPress教程
1. 本站所有资源来源于用户上传和网络,如有侵权请邮件联系站长!
2. 分享目的仅供大家学习和交流,您必须在下载后24小时内删除!

3. 不得使用于非法商业用途,特别是游戏类源码仅用于学习研究,不得违反国家法律。否则后果自负!

4. 本站提供的源码、模板、插件等等其他资源,都不包含技术服务请大家谅解!
5. 如有链接无法下载、失效或广告,请联系管理员处理!
6. 本站资源售价只是赞助,收取费用仅维持本站的日常运营所需!
7. 如遇到加密压缩包,默认解压密码为"www.tzhuti.com",具体请看下方【常见问题】如遇到无法解压的请联系管理员!
囤主题-专注帮助站长建站、源码导购、整站源码及最新虚拟主题资源分享! » Ripro主题专用首页VIP介绍引导美化,样式+文件WordPress教程

常见问题FAQ

本站解压密码
评论刷新后即可见解压密码
tzhuti.com
www.tzhuti.com
3128469470
248125469
免费下载或者VIP会员专享资源能否直接商用?
本站所有资源版权均属于原作者所有,这里所提供资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担。更多说明请参考 VIP介绍。
下载后没出现下载地址或下载失败?
请先清除浏览器缓存再一次下载,如果还是不能下载,请联系客服解决,我们在看到信息后第一时间解决,联系时请说问题。
个别资源下载失效处理方式?
请提供会员ID及链接直接联系客服获取,我们看到后将第一时间恢复并发送链接给您,给您造成的不方便请谅解。

发表评论

×
开通VIP 享更多特权,建议使用QQ登录