CSS
Onify support custom CSS and here you can read more about it and see some examples.
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;
}
Updated 9 months ago