Spiceworks Custom CSS HelpDesk Theme



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


  • Looked at spiceworks once, never looking again.



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



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

    What was it that turned you away?

    Spiceworks.



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



  • @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:

    base64.png

    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.


Log in to reply