Chat conflicting with Boss theme

The chat is enabled site wide from Chat > Settings Site. The chat box will not stay open at the front when BuddyBoss theme is enabled

Please advise

  • Lindeni Mahlalela

    Hello Der Nerd,

    I hope you are doing great today. Thank you for contacting us and thank you for your patience while we were trying to find the problem.

    I have tested this and was able to replicate the issue on my setup. I then did some other tests using other themes and compared the results. I have that when any theme other than Buddy Boss is active, the chat box has the following inline style:

    style="width: 200px; position: fixed; margin: 0px; right: 0px; box-shadow: 10px 10px 5px 0px rgb(136, 136, 136); height: 300px;"

    But once I activate Buddy Boss theme then the inline style for the chat box changes to the following:

    style="width: 200px; position: fixed; margin: 0px; right: 0px; box-shadow: none; height: 0px;"

    So, it seems that Buddy Boss is overriding the 'box-shadow' and 'height' property. I then tried to write some CSS and JS script to override these properties again but that was unsuccessful. Luckily, I have found that if I add the 'table' class to the chatbox, it appears as at should. The 'table' class is defined in the Buddy Boss theme and it is the one used alongside others to show the floating elements.

    I have prepared the following code snippet that you can use as an mu-plugin or in your theme's functions.php file:

    add_action('wp_footer', function(){ ?>
    	<script type="text/javascript">
    		jQuery(document).ready(function(e) {
    			var chatbox_id = jQuery('div.wpmudev-chat-box').attr('id');
    			jQuery('#'+chatbox_id).addClass('table');
            });
    	</script><?php
    });

    I tested this on my setup and the chat box appears as it should and chat works as expected. You can add this code to your website by creating a new PHP file, maybe name it 'boss-chat-fix.php', paste the code above and include the opening PHP tag, so your code should look like this:

    <?php
    //paste the above code here

    Then save and upload the file to your website in the file 'wp-content/mu-plugins' so you will have the file in the location:
    wp-content/mu-plugins/boss-chat-fix.php

    I hope this works for you. Please let us know if you need any further assistance.

    Have a nice day.
    Mahlamusa.

  • Lindeni Mahlalela

    Hello Der Nerd,

    I am sorry to here about that, would you please give me FTP access so I can have a quick check and see where it went wrong. You can send FTP details through our secure contact form, in the contact form choose "I have a different question" then write as follows:

    Subject: "Attn: Lindeni Mahlalela",
    Message:
    - FTP login details (host, port, username, password)
    - Link back to this thread for reference

    Once we have access we will check and see what the issue is.

    Thanks,
    Mahlamusa

  • Lindeni Mahlalela

    Hello Der Nerd.

    Thanks for sending the FTP login details, I was able to login to your site using the FTP credentials you sent. I enabled debug logging on your site to see what errors are thrown in the error logs, and as soon as I add the above code I got the error:

    Fatal error: Uncaught Error: Cannot use object of type Closure as array in ...

    Which means the Anonymous function (Closure) cannot be used as it is returned as an object while the an array was expected, so I changed the code a little so that instead of passing an anonymous function, a name of a defined function is passed as a callback to the action hook. So at the end I added the following code to an mu-plugin, you will see the file named 'chatbox-css-fix.php' with the following code:

    add_action('wp_footer', 'chatbox_css_fix');
    function chatbox_css_fix(){ ?>
    	<script type="text/javascript">
    		jQuery(document).ready(function(e) {
    			var chatbox_id = jQuery('div.wpmudev-chat-box').attr('id');
    			jQuery('#'+chatbox_id).addClass('table');
            });
    	</script><?php
    }

    I also tested by adding it to the theme's functions file which in the case of your theme it is in
    buddyboss-inc/theme-functions.php

    After making this change the Error 500 or Fatal error was not encountered. So it seems to work.

    It still seems as if the chat box is not visible yet, I then checked the source code of the generated page and noticed that the HTML element that should be rendered as the chat box is not available in the document source, which means there was no attempt to render the chat box at all. This is likely due to the settings of the plugins. So please, go to the settings and choose a location where you want the chat box displayed on your page. After that, the code should be able to target and render the chat box as it should.

    If you are sure you have done this already, then please grant support access and I will login and have a look at your settings.

    I hope this helps. Please let us know if you need any further assistance.

    Have a nice day.
    Mahlamusa.

  • Dimitris

    Hey there Der Nerd,

    hope you're doing good today! :slight_smile:

    I was able to replicate this issue with private chat windows. It seems that the little script coming from the MU plugin, is being loaded before the private chat window, so it can't target it.

    I was able to surpass this issue though, for both corner and private windows, using a little CSS rule instead of the MU plugin.

    .wpmudev-chat-box {
        height: auto !important;
    }

    Feel free to give this a try using theme options admin panel of Boss theme as shown below

    Warm regards,
    Dimitris

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.