RiPro主题美化教程之个人中心菜单

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

注:本次美化教程基于“会员引导”功能制作,需与导航添加“开通会员”按钮,不然美化后按钮错位。
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. 主题目录:parts -> navbar.php 文件,在头部“global $current_user;”后面添加如下代码,注:第2步必须添加,否则报错

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

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设置结束*/
123
实用教程

~给你的博客也加上冬天雪花特效~

2020-2-24 14:39:18

实用教程

RiPro主题美化教程之VIP引导界面/滚动条/头像/LOGO

2020-2-24 15:49:04

版权声明 本站所发布的一切与破解相关的文章仅限用于学习和研究目的,请在下载后的24个小时之内,从您的电脑中彻底删除。所有资源均来自于网络,不得用于商业或者非法用途,否则一切后果请用户自负。
0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
有新私信 私信列表
搜索