CSS Style Guide

This page contains the CSS identifiers of common elements of StaffMap that you may want to apply custom styling to via themes. Some examples of common modifications have been provided as well.

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

Employee Panels

Main panel

.employeepanel{
}


Employee Image

.PanelPic {
}


Additional Fields

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

#f_firstname {   
}

#f_extension {
}

Employee Panel Examples

Red border:

.employeepanel {
    border: 4px solid red;
}

Dark background with a white font:

.employeepanel {
    background-color: gray20;
    color: white; 
}

Increased font size:

.employeepanel {
    font-size: 15pt;
}

Desk Panels

Main panel

.deskpanel {
}


Desk Name

#f_deskname {
}

Desk Panel Examples

Green text:

.deskpanel {
    color: green;
}

Asset Panels

Main Panel

.assetpanel {
}

Asset Panel Image

.assetpanel img {
}

Asset Panel Examples

Yellow background:

.assetpanel {
    background-color: yellow;
}

Interface

Top Toolbar

.ToolbarTransparency {
}

Toolbar Examples

Orange background:

.ToolbarTransparency {
    background-color: orange;
}

Hide login link (still clickable):

.LoginButton {
    color: #f5f5f5;
}

Asset form with yellow background:

.LoginButton {
    #divDetailFormBody[formtype=asset][recmode=live] { background-color:yellow }
}