Anonymousprnt::Y
Find:

   |


 
 
Click on images to see them in full screen

Working with CSS

When branding Door Tablet, the bulk of your work is done by adding CSS code to Door Tablet. This document describes our recommended practice when performing this work.

In the first instance, you need to understand how your work will change the Door Tablet displays. You can embed CSS...

  1. In the system profile: this affects all the displays connected to the server
  2. In a meeting space/resource record: this affects just those displays
  3. In a neighborhood settings record: this affects that neighborhood's displays only
You can implement CSS at all levels at the same time where lower level CSS refines the top level.

CSS Types
In Door Tablet, wherever you can specify CSS there are two fields you can use:
  1. Text field where you add CSS code. We will "convert" this to a CSS page for you. This CSS cannot be shared
  2. File path to a CSS file. This CSS can be shared - this is the recommended type
If you specify both a CSS file and CSS text only the CSS file will be used.

Using CSS files
When using a CSS file (instead of CSS text) you need to either:
  1. Specify a relative path to the Door Tablet server. The file must be placed on the server in a directory below the HTML directory. The directory is <install-dir>\data\domino\html. So, say you created a CSS file called myStyles.css, and you placed it in c:\doortablet\data\domino\html\myStyles.css, in the Door Tablet record you will simply list the file name alone: "myStyles.css". If you wish to put all your work in a dedicated folder, and name it, say, "branding", the full path will be: c:\doortablet\data\domino\html\branding\myStyles.css and in the record the file name will be listed like so: "/branding/myStyles.css". Note: the slashes in the OS are \ and in the Door Tablet record its /.
  2. If the CSS is on a different web server you must specify the full web path to the server, for example: "http: // www.styles.com/myComp/myStyles.css". This method is not recommended.

Cascading Styles
Door Tablet comes ready with its built-in CSS. The displays are further refined using the themes you select. For neighborhood displays the base style is used. When you add your own CSS you are in fact refining the combined base CSS and the theme CSS. The following is the hierarchy of CSS cascading, in the order listed:
  1. Base
  2. Theme
  3. Your System Profile
  4. Your meeting space or neighborhood

Working Method
When you work on branding you will find that its an iterative process, with many tries. The most effective way of working we found is as follows:
  1. Use a web browser, not a tablet
  2. Select a browser that allows you to work in a mode where CSS is not cached. For example, in Firefox go to: about:config and then change the value of network.http.use-cache to false
  3. Use only the latest browsers
  4. Run the Door Tablet client in the browser (see Database 'Door Tablet HELP', View 'Help Documents', Document 'Browser interface'). And before you continue, create a favorite bookmark for the application (to http://<your-server-address:PORT>/doortablet/doors.nsf/index.html)
  5. Open the meeting space list and check the "Resume Display"
  6. Open the meeting space or neighborhood display you are working on
  7. Make changes to your CSS and then, click on the bookmark you created in step 4 above
  8. The client will restart and automatically and open the display for you to view your work
  9. Repeat