Changing Sage X3 V12 Login Screen Background

Less than one minute read time.

Ever wondered how you can change the background image of Sage X3 Version 12's Login Screen? Then keep reading:

There are basically 2 steps involved:

  1. Edit the "login.css" file located in "\syracuse\bin\node_modules\@sage\syracuse-lib\public\auth" directory to remove the background image overlay:
    1. In ".container" section of this file, change the value of the "background-color" element to "transparent" - without the quotes
    2. Optionally, you may want to make the credential login section semi-transparent. To do that, add a line to the ".s_text" section, called "background-color" and use rgba(255,255,255,0.5) as the value. Do not forget to add a semi-colon at the end. I personally did not go with this option in this tutorial.
  2. You can now change the background to your preferred image by replacing the "background.jpg" file in "\syracuse\bin\node_modules\@sage\syracuse-lib\public\auth\images"

Refresh your browser, and you shall see the new login screen. If this does not change anything, you might need to clear your browser's cache.

Parents Comment
  • Hi Amir, have you been able to do this in 2024 R1? I have made the following change, by adding the following into the login.css, in the content block, it does get the image to display but it starts to tile, in prior versions the background was centred and fit the screen

    background: url(images/background.jpg);

    As an example (even after I comment out the other alignment attributes):

Children