How to: Skin the Client

The client can be skinned using a standard CSS override. Some features will be simpler than others but we’re currently re-architecting the client to make more features available and easier to configure.

In order to override the CSS file you need to upload your own file somewhere public and then set the full HTTP URL in the field “CSS URL” on your operator page.

  • The file must be public for other people to use it, for testing purposes you can set it to private IP addresses or even “localhost” though.
  • We recommend you to use a modern browser when player around with CSS. In Chrome you can right click and select “Inspect Element” for some really helpful information regarding the layout.

Change Table Logo

The table logo is set as a background image on a DIV element with class “table-logo”. So to override, just specify you own logo. For example:

.table-logo {    
    position: absolute;     
    overflow: hidden;     
    width: 100%;    
    height: 100%;     
    top: 0;     
    left: 0;     
    background-image: url("http://www.example.com/myimage.png");     
    background-position: center 35%;     
    background-repeat: no-repeat;     
    background-size: 25% auto; 
}

Obviously you need to specify your own URL and also change position and size to your requirements. We reccommend using PNG for its well supported transparency.

Change Loading Screen and Lobby Logo

These two logos are similar to the table logo above and set as background images on a DIV element with class “.logo-container”. So to override, you’d do something like this:

.logo-container {
   height: auto;
   background-image: url("http://www.example.com/myimage.png");
   background-repeat: no-repeat;
   padding-bottom: 48%;
   background-size: 70%;
 }