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" data-bg="&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，经过以上操作，就实现了效果图中的效果