Introduction

    BigBlueButton provides flexibility in the ability to customize the user interface using CSS.

    Details

    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 bigbluebutton-client/branding/default/style/css/V2Theme.css.

    Here you will find a file called V2Theme.css, among other files. V2Theme.css is the main stylesheet that is compiled within BigBlueButton client. The assets directory contains images and other files that are needed by the sample themes. The org directory contains programmatic skins for customised components. You may not need to change them 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

    Understand how theme works

    The BigBlueButton client embeds V2Theme theme, this theme is compiled within the client. It is possible to change the embedded theme or to load it during runtime. If another file name is given in skinning tag of config.xml the application will load it at launch time.

    Compiling the application with its embedded theme

    To change the embedded theme you need to change two files. The line is in the file src/BigBlueButton.mxml:

    <fx:Style source="../branding/default/style/css/V2Theme.css" />
    

    The second line to change is the loadedSkin property value in src/org/bigbluebutton/core/services/SkinningService.as:

    private var loadedSkin:String = "V2Theme";
    

    You can use your own theme name to compile it with the application, as example myTheme. After that you need to recompile the client.

    Compiling using Flash Builder

    In Flash Builder, right click on the V2Theme.css file and check off ‘Compile CSS to SWF’. This will compile the css file to swf, and the it should now appear as bigbluebutton-client/client/branding/css/V2Theme.swf

    Compiling using Ant

    In the command line, go to the bigbluebutton-client root directory and type in:

    ant branding -DthemeFile=V2Theme.css
    

    If the build succeeds, you should be able to find the compiled .css file as bigbluebutton-client/client/branding/css/V2Theme.css.swf

    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 client/bin/branding/css/myTheme.css.swf

    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:

    /var/www/bigbluebutton/client/branding/css/theme.css.swf
    

    And you need to edit the config file:

    /var/www/bigbluebutton/client/conf/config.xml
    

    to include the following line for the branding:

    <skinning 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 skinning tag. Tou need to change it this to:

    <skinning 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.

    Branding options

    Since version 2.0 new branding options introduced that can be found in config.xml under the branding tag.

    <branding logo="logo.swf" copyright="&#169; 2017 &lt;u&gt;&lt;a href=&quot;http://www.bigbluebutton.org&quot; target=&quot;_blank&quot;&gt;http://www.bigbluebutton.org&lt;/a&gt;&lt;/u&gt; (build {0})" background="bbb_logo.png" toolbarColor="#F0F2F6" showQuote="true"/>
    
    • logo : The logo file name. It will be displayed in the higher left-hand corner. JPEG, PNG, BMP and SWF files are accepted. The recommended maximum height is 35 pixels. Default location is /var/www/bigbluebutton/client/logo.swf
    • copyright : The copyright mention that will be displayed in the lower left-hand corner of the footer. It accepts HTML but should be HTML-encoded. The {0} token will be replaced by the build number when the application is launched.
    • background : The background image name. It will be displayed behind the windows. JPEG, PNG, BMP and SWF files are accepted.
    • toolbarColor : The background colour of the top toolbar. Must be an hexadecimal value that starts with a #.
    • showQuote Show the initial quote on startup