How to Change the Background Color and/or Width of the End User Interface

The background color used in all pages of the end user interface is controlled by a single record in the EUI templates table, but it can be hard to find if you don’t know exactly what to look for.

If you know what color you want to change the background color to, you can do so quickly and easily by logging in as a Staff User with access to the EUI Templates table and editing the record named “style.css”.

From there, you can tweak the Hex Color Codes of the current background to match the desired color.

Note that the default background uses a gradient, so you can either remove the gradient or use a flat tone background color instead, or choose two similar shades and replace the gradient.

If you wish to change the width of the main frame, this can also be modified within the EUI Template record by searching for the text “max-width”.

This value typically starts with a default of 1200px, and you can change this to whatever looks best to you.