Custom CSS Loader: Usage

Use Custom CSS Loader: CSS folder, file name rules for staff and client, order, where CSS is included, the four demo files and an example.

Deutsche Version

Back to overview

Custom CSS Loader: Usage

CSS folder

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.

File name rules

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`

The search for staff and client is case-insensitive (My-STAFF-theme.css counts as a staff file).
Files with dots in the name (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.
Symlinks pointing to a file outside the CSS folder are blocked.

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)

Order

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

Where CSS is included

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  and .

Demo files

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.

Example: wider layout

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 !important or a more specific selector then.