RIPRO主题美化-首页VIP介绍引导美化，样式+文件+教程

教程开始:

1、首先修改/wp-content/themes/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',
                        ),
                    ),
                ),

            ),
        ),

    ),
));

//
// 列表设置

2、找到/wp-content/themes/ripro/assets/css目录下div.css文件 在div.css文件内最下方插入下方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;
	height: 228px;
	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: 23px;
	-webkit-box-flex: 1;
	-webkit-flex: 1;
	-ms-flex: 1;
	flex: 1;
    z-index: 90;
}

.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);
}

3、找到/wp-content/themes/ripro/parts/home-mode目录下vip.php文件 将vip.php的内容全部替换成下方的内容！

效果样式:

感谢您的来访，获取更多精彩文章请收藏本站。