Styling Resources

Overview

Add icons to resources, resource folders, and tags to quickly identify resources at a glance. The instructions below describe the CSS you'll use to change the way resources appear. If you're new to editing DayBack's CSS, here's an introduction: Changing the Calendar's Appearance with CSS.

In this article

Adding Resource and Folder Icons

Each resource (and resource folder) can be given a CSS class name. Learn more about how to add a class name to a resource. This class wraps the resource name wherever it's shown: in the resource list, in schedule views, and in the drawer when editing events in DayBack. You can use this class name to style the resource/folder or to add an icon.

In the examples below, we'll show the resource "Dr. Smith" with the class name "Lab Director." The class name must be prefixed and its spaces replaced with dashes, so it appears as .dbkcustom-Lab-Director . We'll use this CSS class to add a gold star (Font Awesome character f005 ) beside the lab director's name.

In the resource filters list

Use the following CSS to add an icon beside the resource's name in the resource filter list (in DayBack's left-hand sidebar). This CSS works whether the resource is nested inside a folder or stands alone.

.filters-resource .list-selector-child .dbkcustom-Lab-Director::before {
  font-family: FontAwesome;
  content: "\f005"; 
  font-size: 18px;
  color: gold;
  position: absolute;
  left: 20px;
}

Note that the icon is centered in the resource row. If you'd prefer for it to line up with the resource name, use this:

.filters-resource .list-selector-child .dbkcustom-Lab-Director .name::before {
  font-family: FontAwesome;
  content: "\f005"; 
  font-size: 18px;
  color: gold;
  position: absolute;
  left: 20px;
}

Resource folders

For folders, leave room for the button that opens and closes the folder. Use this CSS:

.filters-resource .list-selector-parent .dbkcustom-Lab-Director .name::before {
  font-family: FontAwesome;
  content: "\f005"; 
  font-size: 18px;
  color: gold;
  padding-right: 8px;
}

On horizon view broken out by resource

When the horizon view is broken out by resource, use the following CSS to add an icon beside the resource name. Note how there is no space between the two classes in the first line of the CSS below. Ensure this CSS section is below the .fc-grid section if you're using both view types.

.horizon-breakout-title.dbkcustom-Lab-Director name::before {
  font-family: FontAwesome;
  content: "\f005";
  font-size: 18px;
  color: gold;
  padding-right: 5px;
}

On the vertical scheduling grids (resources are columns)

You'll want to make the icon a bit smaller here since there is not as much vertical room in these columns. Here's the CSS:

.dbk_columnHeader .dbkcustom-Lab-Director span::before {
  font-family: FontAwesome;
  content: "\f005";
  font-size: 13px;
  color: gold;
  left: 2px;
  padding-right: 3px;
}

On the horizontal scheduling grids (resources are rows)

We've made the icon red in this example so it's a little easier to see:

.fc-grid .dbkcustom-Lab-Director .name::before {
  font-family: FontAwesome;
  content: "\f005";
  font-size: 13px;
  color: red;
  padding-right: 3px;
}

In the drawer when editing an event

Icons can also appear when you're choosing a resource inside the Edit Event Popover.

.dbk_listSelectButton.dbkcustom-Lab-Director div::before {
  font-family: FontAwesome;
  content: "\f005";
  font-size: 13px;
  color: gold;
  padding-right: 5px;
}

If you want to use a different color icon when the resource is selected (with the blue background), add .dbk_selected after the resource class like this:

.dbk_listSelectButton.dbkcustom-Lab-Director.dbk_selected div::before {
  font-family: FontAwesome;
  content: "\f005";
  font-size: 13px;
  color: white;
  padding-right: 5px;
}

Styling Resource Tags

Tags represent skills, locations, or other ad-hoc attributes associated with a resource. By default, tags are displayed as simple grey ovals with black text. You can customize their appearance with CSS.

Adding Colors

Each tag is wrapped in a CSS class using the tag's name with spaces replaced by dashes and special characters removed. For example, the tag "Labs Level 1" would have the CSS class .tag-Labs-Level-1 . You can color this tag pink with a blue border using the following CSS:

.tag-Labs-Level-1 {
  background: #ffb5ca;
  border: 1px solid rgb(91, 165, 201);
}

If you make the pill color dark, you'll want to make the text lighter using "color " like this:

.tag-New-Patient-Intake {
  background: #786b91;
  color: white;
}

Adding Icons

To add an icon before the event text, address the text inside the tag. Here’s how to add a red "labs" icon inside a tag named "Lab Sign Off":

.tag-Lab-Sign-Off .tag-content::before {
  font-family: FontAwesome;
  content: "\f0c3";
  padding-right: 5px;
  color: red;
}

The content property specifies a Font Awesome character code. You can use any Font Awesome icon and style it as text using properties like font-size and color . The icon is specified using its Unicode name, which you can find on the Font Awesome cheatsheet. Note that DayBack supports up to version 4.6.2 of Font Awesome, so some new icons may not work.

You can also paste emoji into your tag names as we did in the example above for Santa Monica and Hollywood. Ensure there is a space between the emoji and the name to allow for filtering by tag name without having to include the emoji in your text filter.

If you automatically pull resources from Salesforce or FileMaker, pasting emojis into your database may not work. Instead, use CSS to create icons, as shown in the Font Awesome example above. CSS can also render icons as images using ::before , referencing the image URL. Here’s an example of rendering a hosted image icon with CSS:

.tag-Lab-Sign-Off .tag-content::before {
  display: inline-block;
  width: 20px;
  height: 20px;
  margin-right: 5px;
  content: "";
  background: url("https://app.dayback.com/images/dbk-shortcut-icon.png") no-repeat 0 0;
  background-size: 90%;
  vertical-align: middle;
}

Color-coding by Resource

By default, DayBack color-codes your events by the value of the field you've mapped to the Status field. The reason DayBack colors by Status rather than by Resource is that many of DayBack's scheduling views already organize events into columns or rows by Resource.

If you'd like to add a secondary color for the event's Resource, you can find options and instructions here: Color-Coding by a Second Field and Color-Coding by a Resource.

Related Articles