Custom CSS

The SCSS source of the default CSS theme can be found in media/scss/theme.scss. Subordinate SCSS files can be found in the media/scss/3pd and media/scss/section folders.

⚠️ IMPORTANT! Do not edit theme.scss or the other SCSS files shipped in the media/scss/3pd and media/scss/section folders. Instead, create copies of them and edit the copies.

To customise the CSS, first copy the media/scss/theme.scss to a different name, e.g. media/scss/custom.scss. You can now edit the file as you please.

Then, you can compile the SCSS to CSS. There are plenty of solutions out there. We use the command-line NPM sass, but there are GUI tools as well.

Please remember that you will need the Bootstrap source SCSS files to compile Panopticon's SCSS. If you have command-line access you can always run npm install in Panopticon's root folder to do that.

The compiled file, e.g. custom.css, must be placed into the media/css folder.

Then, log into Panopticon as a Super User and go to Administration, System Configuration, Display. Put the name of your custom CSS file, without an extension, in the CSS Theme File setting. In our example, you need to type custom in there. Click on Save & Close. Panopticon will now use your custom file.

Caveats

If you have enabled Debug mode you need to have your compiled file with both the .css and .min.css extension in the media/css folder.

If Panopticon cannot find your CSS file it automatically reverts to the built-in media/css/theme.min.css. If this happens DO NOT try to replace the built-in file; it will be overwritten when you update Panopticon.