3cx 更改气泡按钮样式 - 向上移动异步按钮并在等待创建异步 dom 的获取后为其设置样式

Question

两天以来，我一直在努力解决聊天气泡覆盖我的主题底部登录/退出网络应用栏的问题：

尝试：

1. 在Wordpress中修改子style.css和functions.php

主题风格不适用 在 style.css 中修改了

`/* 
 Theme Name:   Alukas child
 Theme URI:    
 Description:  Tema child di Alukas
 Author:       admin
 Author URI:   https://monbi.it
 Template:     alukas
 Version:      1.0
 License:      GNU General Public License v2 or later
 License URI:  http://www.gnu.org/licenses/gpl-2.0.html

 /* == Add your own styles below this line ==
--------------------------------------------*/
#wplc-chat-button {bottom: 100px!important}
`

2. 使用jquery向聊天气泡添加css 手动应用底部后：70px！对 Chrome 来说很重要

3. 使用jquery将css添加到聊天气泡父div

4. 使用jquery给聊天气泡祖父母div添加css

    function add_custom_js() {
    ?>
    <script type="text/javascript">

        function querySelectorAllShadows(selector, el = document.body) {
          // recurse on childShadows
          
             /**
             * Finds all elements in the entire page matching `selector`, even if they are in shadowRoots.
             * Just like `querySelectorAll`, but automatically expand on all child `shadowRoot` elements.
             * @see https://stackoverflow.com/a/71692555/2228771
             */
          const childShadows = Array.from(el.querySelectorAll('*')).
            map(el => el.shadowRoot).filter(Boolean);

          // console.log('[querySelectorAllShadows]', selector, el, `(${childShadows.length} shadowRoots)`);

          const childResults = childShadows.map(child => querySelectorAllShadows(selector, child));
          
          // fuse all results into singular, flat array
          const result = Array.from(el.querySelectorAll(selector));
          return result.concat(childResults).flat();
        }

        jQuery(document).ready(function(){
            setTimeout(function() {
            // sposta la bubble chat
                
            // Sposta il div #callus-container
                var allMatches = querySelectorAllShadows('#wp-live-chat-by-3CX');
                if(allMatches && allMatches.length > 0){
                    var callusContainer = jQuery(allMatches[0]); // Prendi il primo match
                    if(window.innerWidth <= 430) {
                        callusContainer.css({'position':'fixed','bottom':'105px','right':'5px'});
                    }
                }
                
            }, 3000);  // 3 secondi di ritardo
        });
    </script>
    <?php
}
    add_action('wp_head', 'add_custom_js', 100);

Answer 1

    function add_custom_js() {
    ?>
    <script type="text/javascript">

        function querySelectorAllShadows(selector, el = document.body) {
          // recurse on childShadows
          
             /**
             * Finds all elements in the entire page matching `selector`, even if they are in shadowRoots.
             * Just like `querySelectorAll`, but automatically expand on all child `shadowRoot` elements.
             * @see https://stackoverflow.com/a/71692555/2228771
             */
          const childShadows = Array.from(el.querySelectorAll('*')).
            map(el => el.shadowRoot).filter(Boolean);

          // console.log('[querySelectorAllShadows]', selector, el, `(${childShadows.length} shadowRoots)`);

          const childResults = childShadows.map(child => querySelectorAllShadows(selector, child));
          
          // fuse all results into singular, flat array
          const result = Array.from(el.querySelectorAll(selector));
          return result.concat(childResults).flat();
        }

        jQuery(document).ready(function(){
            setTimeout(function() {
            // sposta la bubble chat
                
            // Sposta il div #callus-container
                var allMatches = querySelectorAllShadows('#wp-live-chat-by-3CX');
                if(allMatches && allMatches.length > 0){
                    var callusContainer = jQuery(allMatches[0]); // Prendi il primo match
                    if(window.innerWidth <= 430) {
                        callusContainer.css({'position':'fixed','bottom':'105px','right':'5px'});
                    }
                }
                
            }, 3000);  // 3 secondi di ritardo
        });
    </script>
    <?php
}
    add_action('wp_head', 'add_custom_js', 100);