CSS

To enable custom css, add this in config file (for hub-app):

{
	"customcss" : "/css/custom.css"
}

Workspaces

Customize Workspaces.

Workspace (home/start) page

Customize a workspace start page.

Syntax

.workspace-page.{workspace slug} {
    ...
}

Example

Change background image for "myservices" workspace

.workspace-page.myservices {
  background: url("/images/demo/beach2.jpg") center center no-repeat fixed !important;
  -moz-background-size: cover !important;
  -o-background-size: cover !important;
  background-size: cover !important;
  height: 100% !important;
  position: relative !important;
}

Items

Customize Items.

Actions

Customize item actions.

Syntax

Customize action button for item

a.action-btn-blue.{action key} {
	...
}

Example

Set background color for action button with key "delete"

a.action-btn-blue.delete {
	background: #c70100 !important;
}

Status

Customize item status.

Syntax

.item-card-container .item-status .{status} {
	...
}

Example

Set background color with status "active"

.item-card-container .item-status .active {
	background: #7fba00;
}

Hide dropdown buttons in workspace results page

Hide view button

.workspace-results-page.it-self-service .change-result-view{
    display: none;
}

Hide sort button

.workspace-results-page.it-self-service .sort-result-button{
    display: none;
}

Hide select/select all button

.workspace-results-page.it-self-service .result-select-all-items{
    display: none;
}

Hide page size button

.workspace-results-page.it-self-service .result-page-size{
    display: none;
}

Other

Hide the "Show more" button in item search result

button.toogle-btn {
    visibility: hidden !important;
}

Shortcuts

Customize Shortcuts.

Badges

Customize shortcut badges.

Syntax

.workspace-shortcuts .{shortcut key} .badges.{badge type} {
    ...
}

Example

Set background color for "mytickets" shortcuts "totalresults" badge

.workspace-shortcuts .mytickets .badges.totalresults {
    background: #fe5e0d;
}

Dashboard

Customize Dashboard.

Widget

Customize dashboard widgets.

Syntax

.items-dashboard-content .widget-content.{dashboard}.{element name}.hasresults .widget-main .element-total {
	...
}

Example

Set font color if totaltickets elements has results

.items-dashboard-content .widget-content.my-dashboard.totaltickets.hasresults .widget-main .element-total {
	color: #c70100;
}