Styling Resources

Overview

Add icons to resources, resource folders, and tags to quickly identify resources at a glance. The instruction below describe the CSS you'll use to make changes to 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 give it an icon.

All of the examples below show our example resource, "Dr. Smith" with a class name of "Lab Director." That class name gets prefixed and its spaces replaced with dashes so that it's displayed as dbkcustom-Lab-Director. That's the CSS class we'll use to add an icon, though the CSS will differ slightly depending on where we want to show the icon. We'll show a gold star ( Font Awesome character f005) beside the name of the lab director.

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 looks good if the resource is nested inside a folder or out on its own. 

.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, you want to leave room for the button that opens and closes the folder, so 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, the following CSS will 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. And be sure to put this section of CSS below the .fc-grid section if you're using both.) 

.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;
}

Note that if you want to use a different color icon when the resource is selected (when it has the blue background), add .dbk_selected after the resources 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 are the skills, locations, or other ad-hoc attributes associated with a resource ( learn more). By default, tags are shown as simple grey ovals with black text. But you can customize their appearance with CSS.

Adding Colors

Each tag is wrapped in a CSS class using the name of the tag with spaces turned into dashes and special characters removed. So if the name of the tag is "Labs Level 1," the CSS class for that tag would be "tag-Labs-Level-1. You could color that tab pink and give it a blue border with 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

When adding an icon before the event text, you'll address the text inside the tag like you do when changing the text color above. Here's how you'd 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" above, points toward a specific Font Awesome character. You can use any of the Font Awesome icons here and style them as if they were text using the font-size and color properties. The icon is specified using its Unicode name and you can find a complete list of icons and their names on the Font Awesome cheatsheet. (Some newer icons may not work as DayBack only supports through version 4.6.2.)

You can also paste emoji into your tag names as we did in the example above for Santa Monica and Hollywood. Note that you'll want to leave a space between the emoji and the name, otherwise you won't be able to filter for the tag name unless you include the emoji.

If you're pulling resources from Salesforce or FileMaker automatically, you may not be able to paste those emoji into your database and have them come through to DayBack. Better to create the icons with CSS, as in the Font Awesome example above. CSS can also render icons as images (instead of fonts) using "::before" so you're not limited to Font Awesome icons. However, your image must be hosted, as you'll reference it with a URL. Here's an example of rendering a hosted image-icon in 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 their status: more precisely, by whatever you've mapped to the status field. Coloring by status makes sense since many of DayBack's scheduling views already put events into their own columns or rows by resources.

But if you'd like to add a second color for the event's resource, you'll find options and instructions here Color-Coding by a Second Field and here Color-Coding by a Resource.

Related Articles