WordPress建站教程:修改BLOCKSY主题的默认搜索框样式

科技1年前 (2023)发布 iowen
173 0 0
Wordpress建站教程:修改BLOCKSY主题的默认搜索框样式

继续分享wordpress建站教程。有些wordpress主题自带的搜索都是那种全屏弹窗样式的,如上图所示,当我们点击搜索时它会出现一整块半透明的全屏搜索弹窗(透明度可调),其实个人感觉这样挺好,就用它默认的样式就行了。但是也有部分用户会觉得这种搜索样式不好,所以我们有时可能会需要修改这个搜索框样式,下面就分享方法。

方法一:用代码替换

悦然wp建站,公众号:wordpress建站开发Wordpress建站教程:给导航栏添加默认搜索框


悦然wordpress建站之前分享过一个方法,可以移除主题的搜索框,然后直接在wordpress建站主题的function.php文件中添加代码,这样会在导航栏多出一个默认搜索框,方法查看上面的教程。

方法二:使用CSS修改

部分数用户是不太喜欢那种全屏的搜索样式,所以我们可以修改通过下面的CSS代码来修改搜索框的大小和透明度。

/*blocksy搜索框弹出背景CSS*/
[data-header*="type-1"] #search-modal {
top: 15%;
left: 25%;
right: 25%;
bottom: 55%;
background-color: rgba(18, 20, 26, 0.85);
}

这里就以BLOCKSY主题为例,大家可以直接把上面的CSS代码添加到主题自定义的额外CSS中,然后还可以通过修改上面的几个百分比数字修改调用位置和大小。

Wordpress建站教程:修改BLOCKSY主题的默认搜索框样式

修改之后的搜索框效果如上图所示。

以上就是今天给大家分享的内容,希望对您有用。

推荐阅读


WordPress建站教程:古腾堡区块添加复杂表格的方法

Wordpress建站教程:修改BLOCKSY主题的默认搜索框样式

WordPress网站维护教程:解决谷歌不收录的问题

Wordpress建站教程:修改BLOCKSY主题的默认搜索框样式

WordPress建站教程:Woocommerce产品实现直接购买


如果觉得我分享的内容对您有所帮助

😘请帮忙分享点赞在看 谢谢啦😘


© 版权声明

相关文章

暂无评论

暂无评论...