#Customization, Branding, Localization

#Branding

This simple guide shows how to use custom index.html to change styling.

1. copy index.html from webswing-server.war to your app folder (for example C:\webswing-examples-20.1\apps\SwingSet3\webroot\)
2. configure webFolder of your application in webswing configuration to point to the new webroot folder (for example "${webswing.rootDir}/apps/SwingSet3/webroot")

#Custom CSS

1. Download the customization file.
2. Unzip it, then edit the scss/_base/_config.scss and change the primary color.
3. Adjust the other files to match your company branding
4. Run 'mvn install' from zip root (minimum requirements: Maven 3.3.9, JDK 1.8) It will generate the appWebFolder/css/style.css with changed colors.
5. Set the webFolder in webswing.config to point to the appWebFolder

#Custom favicon

1. copy the favicon.ico to your webFolder (for example C:\webswing-examples-20.1\apps\SwingSet3\webroot\favicon.ico)
2. change index.html in your webfolder. Add dot before the icon link <link rel="icon" href="./favicon.ico"/>
3. to force refresh you can append ?v=2 to your favicon link <link rel="icon" href="./favicon.ico?v=2"/>

#Custom messages & Localization

The Webswing distribution comes bundled with English and German messages. See folder webswing-examples-20.1/lang To simply adjust some of the messages download msg.json file which contains default english messages. Create folder en-US in the lang subfolder copy the file there and change the file to your requirements. The localization can be configured per application in the Localization Folder configuration field.

#Adjusted Style, text and content of the message

Sometimes the style of the original messages are not the best fit for your application and you want to change them. You need your custom index.html like described above.

<script>
    var webswingInstance0 = {
        options: {
            autoStart: true,
            args: getParam('args'),
            recording: getParam('recording'),
            binarySocket: getParam('binarySocket'),
            debugPort: getParam('debugPort'),
            recordingPlayback: getParam('recordingPlayback'),
            securityToken: getParam('securityToken'),
            realm: getParam('realm'),
            debugLog: getParam('debugLog'),
            customization: function (injector) {

                injector.services.dialog.content.startingDialog.content = '<div class="ws-spinner"><div class="ws-spinner-dot-1"></div> <div class="ws-spinner-dot-2"></div></div><p>MyApp is being started</p>';
                injector.services.dialog.content.initializingDialog.content = '<div class="ws-spinner"><div class="ws-spinner-dot-1"></div> <div class="ws-spinner-dot-2"></div></div><p>MyApp is being initialized</p>';

For more messages and details refer to webswing-dialog.js