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

这篇文章主要是导航的美化,其中包括柒比贰主题的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

给TA买糖
共{{data.count}}人
人已赞赏
网站教程

wordpress中非插件实现熊掌号(移动专区)api数据提交教程

2019-4-17 11:29:23

网站教程

logo扫光特效是怎么做到的?logo扫光特效css代码

2019-4-19 11:49:21

7 条回复 A文章作者 M管理员
  1. 不错,不错,支持

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

    • 最新文章已修复

  3. 非常不错555555

  4. 不错不错不错!

  5. 学习了

个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索