Hook.js for Logo Change

[Dleong@celsinc.com]

Hi,
I am in a process of updating the new Version 5 with settings from Version 4.1.
Here's where I am stuck now:

In the old version 4.1, Hook.js contained the logo information:

Ext.define('Portal.Hook', {
	aboutPage	: '/clix/about/index.html',
	favicon		: '/clix/images/favicon.ico?version=20140923',
    singleton   : true,
    loginUI     : {
        backgroundColor : '#e9eaed',
        form            : {
            border          : false,
            width           : 425,
            title           : null,
            titleAlign      : 'center',
            bodyStyle       : {
                "background-color" : "#f6f7f8"
            }
        },
        logo            : {
            padding         : 20,
            url             : '/clix/images/clix_logo.png',
            height          : 70,
            width           : 200,
            style           : {
                "text-align" : "center"
            }
        }
    },
    lockUI     : {
        form            : {
            border          : false,
            height          : 190,
            width           : 420,
            title           : null,
            titleAlign      : 'center',
            bodyStyle       : {
                "background-color" : "#f6f7f8"
            }
        },
        logo            : {
            padding         : 15,
            url             : '/clix/images/clix_logo.png',
            height          : 55,
            width           : 200,
            style           : {
                "text-align" : "center"
            }
        }
    },
    mainUI : {
        logo : {
            paddingLeft     : 15,
            paddingRight    : 15,
            paddingBottom   : 0,
            paddingTop      : 5,
            url             : '/clix/images/clix_logo.png',
            height          : 30,
            width           : 120
        }
    },

But with the new release the Hook.js definition is different, I cannot port as-is from version 4. I changed part of the configuration I thought would applied but it did not.

Ext.define('Portal.Hook', {
    singleton : true,
    aboutPage : '/clix/about/index.html',
    favicon   : '/clix/images/favicon.ico?version=20140923',
    portalSettingOverrides : {
        // place settings overrides here...
        //
    },
    ui : {
        /*
         Change the image used for the Portal login. One may be specified for each theme or the "default" will be used for all.

             Examples:
             1.)Same image used for all themes:
                 loginLogoUrl : {
                     "default" : "path_to_my_company_image.png",
                     "dracula" : null,
                     "metal"   : null
                 }

             2.)Different image for each theme:
                 loginLogoUrl : {
                     "default" : "path_to_my_company_image.png",
                     "dracula" : "path_to_another_image.png",
                     "metal"   : "yet_another_path.png"
                 }
         */
        loginLogoUrl : {
            "default" : '/clix/images/clix_logo.png',
            "dracula" : null,
            "metal"   : null,
        },
        /*
         Change the image used for the Portal control bar.  Same rules apply as loginLogoUrl above.
         */
        portalLogoUrl : {
            "default" : '/clix/images/clix_logo.png',
            "dracula" : null,
            "metal"   : null
        },
        /*
         Change the image used for the Portal lock window.  Same rules apply as loginLogoUrl above.
         */
        lockLogoUrl : {
            "default" : '/clix/images/clix_logo.png',
            "dracula" : null,
            "metal"   : null
        }
    },

So how should I reconfigure version 5 to use my company logo and color?

[sean.lanktree]

There is currently a caching issue with the Hook.js (in the first 5.0 release, this will be fixed on the next maintenance release). Please attempt clearing your cache and see if this solves the issue with your images.

[sean.lanktree]

To elaborate a bit more, the Hook.js file is now only used to set your images and to hook into Portal level events (login, logout, closeapp, etc...).

In order to allow for more customizations, visual changes outside of the image urls now are placed in the "overrides.css" file. This lives under the /resources/desktop/themes/css/Portal folder.

Now you apply ui changes by overriding or adding properties to existing css classes.

For example, to change the background color of the login page, add the following to the overrides.css file:

.vv-login-cnt{
    background-color:red;
}

Change the size of the login image:

.vv-login-img{
    max-width:200px;
}

Change the size of the image used on the control bar of the Portal:

.vv-ctrlbar-img{
    max-width:50px;
}

[Dleong@celsinc.com]

Thanks Sean, I will give that suggestions a try.

[Dleong@celsinc.com]

Sean, when is the maintenance release coming out?
The clearing of cache did not resolve my problem. :-(

[sean.lanktree]

Please email your contact info to support@cnxcorp.com....I can get on an online meeting with you to resolve. The maintenance release should be out by end of day tomorrow.