0°

柒比贰美化-顶部菜单美化双列展示+搜索投稿

这篇文章主要是导航的美化,其中包括柒比贰主题的logo后加文字,双列下拉菜单展示,右侧搜索投稿,头像下拉添加菜单

本来 我是真的不打算折腾这个柒比贰美化专题的了,美化,美化,美化,美化到我自己看到我网站都觉得丑并且low的时候,快要放弃了。但是有小伙伴需要就满足一下大家。然后佛系站长看到统计代码数字上涨就开心,所以还是弄出来个教程!毕竟这个东西群里的大佬,阿里云博客纸工厂这些老哥分享过代码。我这里整理一下代码吧!再次感谢大佬们的分享。

柒比贰美化-顶部菜单美化双列展示+logo后跟文字

1、顶部菜单下拉双列

操作:复制下列代码到你的子主题的style.css里面,再次建议大家使用子主题修改样式,新版本要出来了,2.80成了绝版,你把里面的东西改了,到时候想修改的时候会很麻烦。

关于某些数值需要修改的,自己去改一下,不一定适合你们的,div挤掉下来不可怕,没报错就不是大问题 (我的页面宽度设置是1310px,你们没改的应该是1140px,挤下来很正常)

/*导航菜单分栏*/ .zrz-menu-in .sub-menu { width: 252px; } 
.zrz-menu-in .sub-menu li { width: 50%; float: left; }
 .zrz-menu-in .sub-menu li a { padding: 13px; } 
.zrz-menu-in .sub-menu li a:hover { background-color: #e7e7e7; margin-right: 0; margin-left: 0; }
 @media screen and (max-width: 768px) { 
.menu-top { margin-left: 0; } 
.zrz-menu-in .sub-menu li { width: unset; float: unset; }
 .zrz-menu-in .sub-menu li a { padding: 10px; }
 .zrz-menu-in .sub-menu li a:hover { background-color: #cccccc; color: #000; }
 }
 .zt-item { background: #fff; /*margin-bottom: 15px*/ } 
@media (min-width:768px) 
{ .zt-item { /*margin-bottom: 30px*/ } }

 

2、logo后加文字及把导航文章右移

操作: 找到seven/inc/functions-templates.php里面,50行应该是一个“}”,后面跟上这么一句

echo '<div class="site-des">服务器推荐<br>专业的整合资源收集整理平台!</div>';

此处为css,位置同上style.css,加在后面

.site-des {
    margin-left: 147px;
    float: left;
    font-size: 12px;
    color: #999999;
    margin-top: 12px;
    line-height: 18px;
}
@media screen and (max-width:670px){
	.site-des{
    display:none  
}
}
/*菜单右移*/
.menu-top{
      margin-left:520px   }

/*菜单间隔*/
.menu-top ul>li {
    padding: 18px 5px;
}

2、搜索投稿:

操作:找到seven/inc/functions-templates.php ~~搜索sign-button-r mar10-r,然后在他的下一行添加如下代码

 <button class="head-vip text" @click="showWriteBox"><i class="zrz-icon-font-dengpao iconfont"></i>投稿</button>
 <button class="sousuo text" @click="showSearchBox('search')"><i class="iconfont zrz-icon-font-sousuo"></i> 搜索</button>

css样式添加在子主题style.css里面

.sign-button-r .head-vip {
    display: block;
    width: 36px;
    height: 58px;
    color: #fff;
    font-size: 12px;
    background-color: #6cb5fe;
    border-radius: 0 0 6px 6px;
    top: -12px;
}

.sign-button-r .sousuo {
    left: -45px;
    width: 36px;
    height: 58px;
    color: #fff;
    font-size: 12px;
    background-color: #fe958b;
    border-radius: 0 0 6px 6px;
    top: -70px;
}

@media screen and (max-width: 768px) {
    .menu-top {
        margin-left: 0;
    }
    .zrz-menu-in .sub-menu li {
        width: unset;
        float: unset;
    }
    .zrz-menu-in .sub-menu li a {
        padding: 10px;
    }
    .zrz-menu-in .sub-menu li a:hover {
        background-color: #cccccc;
        color: #000;
    }
}

3.可以在会员窗口添加 我的购物车/任务链接

inc/functions-templates.php ~144行

<a href="<?php echo esc_url(home_url('/cart')); ?>">
<i class="zrz-icon-font-haofangtuo400iconfont2gouwu iconfont"></i><?php echo __('购物车','7b2'); ?>
</a>
<a href="<?php echo esc_url(home_url('/task')); ?>">
<i class="zrz-icon-font-liwu iconfont"></i><?php echo __('任务','7b2'); ?>
</a>

有问题请下方留言,或咨询QQ:205432983

「点点赞赏,手留余香」

    还没有人赞赏,快来当第一个赞赏的人吧!
6 条回复 A 作者 M 管理员
  1. 不错,不错,支持

  2. 支持

  3. 搜索投稿有点问题,切换到分类后就无法点击分类封面模糊按钮

    • 最新文章已修复

  4. 非常不错555555

  5. 不错不错不错!

欢迎您,新朋友,感谢参与互动!欢迎您 {{author}},您在本站有{{commentsCount}}条评论
在线图床 网址缩短 积分获取 积分素材
官方客服
  • 官方客服:205432983一键联系
  • 扫一扫加站长微信
    官方QQ群