官方

ripro主题美化-第二期

作者 : 官方 发布时间: 2020-01-30 358 人阅读

本期美化教程:添加VIP引导界面,美化滚动条,添加头像滚动,添加LOGO流光效果

效果展示
RiPro 主题美化教程(第二期 新)

VIP引导界面教程:

1. ripro -> parts -> navbar.php,在“<div class=”actions”>”和“<?php if (is_site_shop_open()) : ?>”之间添加如下代码

&lt;div title="加入VIP,免费下载全站素材" class="menu-head_you-container"&gt;
	&lt;ul id="menu-head_you" class="menu"&gt;
		&lt;li id="menu-item-967" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-967"&gt;
			&lt;a href="vip"&gt;&lt;i class="fa fa-diamond"&gt;&lt;/i&gt; 开通会员&lt;/a&gt;
		&lt;/li&gt;
	&lt;/ul&gt;
&lt;/div&gt;

注:若是跟着第一期教程走的请勿添加

2. ripro -> pages 目录新建 vip.php 文件,并添加如下代码

&lt;?php 
/**
 * Template name: 会员介绍
 * Description:   A VIP introduction page
 */
$vip_site = _cao( 'homevip_field');
$vip_mone = _cao( 'homevip_montext');
$homevip_group = _cao('homevip_group');
get_header();
?&gt;
&lt;div class="vip-banner"&gt;
		&lt;img src="&lt;?php echo esc_url( $vip_site['homevip_topimg'] ); ?&gt;"&gt;
	  	&lt;div class="vipbj"&gt;
	    	&lt;h2&gt;&lt;?php echo $vip_site['homevip_top_title']; ?&gt;&lt;/h2&gt;
	    	&lt;p&gt;&lt;?php echo $vip_site['homevip_top_description']; ?&gt;&lt;/p&gt;
	    	&lt;?php if ($vip_site['homevip_top_title']) : ?&gt;
			&lt;a href="&lt;?php echo home_url()?&gt;/user?action=vip" title="" target="_blank"&gt;&lt;?php echo $vip_site['homevip_top_text']; ?&gt;&lt;/a&gt;
			&lt;?php endif; ?&gt;
		&lt;/div&gt;
&lt;/div&gt;
&lt;div class="module-line"&gt;
	&lt;span class="arrow left-arrow"&gt;&lt;/span&gt;
	&lt;span class="text"&gt;&lt;?php echo _cao('homevip_numtext');?&gt;&lt;/span&gt;
	&lt;span class="arrow right-arrow"&gt;&lt;/span&gt;
&lt;/div&gt;
&lt;div class="row vip-slogan"&gt;
	&lt;?php if (!empty($homevip_group)) {
       	foreach ($homevip_group as $key =&gt; $link) {
        echo '&lt;div class="col-xs-12 col-sm-6 col-md-4 vip-slogan-box"&gt;&lt;i class="'.$link['_ico'].'"&gt;&lt;/i&gt;&lt;div class="vip-slogan-text"&gt;&lt;p&gt;'.$link['_text1'].'&lt;/p&gt;&lt;p&gt;'.$link['_text2'].'&lt;/p&gt;&lt;/div&gt;&lt;/div&gt;';
        }
    }?&gt;  
&lt;/div&gt;

&lt;div class="container"&gt;
  &lt;article class="single-content" id="post-&lt;?php the_ID(); ?&gt;" &lt;?php post_class( 'post vip' ); ?&gt;&gt;
    &lt;div class="module-line"&gt;
    	&lt;span class="arrow left-arrow"&gt;&lt;/span&gt;
    	&lt;span class="text"&gt;&lt;?php echo $vip_mone['_title1']; ?&gt;&lt;/span&gt;
    	&lt;span class="arrow right-arrow"&gt;&lt;/span&gt;
      &lt;div class="vip-desc"&gt;&lt;?php echo $vip_mone['_title2']; ?&gt;&lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="container"&gt;
      &lt;div class="vip-row vip-block-wrapper" style="padding-bottom: 0; padding-top: 30px; margin-bottom: 0; "&gt; 
       
        &lt;?php 
          $vip_pay_setting = _cao('vip-pay-setting'); 
          foreach ($vip_pay_setting as $key =&gt; $item) {
			echo '&lt;div class="vip-block-item"&gt;&lt;div class="home-vipbox"&gt;&lt;div class="icon"&gt;';
			echo '&lt;img src="'.$item['vipico'].'"&gt; &lt;/div&gt;';
			if ($item['daynum'] == 7) {
				echo '&lt;h3 class="content0-title"&gt;包周会员&lt;/h3&gt;';
				echo '&lt;p class="vip-home-price"&gt;'.$item['price'].'&lt;i&gt;'._cao('site_money_ua').'&lt;/i&gt;&lt;/p&gt;';
				echo '&lt;p&gt;周费VIP '.$item['daynum'].'天 福利&lt;/p&gt;';
			}elseif ($item['daynum'] == 30 || $item['daynum'] == 31){
				echo '&lt;h3 class="content0-title"&gt;包月会员&lt;/h3&gt;';
				echo '&lt;p class="vip-home-price"&gt;'.$item['price'].'&lt;i&gt;'._cao('site_money_ua').'&lt;/i&gt;&lt;/p&gt;';
				echo '&lt;p&gt;月费VIP '.$item['daynum'].'天 福利&lt;/p&gt;';
			}elseif ($item['daynum'] == 365){
				echo '&lt;h3 class="content0-title"&gt;包年会员&lt;/h3&gt;';
				echo '&lt;p class="vip-home-price"&gt;'.$item['price'].'&lt;i&gt;'._cao('site_money_ua').'&lt;/i&gt;&lt;/p&gt;';
				echo '&lt;p&gt;年费VIP '.$item['daynum'].'天 福利&lt;/p&gt;';
			}elseif ($item['daynum'] == 9999){
				echo '&lt;h3 class="content0-title"&gt;终身会员&lt;/h3&gt;';
				echo '&lt;p class="vip-home-price"&gt;'.$item['price'].'&lt;i&gt;'._cao('site_money_ua').'&lt;/i&gt;&lt;/p&gt;';
				echo '&lt;p&gt;终身VIP 终身 福利&lt;/p&gt;';
			}else{
				echo '&lt;h3 class="content0-title"&gt;请后台设置&lt;/h3&gt;';
			}
			echo '&lt;p&gt;'.$item['description1'].'&lt;/p&gt;';
			if ($item['daynum'] == 7 || $item['daynum'] == 30 || $item['daynum'] == 31 || $item['daynum'] == 365 ){
				echo '&lt;p&gt;每天可下载'._cao('vip_down_num').'个VIP资源&lt;/p&gt;';
			}elseif ($item['daynum'] == 9999){
				echo '&lt;p&gt;每天可下载'._cao('boosvip_down_num').'个VIP资源&lt;/p&gt;';
			}
			echo '&lt;p&gt;'.$item['description2'].'&lt;/p&gt;';
			echo '&lt;a href="'.home_url().'/user?action=vip"&gt;&lt;p class="vip-bt"&gt;开通&lt;/p&gt;&lt;/a&gt;';
			echo '&lt;/div&gt;&lt;/div&gt;';
		} ?&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/article&gt;
&lt;/div&gt;
&lt;div style="clear:both"&gt;&lt;/div&gt;
&lt;style type="text/css"&gt;
	.site-content{ padding:0px;}
	.term-bar{ display:none;}
&lt;/style&gt;
&lt;?php get_footer(); ?&gt;

3. ripro -> inc -> codestar-framework -> options -> options.theme.php,搜索“vip-pay-setting”,并将整个“array”数组替换为如下代码

array(
    'id'      =&gt; 'vip-pay-setting',
    'type'    =&gt; 'repeater',
    'title'   =&gt; '开通套餐设置(' . _cao('site_vip_name') . ')',
    'max'  	  =&gt; '3',
    'fields'  =&gt; array(
    	array(
			'id'      =&gt; 'vipico',
			'type'    =&gt; 'upload',
			'title'   =&gt; 'VIP图标',
			'desc'    =&gt; '上传一张png图片作为VIP展示图',
					'default'    =&gt; get_stylesheet_directory_uri() . '/assets/images/vip.png',
		),
		array(
			'id'      =&gt; 'daynum',
			'type'    =&gt; 'text',
			'default' =&gt; '30',
			'desc'    =&gt; '比如你想设置一个套餐是月费,则填写30,如果要设置终身会员套餐,填写:9999',
			'title'   =&gt; '开通天数',
		),
		array(
			'id'      =&gt; 'price',
			'type'    =&gt; 'text',
			'default' =&gt; '20',
			'desc'    =&gt; '此套餐所需的' . _cao('site_money_ua') . '数量,例: 会员一天需要1,设置一个月费则是30,如果填写为15,则相当于在打折',
			'title'   =&gt; '套餐价格',
		),
		array(
			'id'      =&gt; 'color',
			'type'    =&gt; 'color',
			'default' =&gt; '#ff6a6d',
			'title'   =&gt; '背景颜色',
		),
		array(
			'id'      =&gt; 'description1',
			'type'    =&gt; 'text',
			'title'   =&gt; 'VIP特权说明-1',
			'default' =&gt; '享受下载折扣及免费下载相应资源',
		),
		array(
			'id'      =&gt; 'description2',
			'type'    =&gt; 'text',
			'title'   =&gt; 'VIP特权说明-2',
			'default' =&gt; '急速网盘无广告',
		),

	),
	'default' =&gt; array(
		array(
			'vipico'=&gt; get_stylesheet_directory_uri() . '/assets/images/vip.png',
			'daynum' =&gt; '30',
			'price'  =&gt; '10',
			'color'  =&gt; '#ff6a6d',
			'description1'=&gt; '享受下载折扣及免费下载相应资源',
			'description2'=&gt; '急速网盘无广告',
		),
    ),
),

4. ripro -> inc -> codestar-framework -> options -> options.theme.php,搜索“// 商城-佣金设置”,在该备注上方“));”后添加如下代码

//
// Field: VIP页设置
//
CSF::createSection($prefix, array(
	'parent' =&gt; 'shop_fields',
    'title'  =&gt; 'VIP页设置',
    'icon'   =&gt; 'fa fa-circle',
    'fields' =&gt; array(
        array(
            'id'     =&gt; 'homevip_field',
            'type'   =&gt; 'fieldset',
            'title'  =&gt; '头部大图相关设置',
            'fields' =&gt; array(

                array(
                    'id'         =&gt; 'homevip_topimg',
                    'type'       =&gt; 'upload',
            		'title'      =&gt; 'VIP引导页头部大图',
            		'dsec'       =&gt; '上传一张显示在VIP引导页的大图',
            		'default'    =&gt; get_stylesheet_directory_uri() . '/assets/images/comvip-banner.png',
            	),
                array(
                    'id'      =&gt; 'homevip_top_title',
                    'type'    =&gt; 'text',
                    'title'   =&gt; '头部大图文字',
                    'default' =&gt; '开通VIP独享海量下载特权',
                ),
                array(
                    'id'      =&gt; 'homevip_top_description',
                    'type'    =&gt; 'text',
                    'title'   =&gt; '头部大图描述',
                    'default' =&gt; '现在努力只为 不再仰望大神的后背!',
                ),
                array(
                    'id'      =&gt; 'homevip_top_switcher',
                    'type'    =&gt; 'switcher',
                    'title'   =&gt; '头部大图按钮开关',
                    'default' =&gt; true,
                ),
                array(
                    'id'      =&gt; 'homevip_top_text',
                    'type'    =&gt; 'text',
                    'title'   =&gt; '按钮文字',
                    'default' =&gt; '开通会员',
                    'dependency' =&gt; array('homevip_top_switcher', '==', 'true'),
                ),
            ),
            
        ),
         array(
            'type'    =&gt; 'notice',
            'style'   =&gt; 'success',
            'content' =&gt; '注意,这里添加特权说明时,请添加3或3的倍数个,不然不美观!!!特权图标示例 &lt;span style="color:red;"&gt;fa fa-vimeo-square&lt;/span&gt; &lt;a href="http://www.fontawesome.com.cn/faicons/" target="_blank" rel="noopener noreferrer"&gt;图标获取地址:http://www.fontawesome.com.cn/faicons/&lt;/a&gt;',
            
        ),
        array(
            'id'    =&gt; 'homevip_numtext',
            'type'   =&gt; 'text',
            'title'     =&gt; 'VIP特权模块标题',
            'default' =&gt; '会员尊享6项特权',
            
        ),
         array(
          'id'        =&gt; 'homevip_group',
          'type'      =&gt; 'group',
          'title'     =&gt; 'VIP特权说明',
          'label'     =&gt; '请添加3或3的倍数个,不然不美观!!!',
          'max'		  =&gt; '6',
          'fields'    =&gt; array(
            array(
              'id'    =&gt; '_ico',
              'type'  =&gt; 'text',
              'title' =&gt; '特权图标',
              'default'=&gt;'fa fa-vimeo-square',
            ),
            array(
              'id'    =&gt; '_text1',
              'type'  =&gt; 'text',
              'title' =&gt; '特权说明-1(大标题)',
              'default'=&gt;'1000+资源,无限量下载',
            ),
            array(
              'id'    =&gt; '_text2',
              'type'  =&gt; 'text',
              'title' =&gt; '特权说明-2',
              'default'=&gt;'真正的海量,无套路,诚意满满',
            ),
          ),
          
          'default' =&gt; array(
                array(
                    '_ico'  =&gt; 'fa fa-vimeo-square',
                    '_text1'=&gt; '1000+资源,无限量下载',
                    '_text2'=&gt; '真正的海量,无套路,诚意满满',
                ),
            ),
        ),
        array(
            'id'    =&gt; 'homevip_montext',
            'type'   =&gt; 'fieldset',
            'title'     =&gt; 'VIP资费设置',
            'fields' =&gt; array(
              array(
              	'id'    =&gt; '_title1',
              	'type'  =&gt; 'text',
              	'title' =&gt; '标题-1',
              	'default'=&gt;'VIP会员资费介绍',
              ),
              array(
             	'id'    =&gt; '_title2',
              	'type'  =&gt; 'text',
              	'title' =&gt; '标题-2',
              	'attributes' =&gt; array(
                	'style' =&gt; 'width: 100%;',
           		 ),
              	'default'=&gt;'在这里,会员每平均10个用户开通会员, 下载资源 100+份~',
              ),
            ),
        ),
        
    ),
));

5. ripro -> functions.php ,搜索“pages/tags.php”并跳转到该处,换一行添加如下代码

'pages/vip.php' =&gt; array('会员介绍', 'vip'),

注:本句代码是将“VIP引导界面”设为默认添加页面,页面别名为“vip”,若不喜欢可不添加,此处已做为模板,在后台新建页面,选择模板为“会员介绍”即可

6. ripro -> assets -> images ,放入如下图片(已附链接,自行下载即可)


https://www.augsc.com/wp-content/uploads/2020/01/vip.png
https://www.augsc.com/wp-content/uploads/2020/01/vip-left.png
https://www.augsc.com/wp-content/uploads/2020/01/vip-right.png

7. ripro -> assets -> css-> diy.css 添加如下样式

@media (min-width:768px){.vip-slogan{max-width:640px;}}
@media (min-width:992px){.vip-slogan{max-width:860px;}}
@media (min-width:1230px){.vip-slogan{max-width:1060px;}}
@media (min-width:1450px){.container{max-width:1440px;}.vip-slogan{max-width:1300px;}.container.medium{max-width:1030px;}}
@media (max-width:575px){.vip-slogan{max-width:380px;}.container{max-width:460px;padding-left:10px;padding-right:10px;}}
.vip-banner .vipbj h2{text-align:center;font-size:40px;color:#fff}
.vip-banner .vipbj p{text-align:center;font-size:18px;color:#fff}
.vip-banner{position:relative;width:100%;height:246px;position:relative;}
.vip-banner img{margin:0 auto;height:246px;width:100%;}
.vip-banner-bg{background-position:center;background-size:cover;height:100%}
.vip-banner .vipbj{position:absolute;width:100%;top:20%}
.vip-slogan{box-shadow:0 2px 10px rgba(0,0,0,.02);border-radius:5px;background:#fff;box-sizing:border-box;font-size:0;margin:40px auto auto auto;text-align:center;}
.vip-slogan-box:nth-of-type(-n+3){border-bottom:0}
.vip-slogan-box:nth-child(1){border:0px;}
.vip-slogan-box{padding-top:20px;display:inline-block;border:1px solid #f4f4f4;box-sizing:border-box;vertical-align:middle}
.vip-slogan-box:nth-child(3){border:0px;}
.vip-slogan-box:nth-child(4){border:0px;}
.vip-slogan-box:nth-child(6){border:0px;}
.vip-slogan-box i{width:100px;line-height:100px;display:inline-block;background-image:linear-gradient(90deg,#ed1c24 0,#fb8f02 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;font-size:45px;text-align:center;vertical-align:middle}
.vip-slogan-text{font-size:14px;display:inline-block;vertical-align:middle;color:#898989}
.vip-slogan-text p:first-child{font-size:18px;color:#575959}
.container-vip{width:1250px}
.vip-content{text-align:center;margin-bottom:50px}
.module-line{width:100%;text-align:center;margin-top:40px}
.module-line .left-arrow{background:url(../images/vip-left.png)}
.module-line .right-arrow{background:url(../images/vip-right.png)}
.module-line .arrow{width:84px;height:16px}
.module-line .text{font-size:26px;color:#4c4c4c;margin:0 10px}
.module-line span{display:inline-block;*display:inline;*zoom:1;}
.vip-banner .vipbj&gt;a{width:170px;height:40px;font-size:16px;line-height:40px;text-align:center;border-radius:25px;background-image:linear-gradient(90deg,#ed1c24 0,#fb8f02 100%);color:#fff;margin:0 auto;margin-top:0;display:block;margin-top:20px}
.vip-row{position:relative;display:block;-webkit-box-sizing:border-box;box-sizing:border-box;margin-right:0;margin-left:0;width:100%;height:auto;zoom:1}
.vip-row:after,.vip-row:before{display:table;content:''}
.vip-block-wrapper{position:relative;display:flex;padding:20px 0;height:100%;justify-content:center}
.vip-block-wrapper .vip-block-item{display:block;box-sizing:border-box;padding:20px 40px;width:33.333%;text-align:center;}
.home-vipbox{padding:1px 0px 38px 0px;border-radius:8px;background:#fff;-webkit-transition:all .3s ease-in-out;-moz-transition:all .3s ease-in-out;-ms-transition:all .3s ease-in-out;transition:all .3s ease-in-out;}
.home-vipbox:hover{-webkit-transform:translateY(-3px);-moz-transform:translateY(-3px);-ms-transform:translateY(-3px);transform:translateY(-3px);box-shadow:0 10px 20px rgba(213,213,213,0.4);}
p.vip-bt{color:#fff;margin:0 auto;width:100px;padding:8px 0;border-radius:26px;}
.vip-block-item a p{-webkit-transition:all .3s ease-in-out;-moz-transition:all .3s ease-in-out;-ms-transition:all .3s ease-in-out;transition:all .3s ease-in-out;}
.vip-block-item:nth-child(n) a:hover p{box-shadow:0 10px 20px rgba(245,47,62,.4);-webkit-transform:translateY(-3px);-moz-transform:translateY(-3px);-ms-transform:translateY(-3px);transform:translateY(-3px);background-color:#f52f3e;background-repeat:repeat-y;background-image:-moz-linear-gradient(left,#f52f3e,#ff4c22);background-image:-webkit-linear-gradient(left,#f52f3e,#ff4c22);background-image:-o-linear-gradient(left,#f52f3e,#ff4c22);background-image:linear-gradient(left,#f52f3e,#ff4c22);}
.vip-block-item:nth-child(1) h3{color:#f5a02f;text-shadow:0 5px 6px #ffe1b9;}
.vip-block-item:nth-child(1) .vip-bt{background-image:-webkit-linear-gradient(left,#021b31,#001529);}
.vip-block-item:nth-child(2) h3{color:#1890ff;text-shadow:0 5px 6px rgba(24,144,255,0.40);}
.vip-block-item:nth-child(2) .vip-bt{background-image:-webkit-linear-gradient(left,#1390de,#2f9af5);}
.vip-block-item:nth-child(3) h3{color:#fd3d00;text-shadow:0 5px 6px #ffb9b9;}
.vip-block-item:nth-child(3) .vip-bt{background-image:-webkit-linear-gradient(left,#f1bc37,#fadb37);}
p.vip-home-price{position:relative;font-size:1.875rem;font-weight:bold;width:200px;margin:15px auto;}
p.vip-home-price i{font-size:16px;}
@media (max-width:768px){.vip-block-wrapper{display:block}.vip-block-wrapper .vip-block-item{float:left;width:100%;padding:10px 0;}}
.vip-block-wrapper .vip-block-item .icon{width:20%;padding-top:20px;margin:0 auto;}
.vip-block-wrapper .vip-block-item img{width:100%;height:60px;}
.vip-block-wrapper .vip-block-item .content0-title{padding:0;font-size:1.875rem;}

滚动条样式美化教程:

1. ripro -> assets -> css-> diy.css 添加如下样式

::-webkit-scrollbar {width: 6px;height: 1px;}
::-webkit-scrollbar-thumb {border-radius: 10px;background-color: #12b7f5;background-image: -webkit-linear-gradient(45deg, rgba(255, 93, 143, 1) 25%, transparent 25%, transparent 50%, rgba(255, 93, 143, 1) 50%, rgba(255, 93, 143, 1) 75%, transparent 75%, transparent);}
::-webkit-scrollbar-track {-webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);background: #f6f6f6;}

头像滚动式美化教程:

1. ripro -> assets -> css-> diy.css 添加如下样式

.bg-cover{border:#ececec 1px solid;}
.avatar{-webkit-transition:0.4s;-webkit-transition:-webkit-transform 0.4s ease-out;transition:transform 0.4s ease-out;-moz-transition:-moz-transform 0.4s ease-out;}
.avatar:hover{transform:rotateZ(360deg);-webkit-transform:rotateZ(360deg);-moz-transform:rotateZ(360deg);}

LOGO流光效果美化教程:

1. ripro -> assets -> css-> diy.css 添加如下样式

.logo-wrapper{position:relative;font-size:2em;font-weight:700;line-height:39px;overflow:hidden;margin:0;}
.logo-wrapper::before{content:"";position:absolute;width:150px;height:10px;background-color:rgba(255,255,255,.5);-webkit-transform:rotate(-45deg);transform:rotate(-45deg);-webkit-animation:searchLights 1s ease-in 1s infinite;animation:searchLights 1s ease-in 1s infinite;}
@-webkit-keyframes searchLights{0%{left:-90px;top:0;}to{left:90px;top:0;}}
1. 本站所有资源来源于用户上传和网络,只做学习和交流使用,版权归原作者所有,请在下载后24小时之内自觉删除! 2. 盗版,破解有损他人权益和违法作为,请各位用户支持正版。 3. 由于未及时购买和付费发生的侵权行为,与本站无关。 4. 本站发布的内容若侵犯到您的权益,请联系站长删除,我们将及时处理! 5. 资源如果失效或错链请联系站长。
Vlitu•唯利途 » ripro主题美化-第二期

常见问题FAQ

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

官方 VIP

分享到:

发表评论

Vlitu•唯利途全自动建站系统

宝塔版建站系统 康乐版建站系统