Personalize Acumatica for Demo

Hi Everyone,
Some times you want to impress your prospect with super nice demo. Of course you can do good investigation and nice presentation, but to be great you need to speak with customer on the same language. That means that you need to prepare customer specific data in your demo system. But also you can slightly customize Acumatica instance to show customer logo and icons.

Acumatica Custom Color Schema

What else you can easily customize to show nice and familiar UI to customer:

  • Customize login page images,
  • Customize logo,
  • Using different themes,
  • Customize style and colors.

Lets discuss all these stuff.

Customize login page
It is nice if customer will see their own logos and images on login page. You can read more about how to do it here Add Custom Pictures to Login Page and here Login Page Customization

Customizing logo
You can easily customize logo on Branches Maintenance page (CS102000). Just upload new image an set it as a current. System will automatically handle this and update logo in the top left corner.

Acumatica Custom Logos

Please note that system will have different logos for different branches.
Default Logo size:  height: 37px;  width: 150px;

Changing Themes
On the Site Preferences screen (SM200505), you can choose different possible themes, that are supported by acumatica right now.

Acumatica Custom Themes

In acumatica 5.0 there are just 2 possible themes: Default and Indigo.
You can find definition for each of specified theme in application instance folder (C:Program Files (x86)Acumatica ERP<Site Name>App_Themes).

Changing Colors and Style
If you know how to use browser development tools, than using inspect element feature you can find and analyse current colors of any element in the system.

For example, lets try to analyse the colors of top menu color:

  1. Select Inspect element button
  2. Point cursor on the image and click lef button
  3. Use html browser window to find top most table for this element
  4. Using styles find current background collor of this element
Browser Debugger Tools to get Acumatica Colors

Default colors for Indigo theme are #303f9f – for top menu and #3f51b5 – for next sub menu.
For the Default theme are: #007acc for top menu and #EEEEEE for sub menu

When you find a color name, you can easily replace it with new ones with any text editor for current style:

  1. Open folder “C:Program Files (x86)Acumatica ERP<Site Name>App_ThemesIndigo” on your server.
  2. Open file “00_Controls.css” with any text editor (Notepad for example). This file is cascade style sheet for Acumatica theme. All user interface styles are located here including: colors, margins paddings, sizes, fonts and so on. You can read more about it on w3schools .
  3. Using replace functionality of text editor find and replace old color name with new one
  4. For Indigo theme old color is 303f9f.
  5. In my example new color is 303f00 – Dark Green.
  6. Replace All entries.
  7. You can repeat the same for other colors. (like 3f51b5).
  8. Save file and refresh page in browser – you will see new Acumatica look.
Edit Acumatica Theme in notepad

If you want to understand the color by hex code, you can use some external tool like HTML Color picker .

Have a nice demos!

6 Replies to “Personalize Acumatica for Demo”

  1. Eliyahu,

    you can control what estension can be attached to acumatica and what is not.
    Please check screen SM202550 – File Upload Preferences

Leave a Reply

Your email address will not be published. Required fields are marked *