I uploaded a plugin that allows for custom CSS and JS in the client front end if anybody is interested.

osTicket-Custom-Code - https://github[dot]com/HannibalZA/osTicket-Custom-Code

It is for all intents and purposes upgrade proof, as it injects the content into the client header file. Should the header file be overwritten (due to upgrade or whatever), its bootstrap will just re-insert the code in a clean way.

This is of course not the ideal solution, however it is currently not possible to tap into the $ost->addExtraHeader() functions in a clean way - which is what this would have done.

Have fun, play nice...

[Edited by admin - do not post direct links to mods]

Hello,
thanks for your great work
I installed the plugin but where do I enter the path to the css file?
Thank you Miguel

    miguelv

    Hi Miguel
    At the moment it allows for raw CSS and JS to be entered into the text areas provided under the plugin's instance.

    for CSS you can simply use the @import rule:
    e.g. @import url("myfile.css");

    for JS you can use the following approach:

    var script = document.createElement('script');
script.src ="path/to/my/file.js";
document.head.appendChild(script)

    If time permits I will probably add additional improvements, otherwise anybody else is welcome to pull from the repo 🙂

        Hello hannibalza

        You did a great work with this plugin .

        I downloaded the plugin and i could'nt install on my Osticket v1.17.2 , Downloaded - Zip - Phar - include/plugins but it doesnt show to install it .

            shkodranademi
            grab the phar from release on the github repo and give that a try?

            When converting the phar its important that the zip file not contain a directory, the initial plugin and config files need to be in the root of the zip file

              🙂 in case anyone else needs it

              https://github[dot]com/HannibalZA/osTicket-Custom-Code/releases/download/initial/customcode.phar

              [Edited by Admin - Again....please don't post direct links to mods]

              [Edited by hannibalza - Sorry!!, didn't even see the first warning🤦‍♂️]

                Some example CSS for a flattened look like below:



                Primary black color can be changed as needed of course, along with the shades of gray...

                Haven't looked much at the KB/Additional pages etc, but this is a good start for you.

                #header {
                padding: 10px!important;
                }
                #container {
                width: auto!important;
                }
                table {
                width: 100%;
                }
                #nav {
                margin: 0 0 10px 0 !important;
                padding:0!important;
                height:auto!important;
                background:none!important;
                border-top:0!important;
                -moz-box-shadow: none!important;
                -webkit-box-shadow: none!important;
                box-shadow: none!important;
                background-color:#000!important;
                }
                #nav li a {
                background-image:unset!important;
                color:#fff!important;
                padding:10px!important;
                border-radius:0;
                -webkit-border-radius:0;
                -moz-border-radius:0;
                }
                #nav li a.active, #nav li a:hover {
                background-color: #eee;
                color:#000!important;
                }
                a:hover {
                border-bottom:0!important;
                }
                a {
                margin-bottom:0!important;
                }
                input[type="button"], input[type="reset"], input[type="submit"] {
                cursor: pointer;
                -webkit-appearance: button;
                -moz-appearance: button;
                padding: 5px 10px;
                border: 1px solid #ccc;
                background-color: #eee;
                }
                input, select, textarea {
                border: 1px solid #ccc;
                padding: 5px 10px;
                color: #444;
                }
                select {
                background-color: #eee;
                }
                h1,h2,h3,h4,h5,h6 {
                color:#555!important;
                }
                #ticketTable {
                margin: 15px 0px;
                }
                #ticketTable caption {
                background: none !important;
                border: 0px !important;
                font-size:85%;
                }
                #ticketTable th {
                background: #eee!important;
                border: 1px solid #ccc!important;
                padding: 5px 10px!important;
                }
                #ticketTable td {
                border: 1px solid #ccc!important;
                padding:5px 10px!important;
                }
                .button {
                -webkit-border-radius:0;
                -moz-border-radius:0;
                border-radius:0;
                -moz-box-shadow: none!important;
                -webkit-box-shadow: none!important;
                box-shadow: none!important;
                }
                #landing_page .sidebar {
                display:none;
                }

                8 days later
                1. I downloaded phar
                2. Installed
                3. Turned on
                4. Created a setting (activated)
                5. Added CSS from the example
                  Nothing has changed on my site. Am I doing something wrong?

                  Sub'd for further development news. osTicket absolutely needs reskinning/updating to a more modern theme and hopefully this can be the foundation for that?

                    dfite

                    No, v2.0 is in progress and that will be fully responsive, modern, theme-able, the whole nine. v2.0 is our full codebase rewrite and will completely change the look and feel of osTicket. It will be a huge, needed refresh. You can follow the roadmap here:

                    Cheers.

                        KevinTheJedi Version 2 sounds really cool and we're all looking forward to it. But we understand that this is not a quick process. Overlaying custom styles on top of existing ones is a good solution while we wait for the second version.

                          21 days later

                          Maelow
                          Double check that both plugin and instance are enabled.

                          If that is all done, confirm that include/client/header.inc.php is writable since the plugin needs to access that file when saving.

                              3 months later

                              Maelow
                              You might be looking at agent side /scp this plugin I belive for client-side " in the client front end"

                                8 months later

                                hannibalza Thank you, the rights were indeed missing. It should be added to the description in the repository.

                                Sorry for the long answer

                                  2 months later

                                  This is great! Thank you for also providing the sample CSS. Gave me a good starting point on identifying the class names!

                                  2 months later

                                  I know it's been a while, but is there any way for this to also affect the agent portal? I'd like to customize the looks on the tickets page.

                                    dgomiller

                                    Please contact the modder directly outside of this forum. This forum is for assistance with core osTicket and core osTicket plugins only. This is not a support forum for third party mods.

                                    Cheers.

                                      17 days later

                                      I try to display my chatbot on the front end & I install the phar file in the plugins folder and add my script code like this one all is activated .. <script src="https://My/path/file/chatbot.js" data-bot-id="00000"></script> .. but not displaying my chatbot. Do I need to update some core files to work with the initial ones ? If yes, where do I need to add the files that comes with at GitHub ?

                                        boucer

                                        Please read my comment above:

                                        Please contact the modder directly outside of this forum. This forum is for assistance with core osTicket and core osTicket plugins only. This is not a support forum for third party mods.

                                        Cheers.

                                          Write a Reply...