Custom branding and styles

Administrators with CSS knowledge can customise the look and feel of their Appraisd account.

First, navigate to Administration Center > Settings > Customisation.

Use the Sitewide custom CSS setting to specify your CSS.

Copy and edit this CSS template to configure the four main colours used on Appraisd for Your Team, Your Appraisals, Objectives and Feedback. Appraisd makes use of many of the default Bootstrap 2.3 classes which may be useful if you’re familiar with them. An upgrade to Bootstrap 3 is envisaged in the future.

Where you see #INSERT, replace with a HEX or RGB color code, eg #FFCC00 or rgb(100,200,50). Ensure the line ends in a semicolon.

Online tools such as Adobe Color CC can help you pick colors.

/* Your Name button at the top */
#headerNavUser a {
  background: #INSERT;
}



/* Your Appraisals */ .bgOwnAppraisal, nav .headerNavAppraisals a, .ldOwnAppraisalBig, .ldOwnAppraisal, .dbTimeLineOwnName, .boxUserSmallAppraisee { background: #INSERT; }
/* Your appraisals - clickable bits on Your Appraisals */
.ldAppraisalClosed .pAction,.ldAppraisalClosed .pAction:hover { background-color: #ddd; /* Grey */ } .ldAppraisalClosed .pAction a { color: initial; } .boxTitleLast, .boxTitleFirst { color:white !important; }


/* Your Team */ .bgAppraisal, nav .headerNavTeam a, .reportSectionHeader , .ldAppraisal, .dbTimeLineName, .boxUserSmallAppraiser { background: #INSERT; }
/* Divider line on dashboard on Your Team section */
.dbBox .actionString:not(:first-child) a {
    border-top: solid 1px rgb(159, 221, 241);
}

/* Your Objectives */ /* Note, the main color for objectives is controlled elsewhere - contact us to help */ nav .headerNavObjectives a, .bgObjective { background: #INSERT; }
/* Colour of text of each Objective - change to white if you've chosen a dark objectives background colour */
.boxText {
  color:white;
} /* Feedback */ .bgThreesixty, nav .headerNavFeedback a, .dbTimeLineThreesixty, .ldThreesixty { background: #INSERT } /* Color of completed objectives, appraisals etc */ .complete { background: #INSERT }

Adding a logo

You can hot-link to your website’s logo by inserting the following code into the setting Custom Logo HTML.

<a href="/"><img alt="Our company's logo" src="URL-TO-YOUR-LOGO" style="height:50px;"></a>

Hot-linking means you don't upload your logo to Appraisd, instead it’s hosted on your own website. If you’d like us to host your logo, please email it to support@appraisd.com. Make sure it's the correct height (50px) and filetype (GIF or PNG) and has a transparent background.

​You can also make use of our helper class, 'logo':

<a href="/"><img alt="Our company's logo" src="URL-TO-YOUR-LOGO" class="logo-helper"></a>

The 'logo' class is defined as follows:

.logo-helper {
    max-height:50px;
    margin:5px;
}

@media (max-width: 767px) {
 .logo-helper {
        max-height:38px;
    }
}


We recommend a height of 50 pixels and using a logo with a transparent background. For larger logos or logos with a non-transparent background, please add a rule similar to the following to the CSS and adjust as necessary:

#headerBackGround {
    background: #INSERTCOLOR;
    margin: -10px -10px 10px -10px; /* This will push the background color to the edges */
    height: XXXpx; /* Adjust as necessary */
}
nav {
    /* Use this if you'd like to move the right hand navigation up or down with margins */
}

A note about hot-linking: if the image at the original source (ie your website) changes, the change will immediately be seen in Appraisd too. Please also ensure you use an HTTPS URL to avoid possible warnings to the user.

Start a free trial


- Immediate start
- 30 days unlimited use
- All features enabled
- No payment method needed
- Full support provided


Prefer to book a guided tour?

Book a guided tour


Get a full tour with an expert from Appraisd to understand how it can work for you.


Prefer to try it now?
Number of employees