Riprov2主题美化包|HUAN子主题:顶部导航区域悬停半透明毛玻璃效果美化教程

今天给HUAN主题增加一个顶部导航区域悬停时显示半透明毛玻璃效果,比原版的纯色要舒服一些。

网站美化教程:Riprov2美化特效 顶部导航区域悬停半透明毛玻璃效果-1

美化方法也很简单,直接添加下方CSS样式代码到样式表中即可。

如:HUAN主题(基于Riprov2的子主题美化包)只用在child-style.css文件中加入如下代码即可:

/*顶部半透明*/
.site-header {background-color: rgba(255,255,255,0.5); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px) !important;}
.navbar .dropdown-menu  {background-color: rgba(255,255,255,0.5); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px) !important;}

如果需要加入后台设置项,需要在function.php及HUAN主题admin-options.php设置文件中分别添加如下代码。

HUAN主题function.php中增加代码:

//顶部毛玻璃半透明
if (_cao('huan_headeropty', "0") === "1") {
    add_action('wp_head', function () {
        echo <<<EOT
<style type="text/css">
.site-header {background-color: rgba(255,255,255,0.5); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px) !important;}
.navbar .dropdown-menu  {background-color: rgba(255,255,255,0.5); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px) !important;}
</style>
EOT;
    }, 100);
}

HUAN主题admin-options.php的设置项中增加一个设置项代码:

            array(
                    'id'      => 'huan_headeropty',
                    'type'    => 'switcher',
                    'title'   => '是否启用顶部导航毛玻璃效果',
                    'label'   => '启用后增加顶部导航悬停时毛玻璃效果',
                    'default' => false,
                ),   

保存后,刷新网页缓存,在HUAN主题后台设置美化特效中开启半透明毛玻璃效果即可。

网站美化教程:Riprov2美化特效 顶部导航区域悬停半透明毛玻璃效果-1

注意:以上设置代码仅限于riprov2主题美化包HUAN子主题中使用,其他网站需根据实际情况修改为对应的导航样式。

发表评论

后才能评论