官方

ripro主题美化-第一期

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

本期教程内容: 重新整理头像下拉美化菜单,修复部分css样式错位

效果展示一:

效果展示二:

注:本次美化教程基于“会员引导”功能制作,需与导航添加“开通会员”按钮,不然美化后按钮错位。

第一步: 主题目录:parts -> navbar.php 文件,在“<div class=”actions”>”后添加如下代码

&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;

第二步: 主题目录:parts -> navbar.php 文件,在头部“global $current_user;”后面添加如下代码

$CaoUser = new CaoUser($current_user-&gt;ID);

注意:第二步代码必须添加,否则报错!!

第三步: 主题目录:assets -> css -> diy.css 文件,添加如下样式

/*nav设置开始*/
.navbar{height:72px;}
.header-gap{height:72px;}
.navbar .hhnavwarp:hover .Huserxiala{display:block;}
.navbar .menu-item&amp;gt;a{font-weight:400;}
.ripro-dark .navbar .menu-item&amp;gt;a{color:rgba(255,255,255,1);}
.sub-menu:before{content:'';width:20px;height:20px;border-radius:1px;background-color:#fff;-webkit-transform:rotate(45deg);transform:rotate(45deg);position:absolute;top:-5px;left:40px;z-index:0;}
.navbar .user-pbtn{height:80px;}
.navbar .user-pbtn:hover span{color:#f9b015;}
.navbar .login-btn{margin:0 20px;color:#4d555d;background-color:#ffffff00;font-size:14px;}
.navbar .actions&amp;gt;div+div{font-weight:700}
.navbar .actions&amp;gt;div+div{margin-left:5px;font-weight:700;}
.navbar .navbar-button,.off-canvas .canvas-close{background-color:#f7f7ff;border:1px solid #f7f7ff;color:#f9b015;background-image:none;-webkit-animation:none;}
.burger{background-color:#f7f7ff;border:1px solid #f7f7ff;color:#f9b015;}
.burger:before,.burger:after{background-color:#f9b015;}
.actions .burger:before,.actions .burger:after{content:none;}
.menu-head_you-container li a{margin:0 10px;color:#333;font-size:14px;}
.sub-menu li&amp;gt;a:hover:before,.sub-menu li.current_page_item&amp;gt;a:before,.sub-menu li.current-menu-item&amp;gt;a:before,.sub-menu li.current_page_ancestor&amp;gt;a:before,.sub-menu li.current-menu-ancestor&amp;gt;a:before,.sub-menu li.current-menu-parent&amp;gt;a:before{opacity:1;}
.sub-menu li&amp;gt;a:hover,.sub-menu li.current_page_item&amp;gt;a,.sub-menu li.current-menu-item&amp;gt;a,.sub-menu li.current_page_ancestor&amp;gt;a,.sub-menu li.current-menu-ancestor&amp;gt;a{color:#f9b015;padding-left:1.75rem;opacity:1;}
.sub-menu li a{font-size:.875rem;padding:.5rem 1rem .5rem 1.5rem;position:relative;-webkit-transition:all .3s ease;-moz-transition:all .3s ease;-ms-transition:all .3s ease;-o-transition:all .3s ease;transition:all .3s ease;}
.sub-menu li a:before{content:'';height:1px;width:10px;background-color:#f9b015;opacity:0;-webkit-transition:all 300ms linear 0ms;-khtml-transition:all 300ms linear 0ms;-moz-transition:all 300ms linear 0ms;-ms-transition:all 300ms linear 0ms;-o-transition:all 300ms linear 0ms;transition:all 300ms linear 0ms;position:absolute;left:.75rem;top:50%;-webkit-transform:translate(0%,-50%);-khtml-transform:translate(0%,-50%);-moz-transform:translate(0%,-50%);-ms-transform:translate(0%,-50%);-o-transform:translate(0%,-50%);transform:translate(0%,-50%);}
@media (min-width:750px){.module.slider .post{height:400px;}
.menu-head_you-container{display:block !important;}
.site-header .burger,.site-header .search-open,.site-header .login-btn,.site-header .tap-dark{margin-top:25px!important;}}
/*nav设置结束*/

美化样式一教程:

1. 主题目录:parts -> navbar.php 文件,替换“<!– user –>”到“<!– user end –>”中间的内容为如下代码

&lt;?php if (is_user_logged_in()) : ?&gt;
	&lt;div class="hhnavwarp"&gt;
		&lt;a class="user-pbtn Hhhover" href="&lt;?php echo esc_url(home_url('/user')) ?&gt;"&gt;
			&lt;?php echo get_avatar($current_user-&gt;user_email); ?&gt;
			&lt;?php if(!_cao('is_navbar_ava_name','0')){
				echo '&lt;span&gt;'.$current_user-&gt;display_name.'&lt;/span&gt;';}
			?&gt;
		&lt;/a&gt;
		&lt;div class="Huserxiala"&gt;
			&lt;div class="Hinfo"&gt;
				&lt;div class="Hleft"&gt;&lt;?php echo get_avatar($current_user-&gt;user_email); ?&gt;&lt;/div&gt;
				&lt;div class="Hright"&gt;
					&lt;a href="&lt;?php echo esc_url(home_url('/user'))?&gt;"&gt;&lt;?php echo $current_user-&gt;display_name;?&gt;&lt;/a&gt;
					&lt;?php if ($CaoUser-&gt;vip_status()) {
						echo '&lt;span class="label label-warning"&gt;&lt;i class="fa fa-diamond"&gt;&lt;/i&gt; '.$CaoUser-&gt;vip_name().'用户&lt;/span&gt;';
					}else{
						echo '&lt;span class="label label-default"&gt;&lt;i class="fa fa-user"&gt;&lt;/i&gt; '.$CaoUser-&gt;vip_name().'用户&lt;/span&gt;';
					}?&gt;
					&lt;p&gt;&lt;span class="Hxiaofei"&gt;余额:&lt;?php echo $CaoUser-&gt;get_balance();?&gt;&lt;/span&gt;&lt;span class="Hxiaofei"&gt;已消费:&lt;?php echo $CaoUser-&gt;get_consumed_balance();?&gt;&lt;/span&gt;&lt;/p&gt;
				&lt;/div&gt;
			&lt;/div&gt;
			&lt;div class="Hinfolist"&gt;
				&lt;ul&gt;
					&lt;li&gt;&lt;a href="&lt;?php echo home_url('/user?action=index') ?&gt;"&gt;&lt;i class="fa fa-user-secret"&gt;&lt;/i&gt; 个人信息&lt;/a&gt;&lt;/li&gt;
					&lt;li&gt;&lt;a href="&lt;?php echo home_url('/user?action=mypay') ?&gt;"&gt;&lt;i class="fa fa-file-text"&gt;&lt;/i&gt; 订单中心&lt;/a&gt;&lt;/li&gt;
					&lt;li&gt;&lt;a href="&lt;?php echo home_url('/user?action=charge') ?&gt;"&gt;&lt;i class="fa fa-paypal"&gt;&lt;/i&gt; 充值中心&lt;/a&gt;&lt;/li&gt;
					&lt;li&gt;&lt;a href="&lt;?php echo home_url('/user?action=ref') ?&gt;"&gt;&lt;i class="fa fa-paper-plane"&gt;&lt;/i&gt; 推广佣金&lt;/a&gt;&lt;/li&gt;
					&lt;?php if(in_array( 'administrator', $current_user-&gt;roles )): ?&gt;
						&lt;li&gt;&lt;a href="&lt;?php echo home_url('/wp-admin/index.php') ?&gt;" target="_blank"&gt;&lt;i class="fa fa-unlock-alt"&gt;&lt;/i&gt; 登陆后台&lt;/a&gt;&lt;/li&gt;
					&lt;?php else : ?&gt;
						&lt;li&gt;&lt;a href="&lt;?php echo home_url('user?action=mypost') ?&gt;/" class=""&gt;&lt;i class="fa fa-file-text"&gt;&lt;/i&gt; 我的文章&lt;/a&gt;&lt;/li&gt;
					&lt;?php endif; ?&gt;
					&lt;li&gt;&lt;a class="Hexit" href="&lt;?php echo wp_logout_url(home_url()); ?&gt;"&gt;&lt;i class="fa fa-sign-out"&gt;&lt;/i&gt; 退出登录&lt;/a&gt;&lt;/li&gt;
				&lt;/ul&gt;
			&lt;/div&gt;
		&lt;/div&gt;
	&lt;/div&gt;
&lt;?php else: ?&gt;
	&lt;div class="login-btn navbar-button"&gt;&lt;i class="mdi mdi-account"&gt;&lt;/i&gt; 登录&lt;/div&gt;
&lt;?php endif; ?&gt;

2. 主题目录:assets -> css -> diy.css 文件,添加如下样式

.Huserxiala .Hinfo .Hright{float:left;}
.Huserxiala .Hinfo .Hright a{font-weight:bold;color:rgba(8,18,28,1);line-height:48px;}
.ripro-dark .Huserxiala .Hinfo .Hright a{font-weight:bold;color:rgba(255,255,255,1);line-height:48px;}
.Huserxiala .Hinfo .Hright p{font-size:12px;font-weight:bold;color:rgba(147,153,159,1);line-height:18px;}
.Huserxiala .Hinfo .Hright .Hxiaofei{flaot:left;margin-right:5px;}
.Huserxiala .Hinfolist{width:100%;height:auto;position:relative;top:8px;}
.Huserxiala .Hinfolist ul li .Hhoutai{color:#666;background:none;font-size:14px;padding-top:0px;}
.Huserxiala .Hinfolist ul li .Hhoutai .showguanliyuanrenzheng{font-size:14px}
.Huserxiala .Hinfolist ul li .Hhoutai:hover{background:none;color:#333;}
.Huserxiala .Hinfolist ul li{width:50%;float:left;list-style:none;width:128px;padding:0 10px 10px 0}
.Huserxiala .Hinfolist ul li a:hover{border-radius:2px;color:#fff;background:linear-gradient(-125deg,#f9b015 0%,#f7b832 100%);-webkit-box-shadow:0 8px 10px rgba(32,160,255,.3);}
.Huserxiala .Hinfolist ul li a{border-radius:2px;background:rgba(242,244,247,0.85);color:#343d46;display:block;padding:8px 10px;}
.Huserxiala .Hinfolist ul li .Hexit{background:none;font-size:14px;color:rgba(178,175,174,1);padding-top:10px}
.Huserxiala .Hinfolist ul li .Hhoutai{background:none;font-size:14px;color:rgba(178,175,174,1);padding-top:10px}
.Huserxiala .Hinfolist ul li .Hexit:hover{background:none;-webkit-box-shadow:none;color:#0295f9;}
.Huserxiala .Hinfolist ul li .Hhoutai:hover{background:none;-webkit-box-shadow:none;color:#0295f9;}
.navbar .main-menu li a .shownew2{color:rgb(249,176,21);display:inline-block;position:relative;top:-9px;left:3px;}
.Huserxiala{width:307px;height:264px;right:0;background:rgba(255,255,255,1);border-radius:0px 0px 10px 10px;position:absolute;top:72px;box-shadow:0 8px 16px 0 rgba(7,17,27,0.2);display:none;}
.ripro-dark .Huserxiala{width:307px;height:264px;right:0;background:rgba(35,36,37,1);border-radius:0px 0px 10px 10px;position:absolute;top:72px;box-shadow:0 8px 16px 0 rgba(7,17,27,0.2);display:none;}
.Huserxiala .Hinfo{padding:25px;width:100%;height:auto;}
.Huserxiala .Hinfo .Hleft{width:84px;float:left}
.Huserxiala .Hinfo:before{border-color:transparent transparent #f9b015 transparent;position:absolute;top:-9px;right:153px;display:block;content:'';width:0;height:0;border-style:solid;border-width:0 5.5px 6px}
.Huserxiala .Hinfo:after{position:absolute;top:-3px;display:block;content:'';right:0;left:0;margin:0 auto;width:100%;height:3px;background-color:#f9b015}
.Huserxiala .Hinfo .Hleft img{border-radius:50%;width:78px;height:78px;}

美化样式二教程:

1. 主题目录:parts -> navbar.php 文件,替换“<!– user –>”到“<!– user end –>”中间的内容为如下代码

&lt;?php if (is_user_logged_in()) : ?&gt;
	&lt;div class="header-dropdown header__group header__group_user header__style_user"&gt;
		&lt;div class="header__cat"&gt;
		   	&lt;a class="user-pbtn" href="&lt;?php echo esc_url(home_url('/user')) ?&gt;"&gt;&lt;?php echo get_avatar($current_user-&gt;user_email); ?&gt;
		   		&lt;?php if(!_cao('is_navbar_ava_name','0')){
					echo '&lt;span&gt;'.$current_user-&gt;display_name.'&lt;/span&gt;';
				}?&gt;
		   	&lt;/a&gt;
		&lt;/div&gt;
		&lt;div class="header__dropdown"&gt;
			&lt;div class="header-box"&gt;
				&lt;div class="refresh-header-top"&gt;
					&lt;div class="header-top"&gt;
		 				&lt;?php echo get_avatar($current_user-&gt;user_email); ?&gt;
		 				&lt;div class=""&gt;&lt;span&gt;
		 					&lt;a class="user-names" href="&lt;?php echo home_url('/user') ?&gt;/user"&gt;&lt;?php echo $current_user-&gt;display_name; ?&gt;&lt;/a&gt;
							&lt;?php if ($CaoUser-&gt;vip_status()) {
								echo '&lt;i class="wp wp-VIP"&gt; '.$CaoUser-&gt;vip_name().' &lt;/i&gt;&lt;i class="group-name"&gt;'.$CaoUser-&gt;vip_end_time().'&lt;/i&gt;&lt;/span&gt;';
								echo '&lt;p id="buy-vip" rel-vipid="3"&gt;多一点理解,担一份责任,献一抹光亮,度一段艰辛&lt;/p&gt;';
				            }elseif(in_array( 'administrator', $current_user-&gt;roles )){
								echo '&lt;i class="wp wp-VIP"&gt; 管理员  &lt;/i&gt;';
								echo user_registered_date().'&lt;/span&gt;';
								echo '&lt;p id="buy-vip" rel-vipid="3"&gt;只有比别人更早,更勤奋的努力,才能尝到成功的滋味&lt;/p&gt;';
					        }else{
								echo '&lt;i class="wp wp-VIP"&gt; 注册用户 &lt;/i&gt;';
								echo user_registered_date().'&lt;/span&gt;';
								echo '&lt;p id="buy-vip" rel-vipid="3"&gt;谁也不能随随便便成功,它来自彻底的自我管理和毅力&lt;/p&gt;';
					        }?&gt;
						&lt;/div&gt;
						&lt;a href="&lt;?php echo wp_logout_url(home_url()); ?&gt;" class="logout"&gt;退出&lt;/a&gt;
					&lt;/div&gt;
				&lt;/div&gt;
				&lt;div class="header-center"&gt;
					&lt;div class="md-l"&gt;
						&lt;span class="md-tit"&gt;我的钱包&lt;/span&gt;
						&lt;span class="jinbi"&gt;&lt;i&gt;&lt;/i&gt;余额:&lt;?php echo $CaoUser-&gt;get_balance();?&gt; &lt;/span&gt;
						&lt;span class="dou"&gt;&lt;i&gt;&lt;/i&gt;已消费:&lt;?php echo $CaoUser-&gt;get_consumed_balance();?&gt;&lt;/span&gt;
						&lt;a href="/user?action=charge" class="pay-credit" id="buy-credit" rel-vipid="2" rel-moey="38"&gt;充值&lt;/a&gt;
					&lt;/div&gt;
					&lt;div class="md-r"&gt;
						&lt;div class="md-t"&gt;
							&lt;?php if ($CaoUser-&gt;vip_status()) {
								echo '&lt;span&gt;VIP会员&lt;/span&gt;&lt;p&gt;升级为永久VIP享终身特权&lt;/p&gt;&lt;a href="/user?action=vip" class="pay-vip" id="buy-vip" rel-vipid="3"&gt;升级&lt;/a&gt;';
					        }else{
					            echo '&lt;span&gt;非会员&lt;/span&gt;&lt;p&gt;开通VIP,享VIP特权&lt;/p&gt;&lt;a href="/user?action=vip" class="pay-vip" id="buy-vip" rel-vipid="3"&gt;开通&lt;/a&gt;';
					        }?&gt;
						&lt;/div&gt;
						&lt;div class="md-b"&gt;
							&lt;span&gt;永久会员&lt;/span&gt;
							&lt;p&gt;限时开放,仅限99名&lt;/p&gt;
							&lt;a href="/user?action=vip" class="pay-vip" id="buy-vip" rel-vipid="100"&gt;开通&lt;/a&gt;
						&lt;/div&gt;
					&lt;/div&gt;
				&lt;/div&gt;
				&lt;div class="header-bottom"&gt;
					&lt;ul&gt;
						&lt;li&gt;&lt;a href="/user?action=index"&gt;&lt;i class="fa fa-user-secret"&gt;&lt;/i&gt; 个人信息&lt;/a&gt;&lt;/li&gt;
						&lt;li&gt;&lt;a href="/user?action=mypay"&gt;&lt;i class="fa fa-file-text"&gt;&lt;/i&gt; 订单中心&lt;/a&gt;&lt;/li&gt;
						&lt;li&gt;&lt;a href="/user?action=charge"&gt;&lt;i class="fa fa-paypal"&gt;&lt;/i&gt; 充值中心&lt;/a&gt;&lt;/li&gt;
						&lt;li&gt;&lt;a href="/user?action=ref"&gt;&lt;i class="fa fa-paper-plane"&gt;&lt;/i&gt; 推广佣金&lt;/a&gt;&lt;/li&gt;
						&lt;?php if(in_array( 'administrator', $current_user-&gt;roles )): ?&gt;
					        &lt;li&gt;&lt;a href="&lt;?php echo home_url('/wp-admin/index.php') ?&gt;" target="_blank"&gt;&lt;i class="fa fa-unlock-alt"&gt;&lt;/i&gt; 登陆后台&lt;/a&gt;&lt;/li&gt;
					    &lt;?php else : ?&gt;
							&lt;li&gt;&lt;a href="&lt;?php echo home_url('user?action=mypost') ?&gt;/" class=""&gt;&lt;i class="fa fa-file-text"&gt;&lt;/i&gt; 我的文章&lt;/a&gt;&lt;/li&gt;
					    &lt;?php endif; ?&gt;
					&lt;/ul&gt;
				&lt;/div&gt;
			&lt;/div&gt;
		&lt;/div&gt;
	&lt;/div&gt;
&lt;?php else: ?&gt;
	&lt;div class="login-btn navbar-button"&gt;&lt;i class="mdi mdi-account"&gt;&lt;/i&gt; 登录&lt;/div&gt;
&lt;?php endif; ?&gt;

2. 主题目录:assets -> css -> diy.css 文件,添加如下样式

.header__group{position:relative}
.header__group:before,.header__group:after{background:transparent;bottom:-5px;height:16px;width:16px}
.header__group:before{border-bottom-right-radius:8px;box-shadow:6px 6px 0 #FFF;left:-16px}
.header__group:after{border-bottom-left-radius:8px;box-shadow:-6px 6px 0;right:-16px}
.header__group.active:before,.header__group.active:after{content:''}
@media only screen and (max-width: 767px){.header__group_cats{display:none;position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(35,35,35,0.82);z-index:20}
.header__group_cats.visible{display:block}}
.header__group_cats.active:before{content:none}
@media only screen and (max-width: 767px){.header__group_cats .header__cat{display:none}}
.header__group_cats .header__dropdown{border-top-right-radius:8px;width:262px}
@media only screen and (max-width: 767px){.header__group_cats .header__dropdown{top:0;left:auto;right:0;bottom:0;width:256px;overflow:auto}}
.header__style_user .header__dropdown{left:inherit;right:-160px;border-radius:8px;width:400px;top:76px;}
.header__group_user .header__dropdown .header__link &amp;gt; a{color:#8495a0}
.header__group_user .header__dropdown .header__link &amp;gt; a:hover{color:#fff}
.header__group_user.active:before{content:none}
.header__group_notify{}
.header__group_notify .header__dropdown{border-radius:8px;left:auto;right:-64px;width:372px}
.ripro-dark .header__group.active .header__cat {background: #232425;}
.header__group.active .header__cat{background:#FFF;box-shadow:0 5px 0 0 #FFF}
.header__cat a{color: #adb7be;}
.header__cat a:hover{color: #fff;}
.header__cat .dian{background: #ff5780;width: 7px;height: 7px;border-radius: 50%;position: absolute;right: 13px;top: 26px;}
.header__group.active .header__cat:after{display:none}
.header__group.active .header__title{color:#fff}
.header__group.active .header__dropdown{display:block}
.header__group_cart.active:before,.header__group_cart.active:after{content:none !important}
.header__group_cart.active .header__cat{background:none;box-shadow:none}
.header__group_shift .header__dropdown{border-top-right-radius:8px;left:0;right:auto;width:664px}
.header__group_shift.active::before {content: none}
.header__group_shift .cards{margin:0;padding:20px;display:-ms-grid;display:grid;-ms-grid-columns:(302px)[2];grid-template-columns:repeat(2,302px);grid-gap:20px}
.header__group_shift .cards .card{width:302px}
.header__group_shift .cards .card.liked .likes{opacity:1;right:10px;transition-delay:0ms,0ms}
.header__group_shift .cards .card.liked .likes a{color:#fb6666}
.header__group_shift .cards .card.liked .likes svg{animation:bounce 250ms ease}
.header__group_shift .cards .card-wrapper{margin:0}
@media only screen and (max-width:767px){.header__group_user.active .header__cat{background:none;box-shadow:none}}
@media only screen and (max-width:767px){.header__group_user.active .header__dropdown{display:none}}
.ripro-dark .header__dropdown{background:#232425;}
.header__dropdown{display:none;position:absolute;top:calc(100% + 0px);left:0;background:#FFF;border-radius:0 0 8px 8px;}
.header-box{color:#00377e;}
.header-box,.header__new{margin:0 20px;padding:15px 0;}
.refresh-header-top{width:100%;}
.header-box{color:#00377e;}
.btn-cta-purple{position:relative;width:75px;height:28px;padding:0 8px;text-align:center;text-transform:uppercase;font-size:10px;font-weight:800;line-height:28px;border-radius:14px;color:#fff;background-color:none;background-image:linear-gradient(to bottom,#fb68d5 0,#7865ff 100%);margin-right:20px;cursor:pointer}
.btn-cta-purple:hover{background-image:linear-gradient(to bottom,#ae68fb,#6652f3)}
.header__new{border-bottom:1px solid #202020;box-shadow:0 1px 0 0 #353535;font-size:14px;color:#fff}
.header-box,.header__new{margin:0 20px;padding:15px 0}
.header-box{color:#343434;}
.refresh-header-top{width:100%;}
.header-top{position:relative;font-size:9pt;color:#fff;border-bottom:1px solid #ccc;box-shadow:0 1px 0 0 #f4f4f4;}
.header-top img{float:left;width:45px;border-radius:50%;margin-top:2px;margin-right:10px}
.header-top .logout{position:absolute;right:0;top:0;color:#8495a0;}
.header-top .logout:hover{color:#0056ff;}
.user-names{max-width:100px;overflow:hidden;display:block;word-wrap:break-word;text-overflow:ellipsis;white-space:nowrap;float:left;font-size:14px;}
.header-top .group-name{background:linear-gradient(-125deg,#0295f9 0%,#2f49fd 100%);box-shadow:4px 3px 10px rgba(32,160,255,0.17);color:#FFF;padding:2px 8px;border-radius:10px;font-style:normal;font-size:12px;margin-left:10px;}
.wp-VIP{background:linear-gradient(-125deg,#f8d930 0%,#fb7b92 100%);box-shadow:4px 3px 10px #ffc1072e;color:#FFF;padding:2px 8px;border-radius:10px;transition:transform 0.1s;font-size:12px;margin-left:10px;font-family:"wp" !important;font-style:normal;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;}
.wp .wp-VIP:hover{cursor:pointer;transform:translate(0,5px);}
.header-top .group-name.vip-bg,.page-profile .inset-header .about-me .user-name small.badge.vip-bg{background:#ff5780;}
.header-top .group-name.authors-bg,.page-profile .inset-header .about-me .user-name small.badge.authors-bg{background:#2aa461;}
.header-top p{margin-top:7px;font-size:12px;color:#8495a0;cursor:pointer;}
.header-center{display:flex;padding:15px 0}
.header-bottom,.header-center{position:relative}
.header-center .md-l{float:left;width:47%;border-radius:6px;padding:15px;margin-right:15px;transition:transform 0.1s;background-clip:padding-box,border-box;background-origin:padding-box,border-box;background-image:linear-gradient(135deg,#89f1fe,#63a8f6);box-shadow:3px 3px 10px #17161614;}
.header-center .md-l:hover{cursor:pointer;transform:translate(0,-5px);}
.header-center .md-tit{display:block;color:#fff;font-size:14px;margin-bottom:10px}
.header-center .dou,.header-center .jinbi{display:block}
.header-center .jinbi i{background:url(../images/jinbi.svg) no-repeat center;background-size:cover;}
.header-center .dou i,.header-center .jinbi i{width:16px;height:16px;display:-webkit-inline-box;position:relative;top:4px;margin-right:5px}
.header-center .dou i{background:url(../images/dou.svg) no-repeat center;background-size:cover;}
.header-center .pay-credit{position:absolute;bottom:25px;background:linear-gradient(-180deg,#ffffff 2%,#ffffff 98%);padding:1px 10px;border-radius:20px;color:#0a79ed;box-shadow:3px 4px 10px #17161617;}
.header-center .md-r{float:left;width:50%}
.header-center .md-t{padding:9px;margin-bottom:5px;border-radius:5px;position:relative;transition:transform 0.1s;background-clip:padding-box,border-box;background-origin:padding-box,border-box;background-image:linear-gradient(135deg,#fe89c0,#f44069);box-shadow:3px 3px 10px #17161614;}
.header-center .md-t:hover{cursor:pointer;transform:translate(0,-5px);}
.header-center .md-t span{color:#fff;display:block;margin-bottom:5px;font-size:14px}
.header-center .md-t p{font-size:11px}
.header-center .md-t a{position:absolute;right:10px;top:5px;background:linear-gradient(-180deg,#f6f6f6 2%,#f6f6f6 98%);padding:1px 10px;border-radius:20px;color:#ec2546;box-shadow:3px 4px 10px #17161617;}
.header-center .md-b{padding:9px;position:relative;border-radius:5px;background-clip:padding-box,border-box;background-origin:padding-box,border-box;transition:transform 0.2s;background-image:linear-gradient(135deg,#fee11b,#fe8e06);border:2px transparent solid;}
.header-center .md-b:hover{cursor:pointer;transform:translate(0,5px);}
.header-center .md-b span{color:#fff;padding-bottom:5px;display:block;font-size:14px}
.header-center .md-b p{font-size:11px}
.header-center .md-b a{position:absolute;right:10px;top:5px;background:linear-gradient(to bottom,#fff 0,#fff 100%);padding:1px 10px;border-radius:20px;color:#feb609;box-shadow:3px 4px 10px #17161617;}
.header-bottom .my-home{display:block;font-size:14px;margin-bottom:10px;}
.header-bottom ul{padding:1px;display:flex;text-align:center;margin:auto;}
.header-bottom li{float:left;width:20%;cursor:pointer;list-style-type:none;}
.header-bottom li i{width:40px;height:40px;display:block;border-radius:50%;margin:5px auto;transition:transform 0.2s;background-position:center;background-repeat:no-repeat;background:linear-gradient(-125deg,#0295f9 0%,#2f49fd 100%);box-shadow:0 6px 16px -5px rgba(0,0,0,0.3);border-radius:16px;padding:4px 11px;font-size:15PX;line-height:2;color:#fff;text-align:center;white-space:nowrap;vertical-align:baseline;}
.label-warning{background-color:#ffdfe0;color:#f6f6f6;border:0px solid #fff;box-shadow:0 6px 16px -5px rgba(0,0,0,0.3);border-radius:16px;background:linear-gradient(-125deg,#0295f9 0%,#2f49fd 100%);box-shadow:0 8px 10px rgba(32,160,255,.3);}
.header-bottom li i:hover{cursor:pointer;transform:translate(0,-5px);}
.header__custom .icon.max{font-size:18px;}
.header-top p{margin-top:10px;font-size:12px;color:#8495a0;cursor:pointer;}
.header-dropdown{font-size:12px;}
.header-center p{margin:auto;}
.header__cat{box-sizing:border-box;display:-webkit-box;display:-ms-flexbox;display:flex;padding-left:10px;border-radius:8px 8px 0 0;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;cursor:pointer;padding-top:0;}

3. 主题目录:functions.php 在最后面添加如下代码

/**
 * [getTime 获取用户注册时间]
 * @Author   Dadong2g
 * @DateTime 2019-05-28T12:25:26+0800
 * @return   [type]                   [description]
 */
function user_registered_date(){
    $userinfo=get_userdata(get_current_user_id());
    $authorID= $userinfo-&gt;id;
    $user = get_userdata( $authorID );
    $registered = $user-&gt;user_registered;
    echo '&lt;i class="group-name"&gt; '.date( 'Y年m月d日', strtotime( $registered ) ).'&lt;/i&gt;';
}

4. 主题目录:footer.php 在“</body>”前插入如下代码

jQuery(".header-dropdown").hover(function() {
	jQuery(this).addClass('active');
}, function() {
	Query(this).removeClass('active');
});

5. 主题目录:assets -> images 放入如下图片(附上链接,自行下载)

1. 本站所有资源来源于用户上传和网络,只做学习和交流使用,版权归原作者所有,请在下载后24小时之内自觉删除! 2. 盗版,破解有损他人权益和违法作为,请各位用户支持正版。 3. 由于未及时购买和付费发生的侵权行为,与本站无关。 4. 本站发布的内容若侵犯到您的权益,请联系站长删除,我们将及时处理! 5. 资源如果失效或错链请联系站长。
Vlitu•唯利途 » ripro主题美化-第一期

常见问题FAQ

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

官方 VIP

分享到:

发表评论

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

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