Custom Messenger Page Help

A special thanks to Baloo who showed me how to make a custom page using the Messenger for a Public Chat. I have one small issue that I am running into that maybe someone could help me out with.

Using a computer, when I visit this custom Chat page, the 'container box' is not high enough. So if the people are just chatting via text, it is fine but, if someone adds a GIF or a Video, it takes up the whole container and you cannot see anything else. You have to scroll up to see any text prior to insert. See the screenshot below:

image_transcoder.php?o=bx_froala_image&h=1357&dpx=1&t=1558056159 

This page looks fine when viewing using a mobile device so it's just an issue when viewing on a computer. Using the 'Inspect' tool in Chrome, I was able to find that if I add something like height: 800px; in the code below, it makes the height much better and the way I liked it:

.bx-messenger-table-wrapper  .bx-messenger-table-wrapper-rows

{

    display:table-row;    

    width:100%;    

    height:800px;  <-- Changed this from auto to 800px

    background-color:;

}

This CSS is located in the modules/boonex/messenger/template/css/main.css at line 438. So I attempted to add it to my custom style sheet for Protean but it didn't take. I also tried putting !important after the 800px and it still didn't work.  

Can someone advise how i can make this height larger for this WITHOUT having to edit the actual main.css file for the messenger?

  • 1009
  • More
Replies (16)
    • Hello Chris,

      You need to overwrite this class .bx-messenger-table-wrapper div.bx-messenger-table-wrapper-rows:first-child .cell from line number 454 in you custom css. 

      Set something like this

      .bx-messenger-table-wrapper div.bx-messenger-table-wrapper-rows:first-child .cell
      {
         height:65vh;
      }

       

      • Thanks Alexey for the help. I tried to put that in the Custom CSS style for protean and it didn't take. When I changed it in the modules/boonex/messenger/template/css/main.css it did work. Not sure why I couldn't get this to work in the Protean custom css style. I have all the caching turned off for the moment while I was making the change so, it's not a caching issue. 

        I do have other custom CSS in there but not sure if there is something conflicting or not. 

        • Your new css styles should be loaded after messenger's, may be that's the problem.

          Did you try with !important also?

          • Yes, I tried with that as well and it didn't work. Not sure why. I made the change in the actual main.css and it worked. I really don't like changing the core files so any help would be appreciated.

            Note: As mentioned above, I do have other custom CSS styles in there but wouldn't think that would keep this one from applying. 

            • Hello Chris, yes there is this little inconvenience indeed, and I had discussed it with Alexey in September. He said to me:

              If you need height, then we can try to edit css styles, but it may influance on another pages with this block. It should be tested.
              Another way is to use javascript code to detect height of the page and make corrections.
              I will check your demo, dugin 24 hours and try to understand which solution is better.  Send me the link on the page please.

              Finally we forgot this, I opted to increment a little height, I did it directly in Protean Custom Style with two lines, one to change the background color, I prefer white, the second for the height to 600px.

              /* Messenger background color and height salon*/
              .bx-messenger-table-wrapper .bx-messenger-table-wrapper-rows {
                  background-color: #fff;
              }
              .bx-messenger-table-wrapper div.bx-messenger-table-wrapper-rows:first-child .cell
              {
                  height:600px;
              }

              • To be more detailed, I created a custom mix for Protean on my site so, I am not using the default one. So when I add the code below to my 'custom mix' for Protean, it doesn't work.

                .bx-messenger-table-wrapper div.bx-messenger-table-wrapper-rows:first-child .cell
                {
                    height:600px;

                Do you think I should try to add this to the default Protean style instead of my custom mix? 

                • No I think it will be the same effect, you have emptied all the caches?

                  • All of my cache settings are disabled except for DB cache. I have learned long long ago with Dolphin that it is best to disable all caching when making changes 😏 

                    • But maybe still clear your browser cache?

                      • I clear my browser cache every time😁 - Don't you dare tell me to try rebooting my computer next 😂 😂😂

                        You would think being in IT for 19 years and being a member of BoonEx for 12 years, I should be able to fix this huh.. hahaha Well, technically I did but had to edit the main.css to do it.  

                        • by any chance emojis do not work on my comment function but work fine on the messenger any advice please?

                          • No, I would not have dared :-) It just amazes me that it does not work in your mix. I just checked my main.css file because I had a doubt, but no value is different and the rule of my mix is a priority over that of the .css file. Why does not that work at home? Mystery, it is nevertheless made for this purpose, idea brilliant elsewhere ..

                            • Hello!

                              You may try to create RAW block on your custom page and to add into it css styles only (this block will be invisible) and these styles should overwrite existed.

                              • I am not completely sure how you mean to do this. Can you provide some steps on how to: " create RAW block on your custom page and to add into it css styles only " - Not sure how to add it to css styles only.

                                • On a side note, I thought the online status was suppose to be visible/sync'd in the Messenger as well. You can see from the screenshot that the online status' are not there for anyone. Should this work if you created a custom page and added the messenger block? I know they were/are online because I happen to AdminChris and I am online right now :)

                                  image_transcoder.php?o=bx_froala_image&h=1361&dpx=1&t=1558361745

                                  • Hello Chris,

                                    1) About css code:

                                    You need to open your custom page via sturio -> pages builder and to create on it new RAW block, then select as Block Layout only Content and add the next code into the content of the block.

                                    <style>

                                    .bx-messenger-table-wrapper .bx-messenger-table-wrapper-rows {

                                        background-color: #fff;

                                    }

                                    .bx-messenger-table-wrapper div.bx-messenger-table-wrapper-rows:first-child .cell

                                    {

                                        height:600px;

                                    }

                                    </style>

                                    Done.

                                    2) About online statuses: in history part of the messenger there is no statuses of the members, because they are shown in the left part of the main page. May be we need to think over it and to make visible statuses for history part also in case if it is independent block.

                                    Login or Join to comment.