Spiceworks Custom CSS HelpDesk Theme

G I Jones

Anyone here using Spiceworks played with the CSSpice plugin?

I spent most of my day Friday messing around with the look of the Heldesk Web Portal. (not the user portal)

I would love to see some themes any of you cooked up.

Here's mine, I went with Orange but not overpowering. Has anyone figured out a way to change icons? I know it involves a Sprite sheet...

/*Navigation Bar*/
.domestic-nav {
background-color: #b6c5d3;
}

/*fix Settings, Help wrapper sizes*/
.secondary-menus .domestic-menus_entry {
height: 45px;
}

/*Update version text color & Alignment*/
#spiceworks-version {
padding-bottom: 10px;
}

#spiceworks-version #upgrade-version {
color: #333;
padding-right: 20px;
}

#spiceworks-version {
padding-bottom: 10px;
}

/*Tiny nav seperator thing left side*/
.domestic-apps-menu::after {
border-right-color: #777;
}

/*Tine nav seperator thing right side*/
.secondary-menus .domestic-menus_entry + .domestic-menus_entry::before {
border-left-color: #777;
}

/*Navigation Bar: Settings, Help.*/
.secondary-menus .domestic-menus_entry {
background-color: #b6c5d3;
}

/*Navigation Bar Hovering Color*/
.domestic-menus_entry > a:hover {
color: #fff;
}

/*Navigation Border bottom color*/
.domestic-menus_entry.active > a {
border-bottom-color: #f96132;
}

body {
background-color:#eee;
}

.title {
color: #fff;
}

.sui-opt-in h4 {
color: #f96132;
}

.sui-opt-in .helpdesk-app .ticket-pane .ticket-pane-content {
background-color: #fff;
color: #fff;
}

.sui-body {
background-color: #b6c5d3;
}

.sui-opt-in.page-header h1 {
color: #f96132;
}

.sui-opt-in.page-header h1 small .sui-dropdown-toggle {
color: #fff;
}

.sui-opt-in.page-header h1 .sui-dropdown .caret {
border-top: 4px solid #fff;
}

/*Highlighted tickets*/
.sui-opt-in .helpdesk-app .ticket-grid .table-body .ticket-table-wrapper tr.selected {
background-color: #f00;
border-left-color: #f96132;
background: rgb(2,0,36);
background: linear-gradient(180deg, rgba(249,97,50,1) 0%, rgba(194,76,40,1) 100%);
}

/*Little scroll thing on left side with ticket number on it*/
.sui-opt-in .helpdesk-app .ticket-pane .ticket-id {
background-color: #f96132;
background-image: none;
}

.sui-opt-in .helpdesk-app .ticket-pane .ticket-id::after {
background-image: none;
}

/* tickets page number*/
.sui-opt-in .helpdesk-app .ticket-grid .table-body .table-footer .pager-container .pagination a.active {
background-color: #f96132;
}

/*left side ticket highlight thing*/
.sui-opt-in .helpdesk-app .ticket-grid .table-body .ticket-table-wrapper tr:hover {
border-left: 2px solid #f96132;
}

/*New ticket and refresh ticket buttons*/
.sui-bttn-group .sui-bttn:last-child, .sui-bttn-group .guest-user-navmenu a.join-button span:last-child, .guest-user-navmenu a.join-button .sui-bttn-group span:last-child {
height: 18px;
background-image: none;
background-repeat: none;
border-radius: 2px;
border: none;
background-color: #fff;
color: #f96132 !important;
}

/*Ticket response comments text color*/
.sui-opt-in .helpdesk-app .ticket-pane .ticket-pane-content {
color: #333;
}

.sui-bttn-group .sui-bttn:hover {
background-color: #f96132;
color: #fff !important;
}

/*"No tickets available" background & text*/
.sui-opt-in .helpdesk-app .ticket-pane .ticket-pane-content {
background-color: #b6c5d3;
}

.sui-opt-in .helpdesk-app .ticket-pane .ticket-pane-content .ticket-empty-message h2 {
color: #fff;
}

.info-ticket-description {
color: #000;
}

#sidebar {
background-color: #fff;
}

.sui-opt-in .helpdesk-app .ticket-pane .ticket-header {
background-color: #fff;
}

.sui-opt-in .helpdesk-app .ticket-grid .table-body .table-footer {
background-color: #eee;
background-image: none;
}

/*Priority, Assignee, Due Date etc. Bar*/
.sui-opt-in .helpdesk-app .ticket-pane .ticket-ribbon {
background-color: #eee;
box-shadow: none;
border-top: 1px solid #ccc;
border-bottom: 1px solid #ccc;
}

/*timestamp*/
.sui-opt-in .helpdesk-app .ticket-pane .ticket-ribbon .span2 span.rel-timestamp {
color: #333;
}

.sui-opt-in .helpdesk-app .ticket-pane .tab-sections {
background-color: #fff;
}

/*Copyright Footer*/
#footer p {
margin: 0;
text-align: left;
color: #fff;
}

Obsolesce

Looked at spiceworks once, never looking again.

G I Jones

@Obsolesce Please elaborate. What was it that turned you away?

Obsolesce

@G-I-Jones said in Spiceworks Custom CSS HelpDesk Theme:

What was it that turned you away?

Spiceworks.

G I Jones

@Obsolesce Good point. Never really thought of it that way.

stacksofplates

@G-I-Jones said in Spiceworks Custom CSS HelpDesk Theme:

Anyone here using Spiceworks played with the CSSpice plugin?

Has anyone figured out a way to change icons?

It might be a little tedious for all of the icons, but if you want to change a main logo or something you can just base64 encode an image and use that as your CSS.

I took a picture of the Rancher logo and did that to show you:

Just do:

some-item {
    background: url(" data:image/png;base64,<base64 encoded string>");
}

Don't use image/png if it's not a png, use the correct format.