Koilee·好运锦鲤主题导航栏搜索框美化

阿豪运维笔记 21-10-26 726阅读

文章最后更新时间:2021年12月14日已超过162天没有更新。

本站使用的锦鲤主题默认搜索导航框如下图,站长用久了以后感觉虽然节省了导航栏占用,对于自己感觉缺少了什么,找主题作者修改意义不大毕竟只有个别人喜欢,又不是全部都喜欢,何不趁此机会打造自己喜欢的搜索栏呢?

image.png

美化搜索栏

1、首先在主题设置界面功能自定义css里面定义css(这边感谢@李洋博客,此搜索栏格式借鉴它本站主题的搜索栏)

search-warp样式

.search-warp {
    position:relative;
    margin-left:auto;
    display:flex;
    align-items:center;
    float:right;
    height:66px;
    }

search-warp form样式

.search-warp form {
    position:relative;
    margin-left:auto;
    display:flex;
    align-items:center;
    }

input.search-input样式

input.search-input {
    background:#ebeef5;
    width:170px;
    height:34px;
    border:1px solid transparent;
    padding:0 18px;
    color:#606266;
    transition:background 0.35s,border-color 0.35s,padding-right 0.35s;
    border-radius:17px 0 0 17px;}

button.showhide-search样式

button.showhide-search {
    position:relative;
    z-index:1;height:34px;
    border:none;
    background:#42a1ff;
    color:#fff;
    border-radius:0 17px 17px 0;
    padding:0 10px;
    cursor:pointer;
    -webkit-appearance:none;
    font-size:13px;
    }

clearfix:after样式

.clearfix:after {
    clear:both;content:"";
    display:block;
    height:0;
    visibility:hidden;
    }

2、修改主题目录下的模板文件header.php,

找到以下默认的搜索栏代码块

<div class="search_top">
    <a href="javascript:;" title="点击搜索"><i class="fa fa-search"></i></a>
        <div class="top_search ">
            <form method="post" name="search" action="{$host}zb_system/cmd.php?act=search" class="searchform">
                <input type="text" name="q" placeholder="输入关键字..." class="text">
                <input type="submit" class="btn" value="搜索"></form>
        </div>
</div>

替换成如下打造的搜索栏代码

<div class="search-warp clearfix">
    <form method="post" name="search" action="{$host}zb_system/cmd.php?act=search">
        <input class="search-input" placeholder="请输入关键字" type="text" name="q">
        <button class="showhide-search" type="submit">Search</button>
    </form>
</div>

3、美化后如下图

image.png


PS:手机端会出现样式错乱还未找到具体原因,当前只支持电脑端


文章版权声明:除非注明,否则均为阿豪运维笔记原创文章,转载或复制请以超链接形式并注明出处。

相关阅读

Zblog如何自定义后台登入地址

网页文字打字机效果插入一段文字(逐字出现循环回退删除)

网站如何设置动态标题

Flv西瓜播放器(XGPlayer-flv)视频代码如何调用

个人网站如何添加添加时光轴记录页面

友情链接如何自动获取并添加favicon.ico小图标

ThinkPHP3.2的Runtime/Logs目录下产生大量Log文件的解决办法

分享一个自己在用的Hopelee · 希望(心动之选)主题一些美化设置

取消
微信二维码
微信二维码
支付宝二维码