How to Change the Background of the Login Page in Sage X3
Do you want your Sage X3 ERP to better represent your brand? Would you like to see your company logo or change the background color your users see when logging in to Sage X3?
Before we begin, it’s important that we backup the files we intend to modify. If you make an error while editing the files, you could make it impossible for users to access the system. You should always avoid making changes to a live environment.
For this example, we’re assuming you’re logged on to the Syracuse Server. The background image is located in directory “SYRACUSE_HOME\syracuse\bin\node_modules\@sage\syracuse-lib\public\auth\images” and is named “background.jpg”. To change the background image, simply replace the “background.jpg” file with your own file. For best results, try to keep the new image similar in size. The original image size is 1080 x 608 pixels.
In addition to changing the background image, you can also change the color property of the background element. If you look at “Syracuse_HOME\syracuse\bin\node_modules\@sage\syracuse-lib\public\auth\login.css”, you can change the background color in the .container section:
Alternatively you can comment out the background-color section with the usual css /* */ format:
Notes:
- Whenever you patch or upgrade the Syracuse Server it is highly likely that the CSS files you edited above will be overwritten. Therefore, it’s important to add a step to the end of your process documentation to remind yourself (and others) to replace the CSS file with the revised version.
- You may need to force a full-cache refresh by pressing CTRL + F5 (most browsers) for these changes to show up.
- Just to be clear, the steps described in this blog post are not officially supported by Sage.
If you have any questions about customizing the login page for Sage X3, or any other questions, please contact us.
Portions of this blog post come from a discussion on Sage City from July 2022.
