Question

大家

我正在使用wordpress创建一个电子商务网站并安装tidio聊天插件。我想调整tidio聊天的位置（底部），当前为0px，但我发现它正在使用iframe，并且无法通过添加自定义css来更改它。

<iframe title="Tidio Chat" id="tidio-chat-iframe" style="display: block; border: none; position: fixed; width: 112px; height: 140px; opacity: 1; left: auto; right: 0px; bottom: 0px; top: auto; background: none transparent; margin: 0px; max-height: 100vh; max-width: 100vw; transform: translateY(0px); transition: none 0s ease 0s; visibility: visible; z-index: 999999999 !important;"></iframe>

要添加到javascript中的代码是什么，我尝试过多次添加代码，但是仍然失败，有人可以帮助我解决此问题吗？非常感谢。

Answer 1

要将其应用于 WordPress 中的许多主题，您需要在页脚中有 css。这可以通过 get_footer 钩子来完成。

在您的子主题中创建一个新的 footer.css 文件。我把它放在assets/css/footer.css 中。添加css：

#tidio-chat iframe { 底部：0em !important; } @media only screen and (max-width: 980px) { #tidio-chat iframe { 底部：-1em !important; } }
在子主题的functions.php文件中，添加以下函数：

function childtheme_add_footer_styles() { wp_enqueue_style('你的样式ID', get_stylesheet_directory_uri() .'/assets/css/footer.css'); }; add_action('get_footer', 'childtheme_add_footer_styles');

这将在页脚中添加 css，将其应用于 tidio 聊天图标。在themes style.css中加载css时，在header中加载，不应用。

Answer 2

可以移动整个iframe本身，但这仅适用于桌面版本的小部件（移动移动小部件将使其超出屏幕边界）。

尝试在网站标题中使用以下样式代码：

<style>
#tidio-chat iframe { bottom: 3.5em !important; }
@media only screen and (max-width: 980px) {
    #tidio-chat iframe { bottom: 0px !important; }
}
</style>

第一行负责移动窗口小部件，因此您可以根据需要使用这些值来定位聊天。第二行和第三行负责将移动窗口小部件排除在外，因此建议不要更改它们。

希望这会有所帮助：）

如何在Tidio聊天中编辑iframe CSS

2 个答案: