Ripro两款头像下拉栏美化教程

Ripro两款头像下拉栏美化教程-99源码屋
Ripro两款头像下拉栏美化教程
此内容为付费阅读,请付费后查看
3积分
通过安全检测
支持游客购买
网盘极速下载
会员永久免费
付费阅读
已售 56

源码截图:

效果显示一

图片[1]-Ripro两款头像下拉栏美化教程-99源码屋

头像下拉美化菜单,修复部分css样式错位

效果显示二

图片[2]-Ripro两款头像下拉栏美化教程-99源码屋

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

教程开始:

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

<div title="加入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.主题目录:assets -> css -> diy.css 文件,添加如下样式

/*nav设置开始*/
.navbar{height:72px;}
.header-gap{height:72px;}
.navbar .hhnavwarp:hover .Huserxiala{display:block;}
.navbar .menu-item>a{font-weight:400;}
.ripro-dark .navbar .menu-item>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>div+div{font-weight:700}
.navbar .actions>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>a:hover:before,.sub-menu li.current_page_item>a:before,.sub-menu li.current-menu-item>a:before,.sub-menu li.current_page_ancestor>a:before,.sub-menu li.current-menu-ancestor>a:before,.sub-menu li.current-menu-parent>a:before{opacity:1;}
.sub-menu li>a:hover,.sub-menu li.current_page_item>a,.sub-menu li.current-menu-item>a,.sub-menu li.current_page_ancestor>a,.sub-menu li.current-menu-ancestor>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 admin_url(); ?>" target="_blank"><i class="fa fa-unlock-alt"></i> 登陆后台</a></li>
				<?php else : ?>
					<li><a href="/user?action=mypost"><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. 主题目录:parts -> navbar.php 文件,替换<!– user –>到<!– user end –>中间的内容为如下代码

------本页内容已结束,喜欢请分享------

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

© 版权声明
THE END
喜欢就支持一下吧
点赞13 分享
评论 抢沙发

请登录后发表评论

服务支持

用心做更好的精品源码站,服务各个行业,让大家快速创建属于自己的网站 。

2000+
优质源码
8年+
开发经验
1200
注册用户
7*24
随时响应