RiPro 主题美化-整理头像下拉美化菜单,修复部分css样式错位

作者 : 优站 本文共19917个字,预计阅读时间需要50分钟 发布时间: 2020-03-14 共422人阅读


效果展示一


效果展示二


本次美化教程基于“会员引导”功能制作,需与导航添加“开通会员”按钮,不然美化后按钮错位。
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;”后面添加如下代码

$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设置结束*/

VIP免费

已有0人支付

 

1. 本站所有资源来源于用户上传和网络,仅作为演示数据,如有侵权请邮件联系站长!
2. 盗版,破解有损他人权益和违法作为,请各位会员支持正版!
3. 本站所有源码仅供学习,不保证源码完整性,请勿商业,请勿任何违法用途,后果自负!
4. 本站资源售价只是赞助,收取费用仅维持本站的日常运营所需!!!
一品优选 » RiPro 主题美化-整理头像下拉美化菜单,修复部分css样式错位

发表评论

售后服务:

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

Hi, 如果你对这款模板有疑问,可以跟我联系哦!

联系作者
享更多特权,建议使用 QQ 登录
喜欢我嘛?喜欢就按“ctrl+D”收藏我吧!♡