成品效果:图片展示
首先我们要知道改哪个文件,首先我们就是改:/zibll/inc/functions/zib-search.php
两个地方然后加上CSS就可以了第一处第二处自定义CSS样式,第三个地方就简单了.
1.开始直接放到我们的 子比主题–>>自定义CSS样式
搜search-form ”,大概在548行的代码,替换
$form_html = '<form method="get" class="padding-10 search-form tengfei_search_frame" action="' . esc_url(home_url('/')) . '">' . $type_html . '<div class="line-form">' . $cat_html . $input_html . '</div></form>';
2.搜下面的代码esc_attr(strip_tags($args['s']));搜到之后如下图注释然后换成我的代码,大概在525行
$s = esc_attr(strip_tags($args['s'])); $input_html = '<div class="search-input-text"> <input type="text" name="s" class="line-form-input" tabindex="1" value="' . $s . '"><i class="line-form-line"></i> <div class="scale-placeholder' . ($s ? ' is-focus' : '') . '" default="' . $args['placeholder'] . '">' . $args['placeholder'] . '</div> <div class="abs-right muted-color"> <button class="btn tengfei-search-button-red"><a href="/newposts" style="color: rgb(255, 255, 255);">文章投稿</a></button> <button type="submit" name="" class="btn tengfei-search-button-blue">搜索文章</button> </div>
3.再直接把下面CSS代码填到后台自定义CSS即可
.tengfei_search_frame { border: 5px solid rgb(255 255 255 / 30%); border-radius: 45px; padding: 0; font-size: 15px; } .tengfei-search-button-red { background: #ff1856; right: 106%; position: absolute; } .tengfei-search-button-blue { background: #0088ff; border: 1px solid #33aaff; color: rgb(255, 255, 255); border-radius: 18px; border-bottom-left-radius: 0px; border-top-left-radius: 0px; margin-right: -17px; }
© 版权声明
THE END
暂无评论内容