Customizing the user interface with LESS and property files

You can customize the user interface by using the LESS and Property files. The LESS and Property files reduce the effort of modifying numerous CSS entries when you need to apply a common style across the application.

1. Customize the CSS in one of the following ways:
   • If you want to customize a specific property such as the color of a user interface element across the application, do the following steps:
     1. Create a properties file, for example properties.txt and include only those methods or properties that you want to modify. You must use the same method or property as defined by the application and assign the required value. You can refer to the methods or properties in the appropriate properties file that is provided with the application.
     2. Run the following Ant script from the <INSTALL_DIR>/bin folder: ./sci_ant.sh -f compileLessAndGenerateCSSForStore.xml -DcustomLessFileLoc=/data/temp/CustomFiles/ where /data/temp/CustomFiles/ refers to the location of the custom LESS and property files.
        The following .css files are updated to include the required changes and are available in the <INSTALL_DIR>/repository/eardata/wsc/war/wsc/resources/css/ directory.

        • desktop.css
        • desktop_rtl.css
        • mobile.css
        • mobile_rtl.css
   • If you want to modify a specific CSS entry such as the font size in a panel across the application, do the following steps:
     1. Create a .less file, for example newstyles.less and include only those CSS entries that you want to modify. You must use the same attribute names as defined by the application and assign the required value. You can refer to the .less files that are provided with the application.
     2. Run the following Ant script from the <INSTALL_DIR>/bin folder: ./sci_ant.sh -f compileLessAndGenerateCSSForStore.xml -DcustomLessFileLoc=/data/temp/CustomFiles/ Where /data/temp/CustomFiles/ refers to the location of the custom LESS and property files.
        The following .css files are updated to include the required changes and is available in the <INSTALL_DIR>/repository/eardata/wsc/war/wsc/resources/css/ directory.

        • desktop.css
        • desktop_rtl.css
        • mobile.css
        • mobile_rtl.css
   • Similarly, if you add more screens by extending the application, define custom properties and methods, and run the Ant script. The .css files are updated to include the style for the extended screens.
   Alternatively, you can run the Ant script in the following ways:

   • ./sci_ant.sh -f compileLessAndGenerateCSSForStore.xml: You are prompted to provide the location of the .less files.
   • ./sci_ant.sh -f compileLessAndGenerateCSSForStore.xml -DcustomLessFileLoc=: You are not prompted to provide the location of the .less files. You can run this command to revert to the default styles provided by the application.
2. After customizing the application, build and deploy the application WAR or EAR as per your requirements.