BigBlueButton provides flexibility in the ability to customize the user interface using CSS.
The CSS file needs to be compiled before bbb-client can use it. In order to brand the client, you first need to check out the BigBlueButton source code. The instructions for this are outlined developing. If you are not a developer or are not comfortable with checking out the source and compiling it yourself, you can hire one of the companies that provide commercial support for BigBlueButton.
Finding the files
Go to the directory where you’ve checkout out the source code. The branding files are located in the directory
Here you will find a file called
BBBDefault.css, among other files.
BBBDefault.css is the main stylesheet that will be loaded by the BigBlueButton client. The other files are examples of different branding styles for BigBlueButton (more on how you can try out these files later on in this document). The assets directory contains images and other files that are needed by the sample themes. You may not need these for your own branding, so you can ignore them for now.
Compiling the stylesheet
In order for Flash to load your CSS file, it needs to be compiled to an .swf format. There are two ways to do this:
- Compiling using Flash Builder
- Compiling using Ant
Compiling using Flash Builder
In Flash Builder, right click on the
BBBDefault.css file and check off ‘Compile CSS to SWF’. This will compile the css file to swf, and the it should now appear as
Compiling using Ant
In the command line, go to the
bigbluebutton-client root directory and type in:
ant branding -DthemeFile=BBBDefault.css
If the build succeeds, you should be able to find the compiled .css file as
If you would like to compile any other .css file in the branding directory, you can substitute the name of the file in the ant branding command, so for example:
ant branding -DthemeFile=myTheme.css
will compile the file myTheme.css and put it into
Note that you should not need to move any images that you are using to the bin directory. As long as you are using
@Embed() tags in your .css file, your images will be compiled directly into the resulting .swf file.
Deploying the file to your production server
To deploy the theme file to your production server, find the client directory.
You can run
bbb-conf --check to find out where it is. Look at the part of the output which mentions where the client is. On a default install if will be something like:
/etc/nginx/sites-available/bigbluebutton server name: example.bbb.org port: 80 bbb-client dir: /var/www/bigbluebutton
In this case, the client is being loaded from
/var/www/bigbluebutton/client. According to this configuration, if your theme file is named theme.css.swf, you need to place it there as:
And you need to edit the config file:
to include the following line for the branding:
<skinning enabled="true" url="branding/css/theme.css.swf" />
Editing the config.xml
To tell the BigBlueButton client to load your the compiled .swf file you just created, open the file bigbluebutton-client/client/conf/config.xml. Near the top of the file, you’ll find the line:
<skinning enabled="false" />
Change this to:
<skinning enabled="true" url="branding/css/theme.swf" />
Styling the client
All the usual rules for .css files hold. You can style the BigBlueButton client through CSS the same way you would style a web page.
If you’re having trouble styling, or applying styles to a particular component in BigBlueButton, write to the bigbluebutton-dev mailing list with questions or suggestions on how to improve this tutorial.