CSS Style Guide

This page contains the CSS identifiers of common elements of StaffMap that you may want to apply custom styling to via the Edit Styles tools, or Themes. When applicable, default attributes and values have also been included, along with some examples.

For more help with CSS, you can visit https://www.w3schools.com/css/.

Employee Panels

Main panel

.namepanel{
    box-sizing: content-box !important;
    background-color: #ffffff;
    box-shadow: 1px 1px 15px #eeeeee;
    border-radius: 3px;
    padding: 5px;
    color: #222222;
    font-family: 'Segoe UI', Arial;
    font-size: 9pt;
    position: absolute !important;
    z-index: 8;
}


Employee Image

.PanelPic {
    width: 32px!important;
    height: 32px!important;
    float: left;
    border-radius: 16px;
}


Additional Fields

Fields included in panels can be targeted via the convention #f_[fieldname] e.g.

#f_firstname {
     font-size: 16pt;
}

#f_extension {
      color: red;
}

Desk Panels

Main panel

.deskpanel {
    box-sizing: content-box!important;
    border-radius: 3px;
    padding: 5px;
    color: #000000;
    font-family: 'Segoe UI', Arial;
    font-size: 9pt;
    position: absolute!important;
    z-index: 7;
}


Desk Name

#f_deskname {
}

Asset Panels

Main Panel

.assetpanel {
    box-sizing: content-box !important;
    font-family: 'Segoe UI', Arial;
    font-size: 9pt;
    position: absolute !important;
    z-index: 8;
    min-width: 30px;
    min-height: 30px;
}

Asset Panel Image

.assetpanel img {
    width: 30px;
    height: 30px;
}

Interface

Top Toolbar

.ToolbarTransparency {
    height: 50px;
    width: 100%;
    background-color: #f5f5f5;
    position: fixed;
    top: 0px;
    left: 0px;
    z-index: 5;
    opacity: 0.9;
}