Getting started with branding In this video We will give you an introduction to branding showing how to add a logo, change fonts and change to the buttonless display We will explain how we do this using CSS First, we will log in to the web UI as this is where we specify styles In Door Tablet we can specify styles at three levels Global, for all displays in the system Neighbourhood, all displays in an area and individual workspace level In this video we will look at branding on the lowest level for one workspace Please note you can use all of them at the same time the lower levels refine the higher levels Let’s open a space we want to work on We are opening the ‘Rembrandt’ room and then going to the tab where we see ‘Styling’ Here is where we specify the styling the file path is currently empty, we will explain the file path in a moment Let’s look at adding a logo We will do all of this in the browser, so first we open the workspace In this case we want to add a logo in the top right corner of the display But we don’t know yet how to reference this area in CSS The easiest way to do this is to right click and inspect the display We can see there is an object called ‘roomLogo’ and it has no stylings associated with it so far We will now make changes to make a logo appear there We have created a stylesheet and we typed all the text that you can see here We named the file ‘style.css’ and stored it in a folder that will be visible to the server To make things easier we use an FTP client to transfer the file We will have an FTP server running on the Door Tablet server and we will point it into the right place We created a folder called branding/training where we keep all our branding assets We now drag the two assets of interest, style and logo So now those two objects are in a place that we know can be found by the server Next, we go back to the workspace, 'Rembrandt' to tell it where the style sheet is This is the field where we will specify the style sheet Please note, we specify the stylesheet relative to the server html folder and we will fill this in now This is the same path where we dropped the files a moment ago There is an explanation here of the exact location of the html root folder Now we will save the room record And go and check what our display looks like We refresh the browser and we can see the ‘DT-WORKS’ logo in the right corner exactly as we want it Let’s make some more changes We can make this display buttonless via the local settings We have another video showing our buttonless display and how to turn it on and off If we look at the bottom of the display we can see it is now buttonless Now back at the top we can see the logo once again We are going to change the font, we want the ‘Roboto’ font As we want our application and the Door Tablet system to work independently of any public fonts we will store the font on the server in the same folder where we put our other assets Here is where we have our font so we will drag it over to the server Just placing the font on the server changes nothing on the display We need to add this in our CSS Here is our CSS and this time we have added the font and listed the location of the font file in this case it’s a ‘true type font’ We then listed all the objects we want to use Roboto for and the font weight We will now save this CSS and again transfer it to the server using the FTP client Let’s refresh our display and we can see the new font Thank you for watching Door Tablet room displays complement meeting room booking and workspace management software.