New Custom CSS and JS plugin

hannibalza

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]

miguelv

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

hannibalza

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 🙂

shkodranademi

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 .

hannibalza

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

hannibalza

🙂 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🤦‍♂️]

shkodranademi

hannibalza Thank you so much ,

hannibalza

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

Maelow

I downloaded phar
Installed
Turned on
Created a setting (activated)
Added CSS from the example
Nothing has changed on my site. Am I doing something wrong?

hannibalza

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.

ramrajone

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

dfite

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?

KevinTheJedi

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:

https://github.com/osTicket/roadmap

Cheers.

Maelow

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.

Maelow

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

Sorry for the long answer

GamingSanctum

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

dgomiller

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.

KevinTheJedi

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.

boucer

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 ?

KevinTheJedi

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.