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

柒比贰美化-顶部菜单美化双列展示+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 ~~121行添加如下代码

<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>

 生成海报

暂无评论

相关推荐

微信扫一扫

微信扫一扫

微信扫一扫,分享到朋友圈

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