![\"\"](\"https:\/\/trueconf.com\/blog\/wp-content\/uploads\/2023\/08\/image5.png\" "\\"\\"")
<\/a><\/p>\nBy default, the guest page<\/a> and conference page<\/a> 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.<\/p>\n If this article does meet your needs, you can:<\/p>\n You can set a custom image used in a desktop client application for the background displayed during a conference or call. To do it, go to Settings<\/b> \u2192 Appearance<\/b> \u2192 Video area background<\/b>.<\/p>\n Here, you can upload two types of backgrounds: either an image or a solid-color background. To upload a file, click You can change the company logo displayed on web pages. To do it, go to the Web<\/b> \u2192 Settings<\/b> \u2192 Logo<\/b> section of the control panel and upload a PNG<\/b> image with the maximum resolution of 270×80<\/b> and the size of up to 1 MB<\/b>. First, select a file on your device (1) and then click the Upload<\/b> button (2).<\/p>\n \nThe video background is displayed only when there are speakers on the podium.\n<\/p>\n<\/div>\n To brand conferences (WebRTC, SIP\/H.323), video recordings saved on the server side, and streams, go to the Transcoding<\/b> section in the server control panel. Here you can upload:<\/p>\n After uploading the files, don’t forget to click the Apply<\/b> button.<\/p>\n \nMinimum knowledge of HTML and CSS is needed to follow the instructions in this section\n<\/p>\n<\/div>\n 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 JavaScript and CSS<\/a> for Google Chrome.<\/p>\n How to find the required element:<\/p>\n To edit an element, you will need to use the corresponding CSS selectors<\/a>: class names, tags, and so forth. For example, the div<\/b> tag which is highlighted on the picture above has a class named The text color will change to yellow:<\/p>\n Let us consider how other HTML tags can be changed.<\/p>\n You can download the file with ready-made CSS templates via the following links:<\/p>\n To replace the page background, change the value of the property background-image<\/b> for the CSS class main-background<\/b>:<\/p>\n where {img-in-base64} is an image encoded in the base64<\/b> format, for example, you can use the online converter jam.dev\/utilities\/image-to-base64<\/a>. This approach speeds up page loading since it reduces the number of requests to the server. After converting the image in jam.dev\/utilities\/image-to-base64<\/a>, click the Copy<\/b> button in the section Use in CSS<\/b>:<\/p>\n and insert the copied text instead of To conceal a section, add the rule To disable a certain page section, specify the rule In this case, this section will no longer affect page rendering and no space will be reserved for it.<\/p>\n 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 \nImportant!<\/b> If something goes wrong after you change the source page templates, you can install TrueConf Server over the current version in order to discard changes. If you are using an old version of the server and there is no access to the corresponding installer, we recommend making a backup copy of the files mentioned in this lecture.\n<\/p>\n<\/div>\n Once you have tested CSS rules in User JavaScript and CSS<\/b>, 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.<\/p>\n \nPlease note that you will have to take these steps each time after the server update.\n<\/p>\n<\/div>\n To add such styles:<\/p>\n \n 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. You can also use a special modifier called In this way, you can fully customize the guest page and the conference join page:<\/p>\n Before:<\/p>\n\n
Simple way of branding<\/h2>\n
Changing the video area background in a client application<\/h3>\n
<\/a><\/p>\n and select it on your device.<\/p>\n<\/a><\/p>\nChanging the company logo on server pages<\/h3>\n
<\/a><\/p>\nConference branding: background and watermark<\/h3>\n
\n
<\/a><\/p>\nComplex way \u2013 full-scale customization of web pages<\/h2>\n
Introduction<\/h3>\n
\n
<\/a><\/p>\nrouter-container main-background<\/code>. Later, we will use this value to customize the page. To get a better idea of User JavaScript and 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<\/b>.<\/p>\n\n
\n
.guest-container__desc {\r\n color:yellow;\r\n}\r\n<\/pre>\n.main-screen__header__desc{\r\n color: yellow;}\r\n<\/pre>\n<\/ul>\n<\/a><\/p>\nGuest page and conference connection page<\/h3>\n
\n
Replacing the page background<\/h3>\n
.main-background{\r\n background-image: url([img-in-base64]);\r\n}\r\n<\/pre>\n<\/a><\/p>\nurl{img-in-base64}<\/code>:<\/p>\n.main-background{\r\n background-image: url('data:image\/jpeg;base64,\/9j\/4AAQSkZJRgABAQEARwBHAAD\/4RG+RXhpZgAATU0AKgAAAAgACgEOAAIAAAAUAAAIkgE7AAIAAAAUAAAIpoKYAAIAAAAUAAAIuodpAAQAAAABAAAIzpybAAEAAAAoAAAQ7pycAAEAAAAoAAARFpydAAEAAAAoAAARPpyeAAEAAAAoAAARZpyfAAEAAAAoAAARjuocAAcAAAgMAAAAhgAAAAAc6gAAAAgAAAAA\u2026\/9k=');\r\n<\/pre>\nHiding blocks<\/h3>\n
visibility:hidden<\/code>; 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 JavaScript and CSS<\/b>.<\/p>\n.conference-screen-footer{\r\n visibility:hidden;\r\n}\r\n<\/pre>\n<\/a><\/p>\nDisabling blocks<\/h3>\n
display:none<\/code>; for its CSS selector. For example, to disable the footer, add a new rule in User JavaScript and CSS<\/b>:<\/p>\n.conference-screen-footer{\r\n display:none;\r\n}\r\n<\/pre>\n<\/a><\/p>\nnth-child(n)<\/code> selector where n<\/code> is the ordinal number of the section. For example, to hide the version number, use the following rule:<\/p>\n.conference-screen-footer__desc:nth-child(2) {\r\n display: none;\r\n}\r\n<\/pre>\nApplying changes on the server<\/h2>\n
\n
\n
C:\\Program Files\\TrueConf Server\\httpconf\\site\\ui\\user-area\\dist\\index.html<\/code><\/p>\n\/opt\/trueconf\/server\/srv\/site\/ui\/user-area\/dist\/index.html<\/code><\/p>\n<\/ul>\n <link rel=\"stylesheet\" href=\"\/user-area\/my-styles.css\">:\r\n\r\n<head>\r\n <title>TrueConf Server Guest Page<\/title>\r\n <meta charset=\"utf-8\">\r\n <meta name=\"viewport\"\r\n <link rel=\"manifest\" href=\"\/user-area\/manifest.json\" \/>\r\n ...\r\n Some tags\r\n ...\r\n <link rel=\"stylesheet\" href=\"\/user-area\/my-styles.css\" \/>\r\n <\/head>\r\n<\/pre>\n
!important<\/code> in your styles, which raises the priority of styles, forcing a browser to apply this rule and ignore other styles for the same property.\n <\/p>\n<\/div>\n\n
Restart-Service -Name \"TrueConf Server Manager\"<\/code><\/p>\nsudo systemctl restart trueconf-manager<\/code><\/p>\n<\/ul>\n<\/ul>\n