10 Replies Latest reply on Oct 20, 2016 9:05 AM by katherinec

    How to customize HEAT application login screen?

    markuszierer Specialist

      I have installed HEAT SM 2015.2.2 OnPrem. Now i want to customize the HEAT Login Screen with the Logo and details of our company. I did a search in the KB and found #15260 which describes a procedure to replace the default picture and modify the Login.aspx. But this approach does not work. It seems this article is outdated.

       

      Does anybody have a working guide or a link to another KB where the procedure is described?

        • 1. Re: How to customize HEAT application login screen?
          florian1 Expert

          Hi Markus,

           

          this procedure is still working.

          Please don't forget to clear the client cache & recycle the IIS application pool afterwards. I'm pretty sure you missed this out

          If you have a separate application server and processing server, you only have to modify your application server.

           

          When you want to modify the vertical bars or the background image in the login screen, have a look at the stylesheet under C:\Program Files\HEAT Software\HEAT\AppServer\css\bootlogin2.css.

           

          For example: You want to get a blue navigation bar:

           

           

          .navbar-frontrange {
            *Original: border: solid #ff0000;
            border: solid #333399;
            min-height: 60px;
            }
          
          

           

          Cheers,

          Florian

          1 of 1 people found this helpful
          • 2. Re: How to customize HEAT application login screen?
            markuszierer Specialist

            Thx Florian,

             

            i managed to replace the HEAT Logo. But i'm still not able to change the text below. I tried to modify the Login.aspx (as described in KB and you confirmed this working as well), but it does not result in a changed behavior. Seems to be referenced somewhere else.

             

            Can you please tell me which document i have to modify?

            • 3. Re: How to customize HEAT application login screen?
              jonscrivin Rookie

              Incidentally, does anyone know if it's possible to customize the login screen for cloud SM?

              • 4. Re: How to customize HEAT application login screen?
                markuszierer Specialist

                As far as i know, there is no official support for customizing your HEAT SM logon screen. You have to hack it by modifying the underlying files. And because of that, it think the answer to your question is No. It's not possible for the Cloud version.

                you need the OnPrem Version to be able to do the hack. And even this will last only until the next update. Then the files will be overwritten and you have to start all over again....

                • 5. Re: How to customize HEAT application login screen?
                  florian1 Expert

                  I'm sorry, apparently there are two different articles regarding the layout..

                  Please have a look at 19803 instead.

                  Please edit the following page (please make a backup first): C:\Program Files\FrontRange Solutions\HEAT\AppServer\MVC\Views\Account\_LoginLayout.cshtml

                  We could change the lines 35 and 36, where the class named "logo" defines the image, and the next one shows the desired text.

                  As an example:

                   

                  You will also find the footer in here:

                  1 of 1 people found this helpful
                  • 6. Re: How to customize HEAT application login screen?
                    florian1 Expert

                    Yes, it's not working yet for cloud SM.

                     

                    The application pool settings will be overwritten as well when updating to a newer version.

                    That's why I have created a simple "Post-Update" Powershell script to restore my layout and application pool settings afterwards.

                    • 7. Re: How to customize HEAT application login screen?
                      keifer2008 Apprentice

                      Hi Florian

                       

                      Could you share your Post-Update script? I'm also interested in having a script I can re-run after updates.

                       

                      Thanks.

                      • 8. Re: How to customize HEAT application login screen?
                        AlasdairRobertson ITSMMVPGroup

                        Just an FYI HEAT SM 2016.2 Supports customisation of the front login screen ootb so no need for scripts.  settings can be found in the style editor.  SaaS customers will have it this month (next week for Europe) and premise will follow in about 6 weeks I expect.

                        1 of 1 people found this helpful
                        • 9. Re: How to customize HEAT application login screen?
                          keifer2008 Apprentice

                          I just hope that it will allow a lot more then what the current style editor offers.

                          I find it's missing quite a few items such as tab colors on child objects.

                          • 10. Re: How to customize HEAT application login screen?
                            katherinec Apprentice

                            This is what we've done since if it helps anyone reading up on this - Just a straightforward replacement of logos, removal of text and change of colours. I normally replicate the changes across to the 'new' version of the files during test so they're ready to just drop in at upgrade time, but will be nice to have something that will persist in 2016.2

                             

                            C:\Program Files\HEATSoftware\HEAT\AppServer\MVC\Views\Account\_LoginLayout.cshtml

                            As Florian highlighted this is the bottom footer text

                             

                            C:\Program Files\HEATSoftware\HEAT\AppServer\images\HEAT_RGB_sml.jpg

                            This is the icon by the Login box - created our own, renamed to be HEAT_RGB_sml.jpg and dropped in place of the original (backed up)

                             

                            C:\program files\HEATSoftware\AppServer\favicon.ico

                            Browser tab icon - create own ico and replace (backed up)

                             

                            C:\Program Files\HEATSoftware \HEAT\AppServer\images\FR_RGB_lrg_no_margin.png

                            This is the large central icon - created our own (with company logo and name), renamed to be FR_RGB_lrg_no_margin.png and dropped in place of the original (backed up)

                             

                            C:\Program Files\HEATSoftware\HEAT\AppServer\css\bootlogin2.css

                            Colour/size customisations. Couple of examples:

                             

                            logos  height + width - change to match yours:

                             

                            .logo {
                                background-image: url("../images/FR_RGB_lrg_no_margin.png");
                                height: 212px;
                                width: 200px;
                            }

                            .heat-logo {
                                background-image: url("../images/Heat_RGB_sml.jpg");
                                height: 54px;
                                width: 54px;
                                margin-bottom: 10px;
                            }

                             

                            Borders :

                             

                            .header {

                                color: #00a2d4;

                            }

                             

                            .navbar-frontrange {

                              border: solid #004974;

                              min-height: 60px;

                            }


                            Login Button

                             

                            .btn-primary {
                              background-color: #0044cc;

                              background-repeat: repeat-x;
                                background-image: linear-gradient(to bottom, #00a2d4, #0044cc);
                                border-left-color: #0044cc;
                                border-right-color: #00a2d4;
                                border-top-color: #00a2d4;
                                border-bottom-color: #004974;
                            }

                             

                            If you put on developer tools in your browser and go to DOM Explorer > expect element it will show you which part of the css file that's being referred to and you can experiment with colours.

                             

                            Current border colour :

                             

                            Experiment:

                            2 of 2 people found this helpful