Topic
IC4NOTICE: developerWorks Community will be offline May 29-30, 2015 while we upgrade to the latest version of IBM Connections. For more information, read our upgrade FAQ.
10 replies Latest Post - ‏2014-01-13T13:18:07Z by mdreza1472
mdreza1472
mdreza1472
50 Posts
ACCEPTED ANSWER

Pinned topic Customizing Login Page with Background Image

‏2014-01-06T06:09:23Z |

Hello,

 

I have a business requirement where we have to provide a background image for login page.

 

Can anybody help with the approach for this?

 

Thanks,

 

Kind Regards,

Md Reza.

  • Aliatsoft
    Aliatsoft
    22 Posts
    ACCEPTED ANSWER

    Re: Customizing Login Page with Background Image

    ‏2014-01-06T17:24:26Z  in response to mdreza1472
    Hi,
     
    I don't see background image being exposed in Desktop setting - as logo settings are available. 
     
    Going for customizations there are number of options I can think of:
     
    • Replace the current background image in the package (../navigator/ecm/widget/resources/images/paper.png)
    • Modify the CSS (.../WebContent/ecm/widget/resources/LoginPane.css) 
    • Create custom login page using Javascript API and new CSS/theme
     
    I would go with one of the first two options if same behaviour is accepted at global level (all apps and desktops). 
     
    Hope that helps.
    /Ali
    • mdreza1472
      mdreza1472
      50 Posts
      ACCEPTED ANSWER

      Re: Customizing Login Page with Background Image

      ‏2014-01-07T05:54:56Z  in response to Aliatsoft

      Hello Ali,

       

      Thanks for the reply, i actually achieved this with the 1st approach i.e replacing the paper.png image.

      However can you elobrate more on the 3rd approach?Would like to know it.

       

      Regards,

      Md Reza.

  • Aliatsoft
    Aliatsoft
    22 Posts
    ACCEPTED ANSWER

    Re: Customizing Login Page with Background Image

    ‏2014-01-07T16:46:31Z  in response to mdreza1472

    I was trying to give you examples of different level of customization that can be done in ICN...

    In the 3rd option, you can build your own web page to do the login and then direct user to one of ICN/customized pages (a desktop url for instance)

    You can find a sample in ICN installation directory (ECMClient\samples\samplePages\WebContent\model\login.html)

    Note: easiest approach is not always best approach, also extreme customization has its costs - I have not productionized a customized ICN system yet and can't comment on best practices- IBM's comment is appreciated.

    /Ali

     

    Updated on 2014-06-16T14:51:30Z at 2014-06-16T14:51:30Z by Aliatsoft
    • damorris
      damorris
      772 Posts
      ACCEPTED ANSWER

      Re: Customizing Login Page with Background Image

      ‏2014-01-07T18:50:58Z  in response to Aliatsoft

      Please note that replacing ANY file directly in the Content Navigator EAR file directories is completely UNSUPPORTED.  Every time you install a new fixpack or hotfix it will overwrite the entire EAR file and any changes to those files will be overwritten.  This was a huge issue for customers when they customized Workplace AE or any other legacy client that didn't have a proper framework for building and deploying extensions.  

      Any change you make to Content Navigator MUST be done in a plugin that is packaged as a JAR file and installed in to ICN via the Content Navigator administration Plug-ins panel.  Your plugin JAR file is loaded from a file path or URL path that is separate from the core ICN EAR file contents and so when you install ICN fixpacks / hotfixes your plugin remains unchanged and continues to work, provided you've built it properly using the publicly exposed methods in the ICN API.

      The 3rd option could be done in a plugin.

      • mdreza1472
        mdreza1472
        50 Posts
        ACCEPTED ANSWER

        Re: Customizing Login Page with Background Image

        ‏2014-01-08T07:37:58Z  in response to damorris

        Thanks for the reply damorris.

         

        Well i am in a process of creating the cusom plugin referring that red book now;  will soon update here if i get any issues.

         

        Thanks once again.

         

        Kind Regards,

        Md Reza.

    • mdreza1472
      mdreza1472
      50 Posts
      ACCEPTED ANSWER

      Re: Customizing Login Page with Background Image

      ‏2014-01-08T07:40:14Z  in response to Aliatsoft

      Thanks Ali for the reply.

      Login page sample example will be helpfull for me.

      Kind Regards,

      Md Reza.

      • arronla
        arronla
        92 Posts
        ACCEPTED ANSWER

        Re: Customizing Login Page with Background Image

        ‏2014-01-08T08:20:26Z  in response to mdreza1472

        One other alternative you can do is to reuse the existing login pane but just alter the background image in a very simple plugin.

        Not tested but something along this line should work.

        var loginPane = Desktop.getLayout().loginPane;

        style.set(loginPane.domNode, "background", urlToYourImage);

         

        • mdreza1472
          mdreza1472
          50 Posts
          ACCEPTED ANSWER

          Re: Customizing Login Page with Background Image

          ‏2014-01-10T08:06:10Z  in response to arronla

          Thanks arronla for reply.

          Sorry for this question, but what i understood by you're post is we have to write the above changes in html template ?

          Reza.

          • arronla
            arronla
            92 Posts
            ACCEPTED ANSWER

            Re: Customizing Login Page with Background Image

            ‏2014-01-10T17:48:31Z  in response to mdreza1472

            Nope, it will just be in the plugin's javascript file.  I just wrote the code below blindly.  There might be some minor errors but it should do what you are trying to do.

            require(["dojo/_base/declare", "dojo/aspect", "dojo/_base/lang", "dojo/dom-style","ecm/model/Desktop"],
                    function(declare, aspect, lang, style, Desktop){
                            aspect.after(Desktop, "onDesktopLoaded", function(response){
                                var loginPane = Desktop.getLayout().loginPane;
                        style.set(loginPane.domNode, "background", URLTOYOURIMAGE);
                                });
                    }
            });
            

             

            • mdreza1472
              mdreza1472
              50 Posts
              ACCEPTED ANSWER

              Re: Customizing Login Page with Background Image

              ‏2014-01-13T13:18:07Z  in response to arronla

              Thanks arronla this finally worked out for me.

               

              Below code is final one:


              require(["dojo/_base/declare", "dojo/aspect", "dojo/_base/lang", "dojo/dom-style","ecm/model/Desktop"],
                          function(declare, aspect, lang, style, Desktop)
                          /**
                           * Use this function to add any global JavaScript methods your plug-in requires.
                           */
                          {            
                          aspect.after(Desktop, "onDesktopLoaded",
                                  function(response){
                                      var loginPane = Desktop.getLayout().loginPane;
                                      style.set(loginPane.domNode, "background", "url('/navigator/plugin/CustomSearchPlugin/getResource/images/customizeDesktop.png')");
                          });
                      
                              aspect.after(Desktop, "onLogin",
                                      function(response){
                                          var mainPane = Desktop.getLayout().mainPane;
                                          style.set(mainPane.domNode, "background", "url('/navigator/plugin/CustomSearchPlugin/getResource/images/customizeDesktop.png')");
                                      });
                          }
                  );

               

              Updated on 2014-01-13T13:22:20Z at 2014-01-13T13:22:20Z by mdreza1472