CyberDSA on August 6-8 in Kuala Lumpu
Go back

Branding TrueConf Server сonferences

August 10, 2023
Anthony Baadzhy

Anthony Baadzhy

You’ve probably thought of how to add uniqueness to your conferences. If you are reading this article, you are on the right track. Here, we’ll explain how TrueConf conferences can be customized.

Disclaimer! Some features will require direct changes in the files of TrueConf Server and you will make such changes on your responsibility. TrueConf will not be held liable for any problems that may occur after editing the files in the TrueConf Server installation folder. In case of any issues, please contact our technical support. In any event, we suggest that you create backup copies of the files mentioned in this article.

Branding application background

You can set a custom image for the background displayed during a conference or call. To do it, go to Settings → Appearance → Video area background.

Branding TrueConf Server сonferences 1

Here, you can upload two types of backgrounds: either an image or a solid-color background. To upload a file, click Branding TrueConf Server сonferences 2 and select it on your device.

Branding TrueConf Server сonferences 3

Branding conference and guest pages

By default, the guest page and conference page are styled uniformly according to TrueConf guidelines; however, you can change the style of some elements without breaking the overall design. TrueConf Server enables you to customize the guest page in two ways: simple and complex.

Simple way – replacing a company logo

You can change the company logo displayed on web pages. To learn more about this feature, check out our documentation.

Complex way – full-scale customization of web pages

Minimum knowledge of HTML and CSS is needed to follow the instructions in this section.

So that you do not have to make immediate changes in the files of the video conferencing server deployed in production, we recommend using a browser extension which allows embedding user-defined styles; for example, you may try something like User CSS for Google Chrome.

The file with ready-made templates for CSS rules can be downloaded via this link.

Introduction

How to find the required element:

  1. Open the web page of your server.
  2. Right click on an element that you want to edit and select Inspect.
  3. You will open the developer tools where you can find the HTML code and the element you clicked will be automatically selected.
  4. Hover the mouse over an HTML tag and the corresponding section on the web page will be highlighted.

Branding TrueConf Server сonferences 4

To edit an element, you will need to use the corresponding CSS selectors: class names, tags, and so forth. For example, the div tag which is highlighted on the picture above has a class named router-container main-background. Later, we will use this value to customize the page. To get a better idea of User CSS, let us take a look at a simple example like changing the text color for the greeting Welcome to the video conferencing server guest page.

  1. Open User CSS.
  2. Copy and paste the following code in the opened window:

The text color will change to yellow:

Branding TrueConf Server сonferences 5

Let us consider how other HTML tags can be changed.

Replacing the page background

To replace the page background, change the value of the property background-image for the CSS class main-background:

where {img-in-base64} is the image encoded in the base64 format; you can use an online converter base64-image.de to encode an image into this format. This approach will speed up page downloading and reduce the number of requests to the server. After converting the image in base64-image.de, click the button copy css:

Branding TrueConf Server сonferences 6

and insert the copied text instead of url{img-in-base64}:

Branding TrueConf Server сonferences 7

Hiding some information

Hiding blocks

To conceal a section, add the rule visibility:hidden; to its CSS selector. In this case, this element will become fully transparent, however, the browser will still reserve the space for it. For example, to hide the footer completely, add a new rule in User CSS:

Branding TrueConf Server сonferences 8

Disabling blocks

To disable a certain page section, specify the rule display:none; for its CSS selector. For example, to disable the footer, add a new rule in User CSS:

In this case, this section will no longer affect page rendering and no space will be reserved for it.

Branding TrueConf Server сonferences 9

If you do not want to hide the entire footer, you can disable only one of its sub-sections. Since the lines in the footer have identical tags and classes, you can use the nth-child(n) selector where n is the ordinal number of the section. For example, to hide the version number, use the following rule:

Applying changes on the server

Once you have tested CSS rules in User CSS, you will need to add them to HTML files used for rendering TrueConf Server web pages. We will use the method involving global css styles. To add such styles:

  1. Create the file my-style.css.
  2. Copy the rules that you specified in User CSS and paste them in the file my-style.css.
  3. Open the file with any text editor like Notepag++ or VS Code (depending on the OS where TrueConf Server is deployed):
    • Windows:
    • Linux:
  4. Add the following code at the end of the head tag <link rel="stylesheet" href="/user-area/my-styles.css">:

Please note that it is critical to add new styles at the very end of the head tag because the browser parses HTML files from top to button and lower tags have a higher priority.

In this way, you can fully customize the guest page and the conference join page:

Before:
Branding TrueConf Server сonferences 10

After:

Branding TrueConf Server сonferences 11

Branding the window of a WebRTC conference

We strongly recommend you to read the introductory section, if you have skipped it due to some reason.

The file with ready-made CSS templates can be downloaded via this link.

Web page background

To replace a background:

  1. Prepare an image that meets the following requirements: .png, 5292*2982, and color depth equal to 2. In this way, you will make sure that the image is correctly displayed on different types of screens and has a small size.
  2. Copy the image in the folder under this path:
    • Windows:
    • Linux:
  3. Create a backup copy of the original image.
  4. Rename your custom image in such a way so that its name matches the original file.
  5. If the background does not get updated, restart the TrueConf Web Manager service.

Branding TrueConf Server сonferences 12

Of course, to achieve full-scale customization, you will need to change the color of all windows, for example, the background of the window where the conference PIN has to be entered.

Branding TrueConf Server сonferences 13

You can also change the page background with a CSS rule as it is described above, but you also need to add !important:

Layout background

The layout background is displayed only if there are participants on the podium. To customize this background, copy the image background.png (1920*1080) in the stub folder of the server working directory (by default, C:\TrueConf on Windows and /opt/trueconf/server/var/lib on Linux). Then, restart the server.

Branding TrueConf Server сonferences 14

Layout elements

You can replace the stubs (default images used when a participant’s camera is turned off). They are displayed in video windows when users join a meeting from a browser (via WebRTC).

By default, an avatar placed against a standard background is displayed in a participant’s video window when the camera is disabled.

Branding TrueConf Server сonferences 15

To customize the stub:

  1. Go to the stub folder which is in the server working directory (C:\TrueConf on Windows and /opt/trueconf/server/var/lib on Linux).
  2. Replace the file depending on the type of a participant’s connection:
    • no_video_alpha.png for connections from TrueConf client applications and via WebRTC
    • no_video.png for connections via SIP/H.323 and RTSP.
  3. Then, restart TrueConf Server in its control panel.

By default, a round avatar is used as a stub. However, you can redefine this rule:

Solid-color background without an avatar

Branding TrueConf Server сonferences 16

Round avatar against a background

Branding TrueConf Server сonferences 17

Square-shaped avatar against a background

Branding TrueConf Server сonferences 18

Adding styles in a separate CSS file

As in the case of the guest page, you can use CSS rules to customize the video windows of participants connected from a browser. To do it, take the steps described before and add the line <link rel="stylesheet" href="/webrtc/my-styles.css"> in one of the following files depending on the OS where TrueConf Server is deployed:

  • Windows:
  • Linux:

Happy video conferencing!


Still have questions? Please contact our support team directly via online chat.

Sign up for newsletter