Koilee·好运锦鲤主题导航栏搜索框美化
文章最后更新时间:2021年12月14日已超过410天没有更新。
本站使用的锦鲤主题默认搜索导航框如下图,站长用久了以后感觉虽然节省了导航栏占用,对于自己感觉缺少了什么,找主题作者修改意义不大毕竟只有个别人喜欢,又不是全部都喜欢,何不趁此机会打造自己喜欢的搜索栏呢?
美化搜索栏
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、美化后如下图
PS:手机端会出现样式错乱还未找到具体原因,当前只支持电脑端
以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作有参考学习价值
喜欢请点击上方【分享】,如果对您有帮助可点击上方【打赏】打赏本站。谢谢大家对阿豪运维笔记的支持。