ripro主题修改教程-首页搜索框美化教程

先看效果图:

 

我们来看怎么实现:

1、找到wp-content/themes/ripro/assets/css/diy.css并将下面的内容整体复制进去并保存

/*首页搜索框*/
.bgcolor-fff {
background-color: #fff;
}
.row,.navbar .menu-item-mega>.sub-menu{margin-left:-10px;margin-right:-10px;}
.home-filter–content:before{background-color:rgba(91,91,91,0);}
.home-filter–content {background: linear-gradient(to right, #f6f6f6, #f6f6f6a8, #f6f6f6);}
.ripro-dark .home-filter–content {background: linear-gradient(to right, #232425, #232425, #232425);}
.home-filter–content .form-box{margin-right:10%;margin-left:10%;}
/*首页搜索框*/

 

2、找到/wp-content/themes/ripro/parts/home-mode/search.php找到如下代码:

<div class=“section pt-0 pb-0”>
<div class=“row”>
<div class=“home-filter–content lazyload” databg=“&lt;?php echo esc_url( @$home_search_mod[‘bg’] ); ?&gt;&lt;p&gt;”>
<div class=“container”>
<h3 class=“focusbox-title”></h3>
<form class=“mb-0” action=“&lt;?php echo home_url(); ?&gt;&lt;p&gt;” autocomplete=“off” method=“get”>
<div class=“form-box search-properties”>
<div class=“row”>
<div class=“col-xs-12 col-sm-6 col-md-9”>
<div class=“form-group mb-0”><input class=“home_search_input” name=“s” type=“text” placeholder=“输入关键词搜索…” /></div>
</div>
<div class=“col-xs-12 col-sm-6 col-md-3”><input class=“btn btn–block” type=“submit” value=“搜索” /></div>
</div>
<div class=“home-search-results”></div>
</div>
</form></div>
</div>
</div>
</div>

3、将以上代码替换为以下代码即可

<div class=“section bgcolor-fff search_section”>
<div class=“container”>
<div class=“row”>
<div class=“home-filter–content”><form class=“mb-0” action=“&lt;?php echo home_url(); ?&gt;&lt;p&gt;” autocomplete=“off” method=“get”>
<div class=“form-box search-properties mb-0”>
<div class=“row”>
<div class=“col-xs-12 col-sm-6 col-md-9”>
<div class=“form-group mb-0”><input class=“home_search_input” name=“s” type=“text” placeholder=“时间博客www.new114.cn …” /></div>
</div>
<div class=“col-xs-12 col-sm-6 col-md-3”><input class=“button transparent home_search” type=“submit” value=“搜索” /></div>
</div>
<div class=“home-search-results”></div>
</div>
</form></div>
</div>
</div>
</div>

OK,经过以上操作,就实现了效果图中的效果

承接各行业网站APP开发,区块链,金融理财,游戏开发 系统开发,模板定制,APP开发,网站维护,API对接,支付对接 短信对接,VUE前端设计,UI设计,服务器部署等服务! 业务咨询 / 源码下载 / 开通VIP等问题 客服联系 QQ:1900553000 Telegram:anons123x
YS源码,整站源码下载,php网站源码,源码资源网,网站模板 » ripro主题修改教程-首页搜索框美化教程

发表回复