Put your CSS files here:
<osTicket root directory>/assets/custom/css/
The folder lies outside the plugin folder, so your files survive a plugin update. Subfolders are not searched.
| Rule | Effect |
|---|---|
Name contains staff |
File is included in the Staff Panel |
Name contains client |
File is included in the Client Portal |
| Name contains both | The file counts as staff (first match wins, staff is checked first) |
Name contains neither staff nor client |
File is ignored |
| Allowed characters | Starts with a letter or digit, then letters, digits, _ and -, extension .css |
staff and client is case-insensitive (My-STAFF-theme.css counts as a staff file).my.staff.css), spaces, or a leading hyphen or underscore are blocked and noted in the PHP error log. Files with an extension other than .css are ignored, without a log entry.| Example | Result |
|---|---|
custom-staff.css |
Staff Panel |
my-staff-theme.css |
Staff Panel |
custom-client.css |
Client Portal |
branding-client.css |
Client Portal |
custom.css |
ignored |
staff theme.css |
blocked (space) |
Multiple files of one context are included in alphabetical order of their file names. For a fixed order, prefix numbers:
assets/custom/css/
├── 01-variables-staff.css
├── 02-layout-staff.css
├── 03-branding-staff.css
└── custom-client.css
| Request | Context |
|---|---|
Scripts under /scp/ |
Staff Panel |
PHP scripts outside /scp/ and /api/ |
Client Portal |
/api/ and calls without a PHP script |
no CSS |
The inclusion happens before the first </head> of the delivered page. If a response has no </head>, nothing is inserted. Each file appears as <link rel="stylesheet" href="...?v=<modification time>"> between the comments <!-- Custom CSS Loader Plugin --> and <!-- /Custom CSS Loader Plugin -->.
The plugin ships four demo files in assets/demo/ with commented examples.
| File | Purpose | Copied automatically |
|---|---|---|
custom-staff.css |
Examples for the Staff Panel | yes |
custom-client.css |
Examples for the Client Portal | yes |
wide-layout-staff.css |
Wider layout for the Staff Panel | no |
wide-layout-client.css |
Wider layout for the Client Portal | no |
Only the two custom-* files are copied automatically, and only on activation into a folder without any .css file. Copy the wide-layout files to assets/custom/css/ yourself when you need them. wide-layout-staff.css also contains color settings of a specific design that you should adapt or remove.
As assets/custom/css/wide-layout-staff.css (from the demo file):
#container {
width: 95%;
max-width: 1800px;
margin: 0 auto 20px auto;
}
If an osTicket style cannot be overridden, it has a higher specificity. Add
!importantor a more specific selector then.