Ripro主题导航会员头像下拉菜单美化(修复方法)

发布时间: 2020-04-16 196 人阅读

本期主要讲解Ripro主题导航会员头像下拉菜单美化,修复部分css样式错位,背景色及菜单等排版。

Ripro主题会员头像下拉菜单修复前后对比图

注:本次美化教程基于“会员引导”功能制作,需与导航添加“开通会员”按钮,不然美化后按钮错位。
1.主题目录:parts->navbar.php文件,在“<divclass=”actions”>”后添加如下代码

<div title="加入VIP,享受折扣下载全站资源,享受VIP特权。" class="menu-head_you-container">
	<ul id="menu-head_you" class="menu">
		<li id="menu-item-967" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-967">
			<a href="vip"><i class="fa fa-diamond"></i> 开通会员</a>
		</li>
	</ul>
</div>

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

$CaoUser = new CaoUser($current_user->ID);

注:第2步必须添加,否则报错

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

/*nav设置开始*/
.navbar{height:72px;}
.header-gap{height:72px;}
.navbar .hhnavwarp:hover .Huserxiala{display:block;}
.navbar .menu-item&gt;a{font-weight:400;}
.ripro-dark .navbar .menu-item&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&gt;div+div{font-weight:700}
.navbar .actions&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&gt;a:hover:before,.sub-menu li.current_page_item&gt;a:before,.sub-menu li.current-menu-item&gt;a:before,.sub-menu li.current_page_ancestor&gt;a:before,.sub-menu li.current-menu-ancestor&gt;a:before,.sub-menu li.current-menu-parent&gt;a:before{opacity:1;}
.sub-menu li&gt;a:hover,.sub-menu li.current_page_item&gt;a,.sub-menu li.current-menu-item&gt;a,.sub-menu li.current_page_ancestor&gt;a,.sub-menu li.current-menu-ancestor&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 –>”中间的内容为如下代码

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

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. 本站所有资源来源于用户上传和网络,如有侵权请邮件联系站长!vip@mobanstar.com
2. 您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容资源!
3. 如果你也有好源码或者教程,可以到审核区发布,分享有金币奖励和额外收入!
4. 本站提供的源码、模板、插件等等其他资源,都不包含技术服务请大家谅解!
5. 如有链接无法下载、失效或广告,请联系管理员处理!
6. 本站资源售价只是赞助,收取费用仅维持本站的日常运营所需!
7. 本站不保证所提供下载的资源的准确性、安全性和完整性,源码仅供下载学习之用!
8. 如用于商业或者非法用途,与本站无关,一切后果请用户自负!
9. 如遇到加密压缩包,默认解压密码为"www.mobanstar.com",如遇到无法解压的请联系管理员!

模板星 » Ripro主题导航会员头像下拉菜单美化(修复方法)

常见问题FAQ

购买的模板是永久使用的嘛?需要授权码嘛?
凡是在模板星购买的模板/主题都是支持永久使用的,无需购买授权码,请用户放心购买使用。
VIP模板提供安装服务嘛?需要收费嘛?
凡在模板星购买的模板/主题均可提供一次免费安装服务(需提供空间及数据库账号),请用户放心购买。

发表评论

售后服务:

  • 售后服务范围 1、商业模板使用范围内问题免费咨询
    2、源码安装、模板安装(一般 ¥50-300)服务答疑仅限SVIP用户
    3、单价超过200元的模板免费一次安装,需提供服务器信息。
    付费增值服务 1、提供dedecms模板、WordPress主题模板优化等服务请详询在线客服
    2、承接DedeCMS、 WordPress等系统建站、仿站、开发、定制等服务
    3、服务器环境配置(一般 ¥50-300)
    4、网站中毒处理(需额外付费,500元/次/质保三个月)
    售后服务时间 周一至周日(法定节假日除外) 9:00-23:00
    免责声明 本站所提供的模板(主题/插件)等资源仅供学习交流,若使用商业用途,请购买正版授权,否则产生的一切后果将由下载用户自行承担,有部分资源为网上收集或仿制而来,若模板侵犯了您的合法权益,请来信通知我们(Email:vip@mobanstar.com),我们会及时删除,给您带来的不便,我们深表歉意!

目前已经有 61 位会员加入