Saturday, 5 December 2015

Doing Personalized 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.

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 and here .

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.

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.

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

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_Themes\Indigo" 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.

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 comments:

Eliyahu said...

Hi,
Great Tutorial here!

How does one access the css files of a company that is not stored on the local computer?

Sergey Marenich said...

Hi Eliyahu,

Unfortunately you cannot really access file system of remote site, but you can try workaround with adding CSS files to Acumatica Customization Project.
Good example is here http://blog.acumatica.com.sg/2015/11/login-page-customization.html

Eliyahu said...
This comment has been removed by the author.
Eliyahu said...

HI,

Great example, and i finally got that to work!
I just cant seem to figure out how to apply that to changes in the css as in this example: http://adn.acumatica.com/blog/acumatica-customization-theming-white-labeling/ ,since .css is a file extension not supported in Acumatica uploads.

Any ideas?

Sergey Marenich said...

Eliyahu,

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

Eliyahu said...

That worked!
Thanks again.