RIPRO主题美化-首页搜索框美化教程

作者 : 小编 本文共1887个字,预计阅读时间需要5分钟 发布时间: 2020-03-30 共712人阅读

源码介绍

教程开始

1、找到wp-content/themes/ripro/assets/css/diy.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="<?php echo esc_url( @$home_search_mod['bg'] ); ?><p>">
<div class="container">
<h3 class="focusbox-title"></h3>
<form class="mb-0" action="<?php echo home_url(); ?><p>" 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="<?php echo home_url(); ?><p>" 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>

源码属性

整站源码 、完全开源

演示系统

源码截图

RIPRO主题美化-首页搜索框美化教程
1. 本站所有资源来源于用户上传和网络,如有侵权请邮件联系站长!
2. 分享目的仅供大家学习和交流,您必须在下载后24小时内删除!

3. 不得使用于非法商业用途,特别是游戏类源码仅用于学习研究,不得违反国家法律。否则后果自负!

4. 本站提供的源码、模板、插件等等其他资源,都不包含技术服务请大家谅解!
5. 如有链接无法下载、失效或广告,请联系管理员处理!
6. 本站资源售价只是赞助,收取费用仅维持本站的日常运营所需!
7. 如遇到加密压缩包,默认解压密码为"www.tzhuti.com",具体请看下方【常见问题】如遇到无法解压的请联系管理员!
囤主题-专注帮助站长建站、源码导购、整站源码及最新虚拟主题资源分享! » RIPRO主题美化-首页搜索框美化教程

常见问题FAQ

本站解压密码
评论刷新后即可见解压密码
tzhuti.com
www.tzhuti.com
3128469470
248125469
免费下载或者VIP会员专享资源能否直接商用?
本站所有资源版权均属于原作者所有,这里所提供资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担。更多说明请参考 VIP介绍。
下载后没出现下载地址或下载失败?
请先清除浏览器缓存再一次下载,如果还是不能下载,请联系客服解决,我们在看到信息后第一时间解决,联系时请说问题。
个别资源下载失效处理方式?
请提供会员ID及链接直接联系客服获取,我们看到后将第一时间恢复并发送链接给您,给您造成的不方便请谅解。

发表评论

×
开通VIP 享更多特权,建议使用QQ登录