子比主题首页搜索框透明美化

子比主题首页搜索框透明美化-小白兔技术部落
子比主题首页搜索框透明美化
此内容为免费阅读,请登录后查看
兔币0
安全
可靠
信赖
免费阅读

项目介绍:

在其他网站看到的很不错的搜索框及按钮的美化,如果你是做资源或是搜索类网站的话,这个美化应该会需要,这是子比主题的迭加搜索组件美化,一共两个,一个是发布作品按钮,一个是透明框的美化,需要的话可以自行测试。

效果示范:

图片[1]-子比主题首页搜索框透明美化-小白兔技术部落

使用教程

首先我们就是改:/zibll/inc/functions/zib-search.php

首先我们要改两个地方然后加上CSS就可以了第一处第二处自定义CSS样式

第三个地方就简单了,直接放到我们的 子比主题–>>自定义CSS样式 即可

文件一修改

搜:“ search-form ”,大概在548行的代码,如下图,跟我一样将代码注释或删掉,然后放入下面的代码

文件二修改 到了第二个地方,我们还是在:/zibll/inc/functions/zib-search.php 文件里面改 我们要搜下面的代码

esc_attr(strip_tags($args['s']));

然后我们搜到之后如下图注释然后换成我的代码,大概在525行

图片[2]-子比主题首页搜索框透明美化-小白兔技术部落

其次直接把下面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;
}
温馨提示:本文最后更新于2024-09-11 21:52:21,某些文章具有时效性,若有错误或已失效,请在下方留言或联系兔子警长
© 版权声明
THE END
喜欢就支持一下吧
点赞14 分享