We often receive questions on how to customize database UI. Can one right-align database title? Decrease font size? Reduce paddings? Add icon and color to the button? These are only some challenges, there are many more.

Some requests were fulfilled – font size and padding can be decreased via Adjust Font Size labs’ feature, while some, like icons and colors for buttons are planned. Some requests, however, won’t likely see the light.

Many aspects of elements’ appearance of TeamDesk database UI is controlled via cascading style sheets. So, today we’ve added a little hack to element styles.

Drop the file named dbstyles.css into database resources. If such file exists we’ll load it together with TeamDesk styles. Since your styles are included last, you’ll have all the abilities to override any style we defined.

Take a look at the screenshots above. It takes 30 lines of CSS code to make all those changes with comments included:

#td-topmenu {
 /* decrease font size in top bar */
 font-size: 8px;
 line-height: 10px;
}

#td-apptitle {
 /* fancy font for title */
 font: normal 20px 'Comic Sans MS';
 line-height: 26px;
}

#td-createnew > a.ui-button {
 /* customize background for Create New */
 background: #b6ff00;
}

#td-createnew > a.ui-button::before {
 /* Remove (+) icon from Create New */
 content: "";
}

a[href$="/overview.aspx?t=909"]:before {
 /* Add (+) icon to Invoices */
 display: inline-block;
 vertical-align: middle;
 font-family: "icons";
 content: "\E813";
 margin-right: 2px;
}

To help with style scoping <body> tag of each page has an identifier built from the name of the page and table’s internal identifier, overview_t_909. You can then use CSS selectors to apply changes either to specific page in particular table, all tables, or all pages in specific table:

body[id^="overview"] #td-createnew {
 /* Styles Create New button of any overview page */
}

body[id$="t_909"] #td-createnew {
 /* Styles Create New button of any Invoice page */
}

body#overview_t_909 #td-createnew {
 /* Styles Create New button of Invoice's overview page */
}

Please remember, it is rather a hack, not the supported feature. We won’t recommend using it for anything but pinpoint changes. Styles are closely tied to page structure and we reserve the rights to shuffle elements and styling without prior notice.

Author
Kirill Bondar
Date
Share