Clarity

Expand all | Collapse all

V13.2 Logon screen customization

  • 1.  V13.2 Logon screen customization

    Posted Mar 11, 2014 01:30 AM

    Hi,

    Planning to personalize the logon screen of our 13.2 clarity application. Any suggestions how to achieve this?

    I checked https://communities.ca.com/web/ca-clarity-global-user-community/message-board/-/message_boards/view_message/97992499 discussion but I didn’t come to know that it worked for all who had tried.

    Thanks,
    Shiva



  • 2.  RE: V13.2 Logon screen customization

    Posted Mar 11, 2014 10:08 AM

    Hi Shiva,

    I saw your post on the other thread: https://communities.ca.com/web/ca-clarity-global-user-community/message-board/-/message_boards/message/110837616

    While it may be possible to do it in versions prior to 13.3, it is fully supported in 13.3 (see we do listen to your feedback!).  I know you currently have 13.2 and I strongly advise that you upgrade because (1) it is a simple upgrade path (2) you can change the log-in and (3) it is a quality release.  You can find all the details in the Studio Guide for configuring the log-in page.

    But here is the gist:

    final product

    1. Login Page Top Message

    You can add a service announcement or custom message at the top of the login page.

    /* The login service message */

    #ppm_login_message_top span:before{

      content: "Custom UI Theme Message 1 at the top";

    }

     

    2. Login Page Bottom Message

    You can add a service announcement or custom message at the bottom of the login page.

    /* The login service message */

    #ppm_login_message_bottom span:before{

      content: "Custom UI Theme Message 2 at the bottom";

    }

    3. Login Page Logo

    Convert your custom logo image to a base64 encoded string and paste it into the following section:

    /* Clarity PPM Logo */

    #ppm_login_logo {

      background: url(data:image/filetype;base64, my_image_base64_string);  margin: 6px 0px 0px 15px;

      width: 150px;

      height: 50px;

    }

     

    The image filetype string is included in the base64 conversion result and represents the original image type. For example, gif, jpeg, or png. Copy and paste the base64 string over my_image_base64_string in the code. The string can be long (30,000 characters). To view it, scroll to the right. Also specify the width and height values for your image.

    Note: We recommend that you optimize your image before you convert it to the base64 string. An image optimization tool such as Smush.it can produce a smaller encoded string.

    To convert your image to a base64 encoded string, use an online conversion utility available at the following sites:

        http://webcodertools.com

        http://www.base64-image.de

    Note: You can adjust other properties under the /* Login page CSS styles */ section including fonts, colors, and sizes.



  • 3.  RE: V13.2 Logon screen customization

    Posted Mar 12, 2014 05:56 AM

    Thanks for the steps yes

    I tried to change the logon screen through UI theme CSS but what ever the code that I wrote is not reflecting. instead its loading login page code from calrity.main.css file clarity\webroot\ui\uitk\css directory.

    !important is also not working in CSS which overwrites the default login class code from calrity.main.css.

    Is 30,000 characters is the base64 image string limit? or will it work with like 70k or 80k?

     

    Thanks,

    Shiva

     



  • 4.  RE: V13.2 Logon screen customization

    Posted Mar 12, 2014 06:06 AM

    Presumably only certain things (those detailed by Gurjeet and Yang Lu) can be influenced within the application UI themes CSS section (and then only in v13.3).

    Before v13.3, yes you would need to find the relevant bits of the files in the filesystem files (as discussed in that other thread), but I don't really recommend that at all.
     



  • 5.  RE: V13.2 Logon screen customization

    Posted Mar 12, 2014 06:29 AM

    I Completely agree with Dave, this is only for Clarity V13.3.

    After spending more time on logon customization, found this below trick to create any number of lines and paragraphs. \000A is the break in the CSS exactly similar to <br> in HTML

    #ppm_login_message_top span:after{
      color: #fff;
      font-family: Arial,Helvetica,Verdana,sans-serif;
      font-size: 21px;
      font-weight: bold;
      padding-left: 16px;
        position:fixed;
       top:60px;
       left:5px;
       content: "Line 1 \000A Line 2 \000A Line3 \000A Line 4 \000A  Line 5 \000A  Line 6";
      white-space: pre;
      }

    I hope this helps.

    -Gurjeet

     

     



  • 6.  RE: V13.2 Logon screen customization

    Posted Mar 12, 2014 10:07 AM

    Would it be possible to get <a> tags into the content css tag?  I think Dave would use that to link out to a Help document (or HelpDesk).  I did my own research and it looks pretty much impossible.  I didn't even think about the conversion of the line breaks for multi-lines.



  • 7.  RE: V13.2 Logon screen customization

    Posted Mar 12, 2014 10:24 AM

    UI Themes files seems to be restricted files and it doesn't allow you to add any HTML tag. But tag \00A which i have used in the code is CSS tag which allows us to insert the break for multi lines.

    If you see the first screenshot in the thread started by Dave, we are looking for breaks in mutli lines to Post our Downtimes, Helpdesk number or any other information for the users.

    -Gurjeet

     



  • 8.  RE: V13.2 Logon screen customization

    Posted Mar 12, 2014 10:32 AM

    I think the only thing now lacking is being able to put a hyperlink in that message (and I could live without that to be honest) - what you have done above with the "respoistioning" and then the "line break" trick allows lots of text to be placed OK.

    yes
     



  • 9.  RE: V13.2 Logon screen customization

    Posted Mar 12, 2014 11:59 AM

    For Information

    The tag \000A doesn't work with IE8 , It works fine with IE10 and Firefox.

    -Gurjeet



  • 10.  RE: V13.2 Logon screen customization

    Posted Mar 18, 2014 05:04 AM

    Thanks for all the suggestionsyes

    SO it is not possible to have the hyperlink in the logon screen?



  • 11.  RE: V13.2 Logon screen customization
    Best Answer

    Posted May 07, 2014 06:47 AM
      |   view attached

    I upgraded the clarity to 13.3 and changed the login screen. I even added the link in the login page.

    Thanks,

    Shiva

     



  • 12.  RE: V13.2 Logon screen customization

    Posted May 07, 2014 07:03 AM
    shiva.s43:

    I even added the link in the login page.


    Can you say how you did that bit then?
     



  • 13.  RE: V13.2 Logon screen customization

    Posted May 15, 2014 05:19 AM
    shiva.s43:

    I upgraded the clarity to 13.3 and changed the login screen. I even added the link in the login page.

     


    Could you please share how you added the link? We really need that for our situation. 



  • 14.  RE: V13.2 Logon screen customization

    Posted May 21, 2014 04:20 AM

    Hi Shiva,

    Can you please let me know how you have impletemented the hyperlinks on standard clarity login page.

    Thanks in advance for your help.

    Regards

    Ravi



  • 15.  Re: V13.2 Logon screen customization

    Posted May 04, 2015 02:29 AM

    Sorry did you end up posting how you insert links on your login page?  I couldn't find your solution.



  • 16.  Re: V13.2 Logon screen customization

    Posted May 05, 2015 01:44 AM

    Sorry for late reply guys. Here is the step I used to add the link in logon screen.

     

    I updated the clarity_main.min.js file located under C:\clarity\webroot\ui\uif\js. I have attached my version of file and the logon screen. Please search for google.com in the attached clarity_main.min file to check the code I have placed to get link in logon screen.

     

    Thanks,

    Shiva

    Attachment(s)

    zip
    clarity_main.min.zip   64 KB 1 version


  • 17.  Re: V13.2 Logon screen customization

    Posted May 05, 2015 02:23 AM

    Will this work for v13.1?



  • 18.  Re: V13.2 Logon screen customization

    Posted May 06, 2015 02:32 AM

    I'm not sure on V13.1.



  • 19.  Re: V13.2 Logon screen customization

    Posted May 04, 2015 02:31 AM

    Is CSS the Clarity System Administrator equivalent to the old NSA???  If not, what is it?



  • 20.  Re: V13.2 Logon screen customization

    Posted May 04, 2015 03:29 AM

    Already answered here -

    v13 : Personalising the LOGON screen

    https://communities.ca.com/thread/97994720

     

    What is CSS?

    Cascading Style Sheets (CSS) is a style sheet language used for describing the look and formatting of a document written in a markup language.


    Is that Clarity Sys Admin equivalent to the NSA??

    No, that is CSA


    NJ



  • 21.  RE: V13.2 Logon screen customization

    Posted Mar 12, 2014 05:39 AM

    Hi All,

    Spent some time to customized logon Page for Clarity V13.3. Put the below code to customized UI Themes, save it and refresh the logon Page. 

    With this code you can add 4 separate line or Paragraphs anywhere on the logon Page . Change the colour, Font, Position etc according to your requirements

    #ppm_login_message_top span:before{
      color: #fff;
      font-family: Arial,Helvetica,Verdana,sans-serif;
      font-size: 21px;
      font-weight: bold;
      padding-left: 16px;
       position:fixed;
       top:30px;
       left:5px;
       content: "Custom UI Theme Message 1";
     }

    #ppm_login_message_top span:after{
      color: #fff;
      font-family: Arial,Helvetica,Verdana,sans-serif;
      font-size: 21px;
      font-weight: bold;
      padding-left: 16px;
        position:fixed;
       top:60px;
       left:5px;
       content: "Custom UI Theme Message 2";
      }

    #ppm_login_message_bottom span:before{
      color: #fff;
      font-family: Arial,Helvetica,Verdana,sans-serif;
      font-size: 21px;
      font-weight: bold;
      padding-left: 16px;
        position:fixed;
       top:90px;
       left:5px;
       content: "Custom UI Theme Message 3";
      }

    #ppm_login_message_bottom span:after{
      color: #fff;
      font-family: Arial,Helvetica,Verdana,sans-serif;
      font-size: 21px;
      font-weight: bold;
      padding-left: 16px;
        position:fixed;
       top:120px;
       left:5px;
       content: "Custom UI Theme Message 4";
     }

     

    I hope this helps upto some extent.

    -Gurjeet



  • 22.  Re: V13.2 Logon screen customization

    Posted May 05, 2015 01:38 AM

    I have cut and pasted your code to our UI theme but none of the 4 messages appear!  We're using 13.1 so I'm assuming (from earlier comments) and it doesn't work on this version but only 13.3 onwards?  Is that right or is it something wrong which I have done?  So frustrated - spent almost all day doing this!



  • 23.  Re: V13.2 Logon screen customization

    Posted May 05, 2015 02:50 AM

    I guess so, yes ... As per Gurjeet.S in one of the threads above, he states - "I Completely agree with Dave, this is only for Clarity V13.3...."

     

    NJ



  • 24.  Re: V13.2 Logon screen customization

    Posted May 05, 2015 08:03 PM

    Thank you.



  • 25.  Re: V13.2 Logon screen customization

    Posted May 06, 2015 02:46 AM

    You're welcome, Thao

     

    NJ



  • 26.  Re: V13.2 Logon screen customization

    Broadcom Employee
    Posted May 21, 2015 09:22 AM

    Right NJ. You would want to be on CA Clarity PPM 13.3 or jump to 14.2 now available. See also the latest product documentation at wiki.ca.com.