How to Change the Ephesoft Logo

August 26, 2020
|In UI Customization
|By ephesoftadmin

This page contains steps for how to replace the Ephesoft logo within Ephesoft Transact with your own company logo. These instructions are intended for partners and customers who are looking to white-label Transact.

Prerequisites

  • You will need administrator permissions.
  • You will need a basic understanding of HTML and CSS.

The instructions for this procedure vary by version:

Ephesoft Transact 2019.1 and Above

To upload your customized logo, perform the following steps:

  1. Navigate to the images folder at [Ephesoft_Directory]\Application\custom\images.
Figure 1. Images Folder
  1. Add or copy your image file to the images folder. The filename should be unique. Supported file types are:
    • SVG
    • PNG

Edit the Logo File Paths

After you have uploaded the new logo image, you will need to change the file path in the affected files to direct to the new image.

The following files are affected, which are located in [Ephesoft_Directory]\Application:

Note: You do not need to restart Transact after making changes to the above files. To view your changes, refresh your browser.

Edit the Login.html File

The Login.html changes the logo on the Login screen.

Figure 2. Login Screen

By default, the file will point to the Ephesoft logo. To point to the new file, edit the img src attribute.

  1. Open the Login.html file, at [Ephesoft_Directory]\Application.
Figure 3. Application Folder
  1. Search for “company_login_logo.svg”.
Figure 4. Login.html File
  1. Duplicate the “img src” line.
Figure 5. Duplicate img src
  1. Comment out the original line.
Figure 6. Comment Out Original
  1. Edit the new line to point to the new image file by replacing the “company_login_logo.svg” with the name of the new image file.
Figure 7. Update Filename
  1. Adjust the height and width of the img src attribute as needed.
  2. Save and close the file.

Edit the home.html File

The home.html changes the logo on the Home screen.

Figure 8. Home Screen
  1. Open the home.html file, at [Ephesoft_Directory]\Application.
Figure 9. home.html File
  1. Repeat steps 2-7 from the Login.html section above.

Note: The img src attribute in the home.html file does not contain default height or width tags. Depending on the size and dimensions of your new file, you may need to add and customize these tags.

Figure 10. Edit Height and Width

Edit the common.css File

The common.css changes the logo on each Administrator and Operator page within Transact.

Figure 11. Batch Class Management Screen
  1. Open the common.css file, located at [Ephesoft_Directory]\Application.
Figure 12. common.css File
  1. Search for “company_login_logo”.
Figure 13. Locate “company_login_logo.svg”
  1. Duplicate the .logoPanel .iconImage element and its properties.
Figure 14. Duplicate the Element
  1. Comment out the original element.
Figure 15. Comment Out Original
  1. Edit the new element to point to the new image file by replacing the “company_login_logo.svg” with the name of the new image file.
Figure 16. Update Filename
  1. Adjust the width and height properties as needed.
  2. Save and close the file.

Ephesoft Transact 4.0.0.0 to 4.5.0.0

To upload your customized logo, add or copy your image file to the following folders.

  • [Ephesoft_Directory]\Application\images
  • [Ephesoft_Directory]\Application\themes\default_theme\images

Note: The filename should be unique. Supported file types are:

  • SVG
  • PNG

Edit the Logo File Paths

After you have uploaded the new logo image, you will need to change the file path in the affected files to direct to the new image.

The following files are affected, which are located in [Ephesoft_Directory]\Application:

Note: You do not need to restart Transact after making changes to the above files. To view your changes, refresh your browser.

Edit the home.html

  1. Open the home.html file, at [Ephesoft_Directory]\Application.
Figure 17. home.html File
  1. Search for “logo_login.svg”.
Figure 18. Edit home.html File
  1. Replace “logo_login.svg” with the new file name.
  2. Adjust the width and height properties as needed.
  3. Save and close the file.

Edit the Login.html File

  1. Open the home.html file, at [Ephesoft_Directory]\Application.
  2. Repeat steps 2-5 from home.html above.

Edit the common.css File

  1. Open the common.css file, at [Ephesoft_Directory]\Application.
  2. Repeat steps 2-5 from home.html above.