1

I'm trying to do some layout changes like

  • Minimize public chat windows by default
  • Minimize Presentation window by default

Following the docs, i tried editting /var/www/bigbluebutton/client/conf/layout.xml, and set both, ChatWindow0 and ChatWindow1 hidden property to true but nothing happen!

How can i create a custom layout for HTML5 Client?

Thanks in advance!

Juan Salvador Portugal
  • 1,233
  • 4
  • 20
  • 38

1 Answers1

2

The information you need could be found in their Google Group. I did a little research about these, however:

  • Their approach is mobile-first, and the default layout on mobile devices follows that approach. However, if you want to change this behavior, you may open /var/www/bigbluebutton/client/conf/layout.xml where you can find different layouts to set. In addition, you can customize a layout in a way that fits your needs. The key part you're missing may be not reloading the application: bbb-conf --restart. If that doesn't work, try re-compiling the project.

  • There is a work in progress on a Custom Layout feature, to compete with the same feature Adobe provides. They didn't give any information about the upcoming feature, nor a release time, though. At the moment, there's no easy way to really customize the layout, unless you are an expert Meteor/React.js developer and you do have time:

There's no layout definition file in HTML5 like there is in Flash. To implement it, you would need to dig into the code pretty heavily. It would be too big of a change to point to one area to change. The HTML5 UI uses flex boxes heavily for ordering and positions.

Chad Pilkey, from the BigBlueButton core team

I've found it somehow hard to modify the code without breaking other parts, but you can always start by exploring the imports dir. where all components and styles reside. Having a look at ./bigbluebutton-html5/imports/ui/components/app/styles.scss may give you a good overview of the general layout as well.

Amir Hosein Salimi
  • 162
  • 1
  • 10