Add company logo and change K2 login form descriptions

Add company logo and change K2 login form descriptions

In this article, I’m going to show you how to add company logo and change K2 login form descriptions when you are using the default K2 Claims Authentication. If you are wondering how to turn on Forms Authentication in K2, see this article.

What is the K2 login form?

When you turn on Forms Authentication on your K2 claims setup, you will get the following login form when you access K2 Designer or Runtime sites.

Default login form
Default login form

So what most companies would like to change here will be the logo on the top left of the form and the description below the “Sign In” header.

Where is this form located?

The Identity Service login form is located at C:\Program Files (x86)\K2 blackpearl\WebServices\Identity\Sts\Forms\Views\Account\LogIn.cshtml.

Add company logo and change K2 login form descriptions

Let’s go on into how to update the company logo and the descriptions on the login form.

Add company logo

  1. Add your logo file to C:\Program Files (x86)\K2 blackpearl\WebServices\Identity\Sts\Forms\Styles\. In this example, I’m going to use a random ninjalogo.png image file.
  2. Edit LogIn.cshtml indicated above and add the following line of codes to the header section.
  3. Save the file and check out the logo on your runtime site!

    New Company Logo
    New Company Logo

Note:

  • The default K2 logo is 122 x 25 pixels in size.
  • If you want to change the favicon, you just need to update the link tag in the header section.

Change Sign In description/information

  1. Edit LogIn.cshtml indicated above.
  2. Search for the following div tag:

  3. You will find the following section:

  4. When you look at the above div section, it’s pretty obvious that if you want to change the “lock” image, change the “SignInLockImage” div. The “Sign In” text is the “PageHeader” paragraph tag and the rest accordingly.
  5. In my example, I will be changing the “Sign In” header text and the body content. My section will look like this now.

    New Description
    New Description

Troubleshooting

  • Make sure you place your image file in the correct folder. If not, amend the background url file path to it.
  • When you are editing the description details, do not comment the resource variables (e.g. @Resource…) as it will still be evaluated and will cause an error.

 

Have fun!

 

 

 

 

 

Ji Kai

Ji Kai

Director / Principal Consultant at Alrighty Labs Pte. Ltd.
Ji Kai is the Director and Principal Consultant of Alrighty Labs Pte. Ltd. He has over 10 years of experience in solution designing, consulting and management of software development projects in both private and public sectors. His primary responsibility is to take lead in customer engagements and use his expertise in K2 technologies to assist customers to design successful business process applications. In addition, he has proven past records of leading the successful delivery of complex business process applications on K2 and Microsoft technologies.

Linkedin
Ji Kai

Leave a Reply